m3e-canvas: Open Source Design & Prototyping

What is m3e-canvas?

M3E Canvas is a browser-based design tool, written in TypeScript and released under the MIT licence, that lets people sketch Material 3 Expressive screens, link those screens into tappable flows, and copy out a natural-language prompt for an AI coding tool such as Claude Code, Codex, Gemini CLI or Cursor.

What it is

M3E Canvas is an open-source sketching environment for Material 3 Expressive, the variant of Material Design that the project targets. It is built with Next.js and React and runs entirely in the browser, with a hosted build published at lnkiai.github.io/m3e-canvas/. The working surface is a canvas on which a designer drops Material 3 Expressive parts, arranges them into screens, links the screens, and previews the result by tapping through it.

The concrete problem it solves is the gap between a screen idea and the prompt an AI coding tool needs. Describing layout, theme, navigation, connected groups, overlaps and per-part behaviour in prose, by hand, for every generated screen is slow and lossy. M3E Canvas produces that prompt from the actual design instead: the whole canvas or a single screen becomes a concise prompt in Japanese, English, Chinese or Korean, carrying the designer's own notes on what each part does, and targeting Android by default or the web.

Key capabilities

Drag-and-drop parts drawn to Material 3 Expressive: buttons, icon buttons, FABs, split buttons, FAB menus, chips, app bars, navigation bars, floating toolbars, tabs, search bars, cards, lists, dialogs, snackbars, text fields, dropdowns, switches, checkboxes, radio buttons, sliders, text, images, camera and map placeholders, badges, boxes and dividers.
Magnetic connections, where two buttons or list items brought close together fuse into a connected group with softening corners, and grouping of several selected parts so they move and overlap as one.
Real M3 Expressive loading, including the shape-morphing Loading Indicator ported from material-components-android and the wavy linear and circular progress indicators.
Screens in two sizes, switchable from a screen label between a 412×892 phone and a 1280×800 desktop, with bars stretching and the navigation bar becoming a rail; same-named screens are written into the prompt as one screen at two widths.
Tap-to-navigate and swipe-to-navigate flows, with targets of any screen or back, transitions of slide from four sides, fade, expand or none, flow arrows on the canvas, and a preview that follows the finger and plays transitions in reverse.
A theme panel covering the four M3 Expressive axes: colour from seven presets or a seed colour with light and dark mode, three contrast levels and a dynamic-colour switch; shape presets of square, rounded or full; type in Roboto, Roboto Flex, Roboto Serif or the system font; and motion in the standard or expressive spring scheme.
Prompt output and export, where the prompt can be edited by hand before copying, a screen can be saved as a PNG, and an optional bring-your-own-key AI helper (OpenAI, Claude, Gemini or DeepSeek) writes part behaviour notes or screen descriptions with the key kept in the browser and no server in between.

Who uses it and how

Solo designers and developers sketching a Material 3 Expressive app, such as the recipes app shown in the project's story demo, before any code exists.
Teams already driving Claude Code, Codex, Gemini CLI or Cursor from prompts, who paste the generated prompt and ask for the app in the target stack they selected, Android or web.
Multilingual teams, since the prompt can be emitted in Japanese, English, Chinese or Korean and the README itself is published in Japanese, Chinese and Korean.
Reviewers and handoff partners during the beta share-link flow, which copies a link that opens a design on anyone's canvas, and the beta AI-draft flow, which copies an instruction for Claude Code, Codex or another tool.
Privacy-conscious users who want AI-written behaviour notes without routing the design through a third-party server, because the provider key stays client-side.

Getting started

Open the app in a browser at https://lnkiai.github.io/m3e-canvas/. The README documents no npm package name, Docker image or compose file, so the hosted web app is the documented entry point.

How it compares

No list of paid products that this project replaces is provided, and no comparable design-and-prototyping tool is named in the facts, so M3E Canvas stands alone in this registry. It complements rather than competes with the AI coding tools named in its documentation, which consume the prompt it produces.

When to use it — and when not

The tool is browser-only and describes no database, object storage or SMTP service to operate, which keeps setup light, but the optional AI helper requires an OpenAI, Claude, Gemini or DeepSeek key that the user supplies and pays for. Teams that need an installable desktop build, a documented self-hosting path, or a production design-system handoff should look elsewhere, and the share-link and AI-draft features are still labelled beta. The project shows 7412 stars, 772 forks and 8 open issues, with a last push in September 2026, so it is actively maintained but its README excerpt is feature-dense and stops mid-sentence, which makes the documentation thinner than the feature list suggests.

project readme (upstream, from github) — read inline

M3E Canvas

Sketch Material 3 Expressive screens in the browser, link them, tap through them, and copy a prompt for your AI coding tool.

日本語 · 中文 · 한국어 · Open the app

Sketching a recipes app in M3E Canvas, changing its theme, copying the prompt, an AI coding tool building it, and the app running on Android

_{Sketch a recipes app, retheme it, copy the prompt, hand it to an AI coding tool, and run the result on Android. (mp4)}

Works with any AI coding tool that takes a prompt, such as Claude Code, Codex, Gemini CLI or Cursor: copy the prompt, paste it into the tool, and ask for the app.

What it does

