M3E Canvas is a browser-based design tool for sketching Material 3 Expressive interfaces and turning them into prompts for AI coding tools. Users can drag buttons, cards, navigation bars, dialogs, fields, chips, images, and many other components onto a canvas. Screens can be linked together and tested as simple interactive flows before implementation. A Tidy function automatically aligns and groups nearby elements using Material-style spacing. Designs can be exported as PNG images or copied as prompts for tools such as Claude Code, Codex, Gemini CLI, and Cursor. Optional AI helpers can generate behavior notes and screen descriptions while keeping provider keys in the browser. Projects are stored locally and can also be shared through links.

Features

  • Material 3 Expressive drag-and-drop components
  • Multi-screen linking and tap-through prototypes
  • Automatic layout cleanup and grouping
  • AI coding prompt generation
  • Optional AI-written behavior and screen descriptions
  • PNG export, local storage, and shareable project links

Project Samples

Project Activity

See All Activity >

Categories

AI Coding

License

MIT License

Follow M3E Canvas

M3E Canvas Web Site

Other Useful Business Software
Demo Series - Small Business Backup By Veeam Icon
Demo Series - Small Business Backup By Veeam

Learn how to protect your Microsoft 365 data, with simple, actionable tips today.

Watch this on-demand demo series and learn how to protect your Microsoft 365 data with clear, simple, actionable steps that are easy to implement for businesses of all sizes.
Watch Demo Series
Rate This Project
Login To Rate This Project

User Reviews

Be the first to post a review of M3E Canvas!

Additional Project Details

Programming Language

TypeScript

Related Categories

TypeScript AI Coding Tool

Registered

19 hours ago