Repolode
Enviar
onlook-dev

onlook-dev/onlook

Editor visual open source para criar e editar código Next.js + Tailwind CSS direto no navegador, com assistência de IA.

Alternativa open source a:FigmaWebflowLovable

Ver no GitHubSite
Estrelas
26,962
Forks
2,792
Issues abertas
382
Último commit
há 2 meses

O que é?

Onlook é um editor visual de código para criar sites e interfaces com Next.js e TailwindCSS. Em vez de editar tudo apenas em um editor de código, você seleciona e altera elementos na prévia ao vivo do app, e essas mudanças são aplicadas ao código-fonte. Um chat com IA também pode criar ou modificar o projeto.

O editor carrega seu projeto em um web container, exibe a prévia em execução em um iframe e indexa o código para associar cada elemento à sua localização no código-fonte. Ao clicar com o botão direito em um elemento, você vai direto à linha correspondente no código, e uma visualização lado a lado do código permanece sincronizada com o design. É possível desenhar e reorganizar divs, ajustar estilos Tailwind em uma barra de ferramentas, salvar checkpoints e publicar links compartilháveis.

Atualmente, o projeto oferece suporte apenas a Next.js e Tailwind; o suporte a outros frameworks está listado como planejado. O README também informa que a equipe está desenvolvendo um produto hospedado para designers AI-native, disponível por meio de uma lista de espera.

Recursos principais

  • 01Edite elementos diretamente na prévia ao vivo do navegador, com as mudanças aplicadas ao código.
  • 02Clique com o botão direito em um elemento para ir direto à sua localização no código-fonte.
  • 03Use um chat com IA para criar ou editar o projeto.
  • 04Ajuste estilos e layouts do Tailwind em uma barra de ferramentas visual.
  • 05Salve e restaure checkpoints e gere links de implantação compartilháveis.

Casos de uso

  • Prototipar landing pages ou sites de marketing em um projeto com Next.js e Tailwind.
  • Permitir que designers façam ajustes visuais que se tornam código real, pronto para revisão.
  • Explorar variações de layout com IA antes de aplicar as mudanças.

Início rápido

  1. 1

    Use o app hospedado em onlook.com

  2. 2

    Ou consulte o guia para execução local na documentação

Antes de usar

  • Oferece suporte apenas a projetos Next.js e Tailwind CSS; outros frameworks ainda não são compatíveis.
  • O produto hospedado está em acesso antecipado e depende de uma lista de espera.
  • As instruções para execução local estão documentadas separadamente no site da documentação, e não no README.

Tópicos

#visual-editor#design-to-code#nextjs#tailwindcss#react#ai#typescript#claude-code#codex#cursor

Perguntas frequentes

O que é onlook?
Editor visual open source para criar e editar código Next.js + Tailwind CSS direto no navegador, com assistência de IA. Onlook é um editor visual de código para criar sites e interfaces com Next.js e TailwindCSS. Em vez de editar tudo apenas em um editor de código, você seleciona e altera elementos na prévia ao vivo do app, e essas mudanças são aplicadas ao código-fonte. Um chat com IA também pode criar ou modificar o projeto.
onlook é gratuito? Qual é a licença?
onlook é open source sob a licença Apache-2.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
onlook ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de onlook foi em 25 de ago. de 2026.
Para que posso usar onlook?
Prototipar landing pages ou sites de marketing em um projeto com Next.js e Tailwind. Permitir que designers façam ajustes visuais que se tornam código real, pronto para revisão. Explorar variações de layout com IA antes de aplicar as mudanças.
Como instalar onlook?
Use o app hospedado em onlook.com Ou consulte o guia para execução local na documentação
Onde consigo onlook?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/onlook-dev/onlook

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

Projetos relacionados