APIs - Theme settings

Themes can configure Canvas behavior by creating a {theme}.canvas.yml file in the theme directory. This allows themes to customize Canvas settings without modifying the module code.

Viewport configuration

Themes can define custom viewport sizes for the Canvas editor preview. This is useful when your design system uses specific breakpoints that differ from Canvas defaults.

Configuration file

Create a {theme}.canvas.yml file in your theme’s root directory:

viewports:
  mobile: 468
  tablet: 1024
  desktop: 1920
  large_desktop: 2560

Viewport IDs

The following viewport IDs are supported:

• mobile - Mobile devices (default: 468px)
• tablet - Tablet devices (default: 1024px)
• desktop - Desktop screens (default: 1920px)
• large_desktop - Large desktop screens (default: 2560px)

If a viewport is missing or invalid, Canvas will fall back to the default width for that viewport.

Example

For a theme that uses a custom mobile breakpoint of 375px and a desktop breakpoint of 1440px:

viewports:
  mobile: 375
  desktop: 1440