22nd of 3 in Design to code
m3e-canvas
Browser canvas for sketching linked Material 3 screens and exporting an AI prompt
- Stars
- 9k
- License
- MIT
- Last commit
- Oct 2026
- Language
- TypeScript
Missed the latest GitHub check; these facts may be older.
Overview
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
What it needs
- no GPU
- Needs Node.js and npm (to build), Google Fonts
- Models: OpenAI, Claude, Gemini, DeepSeek
- port 3000
Head to head
Also in Design to code
See all 3| Rank | Project | Score |
|---|---|---|
| 1 | screenshot-to-codeTurns screenshots and mockups into Tailwind, React or Vue code | 64 out of 100 |
| 3 | OnlookVisual editor that edits Next.js and Tailwind apps with AI | 55 out of 100 |