Repolode
Enviar
Tencent

Tencent/omi

Omi é um framework de Web Components com JSX, reatividade baseada em signals, roteador e suporte a Tailwind, voltado à criação de elementos customizados reutilizáveis.

Ver no GitHubSite
Estrelas
13,276
Forks
1,256
Issues abertas
68
Último commit
há 15 dias

O que é?

Omi é um framework para criar Web Components, o padrão nativo do navegador para elementos customizados. Os componentes são definidos com um decorator como @tag('counter-demo') e renderizados com JSX, então podem ser usados em HTML puro, Vue, React ou qualquer outra configuração compatível com elementos customizados.

O estado é gerenciado por um sistema reativo baseado em signals (o pacote reactive-signal), em que alterar o valor de um signal atualiza apenas a interface que depende dele. O pacote principal também oferece componentes de função, Suspense, diretivas e Constructable Stylesheets para gerenciar estilos. Pacotes opcionais adicionam um roteador, uma solução para formulários (omi-form) e um conjunto de componentes de UI e ícones.

O projeto oferece scaffolding via CLI com o omi-cli, incluindo templates para TypeScript, JavaScript e uma configuração de SPA com Router, Signal, Suspense e Tailwind CSS. O repositório é um monorepo que também inclui kits iniciais e apps de exemplo, como jogos de snake.

Recursos principais

  • 01Define elementos customizados com o decorator @tag e os renderiza com JSX.
  • 02Reatividade baseada em signals que atualiza apenas a interface dependente dos valores alterados.
  • 03O framework principal inclui componentes de função, Suspense e diretivas.
  • 04Constructable Stylesheets para gerenciar e compartilhar estilos entre componentes.
  • 05Pacotes oficiais para roteamento, formulários e componentes de UI.
  • 06O omi-cli cria a estrutura inicial de projetos Vite com TypeScript ou JavaScript.

Casos de uso

  • Criar componentes de UI reutilizáveis e compatíveis com Vue, React ou HTML puro.
  • Criar SPAs com roteamento, signals e Tailwind CSS usando os templates fornecidos.
  • Criar interfaces com muitos formulários usando o pacote omi-form.

Início rápido

  1. 1

    Instale o pacote omi com npm

    npm i omi
  2. 2

    Crie um novo projeto com Omi + Vite + TS

    npx omi-cli init my-app
  3. 3

    Acesse a pasta do projeto

    cd my-app
  4. 4

    Inicie o servidor de desenvolvimento

    npm start

Antes de usar

  • Os metadados do repositório informam que não há uma licença reconhecida (NOASSERTION), embora o README indique MIT. Confira o arquivo de licença antes de usar.

Tópicos

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

Perguntas frequentes

O que é omi?
Omi é um framework de Web Components com JSX, reatividade baseada em signals, roteador e suporte a Tailwind, voltado à criação de elementos customizados reutilizáveis. Omi é um framework para criar Web Components, o padrão nativo do navegador para elementos customizados. Os componentes são definidos com um decorator como @tag('counter-demo') e renderizados com JSX, então podem ser usados em HTML puro, Vue, React ou qualquer outra configuração compatível com elementos customizados.
omi é gratuito? Qual é a licença?
omi é open source sob a licença Other. Confira os termos da licença antes de usá-lo em produtos comerciais.
omi ainda é mantido?
Manutenção ativa. O último commit de omi foi em 10 de out. de 2026.
Para que posso usar omi?
Criar componentes de UI reutilizáveis e compatíveis com Vue, React ou HTML puro. Criar SPAs com roteamento, signals e Tailwind CSS usando os templates fornecidos. Criar interfaces com muitos formulários usando o pacote omi-form.
Como instalar omi?
Instale o pacote omi com npm: npm i omi Crie um novo projeto com Omi + Vite + TS: npx omi-cli init my-app Acesse a pasta do projeto: cd my-app Inicie o servidor de desenvolvimento: npm start
Onde consigo omi?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/Tencent/omi

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados