[HN Gopher] Show HN: Onlook - Open-source, visual-first Cursor f...
___________________________________________________________________
Show HN: Onlook - Open-source, visual-first Cursor for designers
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
Author : hoakiet98
Score : 307 points
Date : 2025-05-29 16:31 UTC (4 days ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| homebodify wrote:
| As a designer passionate about UX/UI or product design and vibe
| coding, I truly believe Onlook has the potential to be the tool
| that finally brings designers' dreams to life. I'm excited to see
| how Onlook can expand what's possible for designers and give us
| greater creative freedom. You have my full support!
| hoakiet98 wrote:
| Thanks for the super early feedback and support, homebodify :)
| homebodify wrote:
| Anytime!
| fakedang wrote:
| Do you think Onlook could supersede Figma in terms of
| usability? This seems to me, a complete design outsider, like a
| Figma meets VS Code.
| homebodify wrote:
| To be honest, I've been using Figma for a long time, but
| Figma hasn't reduced my workload a lot. So if we approach
| this from a workflow perspective rather than just as a tool,
| I would place more value on Onlook. It's hard to simply say
| right or wrong, but changes are definitely happening right
| now.
| grantfwilkinson wrote:
| 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 wrote:
| 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
| D_R_Farrell wrote:
| 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
| itsNintu wrote:
| 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 wrote:
| 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 wrote:
| 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
| esafak wrote:
| Any progress on the API that will enable you to support Svelte?
| https://github.com/onlook-dev/onlook/issues/625
| hoakiet98 wrote:
| Hey esafak, Honestly, we became even more coupled to Next.js to
| provide a better experience. I think Svelte will keep getting
| deprioritized until we feel the experience is as good as it can
| get.
|
| I know it's a bad answer, but I don't want to keep promising a
| feature that doesn't seem likely at this point. Will update the
| issue to be a won't fix for the time being.
| cadamsdotcom wrote:
| Thanks, very polite way of explaining the benefits of focus
| for producing something quality.
|
| It is hard to be not building the right tool for everyone -
| but trying to build a tool that's right for everyone is even
| harder than that.
| curiouser3 wrote:
| doesn't work at all, hugged to death?
| D_R_Farrell wrote:
| What issues are you running into? Does it take a while to load
| or where do you get stuck?
| D_R_Farrell wrote:
| Heyo we were running into rate-limits with Codesandbox, but we
| just upped the limit so try giving it another shot and let me
| know if it works!
| satvikpendem wrote:
| Doesn't seem to be working for me, I see the loading spinner on
| the right arrow button briefly then it reverts to the arrow and
| does nothing.
| D_R_Farrell wrote:
| I think there are some issues with the apply model - Kiet's
| working on a solution for it.
|
| In the meantime, can you try asking Onlook again? I know it's
| inconveniant.
|
| If nothing loads on the page, try clicking the text on the
| page, then prompting from the chat asking it to create a part
| or section of the website or thing you've prompted. Sometimes
| there's just a ton of code that gets rendered and doesn't
| apply, so shortening the length of the output manually with a
| smaller prompt may help.
|
| Something we definitely need to fix though
| satvikpendem wrote:
| Same thing, I'm on https://beta.onlook.com/, not sure if I
| need to be prompting elsewhere, but anything I enter into the
| text box, it doesn't actually seem to do anything, I don't
| see any code or designs, the page remains the same.
| handfuloflight wrote:
| It's rate limited by CodeSandbox.
| hoakiet98 wrote:
| In case someone else sees this thread, this is now
| resolved with the CSB team.
| D_R_Farrell wrote:
| The limit was just raised - Go ahead and try it again and let
| me know if it works!
| mdaniel wrote:
| Just as a "for your consideration," how would anyone have
| known without you weighing in on a HN thread?
|
| I don't know what it is about frontend apps that makes them
| assume that every request is 200 OK or that every Promise is
| always .then(response) but as a consumer of the web it drives
| me batshit, and as a developer of enterprise apps it makes me
| the bad guy in PRs
|
| Anyway, I'm not exactly wagging my finger at you but rather
| if this thing you are shipping is designed to help generate
| apps for people, it would be stellar if the generation
| included at bare minimum a // TODO watch out for errors
| hoakiet98 wrote:
| This is a fair point and our fault for not handling that
| case correctly. We will handle these errors better in the
| future.
| hoakiet98 wrote:
| Just updating that this is now fixed. Thank you for the
| feedback :) https://github.com/onlook-dev/onlook/pull/1979
| WillAdams wrote:
| Logged in w/ my Github account (same as my username here), but
| nothing happens with the prompt:
|
| >create a site for creating, editing, and previewing G-code in 3D
| using blockly.
|
| and a screengrab of https://www.blockscad3d.com/editor/
| D_R_Farrell wrote:
| Ah that's unfortunate - been having some issues with the
| rendered code being applied.
|
| Can you try it again and see? Or, click on the page, then add
| your screenshot to the chat with your prompt.
|
| Honestly doing 3D may be a bit tricky in Onlook but super
| curious to see if you get it to work. It works just like a
| normal browser would, but the complexity of knowing how to
| setup a 3D site like that may be too advanced for Onlook.
| WillAdams wrote:
| The button shows a wait state briefly, then nothing.
| D_R_Farrell wrote:
| We were running into rate-limit issues with Codesandbox. We
| just increased our limit, so go ahead and try it again and
| let me know if it works!
| WillAdams wrote:
| It has moved on to the next window and it is spitting out
| code in the chat window.
|
| Then, it ultimately left up a window which says "Welcome
| to your new app" and displayed the prompt:
|
| >create a site for creating, editing, and previewing
| G-code in 3D using blockly.
|
| but I don't see anything beyond that.
| hoakiet98 wrote:
| Could you hit retry on the message or add a new message?
| Sorry for the issue
| WillAdams wrote:
| Aren't there logs at your end you could examine? Or why
| not try this prompt yourself?
|
| I will note that I had a similar result with a far
| simpler prompt....
|
| Or, let's turn this around --- could you provide a page
| which documents a successful prompt/project? If you'll
| let me know the link of that, I'll try it, then once I
| know this works for my credentials, will try again with
| the effort I was making.
| fakedang wrote:
| 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.
| D_R_Farrell wrote:
| 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!
| chakintosh wrote:
| Ditto. I came here after watching the other video they have on
| their Docs and I ended the video with even more questions.
| hoakiet98 wrote:
| This is good feedback. I updated the Get Started video here.
| Thank you :)
|
| https://github.com/onlook-dev/onlook/pull/2009
| hoakiet98 wrote:
| Seems we're being rate-limited by Codesandbox. Sorry for the
| inconvenience if you're not able to start a session.
| hoakiet98 wrote:
| Got the team to increase the limit. We're back!
| handfuloflight wrote:
| TRPCClientError: Failed to create sandbox: 0 of 40 sandboxes
| remaining.
|
| Aw, shucks.
| D_R_Farrell wrote:
| We got rate-limited but are in contact with the team to get
| more sandboxes!
|
| Hang-tight!
| handfuloflight wrote:
| While I have you here. Can you explain to me how do I import
| my existing repo into this?
| D_R_Farrell wrote:
| You've got us here all day haha
|
| If you use our Desktop Product -
| https://onlook.com/download - you can import your projects
| there and use a lot more features like Layers, Components,
| Pages and more.
|
| We don't have the ability for you to import existing repos
| for this beta product just yet, but it's something we'll be
| enabling in the coming weeks for sure.
| D_R_Farrell wrote:
| The limit was just raised - Go ahead and try it again and let
| me know if it works!
| sarthaksrinivas wrote:
| The feedback loop between our users, mockups, and working react
| code is so tight with Onlook, it's fully replaced our Figma
| subscription
|
| Question - is there a way to remove the selector ids from the
| generated code? We currently need to manually strip these from
| cursor
| hoakiet98 wrote:
| On the desktop app you'll be able to strip the IDs by stopping
| the run. There's no option for that yet on the beta web
| version. Let me know if that works :)
| puppycodes wrote:
| Looks interesting but for a design focused service to not be
| "Ready for mobile" yet isnt a great look.
| hoakiet98 wrote:
| fair point. we didn't really intend for the app to be used on
| mobile yet since it's like using Figma on mobile.
| puppycodes wrote:
| Sure thing, but it would be great to be able to see examples
| of the app on a mobile device when visiting the site.
| Otherwise I have zero incentive to open it on my other
| device. My 2 cents is don't bank on being mysterious. Show us
| the goods without making us sign up, change devices, or work
| for it.
|
| I personally loathe this trend of making us login after
| giving us a prompt box.
|
| Just show us the app, your github does this well! Otherwise
| your lost in the sea of AI marketing pitches that overwhelm
| us daily.
| hoakiet98 wrote:
| It's honestly not so much being mysterious as much as the
| UI is not usable on mobile. I don't think we'll support
| mobile for a while given the extra design constraints that
| it imposes.
|
| > I personally loathe this trend of making us login after
| giving us a prompt box.
|
| I do too, and am very aware of how HN/other engineers feel
| on this topic. It's mostly a way to get around abuse and
| access issues. We have a pattern moving forward for guest
| accounts, but couldn't prioritize it in time for this
| launch.
|
| I think not needing to sign in is a good way to kick the
| tire which helps growth as well. So point taken to
| prioritize this higher. Thank you :)
| cadamsdotcom wrote:
| Very cool, and thanks for also exposing us to Unicorn Studio!
| https://www.unicorn.studio/
| D_R_Farrell wrote:
| Super sick product!
| rubenvanwyk wrote:
| 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 wrote:
| 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.
| Nimishg14 wrote:
| Tried it once, wasn't very happy with the results. Honestly I was
| expecting a big jump from Sonnet 4 in terms of design quality.
| D_R_Farrell wrote:
| Was it too boring or what was disappointing about the result?
|
| Sonnet 4 has been producing much more reliable outputs, but
| it's always a challenge to push it to get really creative. I
| think there are probably great ways we could be prompting for
| more creative output, but something we'll need to keep
| experimenting with for sure.
| popalchemist wrote:
| Is this FULLY open-source, or are key features locked behind a
| paywall?
| hoakiet98 wrote:
| There's nothing hidden besides OAuth configuration that's not
| replicable as code such as Github App and Google OAuth but not
| by intent.
|
| We still provide a guest login for dev mode in the database
| seed script to get around that.
| wiradikusuma wrote:
| 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 wrote:
| 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.
|
| - https://www.animaapp.com/figma
|
| - https://www.builder.io/c/docs/builder-figma-plugin
| mNovak wrote:
| 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 wrote:
| > 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.
| dennisy wrote:
| 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 wrote:
| 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.
|
| https://news.ycombinator.com/item?id=44127653
| bhaktatejas922 wrote:
| Insane work. For sure the middle ground between Figma and Cursor
| thats been missing.
|
| Happy to be powering Fast Applies in Onlook!
|
| https://morphllm.com
| OsrsNeedsf2P wrote:
| What's up with the recent trend of YC being open source? Is it an
| ideology thing, a sign of confidence, or is it really that
| consumers prefer open source software?
| vachina wrote:
| Ensures your beta software gets free updates until it gets
| commercialized by private equity 3 years later.
| hoakiet98 wrote:
| I think this is a cynical take on OSS. As a for-profit
| company, we have already commercialized the desktop version
| and plan on commercializing the web version as well.
|
| I don't think this is unhealthy for open-source, and I hope
| we're transparent about that. The code is still free and
| self-hostable under Apache 2.0.
| hoakiet98 wrote:
| > What's up with the recent trend of YC being open source?
|
| To be fair, we were open source before we got into YC. YC
| didn't mandate any business model, and the vast majority of our
| batchmates (empirically, 90%) were closed-source.
|
| > Is it an ideology thing, a sign of confidence, or is it
| really that consumers prefer open source software?
|
| I personally think it's a competitive advantage for
| distribution, differentiation, and attracting talent. Also as
| an engineer, I just like OSS.
| cloudking wrote:
| Congrats. How does your product differ from https://bolt.new ?
|
| Also open source https://github.com/stackblitz-labs/bolt.diy
| hoakiet98 wrote:
| 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 wrote:
| Nice, thanks for the insights. Will give it a try
___________________________________________________________________
(page generated 2025-06-02 23:00 UTC)