Onlook

What it is

Onlook is an open-source visual editor for code, built for designers and the developers they work with. The company describes it as a visual editor for designers working in a real React codebase: designers get an infinite canvas of the components their team already maintains and shape the product with AI as the editor. Its FAQ also calls it an open-source, visual editor for websites that lets teams create and style prototypes and websites without any coding knowledge. The line it repeats everywhere is that code is the source of truth, so what you build on the canvas is the real product rather than a mockup.

The About page describes a team based in San Francisco called "The Odyssey", lists 3 team members, and shows 25,800 stars on GitHub and 100 open-source contributors. The reader this suits is a design-minded builder who is comfortable with the idea of a codebase, or a team that already keeps one, more than a founder who wants a hosted site with no code behind it.

What you build and how

The canvas and the code. The features page describes a React visual editor: you edit React components directly in the browser, dragging, dropping and styling elements, while Onlook updates your actual code files in real time. The home page puts it as "native design tool features that work 1:1 with code" and "a true developer tool for designers, helping you code without knowing anything about code". The pricing page adds that you work in a component tree with precise control over every element. Because the files are real, a developer reviews the result as code.

The AI editor. The AI features page states that Onlook's AI reads your existing React codebase, including your components, your design tokens and your Storybook setup, and writes changes that "look like your team wrote them". The page insists these are real edits to real files, not generated boilerplate. On the canvas you select any element and choose to edit it yourself or work with the AI. The page's own demo prompt is "Design me an inventory tracker website for my Cafe", answered by a top navigation bar and a main content area in a file called Website.tsx. The FAQ says you can ask Onlook for anything from a quick mockup to a full-fledged website.

What people use it for. The company says Onlook is "great for creating websites, prototypes, user interfaces, and designs". It adds that while it is best suited to websites it can be used for anything visual, including presentations and mockups, and that because code is the source of truth the designs are "unconstrained by Onlook's interface". The pricing page's wording is "You can prototype, ideate, and create websites from scratch with Onlook".

Getting started. The FAQ says to sign up, create a project and follow the step-by-step guide to deploy your first application. The features page invites teams to join a waitlist.

Ownership and output. Under "Who owns the code that I write with Onlook?" the site answers that the code is all yours: you can export it to your local machine, publish it to GitHub or host it at a link. That is the escape hatch many no-code tools lack, and here it follows from the code-first design.

Open source and self-hosting. The home page says "Onlook can be self-hosted for free on GitHub", and the pricing page repeats that if you want to self-host you should look at the GitHub repository or reach out to schedule a call. The features page invites you to browse the repository to understand how Onlook works, contribute improvements or customize it for your team's needs. The FAQ gives the reasoning for open source: "Developers have historically been second-rate citizens in the design process," and the company says it wanted to make developers first-class citizens in it.

Collaboration. The FAQ describes creating and styling with code as the source of truth "and then collaborate as a team on the code". For teams, branching with full version history and shared design tokens keep that collaboration organized, as the plan section below sets out.

Plans, limits and team features

The pricing page says "Onlook is currently in closed beta" and offers a single hosted tier, For Teams, with "Custom pricing tailored to your team's needs" and a button to book a demo. Its answer to "Is there a free version of Onlook?" is that Onlook can be self-hosted for free on GitHub, while the hosted cloud version runs through the sales team or a demo, with the company working closely with each team to set up its internal design and code workflow. A separate answer on the AI features page says Onlook is free for your first prompt, then limited by the number of messages you can send. The FAQ says you upgrade from the billing section of your dashboard and that all major credit cards are accepted through Stripe.

The For Teams tier lists what a product team gets on top of the editor:

• Project Templates: save and reuse projects as templates across the team.
• Branching & Version Control: create and manage branches for projects with full version history.
• Theming & Branding: centralized design tokens, color palettes and typography management.
• Built like a design tool: navigate the React component tree with precise control over every element.
• Advanced Security: SSO (SAML/OAuth), advanced security controls, audit logs and admin controls.

The site footer lists what Onlook works with: Next.js, React, Vite, Storybook and shadcn/ui. That list is the practical boundary of the product, since the editor works on projects built with those tools. The company behind it is named in the footer as On Off, Inc.

The founders, according to the FAQ, "come from either side of the design and development divide", and they say AI could be the final leap in how designers and developers work together. The FAQ's explanation of the open-source choice is that it gives developers transparency over the tool and makes it as flexible as possible for the way each team sets up its work.

Who it suits and who it does not

Onlook suits a product team with a React codebase where designers want to change real components and ship the change, and a developer who wants visual edits to land as readable code. It also suits an open-source minded team that prefers to run its own copy, since self-hosting is free. A founder prototyping a first website can try the AI editor and keep the code.

The caveats follow from the design. Everything here is tied to React and a codebase, so someone who wants a hosted drag-and-drop site with a built-in database, forms and payments is looking for a different kind of tool. The hosted version is in closed beta with custom team pricing, so budgeting means a call or demo. Self-hosting is free but puts the running of it on your team. And while the company says no coding knowledge is needed, the product's real value comes from the code you will end up reading and owning.