Page component

Reusable page components referenced from pages via PageComponentBlock.

Field-level catalog tables below stay in English — they match the machine design schema used by the editor, API, and MCP.

Notes

• Nested PageComponentBlock is not allowed inside page components.

Shared concepts

Decoration & visibility (BlockShell)

Most blocks share one reusable shell: visibility rules and decoration live on the same prop set, not as separate block types. Blocks that use BlockShell list these fields at the end of their Fields section. Visibility controls who/where the block appears (breakpoints, locales, auth, route lock, roles). Decoration controls spacing, background, border, shadow, motion, and related chrome around the block content.

Fields

Visibility

showOnBreakpoints

Per-breakpoint visibility. Set a breakpoint to false to hide the block on that viewport. Missing keys default to visible.

showOnBreakpoints: { mobile: false }

showOnLocales

Limit which website locales show the block. Empty / missing means all enabled locales. Set a locale to false to hide.

showOnLocales: { tr: false }

authVisibility

Who can see the block based on website sign-in state.

Options: all, authenticated, anonymous

authVisibility: "authenticated"

routeLockVisibility

On locked object routes, show always, only when unlocked, or only when locked.

Options: all, when_unlocked, when_locked

routeLockVisibility: "all"

roleVisibility

Optional list of website user role labels. Empty means all roles. Matching is case-sensitive.

roleVisibility: ["moderator"]

entryActionVisibility

Object-component only: show when the current entry exposes matching actions.

Options: all, canUpdate, canDelete

entryActionVisibility: "all"

queryPageVisibility

Optional: limit list blocks to the first query page only.

Options: all, first_page_only

queryPageVisibility: "all"

Spacing & sizing

customizeEnabled

Enables the decoration controls below in the editor.

customizeEnabled: true

paddingEnabled

Turns padding controls on for this block.

paddingEnabled: true

padding

Unit: token

Theme spacing token applied as padding. Tokens let site owners customize spacing while blocks continue to share a consistent design language.

Options: none, xs, sm, md, lg, xl

padding: "md"

paddingByBreakpoint

Unit: token

Theme spacing token per breakpoint. Use this when the block needs different, but still theme-consistent, spacing at different viewport sizes.

paddingByBreakpoint: { desktop: "md", mobile: "sm" }

marginsEnabled

Turns margin controls on (configured via size/position maps).

marginsEnabled: false

sizeByBreakpoint

Optional width/height constraints per breakpoint. Modes: fillParent (stretch), fitContent (intrinsic), static (fixed length via widthStatic/heightStatic + unit), ratio (percent of the other axis via widthRatio/heightRatio).

static uses widthStaticUnit / heightStaticUnit: px, vw, vh, vmin, or vmax (default px). Example full-page background: widthStatic: 100, widthStaticUnit: "vw", heightStatic: 100, heightStaticUnit: "vh" with fixed positioning and pointerEvents: "none". ratio values are percentages of the opposite axis. fillParent and fitContent take no numeric unit.

sizeByBreakpoint: {
  desktop: {
    widthMode: "static",
    widthStatic: 100,
    widthStaticUnit: "vw",
    heightMode: "static",
    heightStatic: 100,
    heightStaticUnit: "vh"
  }
}

overflow

CSS overflow on the decoration frame.

Options: visible, hidden, auto, clip

overflow: "hidden"

pointerEvents

Whether the decoration frame receives pointer events. Use none for full-page decorative backgrounds so clicks pass through.

Options: auto, none

pointerEvents: "auto"

Position

positionEnabled

Enables absolute/relative positioning overlays.

positionEnabled: false

positionByBreakpoint

Positioning overlays per breakpoint (static, relative, absolute, fixed, sticky) with optional offsets in pixels (top, right, bottom, left).

positionByBreakpoint: {
  desktop: { position: "relative", top: 0, left: 0 }
}

Background

backgroundEnabled

Enables background fill, gradient, or image.

backgroundEnabled: true

backgroundWidth

Background span: page column or full viewport bleed.

Options: page, full

backgroundWidth: "page"

backgroundKind

Solid color, gradient, image, muted autoplay video, or canvas animation (particles / reactive grid).

Options: solid, gradient, image, video, animation

backgroundKind: "solid"

backgroundColorLight

Solid background color in light theme.

backgroundColorLight: "#ffffff"

backgroundColorDark

Solid background color in dark theme.

backgroundColorDark: "#111827"

gradientType

Linear, radial, or conic gradient when backgroundKind is gradient.

Options: linear, radial, conic

gradientType: "linear"

gradientAngle

Unit: deg

Linear gradient direction or conic start angle in degrees when backgroundKind is gradient.

gradientAngle: 135

gradientColors

Gradient stops with light/dark pairs and segment offsets (CSS % is the running sum).

gradientColors: [
  { light: "#2563eb", dark: "#1e3a8a", offset: 20 },
  { light: "#93c5fd", dark: "#1e40af", offset: 80 }
]

backgroundImageSrc

Background image source when backgroundKind is image.

backgroundImageSrc: "https://cdn.example/bg.jpg"

backgroundImageMode

How the background image is sized.

Options: cover, contain, repeat

backgroundImageMode: "cover"

backgroundRepeatSize

Unit: px

Tile size in pixels when background image mode is repeat.

backgroundRepeatSize: 64

backgroundPosition

CSS background-position value.

backgroundPosition: "center"

backgroundMotionEnabled

Seamless pan (and optional rotate) for image backgrounds.

backgroundMotionEnabled: true

backgroundMotionDirectionDeg

Unit: deg

Pan direction in degrees (0 = right).

backgroundMotionDirectionDeg: 0

backgroundMotionSpeed

Relative pan speed for seamless cycling.

backgroundMotionSpeed: 20

backgroundMotionRotateDegPerSec

Unit: deg

Continuous rotation speed in degrees per second (0 = off).

backgroundMotionRotateDegPerSec: 0

backgroundVideoSrc

Video URL when backgroundKind is video. Always muted, autoplay, plays inline; never captures focus.

backgroundVideoSrc: "https://cdn.example/bg.mp4"

backgroundVideoFit

cover / fill use object-fit; repeat tiles frames on canvas.

Options: cover, fill, repeat

backgroundVideoFit: "cover"

backgroundVideoLoop

Loop the background video (default true).

backgroundVideoLoop: true

backgroundAnimationMode

Particle field or reactive grid (filled cells or continuous outlines) when backgroundKind is animation.

Options: particle, reactiveGrid

backgroundAnimationMode: "particle"

backgroundAnimShape

Built-in shape or custom SVG for particles/grid cells.

Options: circle, square, roundedSquare, triangle, diamond, hexagon, star, cross, svg

backgroundAnimShape: "circle"

backgroundAnimSvgSrc

SVG URL when shape is svg.

backgroundAnimSvgSrc: "https://cdn.example/shape.svg"

backgroundAnimColorMode

solid tints shapes; fromAsset keeps SVG colors.

Options: solid, fromAsset

backgroundAnimColorMode: "solid"

backgroundAnimSize

Unit: px

Base particle or cell size in pixels.

backgroundAnimSize: 12

backgroundAnimJitter

Particle-only 0–1 randomization for count, size, lifetime, and speed.

backgroundAnimJitter: 0.2

backgroundGridStyle

Reactive grid rendering: filled cells, or continuous shape outlines tiled edge-to-edge into one connected lattice that ripples around the cursor. Ignored for svg shapes, which always render as cells.

Options: cells, continuous

backgroundGridStyle: "cells"

backgroundGridHoverGrowLimitPct

Unit: %

Maximum cell size change at the pointer. Positive values grow cells; negative values shrink them. A value of 50 reaches 150% scale after the configured reaction time.

backgroundGridHoverGrowLimitPct: 50

backgroundGridHoverRotateLimitDeg

Unit: deg

Maximum cell rotation at the pointer. Positive values rotate clockwise; negative values rotate counterclockwise.

backgroundGridHoverRotateLimitDeg: 0

backgroundGridReactionTimeSec

Unit: s

Seconds for cells or the continuous-grid ripple to reach their configured hover limit, and to return after the pointer leaves.

backgroundGridReactionTimeSec: 1

Border

borderEnabled

Enables border color, style, width, and radius.

borderEnabled: false

borderColorLight

Border color in light theme.

borderColorLight: "#e5e7eb"

borderColorDark

Border color in dark theme.

borderColorDark: "#374151"

borderStyle

CSS border style.

Options: solid, dashed, dotted

borderStyle: "solid"

borderWidth

Unit: token

Border width token.

Options: none, sm, md, lg

borderWidth: "sm"

borderRadius

Unit: token

Border radius token.

Options: none, sm, md, lg, xl, full

borderRadius: "md"

Shadow

shadowEnabled

Enables box shadow values for light/dark themes.

shadowEnabled: false

shadowValueLight

CSS box-shadow value in light theme.

shadowValueLight: "0 8px 24px rgba(0, 0, 0, 0.12)"

shadowValueDark

CSS box-shadow value in dark theme.

shadowValueDark: "0 8px 24px rgba(0, 0, 0, 0.45)"

Motion & transform

scrollAnimationEnabled

Enables enter-on-scroll animation.

scrollAnimationEnabled: false

scrollAnimationType

Enter-on-scroll animation preset.

Options: fadeIn, slideInBottom, slideInTop, slideInLeft, slideInRight, zoomIn, zoomOut, rotateIn, rotateOut, bounceIn, bounceOut, pulse

scrollAnimationType: "fadeIn"

scrollAnimationDuration

Unit: ms

Animation duration in milliseconds.

scrollAnimationDuration: 600

scrollAnimationDelay

Unit: ms

Animation delay in milliseconds.

scrollAnimationDelay: 0

cursorTiltEnabled

Tilts the block slightly toward the pointer.

cursorTiltEnabled: false

cursorTiltIntensity

Strength of the cursor tilt effect.

cursorTiltIntensity: 8

transformEnabled

Enables CSS transform controls.

transformEnabled: false

transformRotateX

Unit: deg

Rotation around the X axis in degrees.

transformRotateX: 0

transformRotateY

Unit: deg

Rotation around the Y axis in degrees.

transformRotateY: 0

transformRotateZ

Unit: deg

Rotation around the Z axis in degrees.

transformRotateZ: 0

transformTranslateX

Unit: px

Horizontal translation in pixels.

transformTranslateX: 0

transformTranslateY

Unit: px

Vertical translation in pixels.

transformTranslateY: 0

transformTranslateZ

Unit: px

Depth translation in pixels.

transformTranslateZ: 0

transformScale

Unit: ratio

Uniform scale factor (unitless).

transformScale: 1

transformPerspective

Unit: px

CSS perspective distance in pixels.

transformPerspective: 800

Advanced

decorationBySelector

Advanced: apply decoration token overlays for hover, active, and focus. Missing overlay keys inherit the default flat props.

decorationBySelector: {
  hover: { backgroundColorLight: "#f3f4f6" }
}

clipboard

Editor-only control — does not persist its own value.

Editor-only copy/paste helpers for block props.

// Editor-only — does not persist a stored value

Examples

Hide on mobile

