ArchestackGitHub ↗ (opens in a new tab)

Design to code

Tools that turn screenshots, mockups or visual edits into working front-end code.

screenshot-to-code leads with 65, ahead of Onlook (47). 2 projects ranked by score.

The ranking

Design to code: full ranking
RankProjectAdoptionFreshnessMaintenanceEasy to runAgent-readyScore
1screenshot-to-codeTurns screenshots and mockups into Tailwind, React or Vue code Live demo ↗ (opens in a new tab)80.2k stars, MIT, last commit Oct 20269310033337065 out of 100
2OnlookVisual editor that edits Next.js and Tailwind apps with AI Live demo ↗ (opens in a new tab)26.9k stars, Apache-2.0, last commit Jul 2026307711507047 out of 100

Momentum, Verified build, Docs and Privacy are not measured yet; their weight goes to the signals shown. A dash means the signal is not scored for that kind of project. Hover a number for its rating in words.

Reviews

165 out of 100

screenshot-to-code

Turns screenshots and mockups into Tailwind, React or Vue code

Live demo ↗ (opens in a new tab)80.2k stars, MIT, last commit Oct 2026

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.

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
Live demo ↗ (opens in a new tab)Repository on GitHub ↗ (opens in a new tab)
247 out of 100

Onlook

Visual editor that edits Next.js and Tailwind apps with AI

Live demo ↗ (opens in a new tab)26.9k stars, Apache-2.0, last commit Jul 2026

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.

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
Live demo ↗ (opens in a new tab)Documentation ↗ (opens in a new tab)Repository on GitHub ↗ (opens in a new tab)

Written from each project's README and checked facts. Spot something wrong? Report it on GitHub (opens in a new tab).