Show HN: Onlook – Open-source, visual-first Cursor for designers
112 comments
·May 29, 2025itsNintu
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!
D_R_Farrell
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.
hoakiet98
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
fakedang
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.
chakintosh
Ditto. I came here after watching the other video they have on their Docs and I ended the video with even more questions.
hoakiet98
This is good feedback. I updated the Get Started video here. Thank you :)
D_R_Farrell
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!
Aeolun
Also, maybe changing more than just a single button? If I’m going to be impressed I need to see the hard things.
mNovak
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.
hoakiet98
> 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.
D_R_Farrell
Hey HN! I'm Daniel, the other half of Onlook.
I'm super fired up about this new version of Onlook for two reasons:
1) It makes it so much easier to jump in and start designing and
2) We have a much more intuitive, simplified toolbar control for styles that makes it even easier to craft your designs.
This has been the third major version of Onlook, and each time has felt like a leap towards solving the gap between design and development. Our first product was a Chrome Extension, the second was a downloadable desktop app (Onlook Studio), and now we're releasing Onlook for Web.
For all of the designers and non-technical people that just need a way to share their ideas with their engineering colleagues, the beta of this web version is a great start. But our goal continues be to truly solve the gap, so we'll be adding tons of great features that will let you go beyond ideation to actual implementation on real codebases.
Some known bugs:
– Sometimes generations don't "apply" after they're loaded: Kiet is working on a fix for this, but try clicking on the blank-template and re-prompting your change.
- It can take a long time to load the AI chat: We're working on making this faster (or at least a little more entertaining).
- Sometimes nothing shows up in the chat: Try going back to the homepage and re-prompting. This is something we want to make smoother.
– Sometimes styles don't apply: Let us know! We're trying to catch the edge cases.
Thank you all for your help and patience as we work through this early preview. Please join us on our Discord [https://discord.gg/ZZzadNQtns] and report any bugs or issues on GitHub repo: https://github.com/onlook-dev/onlook
rubenvanwyk
Congrats with the launch! I think you’re tackling a core problem space - many people seem to go to v0 and just copy, paste from there. The drag and drop is really great. Curious - why did you go with Electron instead of Tauri? I imagine that would’ve significantly decreased your bundle size. Congrats again!
hoakiet98
We considered Tauri but went with Electron because we needed the "frame" (the part inside the user window) to behave consistently across OS. This is not something that Tauri guarantees, so we went with Electron for Chromium instead. I
n hindsight, it still would not have helped with the other desktop app based issue like friction of setting up so I think we made the right call.
A large percentage of the bundle comes with shipping Bun as a fallback runtime for users who didn't have node installed. This could've been done better as well but it would still be 300MB+ bundle size.
pylotlight
Does wails not achieve this using webview2? Go is surely better than electron here..
dennisy
This is great! Exactly the sort of tool, I have been waiting for!
One question is why the coupling to Next/React? I feel a design tool should not be coupled to a web framework at all.
hoakiet98
It's more to keep scope small until we feel confident about the experience.
Theoretically, we can scale to other declarative frameworks, but we'd have to implement a parser for each. We're sticking with React/Next for now since that is the majority of use cases with plans of supporting other frameworks when the experience feels good enough.
There's a comment under about Svelte support as well (which is what the initial prototype supported) and I gave a similar answer there.
dennisy
Yeah I saw that comment.
Maybe this is just a naive opinion it I do not get why you must target a framework at all VS just pure CSS/HTML and later allow people to convert into their framework.
I feel that at the design stage a framework should not be discussed, since that is an implementation detail.
wiradikusuma
Why we're in this topic, does anyone know a recommended AI-way of converting Figma design into a working and responsive HTML? Or, even better, a napkin sketch?
hoakiet98
There are a lot of Figma plugins to do that. Anima or Builder.io (not builder.ai) is one I've used before. I'd like to add a simple plugin for us to use if we ever have the capacity.
cadamsdotcom
Very cool, and thanks for also exposing us to Unicorn Studio! https://www.unicorn.studio/
D_R_Farrell
Super sick product!
cloudking
Congrats. How does your product differ from https://bolt.new ?
Also open source https://github.com/stackblitz-labs/bolt.diy
hoakiet98
I would say we're much more focused on the infinite canvas and Figma-like experience. We also do not build on top of WebContainer [1], which is commercially restrictive and closed source [2].
1. https://webcontainers.io/enterprise
2. CodeSandbox is also not open source, but I'm planning on adding other providers/local container options
cloudking
Nice, thanks for the insights. Will give it a try
grantfwilkinson
The web version sounds like naturally the next step to removing friction and making it quicker to see the value of it. Love that you can visually edit post creation.
Are you thinking most people will start their projects here or bring an existing one in to edit on? Maybe a github app/integration you could open a supported repo directly in onlook to run it?
hoakiet98
Yes, import is on the roadmap. We're already supporting importing on the desktop app so will need to have a way to get the code into the sandbox. My plan is to have 1. Import from GitHub - We clone and do a best effort setup 2. Run an npx upload script on the local repository 3. Drop a bundle directly through an upload UI
dhruv3006
This is awesome !
You guys nailed it !
bhaktatejas922
Insane work. For sure the middle ground between Figma and Cursor thats been missing.
Happy to be powering Fast Applies in Onlook!
Hey HN, I’m Kiet – one half of the two-person team building Onlook (https://beta.onlook.com/), an open-source [https://github.com/onlook-dev/onlook/] visual editor that lets you edit and create React apps live on an infinite canvas.
We launched Onlook [1][2] as a local-first Electron app almost a year ago. Since then, “prompt-to-build” tools have blown up, but none let you design and iterate visually. We fixed that by taking a visual-first, AI-powered approach where you can prompt, style, and directly manipulate elements in your app like in a design tool.
Two months ago, we decided to move away from Electron and rewrite everything for the browser. We wanted to remove the friction of downloading hundreds of MBs and setting up a development environment just to use the app. I wrote more here [3] about how we did it, but here are some learnings from the whole migration:
1. While most of the React UI code can be reused, mapping from Electron’s SPA experience to a Next.js app with routes is non-trivial on the state management side.
2. We were storing most of the data locally as large JSON objects. Moving that to a remote database required major refactoring into tables and more loading states. We didn’t have to think as hard about querying and load time before.
3. Iframes in the browser enforce many more restrictions than Electron webview. Working around this required us to inject code directly into the user project in order to do cross-iframe communication.
4. Keeping API keys secure is much easier on a web application than an Electron app. In Electron, every key we leave on the client can be statically accessed. Hence, we had to proxy any SDK we used that required an API key into a server call. In the web app, we can just keep the keys on the server.
5. Pushing a release bundle in Electron can take 1+ hours. And some users may never update. If we had a bug in the autoupdater itself, certain users could be “stranded” in an old version forever, and we’d have to email them to update. Though this is still better than mobile apps that go through an app store, it’s still very poor DX.
How does Onlook for web work?
We start by connecting to a remote “sandbox” [4]. The visual editing component happens through an iframe. We map the HTML element in the iframe to the location in code. Then, when an edit is made, we simulate the change on the iframe and edit the code at the same time. This way, visual changes always feel instant.
While we’re still ironing out the experience, you can already: - Select elements and prompt changes
- Update TailwindCSS classes via the styling UI
- Draw in new divs and elements
- Preview on multiple screen sizes
- Edit your code through an in-browser IDE
We want to make it trivial for anyone to create, style, and edit codebases. We’re still porting over functionalities from the desktop app — layers, fonts, hosting, git, etc. Once that is done, we plan on adding support for back-end functionalities such as auth, database, and API calls.
Special thank you to the 70+ contributors who have helped create the Onlook experience! I think there’s still a lot to be solved for in the design and dev workflow, and I think the tech is almost there.
You can clone the project and run it from our repo (linked to this post) or try it out at https://beta.onlook.com where we’re letting people try it out for free.
I’d love to hear what you think and where we should take it next :)
[1] https://news.ycombinator.com/item?id=41390449
[2] https://news.ycombinator.com/item?id=40904862
[3] https://docs.onlook.com/docs/developer/electron-to-web-migra...
[4] Currently, the sandbox is through CodeSandbox, but we plan to add support for connecting to a locally running server as well