Canonic Workbench v0.5.0

Every screen in your repo, on one canvas.

A VS Code extension for the HTML you design in. List your pages and previews in one file, see each one at a real device width, draw on it, and hand the picture to your agent.

Download for VS CodeTake the tour
Workbench: a screen list on the left with an Auth folder and a Sign in page, and the Acme sign-in page on the canvas at full width.
Tour

Four areas, one window.

Nothing in them comes from your pages. Everything the workbench shows is read from workbench.yaml at the root of your project.

  1. 01

    Screen list

    Laid out like Sketch’s sidebar: the sections in workbench.yaml, such as Pages and Components, listed on top, and the chosen one’s screens and folders below, with search at the bottom. A screen with states lists them underneath it. In VS Code this list sits in the sidebar, where the file tree usually goes.

  2. 02

    Top bar

    The screen and its state on the left, with the other states a click away, then the Actions toggle. Lenses sit in the middle; frame sizes and screen actions on the right. When space runs short, secondary actions move into the More menu.

  3. 03

    Canvas

    The screen itself, live, in a frame of the size you picked. It’s your real page, not a picture of it. Zoom and pan it like a design canvas; the page keeps its real width.

  4. 04

    Markup bar

    Drawing tools and the handoff, floating under the frame. Select is the one way back to using the page.

Toolbar

Every control, in place.

The Actions toggle and the frame and screen controls run across the top of the workbench; the markup tools and the zoom control float over the bottom of the canvas. Point at or tap a control to see what it does.

The Actions toggle, switched off, enlarged.
The frame and screen controls, enlarged: four frame sizes, then Reload, Open the source, Copy reference, Open on its own, and More.
The markup tools from the bar under the canvas, enlarged: Select, Scribble, Arrow, Shapes, Text, Comment, Undo, Clear markup, and Save screenshot.
The zoom control, enlarged: Zoom out, the zoom level, and Zoom in.

Actions

Off by default, so clicking around a screen you’re reviewing doesn’t navigate you out of it. Turn it on to let links navigate and forms submit, and walk the real flow.

All controls

Interaction

Actions
Off by default, so clicking around a screen you’re reviewing doesn’t navigate you out of it. Turn it on to let links navigate and forms submit, and walk the real flow.

Only in some setups

State picker
Beside the screen’s name in the top bar when it has states, or under a Storybook lens, listing the title’s stories. Story picks reuse the loaded preview.
Lens switcher
Design, then each implementation the screen has, when workbench.yaml declares implementations. See Lenses.
Copy handoff
In VS Code only, at the end of the markup bar, beside a count of your marks. See Markup and handoff.

Zoom

Zoom out
Halves the zoom, to the next power of two. ⌘− or Ctrl −.
Zoom level
Opens zoom to fit, zoom to 100%, 50%, and 200%.
Zoom in
Doubles the zoom, to the next power of two. ⌘+ or Ctrl +.

As in Figma: ⌘ or Ctrl with the scroll wheel, or a pinch, zooms at the pointer. Scroll to pan, or hold Space and drag. ⌘0 or ⇧0 zooms to 100%; ⇧1 zooms to fit. A new frame size fits itself to the window until you zoom or pan.

Markup

Select
Use the page, and pick or move marks. Esc returns here from any drawing tool.
Scribble
Freehand drawing.
Arrow
Point at something.
Shapes
Rectangle by default. The small arrow beside it switches to a line or a circle.
Text
A label placed on the screen.
Comment
A pinned note, for feedback that needs more than a word.
Undo
Removes the last mark. ⌘Z or Ctrl Z.
Clear markup
Removes every mark on the screen.
Save screenshot
Downloads a JPEG of the screen with your marks on it.

Frame and screen

