Onlook
Onlook is an open-source visual editor that lets designers edit real React and Tailwind components on an infinite canvas, with AI writing the code. Self-hosting is free; the hosted cloud version is in closed beta.
What is Onlook?
Onlook is an open-source visual editor for teams that build their product in React. Instead of working in a separate design file, designers open their own repository and get an infinite canvas showing the components their engineers already maintain. Every change made on that canvas is written into the real source files, so what appears on screen is the product rather than a picture of it. The company sums this up as the Cursor for Designers.
The editor combines direct manipulation with AI. Elements can be dragged, resized, rearranged and restyled visually while Onlook generates the matching Tailwind classes. A chat panel sits alongside the canvas, so a change can also be described in natural language and applied to the components by the model. A layer panel exposes the React component tree for precise selection, a theming system centralises colour palettes, typography and design tokens, and an automatic version history with branching lets a team roll back an experiment. The tool reads the Storybook a team already keeps, works with shadcn/ui components, and exposes a read-write MCP across canvas, components, tokens and code.
It is deliberately narrow about its scope. Onlook expects an existing React project, on Next.js, Vite, Remix, Astro or Create React App, styled with Tailwind or plain CSS. The company states plainly that it is not a no-code website builder, not a prompt-to-prototype generator and not a parallel design surface that drifts from production. There is no proprietary file format either: a team that stops using Onlook keeps everything, because the code never left its repository.
The project is published by On Off, Inc., a three-person company founded in Cincinnati, Ohio, then remote between Cincinnati and New York, and now based in San Francisco after the Y Combinator Winter 2025 batch. The repository has drawn more than twenty-six thousand stars and around a hundred contributors. Two routes exist: self-host it for nothing from GitHub, or use the hosted cloud version, which at the time of this review is in closed beta behind a waitlist, with pricing quoted per team on request.
What it does
- Edit real React components visually in the browser, with every change written into the source files
- Describe a change in plain language and let the AI apply it to the actual codebase
- Import an existing React repository and start editing without refactoring anything
- Manage colour palettes, typography and design tokens from one central place
- Navigate the React component tree through a visual layer panel
- Roll back to any earlier snapshot from the automatic version history
- Publish the result and attach a custom domain
When to use Onlook / When not to
A quick filter to help you decide if Onlook is the right fit.
When to use Onlook
- Product designers and UI designers who own how a React product actually looks and feels
- Design engineers and design technologists working inside a design system their team maintains
- Frontend engineers who care about component architecture and the quality of generated code
- Startup founders and design leaders who want a small team to ship more without more headcount
- Freelance designers and agency principals delivering React sites for their clients
When not to use Onlook
- Teams whose product is not a React codebase, since Vue, Svelte, Angular and server-rendered stacks are out of scope
- Anyone looking for a no-code website builder, which the company explicitly states Onlook is not
- Users who want a prompt-to-prototype generator producing throwaway artefacts detached from a repository
- Buyers who need a published price today, as the hosted edition has none and access runs through a waitlist
- Organisations with strict GDPR procurement rules, since no framework, DPA or hosting location is documented
How to use Onlook
A typical end-to-end flow, from setup to results.
- Decide between the free self-hosted route and the hosted cloud version
- For the cloud version, join the waitlist on the site or book a demo with the team
- For self-hosting, take the onlook-dev/onlook repository and follow the self-hosting guide in the documentation
- Sign in at app.onlook.com, using Google or GitHub authentication
- Create a new project, or import an existing React codebase from your code host
- Open the infinite canvas and let Onlook load the components your team already maintains
- Select an element on the canvas to edit it directly, or drag and drop to rearrange the layout
- Use the AI chat to describe a change in plain language and watch it land in the code
- Set your palettes, typography and design tokens once so the whole project stays consistent
- Publish the project with a custom domain, or hand the work back to engineering through the repository
Pros & Cons
Pros
- Open source and free to self-host, from a repository that is publicly and visibly active
- No proprietary file format: the code stays in your repository and needs no export step
- Works on the real codebase, so the canvas cannot drift away from what actually ships
- The terms explicitly leave ownership of user data and generated code with the customer
- An AI training opt-out is written into the terms rather than left to goodwill
- Reuses the Storybook and shadcn/ui components a team already maintains
- Public documentation, an open Discord community and strong public traction
Cons
- The hosted version is in closed beta, with access through a waitlist or a sales demo
- No public price at all, team pricing being described only as tailored to each customer
- No GDPR mention anywhere, no Article 27 representative, no DPA and no subprocessor list
- Nothing published about data retention periods or about where customer data is hosted
- AI training on user data is the default, and the opt-out must be set before any data is supplied
- Requires an existing React project, which puts every other framework out of reach
- No public API, no mobile application, and a team of three people according to the site
Pricing & Plans
Onlook publishes no price. The open-source edition can be self-hosted at no cost from the public GitHub repository, and this is the only free route the site confirms. The hosted cloud version is in closed beta and is described as custom pricing tailored to each team, obtained by contacting the company or booking a demo. The Terms of Use state that fees are invoiced annually in advance in United States dollars and payable within thirty days, and the FAQ adds that payment is taken by card through Stripe. No free trial is advertised and no entry-level amount is published.
- free
- installed from the open-source GitHub repository
- access by waitlist or demo booking
- price not published
- custom pricing on request
- adding project templates
- branching and version control
- centralised theming and branding
- React component tree navigation
- and advanced security with SSO (SAML/OAuth)
- audit logs and admin controls
Data, GDPR & hosting
A consolidated view of how Onlook handles your data.
GDPR overview
There is no GDPR framework on this site. A search across every page collected, including the machine-readable files, returns not one occurrence of the GDPR, of a lawful basis, of a data protection officer or of an Article 27 representative. The privacy policy, effective 8 November 2024, details United States rights only: California Civil Code sections 1798.83 to 1798.84, and the Nevada statement that personal data is not sold. The Terms of Use place the agreement under the law of the State of New York. No data processing agreement is published or offered, no subprocessor list exists, and no hosting jurisdiction is named. This is silence rather than an explicit refusal of compliance, but for a European buyer it means the expected documents are simply absent.
Who owns the data?
Onlook's Terms of Use draw a clear line. Section 5(a) leaves all right, title and interest in uploaded User Data with the customer, intellectual property rights included. Section 3 keeps ownership of the Onlook service itself, its software, interfaces and documentation with the publisher, On Off, Inc. What the customer builds stays the customer's: the site states that code produced with Onlook can be exported locally, published to GitHub or hosted at a link, and that no proprietary file format is involved. Feedback is the one exception, since suggestions sent to Onlook may be used freely and with no accounting back to their author.
Reuse rights
Users may reuse everything they produce without asking permission: the code stays in their own repository, there is no proprietary format and no export step, and the site confirms the work remains theirs if they stop using the product. On the vendor's side, section 5(c) of the terms lets Onlook use and modify User Data to run and improve the service and, unless the customer opts out through the user settings before supplying that data, to develop and commercialise AI models, algorithms and tools, model training included. Section 5(d) allows platform telemetry to be exploited for any internal purpose, provided it excludes User Data and is never disclosed in an identifying way. The terms also ask users not to send personal, financial or health information beyond what registration requires.
Data retention & training
Hosting summary
Onlook publishes nothing about where customer data is hosted. Neither the privacy policy nor the Terms of Use names a country, a region or a cloud provider, and the policy refers only to unnamed hosting, technology and communication providers among its service providers. There is no trust or security page, the complete sitemap listing sixteen URLs and containing none, and no subprocessor list, so the hosting chain cannot be reconstructed from public documents. The only third party named anywhere is Stripe, Inc., for payment data. Teams that need to control this can sidestep the question entirely, since the open-source edition is self-hosted and puts the hosting jurisdiction back in the customer's hands. For the hosted cloud version, the information would have to be requested directly from the company. As a technical note carrying no contractual weight, the marketing domain itself resolves to an anycast address on Amazon infrastructure, which describes the website and not the place where customer projects are stored.
Things to keep in mind
Risks and trade-offs to weigh before adopting Onlook.
- Your work feeds the models by default: the terms allow AI training on user data unless you opt out in the settings before supplying anything, so set that switch on day one rather than after the first project.
- No retention period is published, so you cannot tell how long projects, prompts and account data stay on Onlook's servers, nor what becomes of them once access ends.
- Nothing on the site says where data is hosted, which leaves a team with residency obligations without an answer to give its own compliance function.
- The GDPR is never mentioned, so a European organisation would have to request a DPA, a subprocessor list and an Article 27 representative, none of which are published.
- A visual editor that writes code invites shipping changes nobody read: treat what Onlook produces like any other pull request and keep human review in the loop.
- Skill erosion is a real cost, as designers who only ever describe changes in natural language may stop learning the CSS and component patterns they need when the AI gets it wrong.
- Closed beta and a stated team of three mean roadmap, pricing and the service itself can change quickly, and the open-source repository is the only fallback if the hosted product moves away from you.
Setup & Integrations
Technical difficulty
Two very different levels. The hosted version is meant to require no coding: create an account, start a project, and follow the step-by-step guide, the site claiming it helps you code without knowing anything about code. Importing an existing repository is a matter of connecting your code host. Self-hosting is another matter, running from the GitHub repository and its dedicated guide, and expecting developer skills. In both cases the prerequisite is real: a React project on Next.js, Vite, Remix, Astro or Create React App, styled with Tailwind or plain CSS.
Deployment
Integrations
Supported languages
Behind Onlook
Fundraising
Social
Resources
All the official URLs gathered for verification and reference.
Alternatives
Tools that compete with or complement Onlook.
Frequently asked questions
What is Onlook?
Is Onlook free?
Which frameworks and tools does Onlook work with?
Who owns the code I create with Onlook?
Will my data be used to train AI models?
Does Onlook address the GDPR?
Is there an API or a mobile app?
How do I get access, and where do I get help?
Should you pick Onlook?
Onlook occupies a genuinely useful position. It lets designers work on the product itself rather than a picture of it, and it does so without asking a team to adopt a new file format or maintain a parallel design system. For an organisation that already keeps a React codebase and a Storybook, that removes a real amount of translation work between design and engineering. The open-source route matters too: self-hosting costs nothing, the repository is publicly active, and a team that outgrows the product still owns everything it built.
Two reservations deserve weight before committing. The first is commercial. The hosted version is in closed beta, no price is published, and access runs through a waitlist or a sales conversation. That is workable for a team happy to talk to the vendor, and a poor fit for anyone who needs to compare costs today.
The second is documentary. The privacy policy and terms date from November 2024 and are thin for a product that touches a company's source code. The GDPR is never mentioned, there is no data processing agreement, no subprocessor list, no stated retention period and no hosting jurisdiction. The terms also permit training AI models on customer data unless the opt-out is set in the settings before any data is supplied, which is an option worth exercising on the first day rather than the second.
None of this contradicts the substance of the tool, which is real and visible. It does mean a procurement review will have to obtain in writing what the site does not publish, and that teams with strict data governance may prefer the self-hosted edition, where the hosting question answers itself.
- Choosing a selection results in a full page refresh.
- Opens in a new window.