{
  "showOnBreakpoints": {
    "mobile": false
  }
}

Signed-in only + light padding

{
  "authVisibility": "authenticated",
  "customizeEnabled": true,
  "paddingEnabled": true,
  "padding": "md"
}

Rich text

Storage

Rich text props are TipTap HTML strings, not slots and not a separate html key. Example: content: "<p>Hello <strong>world</strong></p>". Empty content is typically an empty string or a minimal empty paragraph from the editor.

Editor features

The shared TipTap stack (admin Puck + public forms) includes:

• Headings levels 1–6
• Bold, italic, strike, and related StarterKit marks/nodes (paragraphs, lists, blockquotes, hard breaks)
• Links (insert/edit/remove via the toolbar modal)
• Text color, font family, and font size (px) — inline spans, so any selection can differ
• Tables (insert/add/remove rows and columns)
• Images from the file library (base64 embeds are not allowed)
• YouTube embeds and Google Maps embeds Some surfaces (e.g. lifecycle email bodies) add extra extensions such as field-binding chips; those only appear where that editor enables them.

Public render

Published HTML is rendered with the shared .rich-text styles (and related puck rich-text CSS) so headings, lists, tables, and embeds match the editor. Theme typography and colors still come from the website theme where CSS variables apply.

Where rich text appears

• RichTextBlock — content HTML body on pages and chrome
• ButtonBlock / ButtonLink — text label as HTML (often a short paragraph)
• ObjectBoundRichText — binds an object schema richText field into the page
• Object schema type richText and admin/public SharedRichTextField forms use the same extension stack

Authoring & MCP guidance

• Keep first-viewport copy short; put long articles in object fields and bind them with ObjectBoundRichText.
• Always write the HTML into the documented prop (content, text, or overlay) — do not invent an html prop.
• Locale overlays localize these HTML strings like other localizable props; the modal Name field is not rich text and is not localized.
• Prefer semantic HTML TipTap already emits (<p>, <h2>, <ul>, <a href="…">, tables) over hand-authored markup that the schema does not round-trip.
• When documenting or generating JSON, treat the value as a string of HTML, never as a nested slot array.

Examples

Short paragraph

{
  "content": "<p>Browse categories and start a conversation.</p>"
}

Heading + list

{
  "content": "<h2>What you get</h2><ul><li>Fast setup</li><li>Multi-locale publishing</li></ul>"
}

Categories

Layout

• DecorationBlock
• LineBlock
• RowBlock
• GridBlock
• FlowBlock
• SlotSliderBlock
• VerticalSpacer
• Flyout
• ModalBlock

Objects

• ObjectDisplayBlock

Content

• HeadingBlock
• RichTextBlock
• AccordionBlock
• SingleAccordion
• CombinationLock
• AuthRoleRedirect

Media

• SingleImage
• MultipleImages

Links

• LinkListBlock
• ButtonBlock
• LinkWrapper
• ButtonWrapper

Embeds

• YoutubeEmbed
• GoogleMapsEmbed

Root fields

Content

title

Title or heading text shown to visitors.

title: "FAQ"

Blocks

DecorationBlock

Decoration

Fields

Content

content

Main content payload. Shape depends on the block: nested slot blocks, rich-text HTML, or body copy.

content: []

Visibility

showOnBreakpoints

Per-breakpoint visibility. Set a breakpoint to false to hide the block on that viewport. Missing keys default to visible.

showOnBreakpoints: { mobile: false }

showOnLocales

Limit which website locales show the block. Empty / missing means all enabled locales. Set a locale to false to hide.

showOnLocales: { tr: false }

authVisibility

Who can see the block based on website sign-in state.

Options: all, authenticated, anonymous

authVisibility: "authenticated"

routeLockVisibility

On locked object routes, show always, only when unlocked, or only when locked.

Options: all, when_unlocked, when_locked

routeLockVisibility: "all"

roleVisibility

Optional list of website user role labels. Empty means all roles. Matching is case-sensitive.

roleVisibility: ["moderator"]

entryActionVisibility

Object-component only: show when the current entry exposes matching actions.

Options: all, canUpdate, canDelete

entryActionVisibility: "all"

queryPageVisibility

Optional: limit list blocks to the first query page only.

Options: all, first_page_only

queryPageVisibility: "all"

Spacing & sizing

customizeEnabled

Enables the decoration controls below in the editor.

customizeEnabled: true

paddingEnabled

Turns padding controls on for this block.

paddingEnabled: true

padding

Unit: token

Theme spacing token applied as padding. Tokens let site owners customize spacing while blocks continue to share a consistent design language.

Options: none, xs, sm, md, lg, xl

padding: "md"

paddingByBreakpoint

Unit: token

Theme spacing token per breakpoint. Use this when the block needs different, but still theme-consistent, spacing at different viewport sizes.

paddingByBreakpoint: { desktop: "md", mobile: "sm" }

marginsEnabled

Turns margin controls on (configured via size/position maps).

marginsEnabled: false

sizeByBreakpoint

Optional width/height constraints per breakpoint. Modes: fillParent (stretch), fitContent (intrinsic), static (fixed length via widthStatic/heightStatic + unit), ratio (percent of the other axis via widthRatio/heightRatio).

static uses widthStaticUnit / heightStaticUnit: px, vw, vh, vmin, or vmax (default px). Example full-page background: widthStatic: 100, widthStaticUnit: "vw", heightStatic: 100, heightStaticUnit: "vh" with fixed positioning and pointerEvents: "none". ratio values are percentages of the opposite axis. fillParent and fitContent take no numeric unit.

sizeByBreakpoint: {
  desktop: {
    widthMode: "static",
    widthStatic: 100,
    widthStaticUnit: "vw",
    heightMode: "static",
    heightStatic: 100,
    heightStaticUnit: "vh"
  }
}

overflow

CSS overflow on the decoration frame.

Options: visible, hidden, auto, clip

overflow: "hidden"

pointerEvents

Whether the decoration frame receives pointer events. Use none for full-page decorative backgrounds so clicks pass through.

Options: auto, none

pointerEvents: "auto"

Position

positionEnabled

Enables absolute/relative positioning overlays.

positionEnabled: false

positionByBreakpoint

Positioning overlays per breakpoint (static, relative, absolute, fixed, sticky) with optional offsets in pixels (top, right, bottom, left).

positionByBreakpoint: {
  desktop: { position: "relative", top: 0, left: 0 }
}

Background

backgroundEnabled

Enables background fill, gradient, or image.

backgroundEnabled: true

backgroundWidth

Background span: page column or full viewport bleed.

Options: page, full

backgroundWidth: "page"

backgroundKind

Solid color, gradient, image, muted autoplay video, or canvas animation (particles / reactive grid).

Options: solid, gradient, image, video, animation

backgroundKind: "solid"

backgroundColorLight

Solid background color in light theme.

backgroundColorLight: "#ffffff"

backgroundColorDark

Solid background color in dark theme.

backgroundColorDark: "#111827"

gradientType

Linear, radial, or conic gradient when backgroundKind is gradient.

Options: linear, radial, conic

gradientType: "linear"

gradientAngle

Unit: deg

Linear gradient direction or conic start angle in degrees when backgroundKind is gradient.

gradientAngle: 135

gradientColors

Gradient stops with light/dark pairs and segment offsets (CSS % is the running sum).

gradientColors: [
  { light: "#2563eb", dark: "#1e3a8a", offset: 20 },
  { light: "#93c5fd", dark: "#1e40af", offset: 80 }
]

backgroundImageSrc

Background image source when backgroundKind is image.

backgroundImageSrc: "https://cdn.example/bg.jpg"

backgroundImageMode

How the background image is sized.

Options: cover, contain, repeat

backgroundImageMode: "cover"

backgroundRepeatSize

Unit: px

Tile size in pixels when background image mode is repeat.

backgroundRepeatSize: 64

backgroundPosition

CSS background-position value.

backgroundPosition: "center"

backgroundMotionEnabled

Seamless pan (and optional rotate) for image backgrounds.

backgroundMotionEnabled: true

backgroundMotionDirectionDeg

Unit: deg

Pan direction in degrees (0 = right).

backgroundMotionDirectionDeg: 0

backgroundMotionSpeed

Relative pan speed for seamless cycling.

backgroundMotionSpeed: 20

backgroundMotionRotateDegPerSec

Unit: deg

Continuous rotation speed in degrees per second (0 = off).

backgroundMotionRotateDegPerSec: 0

backgroundVideoSrc

Video URL when backgroundKind is video. Always muted, autoplay, plays inline; never captures focus.

backgroundVideoSrc: "https://cdn.example/bg.mp4"

backgroundVideoFit

cover / fill use object-fit; repeat tiles frames on canvas.

Options: cover, fill, repeat

backgroundVideoFit: "cover"

backgroundVideoLoop

Loop the background video (default true).

backgroundVideoLoop: true

backgroundAnimationMode

Particle field or reactive grid (filled cells or continuous outlines) when backgroundKind is animation.

Options: particle, reactiveGrid

backgroundAnimationMode: "particle"

backgroundAnimShape

Built-in shape or custom SVG for particles/grid cells.

Options: circle, square, roundedSquare, triangle, diamond, hexagon, star, cross, svg

backgroundAnimShape: "circle"

backgroundAnimSvgSrc

SVG URL when shape is svg.

backgroundAnimSvgSrc: "https://cdn.example/shape.svg"

backgroundAnimColorMode

solid tints shapes; fromAsset keeps SVG colors.

Options: solid, fromAsset

backgroundAnimColorMode: "solid"

backgroundAnimSize

Unit: px

Base particle or cell size in pixels.

backgroundAnimSize: 12

backgroundAnimJitter

Particle-only 0–1 randomization for count, size, lifetime, and speed.

backgroundAnimJitter: 0.2

backgroundGridStyle

Reactive grid rendering: filled cells, or continuous shape outlines tiled edge-to-edge into one connected lattice that ripples around the cursor. Ignored for svg shapes, which always render as cells.

Options: cells, continuous

backgroundGridStyle: "cells"

backgroundGridHoverGrowLimitPct

Unit: %

Maximum cell size change at the pointer. Positive values grow cells; negative values shrink them. A value of 50 reaches 150% scale after the configured reaction time.

backgroundGridHoverGrowLimitPct: 50

backgroundGridHoverRotateLimitDeg

Unit: deg

Maximum cell rotation at the pointer. Positive values rotate clockwise; negative values rotate counterclockwise.

backgroundGridHoverRotateLimitDeg: 0

backgroundGridReactionTimeSec

Unit: s

Seconds for cells or the continuous-grid ripple to reach their configured hover limit, and to return after the pointer leaves.

backgroundGridReactionTimeSec: 1

Border

borderEnabled

Enables border color, style, width, and radius.

borderEnabled: false

borderColorLight

Border color in light theme.

borderColorLight: "#e5e7eb"

borderColorDark

Border color in dark theme.

borderColorDark: "#374151"

borderStyle

CSS border style.

Options: solid, dashed, dotted

borderStyle: "solid"

borderWidth

Unit: token

Border width token.

Options: none, sm, md, lg

borderWidth: "sm"

borderRadius

Unit: token

