Skip to the shop floor
Sign in Open your shop
Onlook logo

Design tools

Onlook

A free, local-first visual editor for designers to craft code in real React codebases

0 votes. Log in so you can vote for Onlook Follow what's new. Log in so you can follow Onlook

Onlook is a visual code editor that lets designers work directly in real React codebases, editing live components on an infinite canvas with AI assistance and

About this launch

Screenshot of the Onlook homepage
onlook.com, as visitors see it

Onlook is a visual code editor designed for designers working in real React codebases. It provides an infinite canvas where designers can edit live React components while the code remains the source of truth, eliminating the gap between design mockups and implemented code. The tool integrates AI to assist with UI design and styling, supports Tailwind CSS visual editing, and works with existing design systems and Storybook components. Onlook is open-source, free to self-host from GitHub, and available as a hosted cloud version for teams.

What it does

  • Real-time visual editing of React components
  • Infinite canvas design interface
  • Real-time collaboration on code
  • Works with existing React projects and Storybook

Pricing

Pricing model: Freemium

Free self-hosted version available on GitHub. For Teams: Custom pricing tailored to your team's needs. Contact us or book a demo.

Shopper questions

What is Onlook?

Onlook is a visual editor for designers working in real React codebases. It provides an infinite canvas where designers can edit live React components with AI assistance, with the code serving as the source of truth so the canvas reflects the actual product.

Is there a free version of Onlook?

Yes, Onlook can be self-hosted for free on GitHub. For the hosted cloud version, teams should contact the company or book a demo for custom pricing tailored to their needs.

What can I use Onlook to create?

Onlook is great for creating websites, prototypes, user interfaces, and designs. It can be used for anything visual including presentations and mockups.

How does Onlook differ from other design tools?

Onlook is a visual editor for code with code as the source of truth, allowing teams to design and collaborate directly on real code. Unlike design tools that create mockups, Onlook's designs are the actual product, constrained only by React and your codebase architecture.

Why was Onlook created?

Onlook was founded to close the gap between design and development. Designers get AI leverage comparable to engineers, allowing them to work directly in codebases instead of creating mockups that drift during implementation.

More on this profile

Onlook has a free listing. The owner can unlock the full profile with a paid launch for $5:

  • Founder story (locked)
  • Milestones (locked)
  • Demo video (locked)
  • Dofollow website link (locked)

Shoppers also viewed

Support