Install · v0.13.1

Install Canonic Workbench

In VS Code, search for Canonic Workbench in the Extensions view, or see it on the Visual Studio Marketplace ↗. For Cursor, Windsurf, and other VS Code forks, install the .vsix for your platform from this page. Then add a workbench.yaml to your project.

All platforms

ComputerFile
Mac with Apple silicon (M1 and later)canonic-workbench-darwin-arm64.vsixDownload
Mac with Intelcanonic-workbench-darwin-x64.vsixDownload
Windowscanonic-workbench-win32-x64.vsixDownload
Windows on Armcanonic-workbench-win32-arm64.vsixDownload
Linuxcanonic-workbench-linux-x64.vsixDownload
Linux on Armcanonic-workbench-linux-arm64.vsixDownload
Release v0.13.1 on GitHub ↗

Install a .vsix

  1. In the Extensions view, click ⋯ and choose Install from VSIX…, or run:

    code --install-extension <file>.vsix

  2. If the editor was already open, run Developer: Reload Window from the Command Palette.

  3. Add a workbench.yaml at the root of your project:

    workbench.yaml
    name: Acme

collections:
  - name: Pages
    icon: file-text
    items:
      - label: Sign in
        src: pages/sign-in.html

  4. The Workbench icon appears in the activity bar. Pick a page there, or run Workbench: Open Canvas, to open the canvas.

Requires VS Code 1.75 or later. The .vsix files are the same builds as the Marketplace’s. They are unsigned; desktop macOS is the most tested platform.

Removing it

Workbench only activates in a folder with a workbench.yaml. To remove it from a project, delete the files listed in Removing Workbench from a project.

Starting servers

With a start command and a readiness check configured, Workbench starts your Storybook or local server in a terminal, in a trusted workspace, when the check fails.

NextRead the docs →