\n\n- 📶 **Signal**-driven reactive programming by [reactive-signal](https://github.com/Tencent/omi/tree/master/packages/reactive-signal)\n- 🧱 [TDesign Web Components](https://github.com/TDesignOteam/tdesign-web-components)\n- 💗 [100+ OMI Templates](https://omi.cdn-go.cn/templates/latest/) & [OMI Templates Source Code](https://github.com/Tencent/omi/tree/master/packages/omi-templates)\n- 🐲 [OMI Form](https://omi.cdn-go.cn/form/latest/docs/) & [OMI Form Playground](https://omi.cdn-go.cn/form/latest/play/) & [Lucide Omi Icons](https://github.com/omijs/lucide-omi)\n- ⚡ **Tiny** size, **Fast** performance\n- 🌐 Everything you need: **Web Components**, **JSX**, Function Components, Router, Suspense, Directive, Tailwindcss...\n- 💒 Harness **Constructable Stylesheets** to easily manage and share styles\n\n```tsx\nimport { render, signal, tag, Component, h } from 'omi'\n\nconst count = signal(0)\n\nfunction add() {\n count.value++\n}\n\nfunction sub() {\n count.value--\n}\n\n@tag('counter-demo')\nexport class CounterDemo extends Component {\n static css = 'span { color: red; }'\n\n render() {\n return (\n <>\n \n {count.value}\n \n \n )\n }\n}\n```\n\nUse this component:\n\n```tsx\nimport { h } from 'omi'\nimport './counter-demo'\n\nrender(, document.body)\n\n// or\nimport { CounterDemo, Other } from './counter-demo'\n// Prevent tree Shaking when importing other things\nrender(, document.body)\n\n// or\ndocument.body.appendChild(document.createElement('counter-demo'))\n```\n\n## Install\n\n```bash\nnpm i omi\n```\n\nTo quickly create an Omi + Vite + TS/JS project:\n\n```bash\n$ npx omi-cli init my-app # or create js project by: npx omi-cli init-js my-app\n$ cd my-app\n$ npm start # develop\n$ npm run build # release\n```\n\nTo quickly create an Omi + **Router** + **Signal** + **Suspense** + **Tailwindcss** + Vite + TS project:\n\n```bash\n$ npx omi-cli init-spa my-app\n$ cd my-app\n$ npm start # develop\n$ npm run build # release\n```\n\n### Packages\n\n- Core packages\n - [`omi`](https://github.com/Tencent/omi/tree/master/packages/omi) - Implementation of omi framework.\n - [`omi-form`](https://github.com/Tencent/omi/tree/master/packages/omi-form) - Powerful, simple and cross frameworks form solution.\n - [`lucide-omi`](https://github.com/omijs/lucide-omi) - Lucide icon collection for omi.\n - [`omiu`](https://github.com/Tencent/omi/tree/master/packages/omiu) - Hope to create the best web components. For example, the powerful [vchart](https://visactor.io/vchart) and [vtable](https://visactor.io/vtable)\n - [`omi-router`](https://github.com/Tencent/omi/tree/master/packages/omi-router) - Create SPA of omi framework.\n - [`omi-cli`](https://github.com/omijs/cli) - To quickly create an Omi + Vite + TS/JS project.\n- Starter kits (not published to npm)\n - [`omi-elements`](https://github.com/Tencent/omi/tree/master/packages/omi-elements) - Tailwind Element Omi UI KIT.\n - [`omi-starter-spa`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-spa) - A starter repo for building single page app using Omi + OmiRouter + Tailwindcss + TypeScript + Vite + Prettier.\n - [`omi-starter-ts`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-ts) - A starter repo for building web app or reusable components using Omi in TypeScript base on Vite.\n - [`omi-starter-tailwind`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-tailwind) - A starter repo for building web app or reusable components using Omi + Tailwindcss + TypeScript + Vite.\n - [`omi-starter-js`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-js) - A starter repo for building web app or reusable components using Omi in JavaScript base on Vite.\n - [`omi-vue`](https://github.com/Tencent/omi/tree/master/packages/omi-vue) - Vue SFC + Vite + OMI + OMI-WeUI.\n- Components\n - [`omi-weui`](https://github.com/Tencent/omi/tree/master/packages/omi-weui) - WeUI Components of omi.\n - [`omi-auto-animate`](https://github.com/Tencent/omi/tree/master/packages/omi-auto-animate) - Omi version of @formkit/auto-animate.\n - [`omi-suspense`](https://github.com/Tencent/omi/tree/master/packages/omi-suspense) - Handling asynchronous dependencies.\n- Directives\n - [`omi-transition`](https://github.com/Tencent/omi/tree/master/packages/omi-transition) - Applying animations when an component is entering and leaving the DOM.\n - [`omi-ripple`](https://github.com/Tencent/omi/tree/master/packages/omi-ripple) - A lightweight component for adding ripple effects to user interface elements.\n- Examples (not published to npm)\n - [`snake-game-2tier`](https://github.com/Tencent/omi/tree/master/packages/snake-game-2tier) - SNake Game with `Signal` class\n - [`snake-game-3tier`](https://github.com/Tencent/omi/tree/master/packages/snake-game-3tier) - SNake Game with reactivity functions\n - [`omi-tutorial`](https://github.com/omijs/tutorial) - Source code of omi tutorial.\n\n**If you want to help the project grow, start by simply sharing it with your peers!**\n\n- [Share via Dev.to]()\n- [Share via Twitter](https://twitter.com/intent/tweet?text=Web%20Components%20Framework%20%F0%9F%8E%89http%3A%2F%2Fomijs.org%2F%0A%0A%20Everything%20you%20need%3A%20Web%20Components%2C%20JSX%2C%20Router%2C%20Suspense%2C%20Directive%2C%20Tailwindcss...%20%0A%0A%20Tailwind%20Element%20Omi%20UI%20KIT%3E%20%F0%9F%92%AFhttps%3A%2F%2Fomi.cdn-go.cn%2Felements%2Flatest%2F)\n- [Share via Facebook](https://www.facebook.com/sharer/sharer.php?u=http%3A//omijs.org)\n- [Share via LinkedIn](http://www.linkedin.com/shareArticle?url=http%3A%2F%2Fomijs.org%2F)\n- [Share via Pinterest](https://www.pinterest.com/pin/create/button?url=http://omijs.org/&media=https://repository-images.githubusercontent.com/36606437/66abfcfb-096b-4c9d-a290-77165213e605&description=Omi-Web%20Componnets%20Framework)\n- [Share via Reddit](https://reddit.com/submit?url=http://omijs.org/&title=web%20components%20framework)\n- [Share via StumbleUpon](https://www.stumbleupon.com/submit?url=http://omijs.org/&title=web%20components%20framework)\n- [Share via Vkontakte](https://vk.com/share.php?url=http://omijs.org/)\n- [Share via Weibo](https://service.weibo.com/share/share.php?url=https://omijs.org/&title=web%20components%20framework)\n- [Share via Hackernews](https://news.ycombinator.com/submitlink?u=http://omijs.org/&t=web%20components%20framework)\n\nThank you!\n\n## Usage\n\n### TodoApp with reactivity functions\n\n> Data oriented programming\n\nIn data-oriented programming, the focus is on the data itself and the operations on the data, rather than the objects or data structures that hold the data. This programming paradigm emphasizes the change and flow of data, and how to respond to these changes. The TodoApp with reactivity functions is a good example of this, using the concepts of reactive programming, where the UI automatically updates to reflect changes in the data (i.e., the to-do list).\n\n```tsx\nimport { render, signal, computed, tag, Component, h } from 'omi'\n\nconst todos = signal([\n { text: 'Learn OMI', completed: true },\n { text: 'Learn Web Components', completed: false },\n { text: 'Learn JSX', completed: false },\n { text: 'Learn Signal', completed: false },\n])\n\nconst completedCount = computed(() => {\n return todos.value.filter((todo) => todo.completed).length\n})\n\nconst newItem = signal('')\n\nfunction addTodo() {\n // api a\n todos.value.push({ text: newItem.value, completed: false })\n todos.update() // Trigger UI auto update\n\n // api b, same as api a\n // todos.value = [...todos.value, { text: newItem.value, completed: false }]\n\n newItem.value = '' // Changing the value type can automatically update the UI\n}\n\nfunction removeTodo(index: number) {\n todos.value.splice(index, 1)\n todos.update() // Trigger UI auto update\n}\n\n@tag('todo-list')\nclass TodoList extends Component {\n onInput = (event: Event) => {\n const target = event.target as HTMLInputElement\n newItem.value = target.value\n }\n\n render() {\n return (\n <>\n \n \n
![\"omi\"](\"https://tencent.github.io/omi/assets/logo.svg\"){kind=logo}
![\"omi\"](\"https://omijs.github.io/home/assets/logo.svg\"){kind=logo}
![](\"https://raw.githubusercontent.com/Tencent/omi/master/assets/contributors.png\")
\n\n\n## License\n\nMIT © Tencent\n\n \n","readmeFilename":"README.md"}