Fit
The frame fills whatever space the workbench has.
Laptop
1512 × 982, a 14-inch MacBook Pro. The canvas zooms out to show all of it; the page still lays out at its full width.
Mobile
393 × 852, an iPhone 15 Pro.
Resizable
Drag an outside edge or corner to any size. The frame keeps that size until you change it.
Reload
Reloads the screen.
Open the source
Lists the screen’s design file and any implementation code, and opens one in the editor.
Copy reference
Copies a short text reference to the screen, state, and lens, for pasting into a conversation. It doesn’t include a screenshot or your markup.
Open on its own
Opens the screen directly in a browser tab.
More (⋯)
Configure pages: a form for adding and removing sections and pages, editing labels and paths, and choosing each page’s viewports; it rewrites only the sections part of workbench.yaml. Download design-system ZIP: every screen’s files, the sources they depend on, and a reference screenshot at each viewport, in parts of 10 MB or less. When the window is narrow, the controls that don’t fit move here too.
States

A screen is more than one picture.

Sign in has the empty form you land on and the one that comes back with a wrong password. Each state is listed under its screen, the way Storybook lists stories under a component.

Have the page respond to the state. Match CSS on html[data-wb-state="error"], keep an element only in some states with data-wb-state-only="error", or fill in a value with data-wb-set-error="value=…". Your pages need no scripts added.

workbench.yaml
- label: Sign in
  src: pages/sign-in.html
  states:
    - id: default
      label: Default
    - id: error
      label: Wrong password
The Wrong password state of the sign-in page at mobile width: an error message above filled-in fields, with the password field outlined in red.
Markup and handoff

Draw on the live page. Hand it to your agent.

Boxes, arrows, scribbles, and pinned comments sit above the running screen, so you can keep using it with Select. Select a mark to move it, nudge it with the arrow keys, or delete it with Delete.

In VS Code, Copy handoff saves the screenshot to the project’s ignored .canonic/.handoffs/ folder, clears the markup, and copies a written account of every mark to the clipboard. The account says what’s under each mark and which file the screen comes from. Paste it into any agent conversation.

The error state with markup: a red box around the error message, an arrow pointing to it, and a wavy line under the password field.
Lenses

Design and the real build, one click apart.

Declare where the code runs (a Storybook, a dev server, staging, or a booted iOS Simulator) and a lens switcher appears in the toolbar: Design first, then each implementation the screen has. A lens shows it in the same frame, at the same width, under the same marks.

The choice stays as you move between screens, and the address carries it, so a copied link opens the same view. A project can also configure a start command and a readiness check for a Storybook or local server; in a trusted VS Code workspace, Workbench starts it in a terminal only when the check fails.

address
#pages/sign-in.html:error@393~staging
pages/sign-in.htmlthe screen’s design file
:errorthe state, left out for the default
@393the frame: a device width, fit, or a resizable size
~stagingthe lens, left out for the design
Setup

One file is the whole integration.

No copy of the tool in your project, and no scripts added to your pages. Workbench only turns on in a folder with a workbench.yaml. Delete that file and nothing else remains in your project.

workbench.yaml
name: Acme

sections:
  - name: Pages
    icon: file-text
    items:
      - label: Sign in
        src: pages/sign-in.html
Install · v0.5.0

Get Canonic Workbench.

One .vsix file per platform. Choose the one that matches your computer.

All files on GitHub →
Mac with Apple silicon (M1 and later)canonic-workbench-darwin-arm64.vsixMac with Intelcanonic-workbench-darwin-x64.vsixWindowscanonic-workbench-win32-x64.vsixWindows on Armcanonic-workbench-win32-arm64.vsixLinuxcanonic-workbench-linux-x64.vsixLinux on Armcanonic-workbench-linux-arm64.vsix
  1. 01Install the .vsix

    In VS Code, open the Extensions view, click ⋯, and choose Install from VSIX…. Or run:

    code --install-extension <file>.vsix
  2. 02Reload VS Code

    Run Developer: Reload Window from the Command Palette.

  3. 03Add workbench.yaml

    Create it at the root of your project, like the example above.

  4. 04Open the canvas

    Workbench appears in the activity bar, and opens the canvas.