Repolode
提交项目
Tencent

Tencent/omi

Omi 是一个 Web Components 框架，支持 JSX、Signal 响应式、路由和 Tailwind，用于构建可复用的自定义元素。

在 GitHub 查看官网
Star
13,276
Fork
1,256
未关闭 Issue
68
最近提交
15天前

这是什么？

Omi 是一个用于构建 Web Components 的框架，基于浏览器原生的自定义元素标准。组件通过 @tag('counter-demo') 这样的装饰器定义，并使用 JSX 渲染，可以直接用于原生 HTML，也可以在 Vue、React 等能使用自定义元素的环境中引用。

状态管理基于 Signal 响应式机制（reactive-signal 包），修改信号值时只更新依赖它的界面部分。核心包还提供函数组件、Suspense、指令，并支持用 Constructable Stylesheets 管理和共享样式。可选包包括路由（omi-router）、表单方案（omi-form）以及一套 UI 组件和图标库。

项目通过 omi-cli 提供脚手架，可以快速创建 TypeScript 或 JavaScript 的 Vite 项目，也可以生成包含路由、Signal、Suspense 和 Tailwind CSS 的单页应用模板。仓库同时包含若干启动模板和示例应用，如贪吃蛇游戏。

核心功能

  • 01通过 @tag 装饰器定义自定义元素，并使用 JSX 渲染。
  • 02基于 Signal 的响应式机制，只更新依赖变化值的界面。
  • 03核心框架内置函数组件、Suspense 和指令。
  • 04支持 Constructable Stylesheets 管理和共享组件样式。
  • 05提供路由、表单及 UI 组件等官方扩展包。
  • 06通过 omi-cli 快速生成基于 Vite 的 TypeScript 或 JavaScript 项目。

适用场景

  • 构建可在 Vue、React 或原生 HTML 中复用的 UI 组件。
  • 借助官方模板快速搭建包含路由、Signal 和 Tailwind CSS 的单页应用。
  • 使用 omi-form 包开发表单较多的界面。

快速上手

  1. 1

    使用 npm 安装 omi 包

    npm i omi
  2. 2

    创建一个 Omi + Vite + TS 项目

    npx omi-cli init my-app
  3. 3

    进入项目文件夹

    cd my-app
  4. 4

    启动开发服务器

    npm start

使用前须知

  • 仓库元数据未识别出许可证（NOASSERTION），但 README 标注为 MIT，使用前请先核对许可证文件。

标签

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

常见问题

omi 是什么？
Omi 是一个 Web Components 框架，支持 JSX、Signal 响应式、路由和 Tailwind，用于构建可复用的自定义元素。 Omi 是一个用于构建 Web Components 的框架，基于浏览器原生的自定义元素标准。组件通过 @tag('counter-demo') 这样的装饰器定义，并使用 JSX 渲染，可以直接用于原生 HTML，也可以在 Vue、React 等能使用自定义元素的环境中引用。
omi 可以免费使用吗？用的什么许可证？
omi 以 Other 许可证开源。用于商业产品前，请先确认许可证条款。
omi 还在维护吗？
活跃维护中。omi 最近一次提交是在 2026年10月10日。
omi 适合用来做什么？
构建可在 Vue、React 或原生 HTML 中复用的 UI 组件。 借助官方模板快速搭建包含路由、Signal 和 Tailwind CSS 的单页应用。 使用 omi-form 包开发表单较多的界面。
omi 怎么安装和运行？
使用 npm 安装 omi 包: npm i omi 创建一个 Omi + Vite + TS 项目: npx omi-cli init my-app 进入项目文件夹: cd my-app 启动开发服务器: npm start
在哪里获取 omi？
源代码和安装说明在 GitHub 上：https://github.com/Tencent/omi

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目