Border radius token.

Options: none, sm, md, lg, xl, full

borderRadius: "md"

Shadow

shadowEnabled

Enables box shadow values for light/dark themes.

shadowEnabled: false

shadowValueLight

CSS box-shadow value in light theme.

shadowValueLight: "0 8px 24px rgba(0, 0, 0, 0.12)"

shadowValueDark

CSS box-shadow value in dark theme.

shadowValueDark: "0 8px 24px rgba(0, 0, 0, 0.45)"

Motion & transform

scrollAnimationEnabled

Enables enter-on-scroll animation.

scrollAnimationEnabled: false

scrollAnimationType

Enter-on-scroll animation preset.

Options: fadeIn, slideInBottom, slideInTop, slideInLeft, slideInRight, zoomIn, zoomOut, rotateIn, rotateOut, bounceIn, bounceOut, pulse

scrollAnimationType: "fadeIn"

scrollAnimationDuration

Unit: ms

Animation duration in milliseconds.

scrollAnimationDuration: 600

scrollAnimationDelay

Unit: ms

Animation delay in milliseconds.

scrollAnimationDelay: 0

cursorTiltEnabled

Tilts the block slightly toward the pointer.

cursorTiltEnabled: false

cursorTiltIntensity

Strength of the cursor tilt effect.

cursorTiltIntensity: 8

transformEnabled

Enables CSS transform controls.

transformEnabled: false

transformRotateX

Unit: deg

Rotation around the X axis in degrees.

transformRotateX: 0

transformRotateY

Unit: deg

Rotation around the Y axis in degrees.

transformRotateY: 0

transformRotateZ

Unit: deg

Rotation around the Z axis in degrees.

transformRotateZ: 0

transformTranslateX

Unit: px

Horizontal translation in pixels.

transformTranslateX: 0

transformTranslateY

Unit: px

Vertical translation in pixels.

transformTranslateY: 0

transformTranslateZ

Unit: px

Depth translation in pixels.

transformTranslateZ: 0

transformScale

Unit: ratio

Uniform scale factor (unitless).

transformScale: 1

transformPerspective

Unit: px

CSS perspective distance in pixels.

transformPerspective: 800

Advanced

decorationBySelector

Advanced: apply decoration token overlays for hover, active, and focus. Missing overlay keys inherit the default flat props.

decorationBySelector: {
  hover: { backgroundColorLight: "#f3f4f6" }
}

clipboard

Editor-only control — does not persist its own value.

Editor-only copy/paste helpers for block props.

// Editor-only — does not persist a stored value

{
  "showOnBreakpoints": {},
  "showOnLocales": {},
  "authVisibility": "all",
  "routeLockVisibility": "all",
  "roleVisibility": [],
  "entryActionVisibility": "all",
  "queryPageVisibility": "all",
  "padding": "md",
  "paddingEnabled": true,
  "sizeByBreakpoint": {},
  "marginsEnabled": false,
  "positionEnabled": false,
  "positionByBreakpoint": {},
  "backgroundEnabled": true,
  "backgroundWidth": "page",
  "backgroundKind": "solid",
  "backgroundColorLight": "#ffffff",
  "backgroundColorDark": "#1f2937",
  "gradientAngle": 180,
  "gradientType": "linear",
  "gradientColors": [
    {
      "light": "",
      "dark": "",
      "offset": 50
    },
    {
      "light": "",
      "dark": "",
      "offset": 50
    }
  ],
  "gradientColor1Light": "",
  "gradientColor1Dark": "",
  "gradientColor2Light": "",
  "gradientColor2Dark": "",
  "backgroundImageSrc": "",
  "backgroundImageMode": "cover",
  "backgroundRepeatSize": 100,
  "backgroundPosition": "center",
  "backgroundMotionEnabled": false,
  "backgroundMotionDirectionDeg": 0,
  "backgroundMotionSpeed": 20,
  "backgroundMotionRotateDegPerSec": 0,
  "backgroundVideoSrc": "",
  "backgroundVideoFit": "cover",
  "backgroundVideoLoop": true,
  "backgroundVideoRepeatSize": 100,
  "backgroundAnimationMode": "particle",
  "backgroundAnimShape": "circle",
  "backgroundAnimSvgSrc": "",
  "backgroundAnimColorMode": "solid",
  "backgroundAnimColorLight": "#ffffff88",
  "backgroundAnimColorDark": "#ffffff66",
  "backgroundAnimSize": 12,
  "backgroundAnimJitter": 0.2,
  "backgroundParticleCount": 40,
  "backgroundParticleLifetimeSec": 4,
  "backgroundParticleSpeed": 40,
  "backgroundParticleAnimType": "fade",
  "backgroundParticleFromSide": "left",
  "backgroundParticleToSide": "right",
  "backgroundGridStyle": "cells",
  "backgroundGridMotionDirectionDeg": 0,
  "backgroundGridMotionSpeed": 0,
  "backgroundGridRotateDegPerSec": 0,
  "backgroundGridHoverGrowLimitPct": 50,
  "backgroundGridHoverRotateLimitDeg": 0,
  "backgroundGridReactionTimeSec": 1,
  "backgroundGridHoverGrow": true,
  "backgroundGridHoverRotate": false,
  "backgroundGridHoverColor": false,
  "backgroundGridHoverColorLight": "#ffffff55",
  "backgroundGridHoverColorDark": "#ffffff33",
  "backgroundGridReactionSpeed": 1,
  "pointerEvents": "auto",
  "borderEnabled": true,
  "borderStyle": "solid",
  "borderColorLight": "#e5e7eb",
  "borderColorDark": "rgba(255, 255, 255, 0.1)",
  "borderWidth": "sm",
  "borderRadius": "md",
  "shadowEnabled": true,
  "shadowValueLight": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
  "shadowValueDark": "0 4px 6px -1px rgb(0 0 0 / 0.4)",
  "scrollAnimationEnabled": false,
  "scrollAnimationType": "fadeIn",
  "scrollAnimationDuration": 600,
  "scrollAnimationDelay": 0,
  "cursorTiltEnabled": false,
  "cursorTiltIntensity": 12,
  "transformEnabled": false,
  "transformRotateX": 0,
  "transformRotateY": 0,
  "transformRotateZ": 0,
  "transformTranslateX": 0,
  "transformTranslateY": 0,
  "transformTranslateZ": 0,
  "transformScale": 1,
  "decorationBySelector": {}
}

LineBlock

Line

Fields

Layout

length

Unit: px

Length of a line or divider in pixels.

length: 120

thickness

Unit: token

Stroke thickness token for a line or divider.

thickness: "sm"

orientation

Layout axis for lines and similar controls.

orientation: "horizontal"

Colors

color

Primary accent or fill color for the control.

color: "#2563eb"

Visibility

showOnBreakpoints

Per-breakpoint visibility. Set a breakpoint to false to hide the block on that viewport. Missing keys default to visible.

showOnBreakpoints: { mobile: false }

showOnLocales

Limit which website locales show the block. Empty / missing means all enabled locales. Set a locale to false to hide.

showOnLocales: { tr: false }

authVisibility

Who can see the block based on website sign-in state.

Options: all, authenticated, anonymous

authVisibility: "authenticated"

routeLockVisibility

On locked object routes, show always, only when unlocked, or only when locked.

Options: all, when_unlocked, when_locked

routeLockVisibility: "all"

roleVisibility

Optional list of website user role labels. Empty means all roles. Matching is case-sensitive.

roleVisibility: ["moderator"]

entryActionVisibility

Object-component only: show when the current entry exposes matching actions.

Options: all, canUpdate, canDelete

entryActionVisibility: "all"

queryPageVisibility

Optional: limit list blocks to the first query page only.

Options: all, first_page_only

queryPageVisibility: "all"

Spacing & sizing

customizeEnabled

Enables the decoration controls below in the editor.

customizeEnabled: true

paddingEnabled

Turns padding controls on for this block.

paddingEnabled: true

padding

Unit: token

Theme spacing token applied as padding. Tokens let site owners customize spacing while blocks continue to share a consistent design language.

Options: none, xs, sm, md, lg, xl

padding: "md"

paddingByBreakpoint

Unit: token

Theme spacing token per breakpoint. Use this when the block needs different, but still theme-consistent, spacing at different viewport sizes.

paddingByBreakpoint: { desktop: "md", mobile: "sm" }

marginsEnabled

Turns margin controls on (configured via size/position maps).

marginsEnabled: false

sizeByBreakpoint

Optional width/height constraints per breakpoint. Modes: fillParent (stretch), fitContent (intrinsic), static (fixed length via widthStatic/heightStatic + unit), ratio (percent of the other axis via widthRatio/heightRatio).

static uses widthStaticUnit / heightStaticUnit: px, vw, vh, vmin, or vmax (default px). Example full-page background: widthStatic: 100, widthStaticUnit: "vw", heightStatic: 100, heightStaticUnit: "vh" with fixed positioning and pointerEvents: "none". ratio values are percentages of the opposite axis. fillParent and fitContent take no numeric unit.

sizeByBreakpoint: {
  desktop: {
    widthMode: "static",
    widthStatic: 100,
    widthStaticUnit: "vw",
    heightMode: "static",
    heightStatic: 100,
    heightStaticUnit: "vh"
  }
}

overflow

CSS overflow on the decoration frame.

Options: visible, hidden, auto, clip

overflow: "hidden"

pointerEvents

Whether the decoration frame receives pointer events. Use none for full-page decorative backgrounds so clicks pass through.

Options: auto, none

pointerEvents: "auto"

Position

positionEnabled

Enables absolute/relative positioning overlays.

positionEnabled: false

positionByBreakpoint

Positioning overlays per breakpoint (static, relative, absolute, fixed, sticky) with optional offsets in pixels (top, right, bottom, left).

positionByBreakpoint: {
  desktop: { position: "relative", top: 0, left: 0 }
}

Background

backgroundEnabled

Enables background fill, gradient, or image.

backgroundEnabled: true

backgroundWidth

Background span: page column or full viewport bleed.

Options: page, full

backgroundWidth: "page"

backgroundKind

Solid color, gradient, image, muted autoplay video, or canvas animation (particles / reactive grid).

Options: solid, gradient, image, video, animation

backgroundKind: "solid"

backgroundColorLight

Solid background color in light theme.

backgroundColorLight: "#ffffff"

backgroundColorDark

Solid background color in dark theme.

backgroundColorDark: "#111827"

gradientType

Linear, radial, or conic gradient when backgroundKind is gradient.

Options: linear, radial, conic

gradientType: "linear"

gradientAngle

Unit: deg

Linear gradient direction or conic start angle in degrees when backgroundKind is gradient.

gradientAngle: 135

gradientColors

Gradient stops with light/dark pairs and segment offsets (CSS % is the running sum).

gradientColors: [
  { light: "#2563eb", dark: "#1e3a8a", offset: 20 },
  { light: "#93c5fd", dark: "#1e40af", offset: 80 }
]

backgroundImageSrc

Background image source when backgroundKind is image.

backgroundImageSrc: "https://cdn.example/bg.jpg"

backgroundImageMode

How the background image is sized.

