Repolode
Submit
Tencent

Tencent/omi

Omi is a Web Components framework with JSX, signal-based reactivity, a router and Tailwind support, aimed at building reusable custom elements.

View on GitHubWebsite
Stars
13,276
Forks
1,256
Open issues
68
Last commit
15 days ago

What is it?

Omi is a framework for building Web Components, the browser-native custom elements standard. Components are defined with a decorator like @tag('counter-demo') and rendered with JSX, so they can be used in plain HTML, Vue, React, or any other setup that works with custom elements.

State is handled by a signal-based reactive system (the reactive-signal package), where changing a signal's value updates only the UI that depends on it. The core package also provides function components, Suspense, directives, and Constructable Stylesheets for managing styles. Optional packages add a router, form solution (omi-form), and a set of UI components and icons.

The project offers CLI scaffolding through omi-cli, with templates for TypeScript, JavaScript, and a SPA setup that includes Router, Signal, Suspense and Tailwind CSS. The repository is a monorepo that also includes starter kits and example apps such as snake games.

Key features

  • 01Defines custom elements with a @tag decorator and renders them with JSX.
  • 02Signal-based reactivity that updates only the UI depending on changed values.
  • 03Function components, Suspense, and directives are included in the core framework.
  • 04Constructable Stylesheets for managing and sharing component styles.
  • 05Official packages for router, forms, and UI components.
  • 06omi-cli scaffolds Vite-based TypeScript or JavaScript projects.

Use cases

  • Building reusable UI components that work across Vue, React, or plain HTML.
  • Creating single page apps with routing, signals, and Tailwind CSS using the provided templates.
  • Building form-heavy interfaces with the omi-form package.

Quick start

  1. 1

    Install the omi package with npm

    npm i omi
  2. 2

    Create a new Omi + Vite + TS project

    npx omi-cli init my-app
  3. 3

    Enter the project folder

    cd my-app
  4. 4

    Start the development server

    npm start

Things to know

  • The repository metadata reports no recognized license (NOASSERTION), though the README states MIT, so check the license file before use.

Topics

#web-components#jsx#signals#reactive#typescript#custom-elements#frontend-framework#components#css#html

FAQ

What is omi?
Omi is a Web Components framework with JSX, signal-based reactivity, a router and Tailwind support, aimed at building reusable custom elements. Omi is a framework for building Web Components, the browser-native custom elements standard. Components are defined with a decorator like @tag('counter-demo') and rendered with JSX, so they can be used in plain HTML, Vue, React, or any other setup that works with custom elements.
Is omi free to use? What license does it have?
omi is open source under the Other license. Check the license terms before using it in commercial products.
Is omi still maintained?
Actively maintained. The last commit to omi was on Oct 10, 2026.
What can I use omi for?
Building reusable UI components that work across Vue, React, or plain HTML. Creating single page apps with routing, signals, and Tailwind CSS using the provided templates. Building form-heavy interfaces with the omi-form package.
How do I install omi?
Install the omi package with npm: npm i omi Create a new Omi + Vite + TS project: npx omi-cli init my-app Enter the project folder: cd my-app Start the development server: npm start
Where can I get omi?
The source code and installation instructions are on GitHub: https://github.com/Tencent/omi

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects