onlook-dev/Onlook
The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI
Onlook is an open-source, AI-first design tool, often called the Cursor for designers, that lets you visually build, style, and edit a real React app. You edit a live Next.js app on a canvas like Figma, and Onlook writes the underlying React and Tailwind code for you.
Our Review
Onlook has gathered 25,000 GitHub stars and a real vibe-coding following because it solves a long-standing handoff problem: designers tweak a live app visually while the changes land directly in the developer's actual codebase, with no redlines or rebuilds in between.
What Onlook does:
- •Visual editing on a real app move, resize, and restyle elements on a canvas, with changes applied to your live React app.
- •Design-to-code every visual edit writes clean React and Tailwind CSS into your actual codebase, not a throwaway export.
- •AI-first building describe a change or a new component in natural language and Onlook generates and places the code.
- •Works on your Next.js project point it at a real Next.js and Tailwind app, including ones backed by Supabase and Drizzle.
- •Figma-like canvas a familiar design surface for people who think visually, on top of real code.
- •Open source and local run it on your own machine against your own repository.
Getting started:
Install Onlook from onlook.com or build from the repo, point it at a Next.js and Tailwind project, and start editing on the canvas. AI edits and code generation happen in place. Docs are linked from onlook.com.
Limitations:
Onlook is focused on React, Next.js, and Tailwind, so it does not help with other frameworks or stacks. It is a young, fast-moving project, so expect rough edges and changing features. Best results assume a reasonably standard project structure; very custom setups can confuse the visual editor. It is a building tool, not a hosting or backend platform, so you still deploy the app yourself.
Our Verdict
Onlook is one of the most interesting open-source tools of 2026 for closing the designer-developer gap. If you build with React, Next.js, and Tailwind and want to edit a real app visually instead of guessing in a separate design file, Onlook is a genuinely new approach, with 25,000 stars behind it.
For vibe builders, Onlook is the rare tool that feels like design but produces real code: drag and restyle on a canvas, ask AI for changes in plain language, and end up with a working React app you own, not a locked export.
For developers, the appeal is that visual edits land as clean React and Tailwind in your actual codebase, so a designer's changes show up as reviewable code in your Next.js project rather than a spec to reimplement.
Skip Onlook if your stack is not React and Tailwind, or if you want a no-code app that includes hosting and a backend; a full builder like Lovable handles more of the stack. If you only need code completion, an assistant like Cursor fits better.
Frequently Asked Questions
What is Onlook?
Onlook is an open-source, AI-first design tool, sometimes called the Cursor for designers. It lets you visually build, style, and edit a real React application on a Figma-like canvas, and every change is written back as React and Tailwind code in your own Next.js codebase. It is built to close the gap between design and code.
Is Onlook free and open source?
Yes. Onlook is released under the Apache-2.0 license and is free and open source as of 2026. You can run it on your own machine against your own repository at no cost. Onlook also develops hosted and managed offerings, but the core editor is open source and self-runnable.
What frameworks does Onlook support?
Onlook is focused on the modern React stack as of 2026: it works with React, Next.js, and Tailwind CSS, and supports projects that use Supabase and Drizzle. Because it edits your real code, it expects a standard project structure. It does not target other frameworks like Vue or Svelte, so it is best for teams already on React.
How is Onlook different from Figma?
Figma is a design tool that produces mockups you then hand to developers to rebuild. Onlook edits a real, running React app, so your visual changes become actual code instead of a static design. Choose Figma for early visual exploration and design systems; choose Onlook when you want to edit the live app and ship the code directly.
Who is Onlook for?
Onlook is for designers who want to work directly in a real product and for developers who want design changes to arrive as clean code. As of 2026, it suits teams building with React, Next.js, and Tailwind who are tired of the redline-and-reimplement handoff. Non-coders can make visual edits; engineers review and extend the generated code.
How do I install Onlook?
Visit the GitHub repository at https://github.com/onlook-dev/onlook for installation instructions.
What license does Onlook use?
Onlook uses the Apache-2.0 license.
What are alternatives to Onlook?
Explore related tools and alternatives on My AI Guide.
Open source & community-verified
Apache-2.0 licensed: free to use in any project, no strings attached. 25,871 developers have starred this, meaning the community has reviewed and trusted it.
Reviewed by My AI Guide for relevance, quality, and active maintenance before listing.
Topics