VS Code extension for .canvas.json design files created with CanvasKit.
Features
Live Preview - Open a live preview of your .canvas.json file with hot reload
Node Tree Explorer - Browse the node tree structure in the sidebar
Bidirectional Selection - Click a node in the tree to highlight it in the preview, and vice versa
Color Decorations - Inline color swatches for hex colors and token references in the editor
Prerequisites
Install the CanvasKit CLI:
npm install -g @tekalu1/canvaskit
Usage
Open a .canvas.json file in VS Code
Click the preview icon in the editor title bar, or run CanvasKit: Open Preview to Side from the command palette
Use the CanvasKit panel in the activity bar to browse the node tree
Commands
Command
Description
CanvasKit: Open Preview
Open preview in the current editor
CanvasKit: Open Preview to Side
Open preview in a side panel
CanvasKit: Refresh Node Tree
Refresh the node tree view
Settings
Setting
Default
Description
canvaskit.cliPath
""
Path to the canvaskit CLI. Leave empty for auto-detection.
canvaskit.previewPort
0
Port for the preview server. 0 = auto-assign.
How It Works
The extension launches the CanvasKit CLI preview server (canvaskit preview <file>) and displays the output in a VS Code webview. File changes trigger hot reload via SSE.