Drag-and-drop parts – buttons, icon buttons, FABs, split buttons, FAB menus, chips, app bars, navigation bars, floating toolbars, tabs, search bars, cards, lists, dialogs, snackbars, text fields, dropdowns, switches, checkboxes, radio buttons, sliders, text, images, camera and map placeholders, badges, boxes and dividers, all drawn to Material 3 Expressive.
Magnetic connections – bring two buttons or list items close and they fuse into a connected group; the corners soften as they meet.
Real M3 Expressive loading – the shape-morphing Loading Indicator (ported from material-components-android) and wavy linear / circular progress indicators.
Phone and desktop screens – add as many screens as you like, name them, pick a background, and drag a screen to move everything on it. Switch any screen between a 412×892 phone and a 1280×800 desktop from its label: bars stretch, the navigation bar becomes a rail (and a rail becomes a bar again on a phone), and the parts are laid out again beside it. Screens of both sizes can share one design; same-named screens are written into the prompt as one screen at two widths.
Tap to navigate – give any tappable part, an app bar icon or a navigation bar destination a target screen (or "back") and a transition: slide from any of the four sides, fade, expand or none. Arrows show the flow on the canvas; the preview lets you tap through it, and back plays the transition in reverse.
Swipe to navigate – a screen can open another on a left / right / up / down swipe. In the preview the screen follows your finger, and the reverse swipe goes back.
Toggle buttons – any button can flip on tap, changing its icon and style.
Layers and groups – a layers panel lists the z-order of each screen; drag a row to bring parts forward or send them back, and open a group or a connected run to reorder what is inside it. Select several parts and group them to keep their overlap and move them as one. The prompt describes overlaps and side-by-side rows explicitly so the generated layout keeps them.
Theme – the four M3 Expressive axes in one panel. Color: seven presets or one seed color that becomes a full Material 3 scheme you can fine-tune, light / dark, three contrast levels and a dynamic-color switch (match the phone wallpaper). Shape: square, rounded or full corners for every part at once. Type: Roboto, Roboto Flex, Roboto Serif or the system font, with the emphasized styles. Motion: the standard or the expressive spring scheme, which also drives the preview.
Prompt output – the whole design (or a single screen) becomes a concise natural-language prompt in Japanese, English, Chinese or Korean, including your own notes on what each part does. Pick Android (the default) or the web as the target and the prompt asks for the matching stack.
Tidy – one button snaps bars to the edges, the FAB to the corner, joins neighbouring list items and buttons, and stacks the rest on 16dp margins. Press it again to undo.
Optional AI helper – bring your own key (OpenAI, Claude, Gemini or DeepSeek) and let the model write a part's behavior note or a screen's description, in your language. Each rewrite can be undone. The key stays in your browser and the request goes straight to the provider; there is no server in between.
Export – copy the prompt (edit it by hand first if you like) or save a screen as a PNG.
Share links and AI drafts (beta) – copy a link that opens your design on anyone's canvas, or copy an instruction for Claude Code, Codex or another coding agent: it reads agent.md, sketches what you described, and replies with such a link.
Alignment guides, undo/redo, keyboard shortcuts, seven color themes, a favorites row in the parts panel, and everything is saved in your browser (localStorage).
Phone-friendly – on a phone you get one fixed screen and a buttons-only editor: tap the plus to add a button, tap a button to move it, and edit its text, icon and style in a bottom sheet. The full multi-screen editor is for desktop browsers.

_{Preview: tap a part and the linked screen slides in.}

_{Prompt: the design as a concise brief in the selected language.}

_{Phone: one screen, buttons only, edited in a bottom sheet.}

Keyboard

Key	Action
`V` / `H`	Select / hand tool (hold `Space` to pan)
Wheel, `Ctrl` + wheel	Pan, zoom
`+` `-` `0`	Zoom in, zoom out, fit
`Ctrl+Z` / `Ctrl+Shift+Z`	Undo / redo
`Ctrl+D`	Duplicate
Arrows (`Shift` = 8dp)	Nudge
`Ctrl` + drag	Move without snapping (no guides, no 4dp grid)
`Delete`	Delete part or screen
`P`	Preview

Develop

npm install
npm run dev        # http://localhost:3000
npm run build      # static export to ./out

The app is a static Next.js export. To host it under a sub-path (for example a GitHub Pages project site), set NEXT_PUBLIC_BASE_PATH=/your-repo at build time. .github/workflows/deploy.yml does this automatically and publishes out/ to GitHub Pages on every push to main.

Contributing

Bug reports, part requests and pull requests are welcome. CONTRIBUTING.md explains the setup, the conventions (English comments, four languages for every string) and where each kind of change lives. Questions go to Discussions.

Support

M3E Canvas is free and MIT-licensed, and stays that way. If it saves you time, you can sponsor the work on GitHub; it pays for the hours that go into new parts, the prompt, and reviewing contributions. No feature is behind sponsorship.

Thanks to the sponsors who keep this going:

Yspritan

Credits

Loading indicator shapes and animation model: material-components-android (Apache-2.0) via Aler1x/m3-loading-indicator. See NOTICE.
Icons: Material Symbols (Apache-2.0). Fonts are loaded from Google Fonts.

Is m3e-canvas free to use?

m3e-canvas is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does m3e-canvas do?

Sketch Material 3 Expressive screens in the browser and turn them into vibe-coding prompts.

What is m3e-canvas written in?

m3e-canvas is primarily written in TypeScript. Its source is publicly available at https://github.com/lnkiai/m3e-canvas, and it has 7,412 GitHub stars.