Canvas Design

A VS Code extension for visually editing JSON Canvas files alongside your code. Sketch layouts, connect ideas, and keep design references in your repository. The same readable .canvas file can be edited visually, as JSON, or by a coding agent.

Early MVP. See the current feature set and limitations below.

Features

• Text, rectangles, ellipses, groups, and connections, with drag, resize, and property editing.
• HTML fragment cards with scoped CSS, stored as standard text nodes with a fallback for other Canvas readers.
• Local images and nested Canvas references. PNG transparency and referenced canvases display without an extra background, border, or rounded corners.
• Drag files from VS Code Explorer onto the canvas, or right-click files and choose Canvas Design: Add to Current Canvas. Multiple files can be inserted together.
• An Outliner for layers and groups, and a Details inspector. Hide either panel and restore it from its corner icon.
• Click a fill or stroke color circle in Details to open muted presets, a transparent option, and RGBA controls (RGB 0–255, alpha 0–1).
• VS Code save, undo, redo, and JSON source editing, with previews that refresh after external edits.
• Trackpad navigation and support for light, dark, and high-contrast editor themes.
• Full-canvas PNG export, plus a terminal script that lets AI agents request the editor's rendering.
• Copy a node's project-relative Canvas path and stable ID from its right-click menu to share with AI agents.

Try the example dashboard, or start with an empty canvas. The HTML card example shows an editable fragment and its CSS.

Install

Requires VS Code 1.95+. Install Canvas Design from the Visual Studio Marketplace, or search for @id:EvenSo.canvas-design in VS Code's Extensions view.

code --install-extension EvenSo.canvas-design

Then open a project folder and run Canvas Design: Create Canvas, or open an existing .canvas file. If you have a downloaded VSIX, use Extensions: Install from VSIX….

Usage

Open a .canvas file, or run Canvas Design: Create Canvas. If it opens as text, use Reopen Editor With… → Canvas Design.

• Choose a tool, then click or drag to draw. Select an object to move, resize, or edit its properties. Double-click text to edit it.
• Choose <> HTML fragment (U), then click or drag to create an HTML card. Edit HTML, CSS, and Fallback text in Details; changes apply when you leave a field. Double-click an HTML card to focus its HTML editor.
• In connection mode, drag between node handles to connect objects.
• Drag items in Outliner to reorder layers or move them into groups. Higher layers appear in front. Moving or deleting a group also affects its descendants.
• Use the image and Canvas buttons to insert local references. Double-click a referenced canvas to edit it. References must stay within the current canvas directory or an open workspace.
• With a Canvas open in visual preview, drop .md, .png, .canvas, or other local files from Explorer onto the canvas. Nodes start at the drop position. Alternatively, right-click one or more files and choose Canvas Design: Add to Current Canvas to place them at the visible canvas center. Each batch undoes as one edit; files remain references rather than copies. Markdown and other documents appear as reference cards you can double-click to open.
• Collapse either sidebar with its heading arrow; use the top-left or top-right icon to restore it.
• Drag a numeric value in Details left or right to adjust it with a live preview. Click to type a value, or press Escape during a drag to cancel.
• Use the </> button or Canvas Design: Open JSON Source to edit the source directly.
• Right-click a node and choose Copy Node Path to copy a reference such as design/home.canvas#node=hero-title. Paste it into your AI prompt: the file path starts at the containing workspace root, and #node= identifies the entry in the Canvas's nodes array by its id, even after reordering or regrouping. IDs are percent-encoded; decode the part after #node= before matching. Without a containing workspace folder, the copied file path is absolute. For a node inside a nested Canvas preview, double-click to open that Canvas first.
• Click Export PNG at the bottom right, or run Canvas Design: Export Screenshot, to save the full canvas with its images and nested previews.

Limitations

Text is plain text; Markdown rendering is not supported. Images fit within their bounds without cropping. Nested previews expand up to four levels; file subpath values are preserved but not expanded. Automatic layout, component overrides, collaboration, and frontend code export are not available yet.

HTML cards support static HTML elements, inline styles, <style> blocks, and scoped CSS, including media queries. Scripts, event handlers, navigation, embedded documents, SVG, images, external resources, CSS imports, and custom fonts are filtered out. Controls are display-only. Unsupported markup is preserved in the file but omitted from previews. Other Canvas readers show the fallback text; they may discard application extensions when saving.

Screenshots for AI agents

Install Canvas Design and open any local project in VS Code. Right-click its .canvas file and choose Canvas Design: Copy AI Screenshot Command, or run that command from the palette. Paste the command into a terminal or give it to your AI agent. It includes the installed script, Canvas, and workspace paths, and works from any directory (macOS/Linux shells, or PowerShell on Windows).

An agent can also locate the installed script automatically with the VS Code code CLI. From the project folder on macOS/Linux:

node "$(code --locate-extension EvenSo.canvas-design)/scripts/capture-canvas.mjs" ./design.canvas

The screenshot script is included in the VSIX; the target project does not need this repository or a script copy. Keep its workspace open in VS Code. --workspace must match an open folder; omit it when the current directory is that folder. The command waits for rendering and prints JSON containing the PNG path, pixel dimensions, and document version. The agent can then open that image. PNGs are kept in the workspace's .canvas-design/screenshots/ directory.

Screenshots contain the full canvas without editor controls, at up to 2× resolution (limited to 4096 pixels per side and 16 megapixels). See automation details for the local request protocol and VS Code command API.

Development and contributions

Building requires Node.js 22+ and pnpm 10+. Clone this repository, run pnpm install --frozen-lockfile, and press F5 in VS Code with Run Canvas Design selected. Open prototype.canvas in the development window. After changes, run pnpm build and reload that window, or use pnpm watch while developing.

Run pnpm check before submitting a change. pnpm test:integration also checks the extension in a real desktop VS Code window. Architecture and file-format notes are in docs/design.md.

For each Marketplace release, follow the release SOP.

Bug reports and focused pull requests are welcome. Include reproduction steps and a small .canvas example for bugs; add screenshots for UI changes.

License

MIT. Built with React and React Flow. Bundled dependencies use MIT, ISC, and BSD-3-Clause licenses; their copyright and license texts are preserved in THIRD_PARTY_NOTICES.txt and included in the VSIX.