Options: cover, contain, repeat

backgroundImageMode: "cover"

backgroundRepeatSize

Unit: px

Tile size in pixels when background image mode is repeat.

backgroundRepeatSize: 64

backgroundPosition

CSS background-position value.

backgroundPosition: "center"

backgroundMotionEnabled

Seamless pan (and optional rotate) for image backgrounds.

backgroundMotionEnabled: true

backgroundMotionDirectionDeg

Unit: deg

Pan direction in degrees (0 = right).

backgroundMotionDirectionDeg: 0

backgroundMotionSpeed

Relative pan speed for seamless cycling.

backgroundMotionSpeed: 20

backgroundMotionRotateDegPerSec

Unit: deg

Continuous rotation speed in degrees per second (0 = off).

backgroundMotionRotateDegPerSec: 0

backgroundVideoSrc

Video URL when backgroundKind is video. Always muted, autoplay, plays inline; never captures focus.

backgroundVideoSrc: "https://cdn.example/bg.mp4"

backgroundVideoFit

cover / fill use object-fit; repeat tiles frames on canvas.

Options: cover, fill, repeat

backgroundVideoFit: "cover"

backgroundVideoLoop

Loop the background video (default true).

backgroundVideoLoop: true

backgroundAnimationMode

Particle field or reactive grid (filled cells or continuous outlines) when backgroundKind is animation.

Options: particle, reactiveGrid

backgroundAnimationMode: "particle"

backgroundAnimShape

Built-in shape or custom SVG for particles/grid cells.

Options: circle, square, roundedSquare, triangle, diamond, hexagon, star, cross, svg

backgroundAnimShape: "circle"

backgroundAnimSvgSrc

SVG URL when shape is svg.

backgroundAnimSvgSrc: "https://cdn.example/shape.svg"

backgroundAnimColorMode

solid tints shapes; fromAsset keeps SVG colors.

Options: solid, fromAsset

backgroundAnimColorMode: "solid"

backgroundAnimSize

Unit: px

Base particle or cell size in pixels.

backgroundAnimSize: 12

backgroundAnimJitter

Particle-only 0–1 randomization for count, size, lifetime, and speed.

backgroundAnimJitter: 0.2

backgroundGridStyle

Reactive grid rendering: filled cells, or continuous shape outlines tiled edge-to-edge into one connected lattice that ripples around the cursor. Ignored for svg shapes, which always render as cells.

Options: cells, continuous

backgroundGridStyle: "cells"

backgroundGridHoverGrowLimitPct

Unit: %

Maximum cell size change at the pointer. Positive values grow cells; negative values shrink them. A value of 50 reaches 150% scale after the configured reaction time.

backgroundGridHoverGrowLimitPct: 50

backgroundGridHoverRotateLimitDeg

Unit: deg

Maximum cell rotation at the pointer. Positive values rotate clockwise; negative values rotate counterclockwise.

backgroundGridHoverRotateLimitDeg: 0

backgroundGridReactionTimeSec

Unit: s

Seconds for cells or the continuous-grid ripple to reach their configured hover limit, and to return after the pointer leaves.

backgroundGridReactionTimeSec: 1

Border

borderEnabled

Enables border color, style, width, and radius.

borderEnabled: false

borderColorLight

Border color in light theme.

borderColorLight: "#e5e7eb"

borderColorDark

Border color in dark theme.

borderColorDark: "#374151"

borderStyle

CSS border style.

Options: solid, dashed, dotted

borderStyle: "solid"

borderWidth

Unit: token

Border width token.

Options: none, sm, md, lg

borderWidth: "sm"

borderRadius

Unit: token

Border radius token.

Options: none, sm, md, lg, xl, full

borderRadius: "md"

Shadow

shadowEnabled

Enables box shadow values for light/dark themes.

shadowEnabled: false

shadowValueLight

CSS box-shadow value in light theme.

shadowValueLight: "0 8px 24px rgba(0, 0, 0, 0.12)"

shadowValueDark

CSS box-shadow value in dark theme.

shadowValueDark: "0 8px 24px rgba(0, 0, 0, 0.45)"

Motion & transform

scrollAnimationEnabled

Enables enter-on-scroll animation.

scrollAnimationEnabled: false

scrollAnimationType

Enter-on-scroll animation preset.

Options: fadeIn, slideInBottom, slideInTop, slideInLeft, slideInRight, zoomIn, zoomOut, rotateIn, rotateOut, bounceIn, bounceOut, pulse

scrollAnimationType: "fadeIn"

scrollAnimationDuration

Unit: ms

Animation duration in milliseconds.

scrollAnimationDuration: 600

scrollAnimationDelay

Unit: ms

Animation delay in milliseconds.

scrollAnimationDelay: 0

cursorTiltEnabled

Tilts the block slightly toward the pointer.

cursorTiltEnabled: false

cursorTiltIntensity

Strength of the cursor tilt effect.

cursorTiltIntensity: 8

transformEnabled

Enables CSS transform controls.

transformEnabled: false

transformRotateX

Unit: deg

Rotation around the X axis in degrees.

transformRotateX: 0

transformRotateY

Unit: deg

Rotation around the Y axis in degrees.

transformRotateY: 0

transformRotateZ

Unit: deg

Rotation around the Z axis in degrees.

transformRotateZ: 0

transformTranslateX

Unit: px

Horizontal translation in pixels.

transformTranslateX: 0

transformTranslateY

Unit: px

Vertical translation in pixels.

transformTranslateY: 0

transformTranslateZ

Unit: px

Depth translation in pixels.

transformTranslateZ: 0

transformScale

Unit: ratio

Uniform scale factor (unitless).

transformScale: 1

transformPerspective

Unit: px

CSS perspective distance in pixels.

transformPerspective: 800

Advanced

decorationBySelector

Advanced: apply decoration token overlays for hover, active, and focus. Missing overlay keys inherit the default flat props.

decorationBySelector: {
  hover: { backgroundColorLight: "#f3f4f6" }
}

clipboard

Editor-only control — does not persist its own value.

Editor-only copy/paste helpers for block props.

// Editor-only — does not persist a stored value

{
  "showOnBreakpoints": {},
  "showOnLocales": {},
  "authVisibility": "all",
  "routeLockVisibility": "all",
  "roleVisibility": [],
  "entryActionVisibility": "all",
  "queryPageVisibility": "all",
  "customizeEnabled": false,
  "padding": "none",
  "paddingEnabled": false,
  "sizeByBreakpoint": {},
  "marginsEnabled": false,
  "positionEnabled": false,
  "positionByBreakpoint": {},
  "backgroundEnabled": false,
  "backgroundWidth": "page",
  "backgroundKind": "solid",
  "backgroundColorLight": "",
  "backgroundColorDark": "",
  "gradientAngle": 180,
  "gradientType": "linear",
  "gradientColors": [
    {
      "light": "",
      "dark": "",
      "offset": 50
    },
    {
      "light": "",
      "dark": "",
      "offset": 50
    }
  ],
  "gradientColor1Light": "",
  "gradientColor1Dark": "",
  "gradientColor2Light": "",
  "gradientColor2Dark": "",
  "backgroundImageSrc": "",
  "backgroundImageMode": "cover",
  "backgroundRepeatSize": 100,
  "backgroundPosition": "center",
  "backgroundMotionEnabled": false,
  "backgroundMotionDirectionDeg": 0,
  "backgroundMotionSpeed": 20,
  "backgroundMotionRotateDegPerSec": 0,
  "backgroundVideoSrc": "",
  "backgroundVideoFit": "cover",
  "backgroundVideoLoop": true,
  "backgroundVideoRepeatSize": 100,
  "backgroundAnimationMode": "particle",
  "backgroundAnimShape": "circle",
  "backgroundAnimSvgSrc": "",
  "backgroundAnimColorMode": "solid",
  "backgroundAnimColorLight": "#ffffff88",
  "backgroundAnimColorDark": "#ffffff66",
  "backgroundAnimSize": 12,
  "backgroundAnimJitter": 0.2,
  "backgroundParticleCount": 40,
  "backgroundParticleLifetimeSec": 4,
  "backgroundParticleSpeed": 40,
  "backgroundParticleAnimType": "fade",
  "backgroundParticleFromSide": "left",
  "backgroundParticleToSide": "right",
  "backgroundGridStyle": "cells",
  "backgroundGridMotionDirectionDeg": 0,
  "backgroundGridMotionSpeed": 0,
  "backgroundGridRotateDegPerSec": 0,
  "backgroundGridHoverGrowLimitPct": 50,
  "backgroundGridHoverRotateLimitDeg": 0,
  "backgroundGridReactionTimeSec": 1,
  "backgroundGridHoverGrow": true,
  "backgroundGridHoverRotate": false,
  "backgroundGridHoverColor": false,
  "backgroundGridHoverColorLight": "#ffffff55",
  "backgroundGridHoverColorDark": "#ffffff33",
  "backgroundGridReactionSpeed": 1,
  "pointerEvents": "auto",
  "borderEnabled": false,
  "borderStyle": "solid",
  "borderColorLight": "",
  "borderColorDark": "",
  "shadowEnabled": false,
  "shadowValueLight": "",
  "shadowValueDark": "",
  "scrollAnimationEnabled": false,
  "scrollAnimationType": "fadeIn",
  "scrollAnimationDuration": 600,
  "scrollAnimationDelay": 0,
  "cursorTiltEnabled": false,
  "cursorTiltIntensity": 12,
  "transformEnabled": false,
  "transformRotateX": 0,
  "transformRotateY": 0,
  "transformRotateZ": 0,
  "transformTranslateX": 0,
  "transformTranslateY": 0,
  "transformTranslateZ": 0,
  "transformScale": 1,
  "decorationBySelector": {},
  "orientation": "horizontal"
}

RowBlock

List

Horizontal flex row of columns. Each column has sizing (fill / auto / width) and nested content. Use for toolbars and split layouts—not as a substitute for GridBlock galleries.

Examples

Title + action

{
  "gap": 12,
  "alignItems": "center",
  "justifyContent": "space-between",
  "columns": [
    {
      "sizing": "fill",
      "content": []
    },
    {
      "sizing": "auto",
      "content": []
    }
  ]
}

Fields

Layout

columnsEditor

Editor-only control — does not persist its own value.

Visual editor for row columns. Does not persist its own value — writes columns.

// Writes:
columns: [
  { sizing: "fill", content: [] },
  { sizing: "width", width: 33, content: [] },
  { sizing: "auto", content: [] }
]

columns

Array of columns: each has sizing (fill | auto | width) and content (nested blocks).

fill grows like flex (no unit). auto sizes to content. width uses width / widthByBreakpoint as a percent of the row.

columns: [
  { sizing: "fill", content: [] },
  { sizing: "width", width: 40, widthByBreakpoint: { desktop: 40 }, content: [] },
  { sizing: "auto", content: [] }
]

gap

Unit: px

Gap between columns in pixels.

listLayout

How list items are arranged.

listLayout: "grid"

Visibility

showOnBreakpoints

Per-breakpoint visibility. Set a breakpoint to false to hide the block on that viewport. Missing keys default to visible.

showOnBreakpoints: { mobile: false }

