Onlook sits between Figma and Framer

Onlook sits between Figma and Framer

Onlook is a visual editor that runs on your actual React codebase. You drag elements, change spacing, resize, swap components, and the edit lands in the code. Right-click anything on the canvas, and it opens the exact place that renders it.

Add as a preferred source on Google

Think about the gap between Figma and Framer. Figma gives you a picture of the product, and somebody still has to build it. Framer gives you a working site, but the code stays inside Framer. Onlook works on the repo you already have. Next.js or Vite, Tailwind, shadcn. The output is your code.

The project is open source under Apache 2.0 and has over 26,000 stars on GitHub. There is a hosted version in early access behind a waitlist, with real-time collaboration and version history on top of the editor.

We do not use Onlook at SmartMetrics. Our front-end work does not go through a design canvas, and the tool is young enough that we would rather watch it than put a client site on it. Still worth thirty minutes of your time if you have designers who keep filing tickets for padding changes.

Their Substack is worth a look too, and not in the usual company blog way. Daniel Farrell wrote about what actually happened when they went open source and how they ran their Hacker News launch. Short posts, real numbers, no press-release voice.

Work with Tomas

Founder, SmartMetrics

20 years in marketing, CRO, CRM, and analytics, now with AI systems layered on top.

700+
companies served
20 yrs
marketing & analytics
Direct
no account managers
Salesforce Certified Platform App BuilderZoho Creator Certified Developer Professional

Get In Touch

You work with me directly, from scope to delivery.

https://
Client testimonials