Component canvas

Design and manage each component with variants side-by-side on the Component Canvas

The Component Canvas is a dedicated space for designing and managing components with multiple contexts visible side-by-side for instant visibility into cascading changes across structure, styles, interactions, and more. On the Component Canvas, you can:

• Design and manage each component, with a unified view of all variants
• Edit multiple variants side-by-side with instant visibility into cascading changes
• Stay oriented with automatically organized and intuitive canvas controls for pan and zoom.

Changes made on the Component Canvas affect every instance of that component across your site.

Component Canvas terminology

Main component: The component definition, including structure, styles, and configurability. Changes to the main component impact every instance of that component.

Component instance: An individual references to a main component. Each instance can have unique content and settings via props and slots, but structure and styles can only be edited on the main component.

Variant: You can create variants of a component with different layouts, colors, font styles etc. (e.g., solid or outline buttons, or horizontal and vertical card layouts) and choose which which variant to use on each instance of your component across your site.

Frame: A container for each variant on the Component Canvas.

How the Component Canvas works

How frames work

Each frame on the Component Canvas displays a component variant. By default, the base variant is the first frame, but variants can be reordered. Frames are organized automatically in a fixed vertical or horizontal layout and match the order of variant creation.

Frame size and background inherit from the base variant and base breakpoint (desktop) by default, but you can override them on any frame.

Changing frame orientation

1. Go to the Canvas settings panel
2. Change the orientation

Frame sizing

Width:

• Fit — Frames shrink to the content width. This is great for small inline components like buttons.
• Full — Frames stretch to the breakpoint width. This is great for large page-level components like sections.
• Fixed — Set the width manually. This is great for components that resize based on their context, like cards.

Height:

• Fit — Recommended for most use cases
• Fixed — Set height manually.

Frame background color

We recommend changing the frame background color when designing transparent components or if you need a different background color on a dark and light variant. The background color inherits from the site Body by default.

How to adjust frame settings

To change frame settings (e.g., width, height, background color), click the frame and use the Frame panel to input values. Note that frame width will default to certain values depending on the breakpoint on which your designing. Frame settings only apply to the frame not the component styles.

You can also resize frames by dragging the on-canvas resize handle.

Creating and editing components

When a frame is selected, you can adjust component settings and props which will apply to the base variant (and all other variants). You can also change styles on elements in a specific frame, which will only apply to that frame’s variant (unless you are editing the base variant).

Learn how to edit component settings and props.

Using custom styles on the Component Canvas

Many frameworks — like Client First and Lumos — include a “global styles” component with custom CSS meant for every page. To include these custom styles on the Component Canvas:

1. Go to the Settings panel
2. Click Global style components
3. Search for your component
4. Click the “add” icon

Most global style components will be detected automatically. This is only necessary if you notice your custom styles are not working on the Component Canvas.