showOnLocales

Limit which website locales show the block. Empty / missing means all enabled locales. Set a locale to false to hide.

showOnLocales: { tr: false }

authVisibility

Who can see the block based on website sign-in state.

Options: all, authenticated, anonymous

authVisibility: "authenticated"

routeLockVisibility

On locked object routes, show always, only when unlocked, or only when locked.

Options: all, when_unlocked, when_locked

routeLockVisibility: "all"

roleVisibility

Optional list of website user role labels. Empty means all roles. Matching is case-sensitive.

roleVisibility: ["moderator"]

entryActionVisibility

Object-component only: show when the current entry exposes matching actions.

Options: all, canUpdate, canDelete

entryActionVisibility: "all"

queryPageVisibility

Optional: limit list blocks to the first query page only.

Options: all, first_page_only

queryPageVisibility: "all"

Spacing & sizing

customizeEnabled

Enables the decoration controls below in the editor.

customizeEnabled: true

paddingEnabled

Turns padding controls on for this block.

paddingEnabled: true

padding

Unit: token

Theme spacing token applied as padding. Tokens let site owners customize spacing while blocks continue to share a consistent design language.

Options: none, xs, sm, md, lg, xl

padding: "md"

paddingByBreakpoint

Unit: token

Theme spacing token per breakpoint. Use this when the block needs different, but still theme-consistent, spacing at different viewport sizes.

paddingByBreakpoint: { desktop: "md", mobile: "sm" }

marginsEnabled

Turns margin controls on (configured via size/position maps).

marginsEnabled: false

sizeByBreakpoint

Optional width/height constraints per breakpoint. Modes: fillParent (stretch), fitContent (intrinsic), static (fixed length via widthStatic/heightStatic + unit), ratio (percent of the other axis via widthRatio/heightRatio).

static uses widthStaticUnit / heightStaticUnit: px, vw, vh, vmin, or vmax (default px). Example full-page background: widthStatic: 100, widthStaticUnit: "vw", heightStatic: 100, heightStaticUnit: "vh" with fixed positioning and pointerEvents: "none". ratio values are percentages of the opposite axis. fillParent and fitContent take no numeric unit.

sizeByBreakpoint: {
  desktop: {
    widthMode: "static",
    widthStatic: 100,
    widthStaticUnit: "vw",
    heightMode: "static",
    heightStatic: 100,
    heightStaticUnit: "vh"
  }
}

overflow

CSS overflow on the decoration frame.

Options: visible, hidden, auto, clip

overflow: "hidden"

pointerEvents

Whether the decoration frame receives pointer events. Use none for full-page decorative backgrounds so clicks pass through.

Options: auto, none

pointerEvents: "auto"

Position

positionEnabled

Enables absolute/relative positioning overlays.

positionEnabled: false

positionByBreakpoint

Positioning overlays per breakpoint (static, relative, absolute, fixed, sticky) with optional offsets in pixels (top, right, bottom, left).

positionByBreakpoint: {
  desktop: { position: "relative", top: 0, left: 0 }
}

Background

backgroundEnabled

Enables background fill, gradient, or image.

backgroundEnabled: true

backgroundWidth

Background span: page column or full viewport bleed.

Options: page, full

backgroundWidth: "page"

backgroundKind

Solid color, gradient, image, muted autoplay video, or canvas animation (particles / reactive grid).

Options: solid, gradient, image, video, animation

backgroundKind: "solid"

backgroundColorLight

Solid background color in light theme.

backgroundColorLight: "#ffffff"

backgroundColorDark

Solid background color in dark theme.

backgroundColorDark: "#111827"

gradientType

Linear, radial, or conic gradient when backgroundKind is gradient.

Options: linear, radial, conic

gradientType: "linear"

gradientAngle

Unit: deg

Linear gradient direction or conic start angle in degrees when backgroundKind is gradient.

gradientAngle: 135

gradientColors

Gradient stops with light/dark pairs and segment offsets (CSS % is the running sum).

gradientColors: [
  { light: "#2563eb", dark: "#1e3a8a", offset: 20 },
  { light: "#93c5fd", dark: "#1e40af", offset: 80 }
]

backgroundImageSrc

Background image source when backgroundKind is image.

backgroundImageSrc: "https://cdn.example/bg.jpg"

backgroundImageMode

How the background image is sized.

Options: cover, contain, repeat

backgroundImageMode: "cover"

backgroundRepeatSize

Unit: px

Tile size in pixels when background image mode is repeat.

backgroundRepeatSize: 64

backgroundPosition

CSS background-position value.

backgroundPosition: "center"

backgroundMotionEnabled

Seamless pan (and optional rotate) for image backgrounds.

backgroundMotionEnabled: true

backgroundMotionDirectionDeg

Unit: deg

Pan direction in degrees (0 = right).

backgroundMotionDirectionDeg: 0

backgroundMotionSpeed

Relative pan speed for seamless cycling.

backgroundMotionSpeed: 20

backgroundMotionRotateDegPerSec

Unit: deg

Continuous rotation speed in degrees per second (0 = off).

backgroundMotionRotateDegPerSec: 0

backgroundVideoSrc

Video URL when backgroundKind is video. Always muted, autoplay, plays inline; never captures focus.

backgroundVideoSrc: "https://cdn.example/bg.mp4"

backgroundVideoFit

cover / fill use object-fit; repeat tiles frames on canvas.

Options: cover, fill, repeat

backgroundVideoFit: "cover"

backgroundVideoLoop

Loop the background video (default true).

backgroundVideoLoop: true

backgroundAnimationMode

Particle field or reactive grid (filled cells or continuous outlines) when backgroundKind is animation.

Options: particle, reactiveGrid

backgroundAnimationMode: "particle"

backgroundAnimShape

Built-in shape or custom SVG for particles/grid cells.

Options: circle, square, roundedSquare, triangle, diamond, hexagon, star, cross, svg

backgroundAnimShape: "circle"

backgroundAnimSvgSrc

SVG URL when shape is svg.

backgroundAnimSvgSrc: "https://cdn.example/shape.svg"

backgroundAnimColorMode

solid tints shapes; fromAsset keeps SVG colors.

Options: solid, fromAsset

backgroundAnimColorMode: "solid"

backgroundAnimSize

Unit: px

Base particle or cell size in pixels.

backgroundAnimSize: 12

backgroundAnimJitter

Particle-only 0–1 randomization for count, size, lifetime, and speed.

backgroundAnimJitter: 0.2

backgroundGridStyle

Reactive grid rendering: filled cells, or continuous shape outlines tiled edge-to-edge into one connected lattice that ripples around the cursor. Ignored for svg shapes, which always render as cells.

Options: cells, continuous

backgroundGridStyle: "cells"

backgroundGridHoverGrowLimitPct

Unit: %

Maximum cell size change at the pointer. Positive values grow cells; negative values shrink them. A value of 50 reaches 150% scale after the configured reaction time.

backgroundGridHoverGrowLimitPct: 50

backgroundGridHoverRotateLimitDeg

Unit: deg

Maximum cell rotation at the pointer. Positive values rotate clockwise; negative values rotate counterclockwise.

backgroundGridHoverRotateLimitDeg: 0

backgroundGridReactionTimeSec

Unit: s

Seconds for cells or the continuous-grid ripple to reach their configured hover limit, and to return after the pointer leaves.

backgroundGridReactionTimeSec: 1

Border

borderEnabled

Enables border color, style, width, and radius.

borderEnabled: false

borderColorLight

Border color in light theme.

borderColorLight: "#e5e7eb"

borderColorDark

Border color in dark theme.

borderColorDark: "#374151"

borderStyle

CSS border style.

Options: solid, dashed, dotted

borderStyle: "solid"

borderWidth

Unit: token

Border width token.

Options: none, sm, md, lg

borderWidth: "sm"

borderRadius

Unit: token

Border radius token.

Options: none, sm, md, lg, xl, full

borderRadius: "md"

Shadow

shadowEnabled

Enables box shadow values for light/dark themes.

shadowEnabled: false

shadowValueLight

CSS box-shadow value in light theme.

shadowValueLight: "0 8px 24px rgba(0, 0, 0, 0.12)"

shadowValueDark

CSS box-shadow value in dark theme.

shadowValueDark: "0 8px 24px rgba(0, 0, 0, 0.45)"

Motion & transform

scrollAnimationEnabled

Enables enter-on-scroll animation.

scrollAnimationEnabled: false

scrollAnimationType

Enter-on-scroll animation preset.

Options: fadeIn, slideInBottom, slideInTop, slideInLeft, slideInRight, zoomIn, zoomOut, rotateIn, rotateOut, bounceIn, bounceOut, pulse

scrollAnimationType: "fadeIn"

scrollAnimationDuration

Unit: ms

Animation duration in milliseconds.

scrollAnimationDuration: 600

scrollAnimationDelay

Unit: ms

Animation delay in milliseconds.

scrollAnimationDelay: 0

cursorTiltEnabled

Tilts the block slightly toward the pointer.

cursorTiltEnabled: false

cursorTiltIntensity

Strength of the cursor tilt effect.

cursorTiltIntensity: 8

transformEnabled

Enables CSS transform controls.

transformEnabled: false

transformRotateX

Unit: deg

Rotation around the X axis in degrees.

transformRotateX: 0

transformRotateY

Unit: deg

Rotation around the Y axis in degrees.

transformRotateY: 0

transformRotateZ

Unit: deg

Rotation around the Z axis in degrees.

transformRotateZ: 0

transformTranslateX

Unit: px

Horizontal translation in pixels.

transformTranslateX: 0

transformTranslateY

Unit: px

Vertical translation in pixels.

transformTranslateY: 0

transformTranslateZ

Unit: px

Depth translation in pixels.

transformTranslateZ: 0

transformScale

Unit: ratio

Uniform scale factor (unitless).

transformScale: 1

transformPerspective

Unit: px

CSS perspective distance in pixels.

transformPerspective: 800

Advanced

decorationBySelector

Advanced: apply decoration token overlays for hover, active, and focus. Missing overlay keys inherit the default flat props.

decorationBySelector: {
  hover: { backgroundColorLight: "#f3f4f6" }
}

clipboard

Editor-only control — does not persist its own value.

Editor-only copy/paste helpers for block props.

// Editor-only — does not persist a stored value

