screenshot-to-code vs m3e-canvas
Two of the top projects in Design to code, side by side: who leads on each score part and who each one suits, then setup, license, activity and what each review found.
screenshot-to-code
Turns screenshots and mockups into Tailwind, React or Vue code
m3e-canvas
Browser canvas for sketching linked Material 3 screens and exporting an AI prompt
Verdict
screenshot-to-code ranks higher, 64 to 60. Of the 3 score parts we measure for both, screenshot-to-code leads on 1, m3e-canvas on none and 2 are even.
- Adoptionscreenshot-to-code leads by 78 points, 95 to 17: a wide gap.
- FreshnessEven at 100.
- MaintenanceWe do not score m3e-canvas on this; screenshot-to-code has 33.
- Easy to runWe do not score m3e-canvas on this; screenshot-to-code has 33.
- Agent-readyEven at 70.
Pick screenshot-to-code if you are
Developers prototyping UIs from designs
- Six output stacks including React, Vue, Bootstrap and Ionic with Tailwind
- Video mode turns a screen recording into a working prototype (needs Gemini)
Pick m3e-canvas if you are
Developers sketching Material 3 app flows before prompting a coding agent
- No backend: static export, designs saved in browser localStorage
- Tap and swipe navigation with transitions, plus a clickable preview
| What we compare | screenshot-to-code | m3e-canvas |
|---|---|---|
| Score parts, out of 100 | ||
| Adoption | 95, widely used | 17, niche |
| Freshness | 100, active | 100, active |
| Maintenance | 33, patchy | Not scored for this kind |
| Easy to run | 33, some setup | Not scored for this kind |
| Agent-ready | 70, partly | 70, partly |
| Facts from GitHub and the README | ||
| Stars | 80.4k | 9k |
| License | MIT (permissive) | MIT (permissive) |
| Last commit | Oct 2026 | Oct 2026 |
| Last release | None published | None published |
| Language | Python | TypeScript |
| Docker | Yes | No |
| 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
m3e-canvas
M3E Canvas is a static Next.js app where you drag Material 3 Expressive parts onto phone or desktop screens, link them with tap and swipe transitions, and preview the flow. The design is exported as a prompt in Japanese, English, Chinese or Korean, targeting Android or web, to paste into a coding tool such as Claude Code, Codex, Gemini CLI or Cursor. State is kept in localStorage; there is no backend.
Who it is for: Developers sketching Material 3 app flows before prompting a coding agent
Strengths
- No backend: static export, designs saved in browser localStorage
- Tap and swipe navigation with transitions, plus a clickable preview
- Prompt output in four languages for Android or web targets
- Optional AI helper sends your own key straight to the provider
Weaknesses
- Phone browsers get a one-screen, buttons-only editor
- Output is a text prompt, not generated code
- Design lives in browser storage unless shared by link
- Fonts load from Google Fonts at runtime
- no GPU
- Needs Node.js and npm (to build), Google Fonts
- Models: OpenAI, Claude, Gemini, DeepSeek
- port 3000
More in Design to code
Building with these?
We help teams pick an open-source AI stack and run it in production. Client work never changes a rank.