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.

How to open the component canvas

The Component Canvas opens automatically when you create a new, blank component. To open an existing component on the Component Canvas:

From the components panel

1. Open the Components panel
2. Hover over the component you want to open
3. Click the "open component" icon

From a component instance

1. Select the instance
2. Right-click the instance
3. Click Open component

From in-context editing

1. Double-click the component on the canvas or in the Navigator
2. Click Open component in the green banner at the bottom of the canvas

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

The frame background color inherits from the site Body by default. When designing a transparent component or variant, you may need to change the background color, for example, setting a dark background for a Dark variant. Select the frame to change the background on-canvas or in the Element settings panel.

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

Component structure and props are shared across all frames. Styles edited in the base frame are shared across all frames but styles edited in other frames only apply to that variant. You can use conditionals to show, hide, and change content based on the current variant.

Create and edit AI code components

AI code components are created and edited on the Component Canvas using the AI Assistant. When you create or edit an AI code component, the Component Canvas opens with three areas: a code editor on the left, a frame showing your component in the middle, and the AI Assistant on the right.

To edit the code, you can prompt the AI Assistant to make changes, or edit the code directly in the code editor after generation completes. Changes auto-save.

The code editor is resizable and repositionable. It opens on the left by default, but you can move and resize it to suit your workflow. Click Hide code or View code in the canvas toolbar to toggle the code editor — it keeps its position when you toggle it.

Learn more about building AI code components.

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.