{
  "showOnBreakpoints": {},
  "showOnLocales": {},
  "authVisibility": "all",
  "routeLockVisibility": "all",
  "roleVisibility": [],
  "entryActionVisibility": "all",
  "queryPageVisibility": "all",
  "customizeEnabled": false,
  "padding": "none",
  "paddingEnabled": false,
  "sizeByBreakpoint": {},
  "marginsEnabled": false,
  "positionEnabled": false,
  "positionByBreakpoint": {},
  "backgroundEnabled": false,
  "backgroundWidth": "page",
  "backgroundKind": "solid",
  "backgroundColorLight": "",
  "backgroundColorDark": "",
  "gradientAngle": 180,
  "gradientType": "linear",
  "gradientColors": [
    {
      "light": "",
      "dark": "",
      "offset": 50
    },
    {
      "light": "",
      "dark": "",
      "offset": 50
    }
  ],
  "gradientColor1Light": "",
  "gradientColor1Dark": "",
  "gradientColor2Light": "",
  "gradientColor2Dark": "",
  "backgroundImageSrc": "",
  "backgroundImageMode": "cover",
  "backgroundRepeatSize": 100,
  "backgroundPosition": "center",
  "backgroundMotionEnabled": false,
  "backgroundMotionDirectionDeg": 0,
  "backgroundMotionSpeed": 20,
  "backgroundMotionRotateDegPerSec": 0,
  "backgroundVideoSrc": "",
  "backgroundVideoFit": "cover",
  "backgroundVideoLoop": true,
  "backgroundVideoRepeatSize": 100,
  "backgroundAnimationMode": "particle",
  "backgroundAnimShape": "circle",
  "backgroundAnimSvgSrc": "",
  "backgroundAnimColorMode": "solid",
  "backgroundAnimColorLight": "#ffffff88",
  "backgroundAnimColorDark": "#ffffff66",
  "backgroundAnimSize": 12,
  "backgroundAnimJitter": 0.2,
  "backgroundParticleCount": 40,
  "backgroundParticleLifetimeSec": 4,
  "backgroundParticleSpeed": 40,
  "backgroundParticleAnimType": "fade",
  "backgroundParticleFromSide": "left",
  "backgroundParticleToSide": "right",
  "backgroundGridStyle": "cells",
  "backgroundGridMotionDirectionDeg": 0,
  "backgroundGridMotionSpeed": 0,
  "backgroundGridRotateDegPerSec": 0,
  "backgroundGridHoverGrowLimitPct": 50,
  "backgroundGridHoverRotateLimitDeg": 0,
  "backgroundGridReactionTimeSec": 1,
  "backgroundGridHoverGrow": true,
  "backgroundGridHoverRotate": false,
  "backgroundGridHoverColor": false,
  "backgroundGridHoverColorLight": "#ffffff55",
  "backgroundGridHoverColorDark": "#ffffff33",
  "backgroundGridReactionSpeed": 1,
  "pointerEvents": "auto",
  "borderEnabled": false,
  "borderStyle": "solid",
  "borderColorLight": "",
  "borderColorDark": "",
  "shadowEnabled": false,
  "shadowValueLight": "",
  "shadowValueDark": "",
  "scrollAnimationEnabled": false,
  "scrollAnimationType": "fadeIn",
  "scrollAnimationDuration": 600,
  "scrollAnimationDelay": 0,
  "cursorTiltEnabled": false,
  "cursorTiltIntensity": 12,
  "transformEnabled": false,
  "transformRotateX": 0,
  "transformRotateY": 0,
  "transformRotateZ": 0,
  "transformTranslateX": 0,
  "transformTranslateY": 0,
  "transformTranslateZ": 0,
  "transformScale": 1,
  "decorationBySelector": {},
  "columns": [
    {
      "sizing": "auto",
      "content": []
    },
    {
      "sizing": "auto",
      "content": []
    }
  ],
  "gap": 0,
  "justifyContent": "center",
  "alignItems": "center",
  "columnJustifyContent": "center",
  "flexWrap": false
}

GridBlock

Grid

CSS grid for multi-column page sections (e.g. main + sidebar). Configure columns/gaps per breakpoint rather than nesting many RowBlocks.

Fields

Layout

cellsEditor

Editor-only control — does not persist its own value.

Visual editor for grid cells. Does not persist its own value — writes cells.

// Writes:
cells: [
  { columnSpan: 1, rowSpan: 1, content: [] }
]

cells

Grid cells with optional column/row span and nested content.

cells: [
  { columnSpan: 1, rowSpan: 1, content: [] }
]

gridLayout

Editor-only control — does not persist its own value.

Editor control for grid columns, gaps, and alignment per breakpoint. Does not persist its own value.

// Writes:
columnsByBreakpoint: { desktop: 3 }
columnGap: 16
rowGap: 16

Other

main

Primary column content (nested blocks).

side

Optional side column content.

Visibility

showOnBreakpoints

Per-breakpoint visibility. Set a breakpoint to false to hide the block on that viewport. Missing keys default to visible.

showOnBreakpoints: { mobile: false }

showOnLocales

Limit which website locales show the block. Empty / missing means all enabled locales. Set a locale to false to hide.

showOnLocales: { tr: false }

authVisibility

Who can see the block based on website sign-in state.

Options: all, authenticated, anonymous

authVisibility: "authenticated"

routeLockVisibility

On locked object routes, show always, only when unlocked, or only when locked.

Options: all, when_unlocked, when_locked

routeLockVisibility: "all"

roleVisibility

Optional list of website user role labels. Empty means all roles. Matching is case-sensitive.

roleVisibility: ["moderator"]

entryActionVisibility

Object-component only: show when the current entry exposes matching actions.

Options: all, canUpdate, canDelete

entryActionVisibility: "all"

queryPageVisibility

Optional: limit list blocks to the first query page only.

Options: all, first_page_only

queryPageVisibility: "all"

Spacing & sizing

customizeEnabled

Enables the decoration controls below in the editor.

customizeEnabled: true

paddingEnabled

Turns padding controls on for this block.

paddingEnabled: true

padding

Unit: token

Theme spacing token applied as padding. Tokens let site owners customize spacing while blocks continue to share a consistent design language.

Options: none, xs, sm, md, lg, xl

padding: "md"

paddingByBreakpoint

Unit: token

Theme spacing token per breakpoint. Use this when the block needs different, but still theme-consistent, spacing at different viewport sizes.

paddingByBreakpoint: { desktop: "md", mobile: "sm" }

marginsEnabled

Turns margin controls on (configured via size/position maps).

marginsEnabled: false

sizeByBreakpoint

Optional width/height constraints per breakpoint. Modes: fillParent (stretch), fitContent (intrinsic), static (fixed length via widthStatic/heightStatic + unit), ratio (percent of the other axis via widthRatio/heightRatio).

static uses widthStaticUnit / heightStaticUnit: px, vw, vh, vmin, or vmax (default px). Example full-page background: widthStatic: 100, widthStaticUnit: "vw", heightStatic: 100, heightStaticUnit: "vh" with fixed positioning and pointerEvents: "none". ratio values are percentages of the opposite axis. fillParent and fitContent take no numeric unit.

sizeByBreakpoint: {
  desktop: {
    widthMode: "static",
    widthStatic: 100,
    widthStaticUnit: "vw",
    heightMode: "static",
    heightStatic: 100,
    heightStaticUnit: "vh"
  }
}

overflow

CSS overflow on the decoration frame.

Options: visible, hidden, auto, clip

overflow: "hidden"

pointerEvents

Whether the decoration frame receives pointer events. Use none for full-page decorative backgrounds so clicks pass through.

Options: auto, none

pointerEvents: "auto"

Position

positionEnabled

Enables absolute/relative positioning overlays.

positionEnabled: false

positionByBreakpoint

Positioning overlays per breakpoint (static, relative, absolute, fixed, sticky) with optional offsets in pixels (top, right, bottom, left).

positionByBreakpoint: {
  desktop: { position: "relative", top: 0, left: 0 }
}

Background

backgroundEnabled

Enables background fill, gradient, or image.

backgroundEnabled: true

backgroundWidth

Background span: page column or full viewport bleed.

Options: page, full

backgroundWidth: "page"

backgroundKind

Solid color, gradient, image, muted autoplay video, or canvas animation (particles / reactive grid).

Options: solid, gradient, image, video, animation

backgroundKind: "solid"

backgroundColorLight

Solid background color in light theme.

backgroundColorLight: "#ffffff"

backgroundColorDark

Solid background color in dark theme.

backgroundColorDark: "#111827"

gradientType

Linear, radial, or conic gradient when backgroundKind is gradient.

Options: linear, radial, conic

gradientType: "linear"

gradientAngle

Unit: deg

Linear gradient direction or conic start angle in degrees when backgroundKind is gradient.

gradientAngle: 135

gradientColors

Gradient stops with light/dark pairs and segment offsets (CSS % is the running sum).

gradientColors: [
  { light: "#2563eb", dark: "#1e3a8a", offset: 20 },
  { light: "#93c5fd", dark: "#1e40af", offset: 80 }
]

backgroundImageSrc

Background image source when backgroundKind is image.

backgroundImageSrc: "https://cdn.example/bg.jpg"

backgroundImageMode

How the background image is sized.

Options: cover, contain, repeat

backgroundImageMode: "cover"

backgroundRepeatSize

Unit: px

Tile size in pixels when background image mode is repeat.

backgroundRepeatSize: 64

backgroundPosition

CSS background-position value.

backgroundPosition: "center"

backgroundMotionEnabled

Seamless pan (and optional rotate) for image backgrounds.

backgroundMotionEnabled: true

backgroundMotionDirectionDeg

Unit: deg

Pan direction in degrees (0 = right).

backgroundMotionDirectionDeg: 0

backgroundMotionSpeed

Relative pan speed for seamless cycling.

backgroundMotionSpeed: 20

backgroundMotionRotateDegPerSec

Unit: deg

Continuous rotation speed in degrees per second (0 = off).

backgroundMotionRotateDegPerSec: 0

backgroundVideoSrc

Video URL when backgroundKind is video. Always muted, autoplay, plays inline; never captures focus.

backgroundVideoSrc: "https://cdn.example/bg.mp4"

backgroundVideoFit

cover / fill use object-fit; repeat tiles frames on canvas.

Options: cover, fill, repeat

backgroundVideoFit: "cover"

backgroundVideoLoop

Loop the background video (default true).

backgroundVideoLoop: true

backgroundAnimationMode

Particle field or reactive grid (filled cells or continuous outlines) when backgroundKind is animation.

Options: particle, reactiveGrid

backgroundAnimationMode: "particle"

backgroundAnimShape

Built-in shape or custom SVG for particles/grid cells.

Options: circle, square, roundedSquare, triangle, diamond, hexagon, star, cross, svg

backgroundAnimShape: "circle"

backgroundAnimSvgSrc

SVG URL when shape is svg.

backgroundAnimSvgSrc: "https://cdn.example/shape.svg"

backgroundAnimColorMode

solid tints shapes; fromAsset keeps SVG colors.

Options: solid, fromAsset

backgroundAnimColorMode: "solid"

backgroundAnimSize

Unit: px

Base particle or cell size in pixels.

backgroundAnimSize: 12

backgroundAnimJitter

Particle-only 0–1 randomization for count, size, lifetime, and speed.

backgroundAnimJitter: 0.2

backgroundGridStyle

Reactive grid rendering: filled cells, or continuous shape outlines tiled edge-to-edge into one connected lattice that ripples around the cursor. Ignored for svg shapes, which always render as cells.

Options: cells, continuous

backgroundGridStyle: "cells"

backgroundGridHoverGrowLimitPct

Unit: %

Maximum cell size change at the pointer. Positive values grow cells; negative values shrink them. A value of 50 reaches 150% scale after the configured reaction time.

backgroundGridHoverGrowLimitPct: 50

backgroundGridHoverRotateLimitDeg

Unit: deg

