Onlook Freemium

What it does

Onlook is an open-source, visual-first editor for Next.js and Tailwind CSS apps. It lets you click and edit elements directly in a live, rendered preview — moving, restyling, and rewriting components — while the underlying React code updates in sync, closing the gap between a Figma-style design tool and hand-written code.

What is inside

• Visual DOM editing with a Figma-like UI, component detection, and drag-and-drop layout
• An AI chat panel for generating and modifying code from natural-language prompts
• Branching so you can try design variants without losing the working version
• Brand asset and design-token management
• One-click deployment with shareable links and custom domains
• Real-time collaboration with inline comments
• MCP (Model Context Protocol) support for connecting external tools

Works with

Runs on Next.js + Tailwind CSS projects and supports MCP for tool connections; its AI features are built on OpenRouter for model access plus Morph Fast Apply and Relace for fast code application, rather than shipping as a plugin for a specific external coding agent.

How to install or connect

The project ships as a hosted app and a self-hosted option; the README points to the full setup guide at docs.onlook.com rather than a single copy-paste command, so follow that guide for local installation.

Maintenance and safety

Apache-2.0 licensed with roughly 26,800 GitHub stars, 2,100 forks, and 1,600+ commits on main. Actively maintained by a Y Combinator-backed team that is still hiring engineers, with ongoing feature updates.

Who should use it

Designers who want to make real code changes without waiting on a developer, and developers on Next.js/Tailwind projects who want a visual layer over AI-assisted code editing rather than a chat-only workflow. It's a good fit for small product teams iterating on marketing sites and app UI who want designers and engineers working in the same codebase instead of handing off Figma files.