The canvas

Properties & tokens

The Properties inspector — which appears at the top-right of the canvas whenever something is selected — shows editable fields for the selected element: variant, size, colour, copy. Tokens are the named design values (colours, spacing, font sizes) that those editors quick-pick from, so designers stay on-system without typing hex codes.

What the inspector does

Click any element on the canvas and the inspector appears and fills in. Each field is a real prop on the component you've selected:

  • Dropdowns for enum-like props (variant: solid / ghost, size: sm / md / lg) — the options come from your design system, so a designer never has to guess what values are legal.
  • Text and number inputs for free-form values like copy and counts.
  • Checkboxes for boolean flags like disabled or required.
  • Colour pickers paired with a token dropdown so you can either pick a one-off colour or snap to a design-system token.
  • Icon pickers for components that take an icon prop — visual grid, no remembering icon names.
properties-panel-editors.png

Editing any field rewrites the JSX to match — the canvas re-renders, and the change is visible in seconds.

Tokens — the shared design vocabulary

Tokens are the named values your design system uses instead of raw CSS. Colours, spacing, font sizes, breakpoints — each one has a name (brand, md, lg) and a value (#3245ff, 16px). When a designer picks a colour from the token dropdown, the prototype gets the token name; if the value behind it changes upstream (a brand refresh, a spacing-scale tweak), every state in every project picks up the new value automatically.

color-picker-token-dropdown.png

Tokens show up in two places: as quick-pick options on the matching prop editors in the Properties inspector, and as CSS custom properties available to your JSX so elements can reach them via var(--color-brand).

Dark mode just works

If your design system declares dark-mode overrides for its colours, the canvas theme toggle (see Devices, themes & zoom) swaps the values in place — designers don't need to maintain a parallel set of states. Non-colour tokens (spacing, font sizes, breakpoints) are shared across modes, since those rarely change between light and dark.

Responsive props

Props that can take different values at different screen widths render in the panel as a tab strip — one tab per breakpoint. Set the value for the size you care about; the other breakpoints inherit unless you override them.

responsive-props-tabs.png

Useful for layout components (Stack's direction, Grid's columns) where the structure changes between mobile and desktop without the rest of the markup needing to change.

Appearance and Layout groups

On components with many props, the panel groups them into collapsible sections — typically Appearance (variant, size, colour) and Layout (margin, padding, alignment), with the most-used group expanded by default. Keeps the panel scannable instead of a wall of fields.

How the panel knows what to render

The Properties inspector renders an editor for every prop declared on the selected component in its design-system YAML entry. For a Button defined as:

components:
  - label: Button
    tagName: Button
    props:
      - name: variant
        type: string
        label: Variant
        options:
          - { label: Solid, value: solid }
          - { label: Ghost, value: ghost }
      - name: size
        type: string
        label: Size
        options:
          - { label: Small, value: sm }
          - { label: Default, value: default }
          - { label: Large, value: lg }
      - name: disabled
        type: boolean

the panel shows a Variant dropdown, a Size dropdown, and a Disabled checkbox. Editing any of them rewrites the JSX to match.

Editor types

  • string — text input, or dropdown if options are declared.
  • number — numeric input.
  • boolean — checkbox.
  • expression — free-form JSX expression, used for onClick and other callback-style props.
  • color — native colour picker paired with the design system's colors token dropdown.
  • token — paired with a tokenKind field (spacing, fontSize, etc.), shows the matching token category as a dropdown.
  • icon — paired with an iconSource (a scope namespace), shows a visual icon picker.

Token YAML

Tokens are declared in the design system's YAML under tokens. Every token category is a flat Record<string, string>; the token name maps to a raw CSS value.

tokens:
  colors:
    brand: "#3245ff"
    ink: "#121316"
  spacing:
    xs: "4px"
    sm: "8px"
    md: "16px"

Every token is emitted as a CSS custom property in the preview iframe so JSX can reach it via var(...). The naming convention preserves source-key casing: colors.brand becomes --color-brand, colors.textFaint becomes --color-textFaint (case-sensitive — not lowercased), and fontSizes.body becomes --font-size-body. Worth knowing when you're writing JSX that targets a specific token from the outside.

Dark-mode overrides

A colorsDark block provides per-mode overrides for the colors category. When the canvas theme toggle is set to dark, the resolver emits the dark values in place of the light ones. The rest of the token categories are shared across modes.

tokens:
  colors:
    brand: "#3245ff"
    ink: "#121316"
  colorsDark:
    brand: "#7a8fff"
    ink: "#efe9dc"

Responsive props

A prop declared with responsive: true renders in the Properties inspector as a tab strip keyed by breakpoint. Single-value entries serialise as scalars; multi-value entries serialise as object literals keyed by the breakpoint name.

# Single value — just one breakpoint in use
<Stack direction="row" />

# Multi-value — different at each breakpoint
<Stack direction={{ base: "column", md: "row" }} />

Breakpoint names come from the breakpoints token category.

Prop groups

Props can be grouped by setting the YAML group field. The Properties inspector renders each group as a collapsible section. Props without a group appear under a default section.

Full schema

Every prop and token field is described in full in the YAML reference.