Onlook

Onlook is a local-first editor for “visual engineers” who want to craft real web experiences using code as the source of truth. Instead of building in mockups that later need rebuilding, you design directly in your codebase so what you create stays aligned with what your team ships.

Its core workflow is an infinite canvas where every frame is a working page. You can prototype and iterate quickly, explore multiple directions, and merge the variations that work. Onlook also helps you visually work with a creative system—shaping tokens, components, and styles—so the rest of your team can build with what you’ve made.

Onlook is designed to fit existing development processes. You can use familiar hotkeys to move fast, and you can bring inspiration alongside your live work by dropping screenshots and moodboards. If you use AI, you can bring your existing Claude or ChatGPT subscription to guide the process.

Onlook is free and can be self-hosted for free on GitHub. For the hosted cloud version, you’ll need to contact the team or book a demo.

FAQ

Is Onlook free to use? Yes—Onlook is free and can be self-hosted for free on GitHub. For the hosted cloud version, you’ll need to contact the team or book a demo.

What can I design with Onlook? You can prototype, ideate, and create websites from scratch, designing web experiences directly in code.

How is Onlook different from other design tools? Onlook is a visual editor for code: it lets you create and style real implementations with code as the source of truth, using your existing design system.

Who owns the code I create in Onlook? You own the code you make. You can export it locally, publish it to GitHub, or host it at a link.

Will my work stay in sync with the product? Onlook is built to help you design in the real product rather than a copy, reducing drift between design and what ships.

Can I use my existing AI subscription inside Onlook? Yes. You can use your existing Claude or ChatGPT plan inside your workflow.

Is Onlook free to use?

Yes—Onlook is free and can be self-hosted for free on GitHub. For the hosted cloud version, you’ll need to contact the team or book a demo.

What kinds of things can I design with Onlook?

You can prototype, ideate, and create websites from scratch. It’s focused on designing web experiences using code as the source of truth.

How does Onlook work compared to typical design tools?

Onlook is a visual editor for code. You design directly in the real product instead of rebuilding from mockups later, using your existing design system.

Who owns the code I create with Onlook?

You do. You can export the code locally, publish it to GitHub, or host it at a link.

Does Onlook help keep design and shipping in sync?

Yes. Because you design in the real product (not a separate copy), your work is less likely to drift from what ships.

Can I use AI in Onlook with the subscription I already have?

Yes. You can bring your existing Claude or ChatGPT subscription to use AI as part of your workflow.