omi

Omi is a web framework from Tencent for building user interfaces using Web Components, which is a browser-native standard for creating reusable custom HTML elements. Instead of relying on a framework like React or Vue to manage your components, Omi components become actual custom HTML tags that browsers understand natively, meaning they can work alongside other frameworks or be used without any framework at all.

The framework supports writing components using JSX, which is a notation where you write what looks like HTML tags directly inside your JavaScript code. You can use either a class-based approach or simple functions to define components. Reactivity, meaning the ability for the screen to automatically update when data changes, is handled through a signal system: you create a signal around a value, and any component that reads that value will re-render when it changes.

Omi comes with a collection of companion packages that cover most common needs when building a web application: a router for single-page apps, a form library, icon sets, animation directives, and a Tailwind CSS starter template. There is also a component library called TDesign Web Components that provides pre-built UI pieces.

Setting up a new project is done through a command-line tool that generates a starter project with Vite as the build tool and TypeScript as the default language. Several starter templates are available depending on whether you want a single-page app, Tailwind integration, or a simpler setup.

The project is maintained by Tencent and is open source. Documentation, a live playground, and over 100 starter templates are hosted at a dedicated site.