When your design tool actually writes the React code

What it does

Onlook is a browser-based visual editor for Next.js and TailwindCSS projects. It loads your code into a web container, renders the app in an iframe, and instruments the DOM so that every visual tweak—dragging a div, editing text, adjusting a margin—maps back to the exact location in your source. An AI chat can also generate or refactor components, and the project deploys via shareable links or custom domains.

The interesting bit

The project’s core trick is code instrumentation: it modifies your React code so that DOM elements know where they were born in the filesystem. This lets a Figma-like canvas manipulate live pixels while surgically editing the underlying JSX instead of generating throwaway code. The team calls it “Cursor for Designers,” but it might be more accurate to say it is Figma with a git conscience.

Key highlights

• Open-source alternative to Bolt.new, Lovable, V0, and Webflow
• Visual editing (draw divs, drag-and-drop, style tweaks) that writes back to source code in real time
• AI chat with code access, checkpoint saves, and branching for design experiments
• One-click deploy with custom domains via Freestyle hosting
• Real-time collaborative editing

Caveats

• Explicitly pre-1.0: many headline features (Figma import, GitHub PRs, comments, MCP support) are still unchecked on the roadmap
• Hard-locked to Next.js + TailwindCSS; Vue, Svelte, or vanilla CSS projects need not apply yet

Verdict

Worth a look if you are a designer who wants to own the React code or a frontend dev tired of translating mockups by hand. Skip it if your stack is not Next.js and Tailwind—or if you need production-grade stability today.