Puck AI beta
Read docs
API ReferenceThemingCanvas

Canvas

Use the following CSS properties for theming the canvas.

.Container {
  --puck-canvas-color-bg: #f4f4f8;
  --puck-canvas-preview-color-bg: #ffffff;
}

CSS properties

Defaults shown as var(--puck-...) reference global tokens. See computed values for the values they resolve to.

TokenDefaultDescription
--puck-canvas-color-textvar(--puck-color-text)Canvas text color
--puck-canvas-color-bgvar(--puck-color-surface-muted)Canvas frame (gutter) background
--puck-canvas-preview-color-bgvar(--puck-color-surface)Background behind the page preview