Visual editing on an infinite canvas
Work on an infinite canvas while editing live React components, with the code base remaining the source of truth.
Onlook
Freemium
Onlook é um editor visual de código para designers e equipes de produto, com edição React ao vivo, alterações assistidas por IA e hospedagem própria.
O que é Onlook?
Onlook is a visual code editor for designers and product teams who want to work directly in a real codebase. It combines a canvas-based editing experience with code-first output, so the project’s code stays the source of truth while teams design, prototype, and iterate.
The site positions Onlook around live React components, an infinite canvas, and AI-assisted editing. It also emphasizes team use, real design systems such as Storybook, and open-source availability, with a hosted option available through the company’s sales flow.
O que Onlook pode fazer?
AI-assisted changes
Use chat to modify selected elements and generate code assistance directly in the editing workflow.
Team collaboration
Collaborate with teammates in real time and keep work aligned to the same underlying product code.
Design system alignment
Bring in your team’s real design system, including Storybook-based components, so new work matches existing patterns.
Branching and version control
Manage branches and version history so teams can organize work and review changes across projects.
Code ownership and export options
Export work locally, publish it to GitHub, or host it at a link, with open-source access for teams that want to customize the tool.
Casos de uso
“Website and prototype creation”
Create websites and prototypes directly in a real codebase when the design needs to reflect implementable product work instead of disconnected mockups.
“Component-level iteration”
Use the canvas and chat workflow to iterate on live React components while keeping implementation details visible as you work.
“Design-system-driven collaboration”
Bring a shared design system into the editor so teams can reuse established components and keep new work consistent with existing UI patterns.
“Team workflow and versioned editing”
Use branching, version history, and collaboration features to review changes with teammates and manage parallel work on the same project.
“Self-hosted and code-owned delivery”
Self-host the open-source product or export work to a local machine, GitHub, or a hosted link when you need ownership over the code.
Perguntas frequentes
What is Onlook?
Onlook is an open-source visual editor for websites. The source describes it as a way for teams to create and style prototypes and websites without needing coding knowledge, while still working from code as the source of truth.
What can I use Onlook for?
The source says you can use Onlook to create websites, prototypes, user interfaces, and other visual work such as presentations and mockups. It is positioned around designing directly in real codebases.
Is there a free version of Onlook?
Yes. Onlook can be self-hosted for free on GitHub. For the hosted cloud version, the site asks users to contact the team or book a demo.
How do I use Onlook?
Onlook says you can design on an infinite canvas, select individual elements, and use chat to modify them. The product emphasizes that the code remains the source of truth throughout the workflow.
What pricing options does Onlook offer?
The pricing page lists a free Starter tier for individuals and small teams, and a Teams option with custom pricing. It also says existing paid plan users can continue using Onlook.
Informações rápidas
- Category
- Visual code editor
- Primary users
- Designers, product teams, and developers
- Platform
- Web
- Source domain
- onlook.com
- Pricing
- Free self-hosted option; Teams uses custom pricing
- Workflow
- Infinite canvas, element selection, and chat-driven edits
Análise de tráfego de Onlook
Os dados de tráfego são apenas para referência.
- Visitas mensais
- 15,9 mil
- Classificação global
- #1.565.492
- Taxa de rejeição
- 37.1%
- Duração média da visita
- 00:56
- Páginas por visita
- 1.97
- Classificação do domínio
- 58
Tendências de tráfego
| mai. | 17983 |
|---|---|
| jun. | 11624 |
| jul. | 15893 |
Fontes de tráfego
As análises de tráfego ainda não estão disponíveis.
Principais regiões
- Desconhecido: 34.1%
- Desconhecido: 12.4%
- Desconhecido: 11.5%
- Desconhecido: 10.2%
- Desconhecido: 8.48%
- Desconhecido: 23.3%
Alternativas ao Onlook
Heym
heym.run
Heym é uma plataforma de automação de fluxos de trabalho de IA, com código-fonte disponível e hospedagem própria, para criar e executar fluxos agênticos com um editor visual. Ela ajuda equipes de automação, plataforma e IA a orquestrar agentes, RAG, aprovações e rastreamento de execução na infraestrutura que controlam.
HumanLayer
humanlayer.dev
HumanLayer é uma IDE de IA e plataforma de colaboração para engenheiros que trabalham em bases de código complexas. As equipes podem gerenciar sessões de agentes, artefatos e fluxos de revisão usando sua própria configuração de Claude, Codex ou IA baseada em chave de API.
BetterClaw
www.betterclaw.io
BetterClaw é uma ferramenta sem código para criar, implantar e gerenciar agentes de IA por meio de uma interface visual, com suporte a BYOK e controles de segurança integrados. Foi criada para equipes que querem executar fluxos de trabalho agendados entre ferramentas conectadas sem manter uma infraestrutura.
Haystack
haystackeditor.com
Haystack é uma ferramenta de revisão de código com tecnologia de IA para fluxos de trabalho de pull requests. Ajuda as equipes a classificar PRs, identificar alterações arriscadas e direcionar revisões com base em decisões registradas, responsáveis e contexto.
Tempo
tempolabs.ai
Tempo é um espaço de trabalho colaborativo code-first para equipes de produto. O serviço Agent+ combina agentes de IA e revisão humana para planejar, projetar e lançar recursos de frontend para equipes React e React Native.
HarnessRouter
harnessrouter.ai
HarnessRouter é uma camada de backend para agentes que permite às equipes integrar Codex, Claude Code e Hermes ao produto por meio de uma única API, na própria infraestrutura. Também oferece uma opção de nuvem gerenciada para equipes que preferem não operar o runtime dos agentes por conta própria.