Se você já abriu Figma, criou o componente perfeito, passou para um desenvolvedor e viu ele se transformar em algo completamente diferente no código — Onlook foi construído exatamente para essa frustração.
Onlook é um editor visual open-source com IA integrada que permite você projetar diretamente dentro da sua aplicação React em execução. Você clica em um elemento, arrasta, muda suas cores, adiciona uma nova div — e seus arquivos .tsx reais se atualizam em tempo real. Sem exports do Figma. Sem documentos de handoff. Sem conversas do tipo “você consegue mover o botão um pouco mais para a esquerda?”.
Com 25.1K estrelas no GitHub e em tendência agora, vale entender o que realmente faz.
Como funciona o Onlook
Onlook roda em qualquer projeto Next.js + TailwindCSS. Ao abrir seu projeto, levanta sua app dentro de um web container (usando o SDK do CodeSandbox + runtime Bun) e instrumenta o HTML renderizado com atributos especiais data-oid em tempo de build. Cada atributo mapeia um elemento DOM visível de volta para sua linha exata de código JSX fonte.
Quando você edita algo visualmente — arrasta um card, muda uma cor, redimensiona uma seção — Onlook usa o oid para localizar o JSX correto, o corrige e dispara um hot module reload. Você vê a mudança no canvas e na sua árvore de arquivos simultaneamente.
A camada de IA usa Morph Fast-Apply + OpenRouter para fazer streaming de edições de código via diff. Você pode descrever mudanças em linguagem natural:
“Make this hero section darker on hover”
E Onlook gera o diff de React + Tailwind, o aplica e mostra o resultado — sem você tocar uma única linha de código manualmente.
O que você pode fazer visualmente
- Arrastar e soltar elementos e reorganizá-los dentro de seus containers pai
- Desenhar novas divs diretamente no canvas
- Ajustar estilos Tailwind a partir da barra do editor (cores, espaçamento, tipografia)
- Extrair componentes — clique direito em qualquer elemento e Onlook cria um arquivo
.tsxreutilizável, substituindo o JSX inline pelo novo componente - Navegar na árvore de componentes através de um painel de camadas visual — sem mais buscas manuais no JSX
- Fazer rollback a qualquer momento — Onlook salva snapshots automáticos do projeto para que você possa experimentar com confiança
- Visualizar o código em paralelo com seu canvas visual
O chat com IA
Além da edição visual, Onlook tem um chat de IA que entende seus componentes React e seus padrões de Tailwind. Você pode pedir para construir do zero:
“Design me an inventory tracker website for my café”
A IA gera código que se encaixa na arquitetura existente do seu projeto — não boilerplate genérico que você depois precisa refatorar.
Self-hosted vs hospedado
Onlook é open source (Apache 2.0) e gratuito para self-hostear. Também há versão cloud hospedada — útil se você não quiser se preocupar com setup.
Um dado honesto: o plano gratuito limita você a 5 mensagens de IA. Não é muito para trabalho de design iterativo. Se você vai usar seriamente, o self-hosting é o caminho prático — embora mesmo assim, as features de IA continuem roteando por serviços cloud.
Para quem é?
Onlook ocupa um lugar interessante no meio. Não substitui Cursor nem Claude Code para lógica complexa, integrações de API ou trabalho de backend. Pense nela como a ferramenta que você abre quando a arquitetura já está no lugar e você precisa que a UI fique bem — rápido, visualmente, sem pular entre o browser e o editor de código.
É especialmente útil para:
- Designers que programam (ou querem fazer)
- Desenvolvedores frontend que pensam visualmente
- Equipes onde designers e desenvolvedores precisam colaborar diretamente no mesmo codebase
Em termos de posicionamento, Onlook compite com Figma Make, Bolt.new, Lovable, V0 e Webflow — mas com uma diferença-chave: você trabalha diretamente no seu projeto real, não em um sandbox. Seu processo de build existente fica intacto.
Como começar
# Opção 1: Use a app hospedada em onlook.com
# Opção 2: Self-host
git clone https://github.com/onlook-dev/onlook
# Ver docs.onlook.com/contributing/developers/running-locally
Uma vez rodando, você importa seu projeto Next.js + Tailwind existente ou começa do zero dentro do editor.
Onlook é uma daquelas ferramentas difíceis de explicar apenas com palavras — você precisa ver o mapeamento DOM-para-fonte em ação para entender por que a experiência é diferente. Se seu stack é React + Tailwind, vale 20 minutos.