22nd of 2 in Design to code
Onlook
Visual editor that edits Next.js and Tailwind apps with AI
Live demo ↗
(opens in a new tab)Documentation ↗
(opens in a new tab)Repository on GitHub ↗
(opens in a new tab)
- Stars
- 26.9k
- License
- Apache-2.0
- Last commit
- Jul 2026
- Last release
- Jul 2025
Overview
Browser-based editor that loads a Next.js and Tailwind project into a web container, renders it in an iframe and maps DOM elements back to source so you can drag, restyle and edit visually or through an AI chat. Built on Next.js, tRPC, Supabase, Drizzle and the Vercel AI SDK with OpenRouter for models and CodeSandbox for sandboxes. For designers and front-end developers working on Next.js codebases.
Who it is for: Designers and front-end developers on Next.js codebases
Its own README calls it an alternative to Lovable, v0, Bolt.new, Replit.
Strengths
- Edits map directly to code; right-click any element to open its source location
- Branching, checkpoints and a real-time code editor beside the visual canvas
- Apache-2.0 with Dockerfile and compose file for local runs
- Figma-like layers, pages, brand tokens and asset management
Weaknesses
- Next.js plus Tailwind only; other frameworks are roadmap items, not supported
- Depends on hosted services: Supabase, OpenRouter, CodeSandbox SDK, Freestyle
- Team comments, MCP support and image references are unchecked roadmap items
- Maintainers are moving to a hosted early-access product; last commit July 2026
What it needs
- no GPU
- Docker + Compose
- Needs Supabase (auth, database, storage), OpenRouter API key, CodeSandbox SDK, Bun
- Models: OpenRouter-hosted models, Morph Fast Apply, Relace
- README: alternative to Lovable, v0, Bolt.new, Replit
Also in Design to code
See all 2| Rank | Project | Score |
|---|---|---|
| 1 | screenshot-to-codeTurns screenshots and mockups into Tailwind, React or Vue code | 65 out of 100 |