m3e-canvas

### Architecture Overview and Engineering Analysis M3E Canvas is a browser-based visual prototyping engine built specifically around Google's Material 3 Expressive specification. The core value proposition of the project is bridging visual screen composition directly with prompt engineering: you draft mobile screens visually, link interactive elements together, and generate contextual prompts for AI coding tools like Claude Code, [Cursor](https://cursor.sh/?aff=placeholder), Codex, and Gemini CLI. #### The Tech Stack & Storage Engine Under the hood, the project uses Next.js 16 and React 19. Architecturally, M3E Canvas operates under a strict zero-backend model. There are no server-side APIs, microservices, or database layers involved in handling design state. Instead, the application manages all client state, UI placement metadata, and canvas links directly inside the browser session, persisting state locally using `localStorage`. This guarantees zero network latency while editing layouts, avoids remote sync overhead, and allows the platform to be hosted as a pure static deployment on GitHub Pages without server-side execution requirements. #### Layout Engine & Magnetic Snapping The core editing surface relies on a client-side drag-and-drop canvas populated with pre-built Material 3 Expressive component primitives. The component library covers structural, input, and feedback elements, including: * Navigation & Containers: App bars, navigation bars, floating toolbars, tabs, search bars, cards, boxes, and dividers. * Actions & Inputs: Buttons, icon buttons, FABs, split buttons, FAB menus, chips, text fields, dropdowns, switches, checkboxes, radio buttons, and sliders. * Feedback & Content: Dialogs, snackbars, text elements, images, camera and map placeholders, and badges. A notable feature in the layout engine is its magnetic connection system. When two interactive components—such as adjacent buttons or list items—are moved into close proximity, the visual engine automatically snaps and fuses them into a connected group. During this dynamic grouping, the rendering system automatically adjusts corner radii (softening the inner corners where components touch) to maintain alignment with Material 3 Expressive design specs without requiring manual adjustment. #### Interactive Prototyping and Prompt Pipeline Beyond static visual layout, M3E Canvas supports screen linking. Developers can establish navigational paths between different canvas screens and tap through the prototype live in the browser. Once a user finishes building and linking screens (such as a recipe app flow), the app extracts the layout state into a structured vibe-coding prompt. Developers can copy this prompt directly into an AI coding assistant to generate fully functional application code targeted for platforms such as Android. #### Deployment and Setup Because M3E Canvas requires no server infrastructure or database setup, you can access the application directly via the hosted live web app at `https://lnkiai.github.io/m3e-canvas/`.