m3e-canvas vs Onlook
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.
m3e-canvas
Browser canvas for sketching linked Material 3 screens and exporting an AI prompt
Onlook
Visual editor that edits Next.js and Tailwind apps with AI
Verdict
m3e-canvas ranks higher, 60 to 55. Of the 3 score parts we measure for both, m3e-canvas leads on 1, Onlook on 1 and 1 is even.
- AdoptionOnlook leads by 41 points, 58 to 17: a wide gap.
- Freshnessm3e-canvas leads by 23 points, 100 to 77: a wide gap.
- MaintenanceWe do not score m3e-canvas on this; Onlook has 11.
- Easy to runWe do not score m3e-canvas on this; Onlook has 67.
- Agent-readyEven at 70.
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
Pick Onlook if you are
Designers and front-end developers on Next.js codebases
- 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
| What we compare | m3e-canvas | Onlook |
|---|---|---|
| Score parts, out of 100 | ||
| Adoption | 17, niche | 58, popular |
| Freshness | 100, active | 77, recent |
| Maintenance | Not scored for this kind | 11, weak |
| Easy to run | Not scored for this kind | 67, easy |
| Agent-ready | 70, partly | 70, partly |
| Facts from GitHub and the README | ||
| Stars | 9k | 26.9k |
| License | MIT (permissive) | Apache-2.0 (permissive) |
| Last commit | Oct 2026 | Jul 2026 |
| Last release | None published | Jul 2025 |
| Language | TypeScript | TypeScript |
| Docker | No | Yes |
| GPU | Not needed | Not needed |
| arm64 or Apple Silicon | Not stated | Mentioned |
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
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
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.