Maximum cell rotation at the pointer. Positive values rotate clockwise; negative values rotate counterclockwise.

backgroundGridHoverRotateLimitDeg: 0

backgroundGridReactionTimeSec

Unit: s

Seconds for cells or the continuous-grid ripple to reach their configured hover limit, and to return after the pointer leaves.

backgroundGridReactionTimeSec: 1

Border

borderEnabled

Enables border color, style, width, and radius.

borderEnabled: false

borderColorLight

Border color in light theme.

borderColorLight: "#e5e7eb"

borderColorDark

Border color in dark theme.

borderColorDark: "#374151"

borderStyle

CSS border style.

Options: solid, dashed, dotted

borderStyle: "solid"

borderWidth

Unit: token

Border width token.

Options: none, sm, md, lg

borderWidth: "sm"

borderRadius

Unit: token

Border radius token.

Options: none, sm, md, lg, xl, full

borderRadius: "md"

Shadow

shadowEnabled

Enables box shadow values for light/dark themes.

shadowEnabled: false

shadowValueLight

CSS box-shadow value in light theme.

shadowValueLight: "0 8px 24px rgba(0, 0, 0, 0.12)"

shadowValueDark

CSS box-shadow value in dark theme.

shadowValueDark: "0 8px 24px rgba(0, 0, 0, 0.45)"

Motion & transform

scrollAnimationEnabled

Enables enter-on-scroll animation.

scrollAnimationEnabled: false

scrollAnimationType

Enter-on-scroll animation preset.

Options: fadeIn, slideInBottom, slideInTop, slideInLeft, slideInRight, zoomIn, zoomOut, rotateIn, rotateOut, bounceIn, bounceOut, pulse

scrollAnimationType: "fadeIn"

scrollAnimationDuration

Unit: ms

Animation duration in milliseconds.

scrollAnimationDuration: 600

scrollAnimationDelay

Unit: ms

Animation delay in milliseconds.

scrollAnimationDelay: 0

cursorTiltEnabled

Tilts the block slightly toward the pointer.

cursorTiltEnabled: false

cursorTiltIntensity

Strength of the cursor tilt effect.

cursorTiltIntensity: 8

transformEnabled

Enables CSS transform controls.

transformEnabled: false

transformRotateX

Unit: deg

Rotation around the X axis in degrees.

transformRotateX: 0

transformRotateY

Unit: deg

Rotation around the Y axis in degrees.

transformRotateY: 0

transformRotateZ

Unit: deg

Rotation around the Z axis in degrees.

transformRotateZ: 0

transformTranslateX

Unit: px

Horizontal translation in pixels.

transformTranslateX: 0

transformTranslateY

Unit: px

Vertical translation in pixels.

transformTranslateY: 0

transformTranslateZ

Unit: px

Depth translation in pixels.

transformTranslateZ: 0

transformScale

Unit: ratio

Uniform scale factor (unitless).

transformScale: 1

transformPerspective

Unit: px

CSS perspective distance in pixels.

transformPerspective: 800

Advanced

decorationBySelector

Advanced: apply decoration token overlays for hover, active, and focus. Missing overlay keys inherit the default flat props.

decorationBySelector: {
  hover: { backgroundColorLight: "#f3f4f6" }
}

clipboard

Editor-only control — does not persist its own value.

Editor-only copy/paste helpers for block props.

// Editor-only — does not persist a stored value

{
  "showOnBreakpoints": {},
  "showOnLocales": {},
  "authVisibility": "all",
  "routeLockVisibility": "all",
  "roleVisibility": [],
  "entryActionVisibility": "all",
  "queryPageVisibility": "all",
  "customizeEnabled": false,
  "padding": "none",
  "paddingEnabled": false,
  "sizeByBreakpoint": {},
  "marginsEnabled": false,
  "positionEnabled": false,
  "positionByBreakpoint": {},
  "backgroundEnabled": false,
  "backgroundWidth": "page",
  "backgroundKind": "solid",
  "backgroundColorLight": "",
  "backgroundColorDark": "",
  "gradientAngle": 180,
  "gradientType": "linear",
  "gradientColors": [
    {
      "light": "",
      "dark": "",
      "offset": 50
    },
    {
      "light": "",
      "dark": "",
      "offset": 50
    }
  ],
  "gradientColor1Light": "",
  "gradientColor1Dark": "",
  "gradientColor2Light": "",
  "gradientColor2Dark": "",
  "backgroundImageSrc": "",
  "backgroundImageMode": "cover",
  "backgroundRepeatSize": 100,
  "backgroundPosition": "center",
  "backgroundMotionEnabled": false,
  "backgroundMotionDirectionDeg": 0,
  "backgroundMotionSpeed": 20,
  "backgroundMotionRotateDegPerSec": 0,
  "backgroundVideoSrc": "",
  "backgroundVideoFit": "cover",
  "backgroundVideoLoop": true,
  "backgroundVideoRepeatSize": 100,
  "backgroundAnimationMode": "particle",
  "backgroundAnimShape": "circle",
  "backgroundAnimSvgSrc": "",
  "backgroundAnimColorMode": "solid",
  "backgroundAnimColorLight": "#ffffff88",
  "backgroundAnimColorDark": "#ffffff66",
  "backgroundAnimSize": 12,
  "backgroundAnimJitter": 0.2,
  "backgroundParticleCount": 40,
  "backgroundParticleLifetimeSec": 4,
  "backgroundParticleSpeed": 40,
  "backgroundParticleAnimType": "fade",
  "backgroundParticleFromSide": "left",
  "backgroundParticleToSide": "right",
  "backgroundGridStyle": "cells",
  "backgroundGridMotionDirectionDeg": 0,
  "backgroundGridMotionSpeed": 0,
  "backgroundGridRotateDegPerSec": 0,
  "backgroundGridHoverGrowLimitPct": 50,
  "backgroundGridHoverRotateLimitDeg": 0,
  "backgroundGridReactionTimeSec": 1,
  "backgroundGridHoverGrow": true,
  "backgroundGridHoverRotate": false,
  "backgroundGridHoverColor": false,
  "backgroundGridHoverColorLight": "#ffffff55",
  "backgroundGridHoverColorDark": "#ffffff33",
  "backgroundGridReactionSpeed": 1,
  "pointerEvents": "auto",
  "borderEnabled": false,
  "borderStyle": "solid",
  "borderColorLight": "",
  "borderColorDark": "",
  "shadowEnabled": false,
  "shadowValueLight": "",
  "shadowValueDark": "",
  "scrollAnimationEnabled": false,
  "scrollAnimationType": "fadeIn",
  "scrollAnimationDuration": 600,
  "scrollAnimationDelay": 0,
  "cursorTiltEnabled": false,
  "cursorTiltIntensity": 12,
  "transformEnabled": false,
  "transformRotateX": 0,
  "transformRotateY": 0,
  "transformRotateZ": 0,
  "transformTranslateX": 0,
  "transformTranslateY": 0,
  "transformTranslateZ": 0,
  "transformScale": 1,
  "decorationBySelector": {},
  "cells": [
    {
      "columnSpan": 1,
      "rowSpan": 1,
      "content": []
    }
  ],
  "columnsByBreakpoint": {},
  "columnGap": 16,
  "rowGap": 16,
  "columnGapByBreakpoint": {},
  "rowGapByBreakpoint": {},
  "justifyItems": "stretch",
  "alignItems": "stretch",
  "justifyContent": "stretch",
  "alignContent": "stretch",
  "justifyItemsByBreakpoint": {},
  "alignItemsByBreakpoint": {},
  "justifyContentByBreakpoint": {},
  "alignContentByBreakpoint": {}
}

FlowBlock

Flow steps

Fields

Layout

stepsEditor

Editor-only control — does not persist its own value.

Visual editor for flow steps. Does not persist its own value — writes steps.

// Writes:
steps: [
  { title: "Step 1", skipWhenAuthenticated: false, content: [] }
]

steps

Ordered flow steps with optional nested content.

steps: [
  { title: "Step 1", skipWhenAuthenticated: false, content: [] }
]

Visibility

showOnBreakpoints

Per-breakpoint visibility. Set a breakpoint to false to hide the block on that viewport. Missing keys default to visible.

showOnBreakpoints: { mobile: false }

showOnLocales

Limit which website locales show the block. Empty / missing means all enabled locales. Set a locale to false to hide.

showOnLocales: { tr: false }

authVisibility

Who can see the block based on website sign-in state.

Options: all, authenticated, anonymous

authVisibility: "authenticated"

routeLockVisibility

On locked object routes, show always, only when unlocked, or only when locked.

Options: all, when_unlocked, when_locked

routeLockVisibility: "all"

roleVisibility

Optional list of website user role labels. Empty means all roles. Matching is case-sensitive.

roleVisibility: ["moderator"]

entryActionVisibility

Object-component only: show when the current entry exposes matching actions.

Options: all, canUpdate, canDelete

entryActionVisibility: "all"

queryPageVisibility

Optional: limit list blocks to the first query page only.

Options: all, first_page_only

queryPageVisibility: "all"

Spacing & sizing

customizeEnabled

Enables the decoration controls below in the editor.

customizeEnabled: true

paddingEnabled

Turns padding controls on for this block.

paddingEnabled: true

padding

Unit: token

Theme spacing token applied as padding. Tokens let site owners customize spacing while blocks continue to share a consistent design language.

Options: none, xs, sm, md, lg, xl

padding: "md"

paddingByBreakpoint

Unit: token

Theme spacing token per breakpoint. Use this when the block needs different, but still theme-consistent, spacing at different viewport sizes.

paddingByBreakpoint: { desktop: "md", mobile: "sm" }

marginsEnabled

Turns margin controls on (configured via size/position maps).

marginsEnabled: false

sizeByBreakpoint

Optional width/height constraints per breakpoint. Modes: fillParent (stretch), fitContent (intrinsic), static (fixed length via widthStatic/heightStatic + unit), ratio (percent of the other axis via widthRatio/heightRatio).

static uses widthStaticUnit / heightStaticUnit: px, vw, vh, vmin, or vmax (default px). Example full-page background: widthStatic: 100, widthStaticUnit: "vw", heightStatic: 100, heightStaticUnit: "vh" with fixed positioning and pointerEvents: "none". ratio values are percentages of the opposite axis. fillParent and fitContent take no numeric unit.

sizeByBreakpoint: {
  desktop: {
    widthMode: "static",
    widthStatic: 100,
    widthStaticUnit: "vw",
    heightMode: "static",
    heightStatic: 100,
    heightStaticUnit: "vh"
  }
}

overflow

CSS overflow on the decoration frame.

Options: visible, hidden, auto, clip

overflow: "hidden"

pointerEvents

Whether the decoration frame receives pointer events. Use none for full-page decorative backgrounds so clicks pass through.

Options: auto, none

pointerEvents: "auto"

Position

positionEnabled

Enables absolute/relative positioning overlays.

positionEnabled: false

positionByBreakpoint

Positioning overlays per breakpoint (static, relative, absolute, fixed, sticky) with optional offsets in pixels (top, right, bottom, left).

positionByBreakpoint: {
  desktop: { position: "relative", top: 0, left: 0 }
}

