Repolode
Tencent

Tencent/omi

Omi es un framework de Web Components con JSX, reactividad basada en signals, router y compatibilidad con Tailwind, pensado para crear elementos personalizados reutilizables.

Estrellas
13,276
Forks
1,256
Issues abiertos
68
Último commit
hace 15 días

¿Qué es?

Omi es un framework para crear Web Components, el estándar del navegador para los elementos personalizados. Los componentes se definen con un decorador como @tag('counter-demo') y se renderizan con JSX, por lo que pueden usarse en HTML sin más, Vue, React o cualquier otro entorno compatible con elementos personalizados.

El estado se gestiona con un sistema reactivo basado en signals (el paquete reactive-signal), donde cambiar el valor de una signal actualiza únicamente la interfaz que depende de ella. El paquete principal también incluye componentes de función, Suspense, directivas y Constructable Stylesheets para gestionar estilos. Los paquetes opcionales añaden un router, una solución para formularios (omi-form) y un conjunto de componentes de UI e iconos.

El proyecto ofrece scaffolding mediante omi-cli, con plantillas para TypeScript, JavaScript y una configuración SPA que incluye Router, Signal, Suspense y Tailwind CSS. El repositorio es un monorepo que también incluye kits de inicio y aplicaciones de ejemplo, como juegos de snake.

Funciones clave

  • 01Define elementos personalizados con un decorador @tag y los renderiza con JSX.
  • 02Reactividad basada en signals que actualiza únicamente la interfaz que depende de los valores modificados.
  • 03El framework principal incluye componentes de función, Suspense y directivas.
  • 04Constructable Stylesheets para gestionar y compartir estilos entre componentes.
  • 05Paquetes oficiales para router, formularios y componentes de UI.
  • 06omi-cli crea proyectos basados en Vite con TypeScript o JavaScript.

Casos de uso

  • Crear componentes de UI reutilizables que funcionen con Vue, React o HTML sin más.
  • Crear aplicaciones de una sola página con routing, signals y Tailwind CSS usando las plantillas incluidas.
  • Crear interfaces con muchos formularios mediante el paquete omi-form.

Inicio rápido

  1. 1

    Instala el paquete omi con npm

    npm i omi
  2. 2

    Crea un nuevo proyecto con Omi + Vite + TS

    npx omi-cli init my-app
  3. 3

    Entra en la carpeta del proyecto

    cd my-app
  4. 4

    Inicia el servidor de desarrollo

    npm start

Antes de usarlo

  • Los metadatos del repositorio indican que no hay una licencia reconocida (NOASSERTION), aunque el README señala que es MIT. Comprueba el archivo de licencia antes de usarlo.

Temas

Preguntas frecuentes

¿Qué es omi?
Omi es un framework de Web Components con JSX, reactividad basada en signals, router y compatibilidad con Tailwind, pensado para crear elementos personalizados reutilizables. Omi es un framework para crear Web Components, el estándar del navegador para los elementos personalizados. Los componentes se definen con un decorador como @tag('counter-demo') y se renderizan con JSX, por lo que pueden usarse en HTML sin más, Vue, React o cualquier otro entorno compatible con elementos personalizados.
¿omi es gratuito? ¿Qué licencia tiene?
omi es open source bajo la licencia Other. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿omi sigue mantenido?
Mantenimiento activo. El último commit de omi fue el 10 oct 2026.
¿Para qué puedo usar omi?
Crear componentes de UI reutilizables que funcionen con Vue, React o HTML sin más. Crear aplicaciones de una sola página con routing, signals y Tailwind CSS usando las plantillas incluidas. Crear interfaces con muchos formularios mediante el paquete omi-form.
¿Cómo se instala omi?
Instala el paquete omi con npm: npm i omi Crea un nuevo proyecto con Omi + Vite + TS: npx omi-cli init my-app Entra en la carpeta del proyecto: cd my-app Inicia el servidor de desarrollo: npm start
¿Dónde consigo omi?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Tencent/omi

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados