Onlook

Hey Product Hunt! 👋

I’ve spent over a decade watching the same painful cycle: designers hand-off perfect design files, developers rebuild everything from scratch, and what ships looks just barely like what the designer had dreamed-up.

Everything was being built twice, and when you’re trying to ship fast, the entire product experience starts to slip-away into “close-enough” territory.

That's why I teamed up with @flyakiet to build Onlook.

We're giving designers code superpowers and developers design superpowers. Everyone stays in their comfort zone working with the same codebase to produce production-ready work. Here’s how it fits into your workflow:

Traditional Workflow:

1. Designer creates mockup in a design tool (not real)

2. PM uses clickable prototype for demos (not real)

3. Developer rebuilds everything from scratch (finally real, but not exact)

4. Endless back-and-forth because implementation ≠ design

5. Compromises and "close enough" solutions, and an “ok” product experience.

Onlook Workflow:

1. Designer/PM builds directly in Onlook (immediately real, and infinitely creative)

2. Prototype IS code, and ultra high fidelity, with all of the interactions and states you’d expect

3. Developer gets clean, working code (no extra translation needed)

It’s been over a year since we started building this version of Onlook, and we’re so grateful for the over 100 open-source contributors who have helped craft this new visual editor for code.

As a thank you for our launch…

🎁 Exclusive for Product Hunt: 20% off first 6 months with code 'IHATEHANDOFFS' (first 100 hunters only!)

Thank you for your support, and we can’t wait to see what designers and developers create together with Onlook!

Yay! Congrats on your launch!

One of the few tools truly bridging dev <> design. Excited to see an open source approach take the lead here.