O Cursor para Designers – Um Editor de Código Visual e Open-Source

Crie websites, protótipos e designs com IA em Next.js + TailwindCSS. Faça edições diretamente no DOM do navegador com um editor visual. Projete em tempo real com código. Uma alternativa open-source ao Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow, etc.

🚧 🚧 🚧 Onlook para Web ainda está em desenvolvimento 🚧 🚧 🚧

Estamos buscando ativamente contribuidores para ajudar a tornar o Onlook para Web uma experiência incrível de construção por prompts. Confira a lista completa de funcionalidades propostas (e problemas conhecidos) nas issues abertas e junte-se ao nosso Discord para colaborar com centenas de outros desenvolvedores.

O que você pode fazer com o Onlook:

• Criar aplicativos Next.js em segundos
  • Começar a partir de texto ou imagem
  • Usar templates pré-construídos
  • Importar do Figma
  • Começar a partir de um repositório GitHub
• Editar seu aplicativo visualmente
  • Usar interface semelhante ao Figma
  • Visualizar seu aplicativo em tempo real
  • Gerenciar ativos de marca e tokens
  • Criar e navegar entre Páginas
  • Navegar por camadas – Anteriormente no Onlook Desktop
  • Detectar e usar Componentes – Anteriormente no Onlook Desktop
  • Gerenciar Imagens do projeto – Anteriormente no Onlook Desktop
• Ferramentas de Desenvolvimento
  • Editor de código em tempo real
  • Salvar e restaurar a partir de checkpoints
  • Executar comandos via CLI
  • Conectar-se ao marketplace de aplicativos
  • Editar código localmente – Anteriormente no Onlook Desktop
• Publicar seu aplicativo em segundos
  • Gerar links compartilháveis
  • Vincular seu domínio personalizado
• Colaborar com sua equipe
  • Edição em tempo real
  • Deixar comentários

Onlook para Desktop (também conhecido como Onlook Alpha)

Estamos em fase inicial de prévia para o Onlook Web. Se você está procurando o aplicativo desktop electron para download, ele foi movido para o Onlook Desktop.

Por que estamos migrando para a web? Leia sobre nossa decisão: Migrando do Electron para Web

Começando

Disponível em breve com um aplicativo hospedado ou executando localmente.

Uso

O Onlook funcionará em qualquer projeto Next.js + TailwindCSS. Importe seu projeto para o Onlook ou comece do zero dentro do editor.

Use o chat de IA para criar ou editar um projeto em que você está trabalhando. A qualquer momento, você pode clicar com o botão direito em um elemento para abrir a localização exata do elemento no código.

Desenhe novas divs e reorganize-as dentro de seus contêineres pai arrastando e soltando.

Visualize o código lado a lado com o design do seu site.

Use a barra de ferramentas do editor do Onlook para ajustar estilos Tailwind, manipular objetos diretamente e experimentar com layouts.

Documentação

Para a documentação completa, visite docs.onlook.com

Para ver como contribuir, visite Contribuindo para o Onlook em nossa documentação.

Como funciona

1. Quando você cria um aplicativo, carregamos o código em um contêiner web
2. O contêiner executa e serve o código
3. Nosso editor recebe o link de prévia e o exibe em um iFrame
4. Nosso editor lê e indexa o código do contêiner
5. Instrumentamos o código para mapear elementos para sua localização no código
6. Quando o elemento é editado, editamos o elemento no iFrame e depois no código
7. Nosso chat de IA também tem acesso ao código e ferramentas para entender e editar o código

Essa arquitetura pode, teoricamente, ser escalada para qualquer linguagem ou framework que exiba elementos DOM de forma declarativa (ex.: jsx/tsx/html). Estamos focados em fazê-lo funcionar bem com Next.js e TailwindCSS por enquanto.

Para um passo a passo completo, confira nossa Documentação de Arquitetura.

Nossa Stack Tecnológica

Front-end

• Next.js - Full stack
• TailwindCSS - Estilização
• tRPC - Interface do servidor

Banco de Dados

• Supabase - Autenticação, Banco de Dados, Armazenamento
• Drizzle - ORM

IA

• AI SDK - Cliente LLM
• Anthropic - Provedor de modelo LLM
• Morph Fast Apply - Provedor de modelo Fast Apply
• Relace - Provedor de modelo Fast Apply

Sandbox e hospedagem

• CodeSandboxSDK - Sandbox de desenvolvimento
• Freestyle - Hospedagem

Runtime

• Bun - Monorepo, runtime, bundler
• Docker - Gerenciamento de contêineres

Contribuindo

Se você tem uma sugestão que pode melhorar este projeto, por favor, faça um fork do repositório e crie um pull request. Você também pode abrir issues.

Veja o CONTRIBUTING.md para instruções e código de conduta.

Contribuidores

Contato

• Equipe: Discord - Twitter - LinkedIn - Email
• Projeto: https://github.com/onlook-dev/onlook
• Website: https://onlook.com

Licença

Distribuído sob a licença Apache 2.0. Veja LICENSE.md para mais informações.