M2 user guide

M2 Canvas is a shared design canvas for your team and AI agents. This guide walks through getting in, the editor, working with agents, design systems, sharing and exporting.

Get access

M2 is in private beta, so sign-up is invite-only.

1. Join the waitlist on the home page. When your request is approved, we email you an invite link.
2. Open the link and sign up with Google, GitHub or an email and password. Use the address the invite was sent to. Invite links are valid for 7 days and work once.
3. If you sign up with email, enter the code we send you (or click the link in that email) to verify the address.

Already have an account? Sign in with Google, GitHub or your email and password. "Forgot password?" on the sign-in page sends a reset link.

After your first sign-in you land in your workspace, and a short intro offers two ways to start: Start with an example or Blank project. Either one opens a project with the setup guide for connecting your agent.

Workspaces and projects

• New Project in the workspace sidebar creates a project. How many projects you can have depends on your plan — see Pricing.
• A project holds one or more pages. In the editor's left sidebar, open the Pages tab and use + at the right end of the tab row to add one, double-click a page to rename it, and use its menu to duplicate, reorder or delete it. Deleting a page removes it permanently.
• Deleting a project moves it to Trash, where you can restore it, delete it forever or empty the trash. Projects stay in Trash for the retention period of your plan.
• If a workspace goes over its plan's project limit, the extra projects become read-only until you upgrade.

The editor

Left sidebar. At the top are the M2 logo and the project name. The M2 logo opens the main menu: Go to project returns to your projects, View switches the sidebar style and shows or hides the sidebar and the right panel, Preferences holds the canvas preferences, and Help and account has the user guide. The project name opens the project menu, where you can rename the project (Rename), copy its link, star it, connect an agent or delete it; items marked Coming soon aren't available yet. Below are three tabs: Pages lists the pages; Resources holds apps, uploaded files and your design system's components, and the search field at its top searches all three; Layers shows the current page's layers, and Find layer finds one by name. Drag the sidebar's right edge to resize it, and press ⌘ \ to collapse or expand it. The sidebar comes in two styles, Standard and Compact: Compact keeps a single column of icons, and clicking an icon opens that panel. Switch between them from View or the sidebar's layout menu.

Toolbar. The toolbar at the bottom of the canvas has Select V, Pan H, Pen P, Undo and Redo, and +, which opens the insert menu: Frame F, Text T, Image I, Rectangle R, Ellipse O, Line L, Arrow Shift L, and Polygon and Star under More shapes. The canvas's top-right corner shows the save status, who's here, and Share.

Canvas. Zoom from the control in the bottom-right corner, or with ⌘ +, ⌘ −, ⌘ 0 (100%), ⌘ 1 (fit all) and ⌘ 2 (fit selection). Hold Space to pan. Canvas preferences such as rulers, pixel grid, snapping and background are under Preferences in the M2 logo menu.

Right panel. The panel on the right has two tabs. The agent tab is where you chat with Patch Agent, M2's built-in agent; the menu on that tab also switches to agents on your computer (if you use Local Agent) and has Connect an agent…. The Design tab shows the properties of the selected node, or the page's ID and background when nothing is selected. Drag the panel's left edge to resize it, and show or hide it with Right panel under View in the M2 logo menu, or in the sidebar's layout menu.

Layouts and presenting. The sidebar's layout menu (the ▾ next to the sidebar toggle) and View in the M2 logo menu offer four layouts: Standard, Compact sidebar, Canvas focus (hides the sidebar and the right panel, keeping the canvas and the toolbar) and Presentation. If you show or hide a panel on its own, none of the four is checked. Toolbar and zoom shows or hides the bottom toolbar together with the zoom control. Choose Presentation to present: the editor's interface is hidden, and you can pan, zoom and click to inspect, but not edit. Press Esc (it clears the selection first, if there is one) or click Exit on the hint at the top to leave and return to the layout you had; move the pointer to the top of the canvas to show the hint again.

Design with the built-in agent

Type what you want in the right panel's agent tab — for example "Design a pricing page with three plans" — and press Enter (Shift Enter for a new line). The agent sees the current page and your selection automatically, and it builds with your project's design system.

• Use the model picker next to the composer to choose a model.
• New chat (+) starts a fresh conversation; History brings back earlier ones.
• The built-in agent uses credits. Your workspace switcher shows how many are left and when they renew. If you run out, the chat tells you before it starts. Plans and credit amounts are on Pricing.

Connect your own agent

You can also design with the agent you already use — Claude Code, Codex, Cursor, OpenCode, Qoder or any MCP-compatible client.

• The quickest way is to paste this into your agent: "Read https://patch.design/agent-setup.md and follow the instructions to connect to M2." It sets itself up and asks you to sign in in the browser.
• Or choose Connect an agent… in the agent menu (or in the project menu) and click Copy to agent. That copies a starter prompt with this project and page, ready to paste.
• Per-client commands and the MCP endpoint are in Connect over MCP.

The Connect panel lists every agent on the project, who it belongs to, which page it's on and whether it's still responding. Agents and teammates edit the same canvas live, each with their own cursor.

Design systems

A design system (DS) holds your tokens and components, and agents build with it so every screen stays on-brand.

• Create one from Design Systems in your workspace with New design system — start from scratch or fork an existing one. A new DS starts as a Draft.
• Open a DS to see its Overview, Library, Assets and Versions. Click Start Editing to make changes, then Publish to release a new version, with optional release notes.
• Components are created by agents: ask the agent on the DS page, for example "Add a Button component".
• In a project, use Bind Design System in the Components section header of the left sidebar's Resources tab (it shows the DS name once bound) to choose the DS for new nodes, and pick which version the project follows. The Design System section in the right panel's Design tab shows the DS and version a selected node uses.

Share and collaborate

• Share (top-right corner of the canvas) invites people to a project as viewers by email, and sets general access to Restricted or Anyone with the link (view only). Copy link gives you a read-only link.
• To add editors, go to Workspace Settings → Members → Invite and choose Admin, Editor or Viewer. Editors and admins take a seat; viewers are free.
• Only workspace owners and admins can manage sharing.
• Everyone working on a project shows up as an avatar in the canvas's top-right corner and a live cursor on the canvas — people and agents alike.

Assets and apps

• In the Resources tab, upload images with the upload button at the right end of the tab row, or with Upload files… and Upload folder… in the right-click menu, and organize them into folders. Supported formats: PNG, JPEG, GIF, WebP, SVG, BMP and TIFF, up to 10 MB each. Total storage depends on your plan.
• Agents can build interactive apps on the canvas. Select an app and press Run (or Enter) to use it in place. From Resources → Apps, Export code downloads it as a Vite project you can run with npm install && npm run dev.
• The Components section of the Resources tab browses your design system's icons and components so you can drag them onto the canvas.

Export

Right-click anything on the canvas:

• Copy as → Copy as PNG (⌘ Shift C), Copy ID or Copy Node JSON.
• Export… saves a PNG, JPG or SVG at a scale from 0.5× to 4×, or at a fixed width or height.

Keyboard shortcuts

On Windows, use Ctrl where you see ⌘.

Good to know

• Changes save automatically; the save status sits next to the avatars.
• Undo covers your own edits in the current session. It doesn't carry over after a reload.
• Projects don't have a version history yet. Design systems keep a list of published versions.
• Questions? Write to hello@m2ui.ai.