VSCode Extension

The @genart/vscode extension provides an integrated infinite canvas editor inside Visual Studio Code.

Installation

Install from the VSCode marketplace:

Open VSCode
Go to Extensions (Cmd+Shift+X)
Search for "genart"
Click Install

Features

Infinite canvas — visual workspace with multiple sketch artboards
Live preview — selected sketch renders in real-time
MCP sidecar — built-in MCP server for AI-assisted editing
File integration — open .genart and .genart-workspace files directly

Usage

Open a workspace

Use the command palette (Cmd+Shift+P):

genart: Open Workspace

Or open a .genart-workspace file from the Explorer.

Create a new sketch

genart: Create Sketch

Select a renderer type (p5.js, Three.js, GLSL, Canvas 2D, or SVG) and canvas preset.

Available commands

Command	Description
`genart: Open Workspace`	Open a `.genart-workspace` file
`genart: Create Sketch`	Create a new sketch in the workspace
`genart: Open Sketch`	Open a specific `.genart` file
`genart: Save Sketch`	Save the active sketch to disk
`genart: Export Sketch`	Export to HTML, PNG, SVG, or ZIP
`genart: Capture Screenshot`	Render the selected sketch to PNG
`genart: Select Sketch`	Select a sketch on the canvas
`genart: Arrange Sketches`	Auto-layout sketches in a grid
`genart: Toggle Sidebar`	Show/hide the sketch panel
`genart: Open Settings`	Open extension settings

The extension runs a local MCP sidecar server, enabling AI agents to interact with the canvas. When you use Copilot or Claude in VSCode, they can access the same 33 MCP tools to create and modify sketches.

Tips

Only the selected artboard renders live — unselected sketches display static thumbnails for performance
Use Cmd+S to save the active sketch
Drag artboards to reposition them on the canvas

VSCode Extension

On this page