What it does Onlook is a browser-based visual editor for Next.js + TailwindCSS projects. You import or scaffold an app, see a live preview in an iframe, and edit elements directly—drawing new divs, dragging components, tweaking styles. The twist: every visual edit writes back to the actual source code, and an AI chat can generate or modify components with the same code-aware context.

The interesting bit The architecture is the clever part. Onlook loads your code into a web container (CodeSandbox SDK), instruments the running DOM to map each element to its source location, then syncs edits bidirectionally: iframe first, code second. Right-click any element and you land in the exact file and line. It’s essentially a reversible debugger for UI construction.

Key highlights

• Figma-like canvas with layers panel, pages, and brand token management
• AI chat with queued messages and code-level tool access
• Branching for design experiments without git gymnastics
• One-click deploy via Freestyle hosting with custom domains
• Real-time collaboration (editing live, comments still pending)
• Checkpoints for save/restore without committing

Caveats

• Still under heavy development; README carries three rows of 🚧 emojis for a reason
• Next.js + Tailwind only; the architecture theoretically scales to other declarative frameworks, but that’s explicitly not the current focus
• Several headline features are unchecked: Figma import, GitHub import/PRs, MCP support, image references, drag-and-drop components panel
• Desktop predecessor exists; web version is the new direction

Verdict Worth watching if you build in the Next.js/Tailwind stack and want designers and developers sharing one source of truth. Skip it if you need production stability today, use a different stack, or want deep GitHub workflow integration—these are all on the roadmap, not the menu.