Cursor Canvas: Live Charts and Tables Beside the Chat Cursor shipped Cursor Canvas in version 3.1, letting its agent author standalone .canvas.tsx React files that render interactive dashboards, charts, and tables in a panel beside the chat. Canvases import from the cursor/canvas component library, must inline their data rather than call fetch(), and can be published as read-only browser snapshots for Pro, Teams, and Enterprise users, with free accounts unable to create shares. Cursor Canvas shipped in Cursor 3.1 lets the agent create interactive artifacts that render next to the chat — dashboards, analyses, audits, and reports with sections, stats, and tables you can reopen and iterate on. Official product docs: cursor.com/docs/agent/tools/canvas https://cursor.com/docs/agent/tools/canvas . This post combines that product guide with the authoring conventions agents follow when building .canvas.tsx files with the cursor/canvas component library. %%{init: {"theme": "base", "themeVariables": {"background": "transparent", "lineColor": " 000000"}}}%% graph LR A User question -- B Agent reasoning B -- C{Standalone artifact?} C -- |Yes| D ".canvas.tsx file" C -- |No| E Chat reply / code edit D -- F IDE compiles React F -- G Panel beside chat G -- H Charts · Tables · Tabs classDef agent fill: 8B0000,color: fff classDef hook fill: 189AB4,color: fff classDef decision fill: 444,color: fff class B agent class D hook class C decision What is Cursor Canvas? Per Cursor’s docs https://cursor.com/docs/agent/tools/canvas : canvases are standalone views you can reopen, edit, and iterate on — instead of scrolling through a long markdown table or code block. Under the hood, agents author a single .canvas.tsx React file using first-party components tables, boxes, diagrams, charts . Unlike a chat reply, the canvas persists in your workspace canvas list. How it works official flow 1. Cursor decides your task benefits from a visual or interactive view — or you ask for one directly. 2. Cursor builds the canvas and inserts a reference in your chat. 3. You review the rendered view, switch to source to tweak it, or ask Cursor to change it. 4. Cursor saves the canvas so you can reopen and rerun it later with fresh data. Each canvas appears in your workspace’s canvas list , so you can jump back without rerunning the agent. Opening a canvas - From chat — when Cursor creates a canvas, a card appears at the end of the response. Click it to open. - Command Palette — run Open Canvas , listed under View. - Agents Window — open a canvas tab from the new-tab menu. Canvases live alongside terminal, browser, and source control. Sharing canvases with your team Use Publish from the canvas toolbar to publish or refresh a share, then copy the link. Teammates get a read-only browser snapshot — same layout, charts, and tables — without rerunning the agent. | Rule | Detail | |---|---| | Plans | Pro, Teams, and Enterprise — free accounts cannot create shares | | Team membership | Only team members can open a share link | | Privacy mode | Requires a mode that allows data storage — Legacy Privacy Mode blocks sharing | | Dashboard | Shared Canvases page lists your own publishes only — ask teammates for their link | | Admin control | Team admins can disable shared canvases in team settings | Iterating on a canvas - Layout wrong? Tell Cursor what to change — usually faster than hand-editing. - Numbers stale? Ask Cursor to rerun the underlying query or show its work. - Large rework? Revert and re-prompt with more detail. - Small tweak? Manually edit the source code. Authoring conventions agent skill + SDK - One file only — no helpers, no CSS modules, no npm installs - Import from cursor/canvas — layout, charts, tables, forms, diffs React hooks like useState are re-exported here too - Inline data in the canvas — the canvas runtime must not call fetch ; the agent runs SQL, API, MCP, or shell queries and embeds results when building the file - Theme-aware — colours from useHostTheme , not hard-coded hex - Persistent UI state — useCanvasState stores values in a .canvas.data.json sidecar beside the canvas file A canvas exists when the deliverable is the analysis itself — not a code fix, not a drafted email, not a dashboard in another product. When to use a canvas — and when not to The trigger is user intent, not response length. A long markdown table is still the wrong medium if the user asked for a PR fix. | Use canvas | Skip canvas | |---|---| | Billing or usage investigations with structured findings | “Fix this bug” or “draft a support reply” | | Security audits with categorised findings | Work inside an existing HTML dashboard or repo file | | Cross-system overlap reports MCP query results | MCP queried only as a step toward a different deliverable | | Architecture proposals with comparison tables | User asked for a Datadog dashboard specifically | | Margin decompositions, CTR reports, trend charts | Short factual answers or one-line clarifications | Real examples from production workflows 1. Lyric video visual plan — tabbed canvas with measured gap tables for a Tamil worship song 37s intro, 34s post-bridge vamp . 2. Graphics proposal — Remotion vs Three.js comparison with phased build order. 3. YouTube CTR report — thumbnail performance with BarChart and Stat tiles. Where canvas files live Canvases live in Cursor’s managed project folder — not in your git repo by default . Subfolders and alternate extensions are not detected: ~/.cursor/projects/