- Um editor visual de vibe coding open source para criar sites, protótipos e designs na web junto com código em tempo real
- Baseado em Next.js + TailwindCSS, permite pré-visualização em tempo real no navegador e edição direta do DOM
- Tem como objetivo ser uma alternativa open source a serviços comerciais como Bolt, Lovable, V0, Replit Agent, Figma Make e Webflow
Principais recursos
- Geração instantânea de apps Next.js a partir de texto/imagens — suporte a importação do Figma, templates e mais está planejado
- Criação de páginas com uma UI semelhante ao Figma, gerenciamento de assets e tokens, e pré-visualização em tempo real
- Editor de código em tempo real, salvamento e restauração de checkpoints, execução de comandos via CLI e integração com marketplace
- Suporte a manipulação visual como arrastar e soltar, edição de estilos Tailwind e experimentação de layouts
- Suporte planejado para edição em tempo real / comentários / links de compartilhamento / domínio personalizado
- Embora seja baseado na web, também pode ser integrado ao app desktop (Onlook Desktop)
Arquitetura e funcionamento
- Ao gerar um app, o código é carregado em um web container para execução
- O link de pré-visualização é exibido no editor como iFrame, fazendo o mapeamento entre código e UI
- Um chatbot de IA oferece suporte para acesso e edição do código, podendo entender e modificar o código diretamente
- Pode ser estendido para vários frameworks que usam DOM declarativo, como JSX/TSX/HTML
Stack tecnológica usada
- Front-end: Next.js, TailwindCSS, tRPC
- Banco de dados/armazenamento: Supabase, Drizzle
- IA: AI SDK, Anthropic, Morph Fast Apply, Relace
- Sandbox/hospedagem: CodeSandboxSDK, Freestyle
- Runtime/bundler: Bun, Docker
Outras informações
- Licença Apache 2.0
- O app web será lançado em breve, e o app desktop também será oferecido separadamente
- Consulte a documentação oficial para a documentação completa e como participar do desenvolvimento
2 comentários
Onlook - ferramenta open source de criação de apps personalizados com Webflow
Isso foi publicado com um título assim há cerca de um ano, mas realmente naming é importante. OOO para XXX é mais fácil de entender.