Onlook — Design & Creative

What is Onlook?

Onlook is a visual editor for code, often described as 'Cursor for Designers.' It enables teams to design together directly in their real codebase, making the code the source of truth. Instead of working in a separate design tool, you can prototype, ideate, and create websites from scratch while editing the actual frontend code.

What problem does it solve?

Traditionally, design and development happen in silos—designers mock up in Figma, developers rebuild in code. Onlook bridges that divide by allowing both roles to work on the same file, eliminating handoff friction and ensuring the design system is always in sync with the implementation.

Who is it for?

It is best suited for product teams, especially those with React web apps, where designers and developers collaborate closely. If you want to iterate quickly on UI without leaving your codebase, or if you're a developer who wants to visual edit without writing every class, Onlook is for you. It's not for non-technical users who need a fully hosted design tool with no coding involved.

Real use cases

Teams use Onlook to fix responsive layout issues (like the masonry example in the demo), create and manage design tokens, theme an entire project, and even build new features from scratch. It's also used for prototyping and mockups, with the ability to export code to your local machine or publish to GitHub.

• Visual editing in real code — Directly manipulate your React component tree and styles, with changes reflected in your actual codebase.
• AI assistance — Use natural language prompts to modify UI, like fixing responsive breakpoints or adding new features.
• Project Templates — Save and reuse entire projects as templates across your team for consistent starting points.
• Branching & Version Control — Create and manage branches for your projects with full version history, integrated with Git.
• Theming & Branding — Centralize design tokens, color palettes, and typography management for consistent branding.
• Built like a design tool — Navigate your component tree with precise control over every element, just like in a design app.
• Advanced Security (for Teams) — SSO (SAML/OAuth), advanced security controls, audit logs, and admin controls for enterprise needs.

Onlook pricing: Free (self-hosted) | Custom for Teams. Billing model: Free.

For comparison: the median starting price in Design & Creative is $12/month, measured across 274 tools we track. See the full SaaS Pricing Index →

Free (Self-Hosted)

Onlook is open-source and can be self-hosted for free via GitHub. This gives you full control and is ideal for individuals or teams comfortable managing their own deployment.

For Teams

Custom pricing tailored to your team's needs. Includes Project Templates, Branching & Version Control, Theming & Branding, Advanced Security (SSO, audit logs), and more. Contact us for a demo.

Onlook is currently in closed beta—book a demo to get early access.

Find the right tool for you with our AI advisor →