The Cursor for Designers • An Open-Source Visual Vibecoding Editor • Visually build, style, and edit your React App with AI - onlook-dev/onlook
Craft websites, prototypes, and designs with AI in Next.js + TailwindCSS. Make edits directly in the browser DOM with a visual editor. Design in realtime with code. An open-source alternative to Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow, etc.
We're actively looking for contributors to help make Onlook for Web an incredible prompt-to-build experience. Check the open issues for a full list of proposed features (and known issues), and join our Discord to collaborate with hundreds of other builders.
We're in early preview for Onlook Web. If you're looking for the downloadable desktop electron app, it's moved to Onlook Desktop.
Why are we moving to the web? Read about our decision: Migrating from Electron to Web
Available soon with a hosted app or run locally.
Onlook will run on any Next.js + TailwindCSS project, import your project through into Onlook or start from scratch within the editor.
Use the AI chat to create or edit a project you're working on. At any time, you can always right-click an element to open up the exact location of the element in code.
Draw-in new divs and re-arrange them within their parent containers by dragging-and-dropping.
Preview the code side-by-side with your site design.
Use Onlook's editor toolbar to adjust Tailwind styles, directly manipulate objects, and experiment with layouts.
For full documentation, visit docs.onlook.com
To see how to Contribute, visit Contributing to Onlook in our docs.
- When you create an app, we load the code into a web container
- The container runs and serves the code
- Our editor receives the preview link and displays it in an iFrame
- Our editor reads and indexes the code from the container
- We instrument the code in order to map elements to their place in code
- When the element is edited, we edit the element in our iFrame, then in code
- Our AI chat also has code access and tools to understand and edit the code
This architecture can theoretically scale to any language or framework that displays DOM elements declaratively (e.g. jsx/tsx/html). We are focused on making it work well with Next.js and TailwindCSS for now.
For a full walkthrough, check out our Architecture Docs.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also open issues.
See the CONTRIBUTING.md for instructions and code of conduct.
Distributed under the Apache 2.0 License. See LICENSE.md for more information.
Read the original article
Comments
This is awesome!
I’ve tried other visual AI dev tools like Bolt or Lovable, but I feel like the walled-garden approach they’ve taken is a bit limiting in terms of how I personally want to work. As someone who comes from design but is actively using Cursor and Windsurf, I’ve very much been missing that Webflow-like ability to just click, edit, and see things getting updated in real-time, while always knowing I can drop into the code for more complex stuff.
It looks like you’ve nailed this intersection. The fact that you’re taking what is basically a visual layer on top of the code, plus the inclusion of the in-browser code editor (and I assume terminal access for the sandbox eventually?), is a huge step in the right direction and feels like it could really cover some of that gap I want between design and dev.
I’m definitely keeping an eye on this, and when you’re able to allow import existing projects I'll be onboard.
Congrats on the launch!
By D_R_Farrell 2025-05-2919:13 Thanks so much!
It's been a challenge to find the right balance for this – on one hand you want to give people who know what code is an easy way to navigate their codebases and be more effective, and on the other hand you want to help people who have never coded before create something they really love.
The visual layer has a lot of polish left to do to be a perfect design tool experience, but we're getting there.
I think for most designers they don't love being limited by traditional web "structures" like flexbox, but that's also how things can get built and scale properly. AI is very good at generating flexbox styled websites but when a designer jumps-in to an AI generated website it's like picking up a complex project someone else has architected. If you know how websites work it isn't super intimidating, but if you don't then it can feel very overwhelming.
One of the main reasons we decided to not have layers and styles immediately visible on the left and right sides of the app was because people who have never jumped into a design tool mentioned they were overwhelmed with the UI. Moving these tools into a "secondary" interaction layer cleared up the interface but made it easy for pro-users to still find them.
I'm excited to keep refining this editor experience so when you're able to import projects you have all of the tools you'd expect from a visual editor for your codebase.
By hoakiet98 2025-05-2919:14 Thanks for the kind words! We definitely want to restore the ability to use Cursor/Windsurf through SSH as soon as possible.
There is terminal access on the right of the bottom bar. It just has 1 CLI connection right now, along with the long runner server but you can run commands through there or through the AI.
Just merged a PR for that should be live in a few mins https://github.com/onlook-dev/onlook/pull/1963
We have a chance to take back SaaS and make it all local.
This is great.
Next we need to win the foundation model game and steal it away from the hyperscalers.
Great job!
By dcreater 2025-06-036:47 But they are in the browser...?
https://m.youtube.com/watch?v=RjFBUkVfy1E
This should be your demo video on your home page instead of what you have. I didn't understand how you were different to a typical no-code tool until I saw the entire process of creating a react app, running it and actually changing stuff on the Onlook console.
By D_R_Farrell 2025-05-2919:20 Great feedback – we definitely should update our homepage content to have a more useful video that goes from 0 to 1 entirely.
Thanks for mentioning it!
By chakintosh 2025-06-0217:181 reply Ditto. I came here after watching the other video they have on their Docs and I ended the video with even more questions.
By hoakiet98 2025-06-0217:59 This is good feedback. I updated the Get Started video here. Thank you :)
By Aeolun 2025-06-036:09 Also, maybe changing more than just a single button? If I’m going to be impressed I need to see the hard things.
Very impressed! In the past when I've asked chatGPT for styling / design stuff, it makes technically correct CSS, but with terrible design sense. This made a functional color palette, appropriate decorators, and cohesive style -- great!
Few points:
- At first it generated a bunch of code and got a build error. But the "Fix error" button did indeed fix it.
- In Preview mode I can't scroll. Works fine in Design mode.
- I can't seem to actually see any element's code; all I have is a basic layout.tsx file
- Is there pricing information anywhere? I did not see any.
By hoakiet98 2025-06-0217:39 > In Preview mode, I can't scroll. Works fine in Design mode.
It's actually attempting to scroll the inner web page in Preview mode. Perhaps this is not a great/obvious form factor since we've had others be confused about this. I think showing a scroll bar in design mode or animate when overscrolled in Preview mode to show it's attempting to scroll could help.
> Is there pricing information anywhere? I did not see any.
There's no rate limit or pricing for the web beta at the moment but for the desktop app the pricing is shown in-app. We have a WIP pricing page that you can find in code but needs some work before we release it.
> I can't seem to actually see any element's code; all I have is a basic layout.tsx file
This seems wrong, I will take a look. The code should be highlighted in the editor when you click on an element. It's possible that it put all the code in layout.tsx but there should be a page.tsx in there.