Background

backgroundEnabled

Enables background fill, gradient, or image.

backgroundEnabled: true

backgroundWidth

Background span: page column or full viewport bleed.

Options: page, full

backgroundWidth: "page"

backgroundKind

Solid color, gradient, image, muted autoplay video, or canvas animation (particles / reactive grid).

Options: solid, gradient, image, video, animation

backgroundKind: "solid"

backgroundColorLight

Solid background color in light theme.

backgroundColorLight: "#ffffff"

backgroundColorDark

Solid background color in dark theme.

backgroundColorDark: "#111827"

gradientType

Linear, radial, or conic gradient when backgroundKind is gradient.

Options: linear, radial, conic

gradientType: "linear"

gradientAngle

Unit: deg

Linear gradient direction or conic start angle in degrees when backgroundKind is gradient.

gradientAngle: 135

gradientColors

Gradient stops with light/dark pairs and segment offsets (CSS % is the running sum).

gradientColors: [
  { light: "#2563eb", dark: "#1e3a8a", offset: 20 },
  { light: "#93c5fd", dark: "#1e40af", offset: 80 }
]

backgroundImageSrc

Background image source when backgroundKind is image.

backgroundImageSrc: "https://cdn.example/bg.jpg"

backgroundImageMode

How the background image is sized.

Options: cover, contain, repeat

backgroundImageMode: "cover"

backgroundRepeatSize

Unit: px

Tile size in pixels when background image mode is repeat.

backgroundRepeatSize: 64

backgroundPosition

CSS background-position value.

backgroundPosition: "center"

backgroundMotionEnabled

Seamless pan (and optional rotate) for image backgrounds.

backgroundMotionEnabled: true

backgroundMotionDirectionDeg

Unit: deg

Pan direction in degrees (0 = right).

backgroundMotionDirectionDeg: 0

backgroundMotionSpeed

Relative pan speed for seamless cycling.

backgroundMotionSpeed: 20

backgroundMotionRotateDegPerSec

Unit: deg

Continuous rotation speed in degrees per second (0 = off).

backgroundMotionRotateDegPerSec: 0

backgroundVideoSrc

Video URL when backgroundKind is video. Always muted, autoplay, plays inline; never captures focus.

backgroundVideoSrc: "https://cdn.example/bg.mp4"

backgroundVideoFit

cover / fill use object-fit; repeat tiles frames on canvas.

Options: cover, fill, repeat

backgroundVideoFit: "cover"

backgroundVideoLoop

Loop the background video (default true).

backgroundVideoLoop: true

backgroundAnimationMode

Particle field or reactive grid (filled cells or continuous outlines) when backgroundKind is animation.

Options: particle, reactiveGrid

backgroundAnimationMode: "particle"

backgroundAnimShape

Built-in shape or custom SVG for particles/grid cells.

Options: circle, square, roundedSquare, triangle, diamond, hexagon, star, cross, svg

backgroundAnimShape: "circle"

backgroundAnimSvgSrc

SVG URL when shape is svg.

backgroundAnimSvgSrc: "https://cdn.example/shape.svg"

backgroundAnimColorMode

solid tints shapes; fromAsset keeps SVG colors.

Options: solid, fromAsset

backgroundAnimColorMode: "solid"

backgroundAnimSize

Unit: px

Base particle or cell size in pixels.

backgroundAnimSize: 12

backgroundAnimJitter

Particle-only 0–1 randomization for count, size, lifetime, and speed.

backgroundAnimJitter: 0.2

backgroundGridStyle

Reactive grid rendering: filled cells, or continuous shape outlines tiled edge-to-edge into one connected lattice that ripples around the cursor. Ignored for svg shapes, which always render as cells.

Options: cells, continuous

backgroundGridStyle: "cells"

backgroundGridHoverGrowLimitPct

Unit: %

Maximum cell size change at the pointer. Positive values grow cells; negative values shrink them. A value of 50 reaches 150% scale after the configured reaction time.

backgroundGridHoverGrowLimitPct: 50

backgroundGridHoverRotateLimitDeg

Unit: deg

Maximum cell rotation at the pointer. Positive values rotate clockwise; negative values rotate counterclockwise.

backgroundGridHoverRotateLimitDeg: 0

backgroundGridReactionTimeSec

Unit: s

Seconds for cells or the continuous-grid ripple to reach their configured hover limit, and to return after the pointer leaves.

backgroundGridReactionTimeSec: 1

Border

borderEnabled

Enables border color, style, width, and radius.

borderEnabled: false

borderColorLight

Border color in light theme.

borderColorLight: "#e5e7eb"

borderColorDark

Border color in dark theme.

borderColorDark: "#374151"

borderStyle

CSS border style.

Options: solid, dashed, dotted

borderStyle: "solid"

borderWidth

Unit: token

Border width token.

Options: none, sm, md, lg

borderWidth: "sm"

borderRadius

Unit: token

Border radius token.

Options: none, sm, md, lg, xl, full

borderRadius: "md"

Shadow

shadowEnabled

Enables box shadow values for light/dark themes.

shadowEnabled: false

shadowValueLight

CSS box-shadow value in light theme.

shadowValueLight: "0 8px 24px rgba(0, 0, 0, 0.12)"

shadowValueDark

CSS box-shadow value in dark theme.

shadowValueDark: "0 8px 24px rgba(0, 0, 0, 0.45)"

Motion & transform

scrollAnimationEnabled

Enables enter-on-scroll animation.

scrollAnimationEnabled: false

scrollAnimationType

Enter-on-scroll animation preset.

Options: fadeIn, slideInBottom, slideInTop, slideInLeft, slideInRight, zoomIn, zoomOut, rotateIn, rotateOut, bounceIn, bounceOut, pulse

scrollAnimationType: "fadeIn"

scrollAnimationDuration

Unit: ms

Animation duration in milliseconds.

scrollAnimationDuration: 600

scrollAnimationDelay

Unit: ms

Animation delay in milliseconds.

scrollAnimationDelay: 0

cursorTiltEnabled

Tilts the block slightly toward the pointer.

cursorTiltEnabled: false

cursorTiltIntensity

Strength of the cursor tilt effect.

cursorTiltIntensity: 8

transformEnabled

Enables CSS transform controls.

transformEnabled: false

transformRotateX

Unit: deg

Rotation around the X axis in degrees.

transformRotateX: 0

transformRotateY

Unit: deg

Rotation around the Y axis in degrees.

transformRotateY: 0

transformRotateZ

Unit: deg

Rotation around the Z axis in degrees.

transformRotateZ: 0

transformTranslateX

Unit: px

Horizontal translation in pixels.

transformTranslateX: 0

transformTranslateY

Unit: px

Vertical translation in pixels.

transformTranslateY: 0

transformTranslateZ

Unit: px

Depth translation in pixels.

transformTranslateZ: 0

transformScale

Unit: ratio

Uniform scale factor (unitless).

transformScale: 1

transformPerspective

Unit: px

CSS perspective distance in pixels.

transformPerspective: 800

Advanced

decorationBySelector

Advanced: apply decoration token overlays for hover, active, and focus. Missing overlay keys inherit the default flat props.

decorationBySelector: {
  hover: { backgroundColorLight: "#f3f4f6" }
}

clipboard

Editor-only control — does not persist its own value.

Editor-only copy/paste helpers for block props.

// Editor-only — does not persist a stored value

{
  "showOnBreakpoints": {},
  "showOnLocales": {},
  "authVisibility": "all",
  "routeLockVisibility": "all",
  "roleVisibility": [],
  "entryActionVisibility": "all",
  "queryPageVisibility": "all",
  "customizeEnabled": false,
  "padding": "none",
  "paddingEnabled": false,
  "sizeByBreakpoint": {},
  "marginsEnabled": false,
  "positionEnabled": false,
  "positionByBreakpoint": {},
  "backgroundEnabled": false,
  "backgroundWidth": "page",
  "backgroundKind": "solid",
  "backgroundColorLight": "",
  "backgroundColorDark": "",
  "gradientAngle": 180,
  "gradientType": "linear",
  "gradientColors": [
    {
      "light": "",
      "dark": "",
      "offset": 50
    },
    {
      "light": "",
      "dark": "",
      "offset": 50
    }
  ],
  "gradientColor1Light": "",
  "gradientColor1Dark": "",
  "gradientColor2Light": "",
  "gradientColor2Dark": "",
  "backgroundImageSrc": "",
  "backgroundImageMode": "cover",
  "backgroundRepeatSize": 100,
  "backgroundPosition": "center",
  "backgroundMotionEnabled": false,
  "backgroundMotionDirectionDeg": 0,
  "backgroundMotionSpeed": 20,
  "backgroundMotionRotateDegPerSec": 0,
  "backgroundVideoSrc": "",
  "backgroundVideoFit": "cover",
  "backgroundVideoLoop": true,
  "backgroundVideoRepeatSize": 100,
  "backgroundAnimationMode": "particle",
  "backgroundAnimShape": "circle",
  "backgroundAnimSvgSrc": "",
  "backgroundAnimColorMode": "solid",
  "backgroundAnimColorLight": "#ffffff88",
  "backgroundAnimColorDark": "#ffffff66",
  "backgroundAnimSize": 12,
  "backgroundAnimJitter": 0.2,
  "backgroundParticleCount": 40,
  "backgroundParticleLifetimeSec": 4,
  "backgroundParticleSpeed": 40,
  "backgroundParticleAnimType": "fade",
  "backgroundParticleFromSide": "left",
  "backgroundParticleToSide": "right",
  "backgroundGridStyle": "cells",
  "backgroundGridMotionDirectionDeg": 0,
  "backgroundGridMotionSpeed": 0,
  "backgroundGridRotateDegPerSec": 0,
  "backgroundGridHoverGrowLimitPct": 50,
  "backgroundGridHoverRotateLimitDeg": 0,
  "backgroundGridReactionTimeSec": 1,
  "backgroundGridHoverGrow": true,
  "backgroundGridHoverRotate": false,
  "backgroundGridHoverColor": false,
  "backgroundGridHoverColorLight": "#ffffff55",
  "backgroundGridHoverColorDark": "#ffffff33",
  "backgroundGridReactionSpeed": 1,
  "pointerEvents": "auto",
  "borderEnabled": false,
  "borderStyle": "solid",
  "borderColorLight": "",
  "borderColorDark": "",
  "shadowEnabled": false,
  "shadowValueLight": "",
  "shadowValueDark": "",
  "scrollAnimationEnabled": false,
  "scrollAnimationType": "fadeIn",
  "scrollAnimationDuration": 600,
  "scrollAnimationDelay": 0,
  "cursorTiltEnabled": false,
  "cursorTiltIntensity": 12,
  "transformEnabled": false,
  "transformRotateX": 0,
  "transformRotateY": 0,
  "transformRotateZ": 0,
  "transformTranslateX": 0,
  "transformTranslateY": 0,
  "transformTranslateZ": 0,
  "transformScale": 1,
  "decorationBySelector": {},
  "steps": [
    {
      "title": "",
      "skipWhenAuthenticated": false,
      "content": []
    }
  ]
}