English | 简体中文
- 📶 Signal-driven reactive programming by reactive-signal
- 🧱 TDesign Web Components & OMI Playground
- 💗 100+ OMI Templates & OMI Templates Source Code
- 🐲 OMI Form & OMI Form Playground & Lucide Omi Icons
- ⚡ Tiny size, Fast performance
- 🌐 Everything you need: Web Components, JSX, Function Components, Router, Suspense, Directive, Tailwindcss...
- 💒 Harness Constructable Stylesheets to easily manage and share styles
import { render, signal, tag, Component, h } from 'omi'
const count = signal(0)
function add() {
count.value++
}
function sub() {
count.value--
}
@tag('counter-demo')
export class CounterDemo extends Component {
static css = 'span { color: red; }'
render() {
return (
<>
<button onClick={sub}>-</button>
<span>{count.value}</span>
<button onClick={add}>+</button>
</>
)
}
}Use this component:
import { h } from 'omi'
import './counter-demo'
render(<counter-demo />, document.body)
// or
import { CounterDemo, Other } from './counter-demo'
// Prevent tree Shaking when importing other things
render(<CounterDemo />, document.body)
// or
document.body.appendChild(document.createElement('counter-demo'))npm i omiTo quickly create an Omi + Vite + TS/JS project:
$ npx omi-cli init my-app # or create js project by: npx omi-cli init-js my-app
$ cd my-app
$ npm start # develop
$ npm run build # releaseTo quickly create an Omi + Router + Signal + Suspense + Tailwindcss + Vite + TS project:
$ npx omi-cli init-spa my-app
$ cd my-app
$ npm start # develop
$ npm run build # release- Core packages
omi- Implementation of omi framework.omi-form- Powerful, simple and cross frameworks form solution.lucide-omi- Lucide icon collection for omi.omiu- Hope to create the best web components. For example, the powerful vchart and vtableomi-router- Create SPA of omi framework.omi-cli- To quickly create an Omi + Vite + TS/JS project.