Quick previews: htmlpreview → · gisthost → · markdown (this gist) · interactive fork
| Format | Open |
|---|---|
| Styled HTML (htmlpreview) | Open preview → |
| Styled HTML (gisthost) | Open preview → |
| Markdown (this file) | Gist canvas.md tab → |
| Interactive (open-canvas) | aculich/open-canvas → bun install && bun run dev |
| Raw HTML source | gist raw file |
Deep dive · Visual agent layer
What each tool is for, when to reach for it, and when to skip it. Companion to the agent releases brief (Jun 2026 tab research).
One-sentence split: Cursor Canvas is where your agent puts analytical results beside your code. MagicPath is where your team and agents co-design product UI in a shared visual workspace — including from Cursor, but not limited to it.
| Stat | Value |
|---|---|
| Cursor Canvas shipped | Apr 2026 |
| Design Mode | Jun 2026 |
| MagicPath | v2.0 |
Agents render interactive React artifacts next to chat instead of markdown walls. Each canvas is a durable .canvas.tsx file you can reopen, edit, iterate on, or publish to your team.
- You ask for a dashboard, audit, report, or visual analysis — or the agent decides one fits.
- Cursor builds a canvas and shows a card at the end of the response.
- Open from the card, Command Palette (Open Canvas), or Agents Window tab.
- Refine by prompting the agent, using Design Mode to point at UI elements, or editing source directly.
- Canvases save to your workspace list — no rerun needed to revisit layout.
- Tables, stats, charts, callouts, collapsible sections
- Diff views, todo lists, DAG-style diagrams
- Design Mode — select UI, annotate, agent edits in place
- Context usage report canvas with Debug with Agent
- Embed buttons that run a prompt when clicked
- Publish → shareable URL (Pro / Teams / Enterprise)
Package a canvas workflow as a skill with four parts:
- Trigger — when to use it (e.g. quarterly revenue report)
- Layout — sections, stats, tables to include
- Data — SQL, API, shell command, MCP source
- Formatting — units, date range, sort order
Marketplace example: Docs Canvas — interactive repo architecture diagrams.
- Incident triage joining Datadog, Databricks, Sentry, or local logs in one chart
- Large PR reviews — grouped diffs, prioritized sections, pseudocode for tricky logic
- Eval / rollout analysis — cluster failure modes across many request IDs
- Context usage debugging — token breakdown by rules, skills, tools
- Repeatable reports — package as a canvas skill (trigger + query + layout)
- Architecture walkthroughs — Docs Canvas skill from Marketplace
- One-line answer or single file edit — chat is enough
- You need a production dashboard in Datadog/Grafana — build it there
- Freeform whiteboarding or Figma-style design exploration
- Artifact must live in Slack/Notion async — publish shared canvas or export manually
- No structured data — prose explanation beats an empty chart frame
Docs: cursor.com/docs/agent/tools/canvas · announcement blog
MagicPath is a separate product: a multiplayer design canvas where humans and AI agents work on the same visual file. Cursor is one of several agents you can plug in — not the host environment.
- Real-time co-editing — see teammates and agents on the canvas live
- Parallel design — one request spawns multiple agents producing screen variations
- Cloud-native — agents continue while app is closed; changes appear on reopen
- Repo round-trip — design files sync back to your codebase
- External agent hub — Codex, Claude Code, Cursor via skill + MCP/Linear/repo
- Product UI focus — components, screens, design systems — not diagnostic dashboards
Install for external agents:
npx skills add https://github.com/magicpathai/agent-skills --skill magicpath. Works from terminal or phone — not only inside Cursor chat.
- Building product UI with humans and agents co-editing the same design file
- Multiple screens or variations from one prompt (parallel agent designers)
- Design must round-trip to your codebase — not just view-only agent output
- Team needs real-time multiplayer on a visual canvas (see cursors move live)
- External agents (Cursor, Claude Code, Codex) should work while you are offline
- Linear/MCP/repo-connected design workflow outside the IDE chat pane
- You only need agent analysis output beside code — Cursor Canvas is enough
- Solo dev, no design collaborators, no visual product surface
- Backend/data work with no UI component library to maintain
- Adding another SaaS + skill install for a one-off diagram
- You want IDE-native artifacts with zero context switch — stay in Cursor
Site: magicpath.ai
| Dimension | Cursor Canvas | MagicPath |
|---|---|---|
| Primary job | Agent output & analysis artifacts | Collaborative product/design canvas |
| Where it lives | Cursor IDE — Agents Window, .canvas.tsx files | Cloud app (browser or macOS) — magicpath.ai |
| Who edits | You + Cursor agent (prompt or Design Mode) | Humans + multiple agents, multiplayer |
| Output type | Dashboards, reports, audits, diff UIs | Design components, screens, variations |
| Persists as | Workspace canvas list; optional published URL | MagicPath design files; syncs to repo |
| Extensibility | Canvas skills + Marketplace (e.g. Docs Canvas) | magicpath skill: npx skills add …/magicpath |
| Best paired with | MCP tools, repo context, terminal | Cursor/Claude Code/Codex, Linear, MCP |
| Overkill when | You need a quick text answer | You only need an in-IDE report |
You are an engineer debugging, reviewing, or reporting inside the repo. Output is analytical (metrics, diffs, evals). No design teammates. No need for Figma-like canvas or repo design sync.
You are shipping UI with designers or PMs. Multiple agents should explore layouts in parallel. Design must land in code via a shared file. Team works async on visual components outside IDE chat.
Cursor Canvas for engineering artifacts (incident dashboard, arch diagram, context audit). MagicPath for product screens and component library. Cursor agent connects to MagicPath via skill when design work leaves the IDE.
Quick Q&A, small code fix, or work that belongs in your real observability/design tool of record. Do not canvas a two-row table.
- Open Agents Window → ask for a context usage report canvas
- Run Docs Canvas skill on a repo you do not own mentally
- On next incident: ask agent to join MCP observability data in one chart
- Publish one canvas to test team sharing (requires Pro + team)
- You have recurring product UI work with visual iteration
- Non-engineers need to see and edit what agents produce
- You already use Cursor/Claude Code and want design outside chat
- Skip if your work is data/backend/docs with no UI surface
How Cursor's built-in share works, what it costs, and what you can do as an individual without the Publish button.
Publish uploads a live snapshot of the rendered canvas and returns a URL teammates open in the browser — same layout, charts, and tables, without rerunning the agent or digging through chat. Browse team publishes from Shared Canvases on the dashboard.
| Constraint | Detail |
|---|---|
| Free plan | Cannot create shared canvas links |
| Paid plans | Pro, Teams, and Enterprise can publish |
| Team membership | Required — Pro solo without a team cannot share per docs |
| Privacy mode | Legacy Privacy Mode blocks sharing (needs storage-allowed mode) |
| Admin control | Teams/Enterprise admins can disable Shared Canvases org-wide |
| What gets shared | Live snapshot upload — not a live-editing session |
| Recipient access | Browser link; dashboard lists team shares read-only |
| Refresh | Re-publish from toolbar to update the snapshot |
Warning: Publish is not a substitute for git. The URL is a team-visible snapshot hosted by Cursor — not a portable artifact you own. Free accounts and Legacy Privacy Mode users need another path (below).
A canvas is a single React TSX file compiled by the Cursor IDE. It is not a standard npm React app — the cursor/canvas import resolves only inside Cursor's canvas host.
File rules (from Cursor canvas skill):
- Single file per canvas — no helper modules or separate CSS
importonly fromcursor/canvas(Stack, Card, Table, charts, useHostTheme, etc.)- Default export one React component
- All data inline in the file — no
fetch(), no network calls - Filename must end in
.canvas.tsxinside the managedcanvases/directory - Cursor host compiles the file —
cursor/canvasis not a public npm package (open-canvas vendors the runtime for browser preview)
Typical path on disk: ~/.cursor/projects/<workspace>/canvases/<name>.canvas.tsx. Subfolders and other extensions are not picked up by the IDE.
| Method | Renders where? | Notes |
|---|---|---|
Commit .canvas.tsx to git |
In Cursor only | Place file at ~/.cursor/projects/<workspace>/canvases/name.canvas.tsx (no subfolders). Clone repo, open workspace in Cursor. |
GitHub Gist (raw .canvas.tsx) |
In Cursor only (gist UI = source) | Portable source. Recipient copies into Cursor canvases/ or open-canvas canvases/. |
| open-canvas (aculich fork) | Browser — full interactive (self-hosted) | Vite host with vendored SDK. Copy file, register in registry.ts, bun run dev or deploy dist/. |
| Gist + HTML preview proxy | Browser — static read-only | Self-contained .html gist + htmlpreview or gisthost |
Gist + canvas.md |
Gist native markdown | Open gist — static formatted doc |
| Cursor Publish (toolbar) | Browser — interactive snapshot | Best native share. Requires paid plan + team + compatible privacy mode. |
| Ask agent to port content | Anywhere you deploy | Convert to standalone React, HTML, or MDX. Loses cursor/canvas SDK. |
| Screenshot / PDF | Static image | Full-screen browser view helps presentations. Loses interactivity. |
| Regenerate via canvas skill | In Cursor | Share skill + data sources; teammate reruns for fresh data. |
- Copy the
.canvas.tsxinto your project'scanvases/folder - Path must be exactly
…/canvases/foo.canvas.tsx(flat, no subdirs) - Open from chat link, Command Palette → Open Canvas, or Agents Window
- Edit source or prompt agent to iterate
- Works across machines via git clone or gist download
- No public
cursor/canvasnpm package — TSX does not run in CodeSandbox as-is - Static HTML + gist → htmlpreview or gisthost (zero deploy, read-only)
- This gist's
canvas.md— native gist markdown preview (static) - open-canvas — vendored SDK + Vite host; deploy
dist/for full interactive URL - Cursor Publish URL — native share if you have Pro + team + compatible privacy mode
- Port: ask agent to rebuild layout with React + your UI lib + inline data
- Static: screenshot or print full-screen published view
- Semantic: export data as JSON/MD in repo; regenerate canvas from skill
mergd/open-canvas runs .canvas.tsx files in a browser by vendoring the Cursor canvas SDK runtime into a Vite app.
Quick start:
git clone→bun install→bun run dev→ http://localhost:5173- Copy your
.canvas.tsxintoopen-canvas/canvases/ - Add an entry to
canvases/registry.ts bun run build→ deploydist/to Vercel, Netlify, or Cloudflare Pages
Gist? A gist alone does not render the canvas — just the source file. Pair gist + open-canvas: download raw TSX, drop into canvases/, register, deploy.
Limitations: useCanvasAction is a no-op outside Cursor; useCanvasState persists in dev only on static hosts; SDK extracted from Cursor.app.
GitHub Gist renders markdown, notebooks, and geojson natively. For arbitrary React/TSX it shows source only. Two community proxies render a static .html file from a gist:
| Service | Open this export | Pattern |
|---|---|---|
| htmlpreview | Open preview → | htmlpreview.github.io/?<raw-html-url> |
| gisthost | Open preview → | gisthost.github.io/?<gist-id>/<file>.html |
| Gist markdown | Open gist canvas.md tab → |
native — no proxy |
Recipe:
- Export canvas as single self-contained HTML (inline CSS, inline data)
- Create a gist with
.htmland optionallycanvas.md - Share: htmlpreview or gisthost for HTML; gist
canvas.mdtab for markdown
Does not work: raw .canvas.tsx gist; open-canvas dist/ multi-file SPA; HTML with relative asset paths.
- Commit
canvases/my-report.canvas.tsxto a repo - README: "Open in Cursor → place under
~/.cursor/projects/<workspace>/canvases/" - For non-Cursor viewers: deploy open-canvas, or export
canvas.md+ HTML to gist - Optional: package a canvas skill for fresh data regeneration
Sharing docs: canvas docs · shared canvases changelog · dashboard · open-canvas fork · gist + previews
Sources: cursor.com/docs/agent/tools/canvas, cursor.com/blog/canvas, cursor.com/changelog (Apr 15 & Jun 4 2026), magicpath.ai. Part of agent releases research — Jun 2026.