screenshot-to-code vs Onlook
Two of the top design to code, side by side: score, setup, license, activity and what each review found.
screenshot-to-code
Turns screenshots and mockups into Tailwind, React or Vue code
Onlook
Visual editor that edits Next.js and Tailwind apps with AI
| What we compare | screenshot-to-code | Onlook |
|---|---|---|
| Score parts, out of 100 | ||
| Adoption | 93, widely used | 30, known |
| Freshness | 100, active | 77, recent |
| Maintenance | 33, patchy | 11, weak |
| Easy to run | 33, some setup | 50, easy |
| Agent-ready | 70, partly | 70, partly |
| Facts from GitHub and the README | ||
| Stars | 80.2k | 26.9k |
| License | MIT (permissive) | Apache-2.0 (permissive) |
| Last commit | Oct 2026 | Jul 2026 |
| Last release | None published | Jul 2025 |
| Language | Not stated | Not stated |
| Docker | Yes | Yes |
| GPU | Not needed | Not needed |
| arm64 or Apple Silicon | Not stated | Not stated |
screenshot-to-code
Takes a screenshot, mockup, Figma export or screen recording and generates HTML with Tailwind or CSS, React, Vue, Bootstrap or Ionic code using Gemini 3, GPT-5.5 or Claude Opus models, with Replicate for image generation and background removal. Runs as a React/Vite frontend on port 5173 and a FastAPI backend on 7001, or via docker-compose. For developers prototyping UIs from designs.
Who it is for: Developers prototyping UIs from designs
Strengths
- Six output stacks including React, Vue, Bootstrap and Ionic with Tailwind
- Video mode turns a screen recording into a working prototype (needs Gemini)
- Optional headless Chromium lets the agent render and check its own output
- docker-compose brings up frontend and backend with one env file
Weaknesses
- Requires at least one OpenAI, Anthropic or Gemini API key; no bundled local model
- Ollama models are possible but the README calls the results poor quality
- Replicate key must be set in backend/.env, not in the UI
- Docker setup has no hot reload; file changes need a rebuild
- no GPU
- Compose
- Needs OpenAI, Anthropic or Gemini API key, Replicate API key (optional), Playwright Chromium (optional preview)
- Models: Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6/4.8
- port 5173
Onlook
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
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
- 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