A structural layout component that divides space into multiple distinct content areas separated by high-contrast visual dividers. It is designed to group complex sub-sections or sidebars neatly within a unified container block.

Usage

These examples illustrate how content editors configure and structure resizable splitter containers.

1. Horizontal Dashboard Splitter

Divides the layout into a left-side navigation/info bar and a right-side main content area. This is ideal for workspace layouts, technical documentation pages, or side-by-side product showcases.

{
  "type": "splitter",
  "orientation": "horizontal",
  "panels": [
    {
      "id": "left",
      "content": [
        {
          "blockType": "text",
          "content": "Left Panel (Sidebar)"
        }
      ]
    },
    {
      "id": "right",
      "content": [
        {
          "blockType": "text",
          "content": "Right Panel (Main Content)"
        }
      ]
    }
  ]
}

2. Vertical Stack Splitter

Stacks content areas vertically, separated by a horizontal divider line. Ideal for dividing code playgrounds, stacked content feeds, or preview-and-editor dashboard sections.

{
  "type": "splitter",
  "orientation": "vertical",
  "panels": [
    {
      "id": "top",
      "content": [
        {
          "blockType": "text",
          "content": "Top Section (Code / Editor)"
        }
      ]
    },
    {
      "id": "bottom",
      "content": [
        {
          "blockType": "text",
          "content": "Bottom Section (Live Preview)"
        }
      ]
    }
  ]
}

Props

Developer Notes & Accessibility

• Static Content Compilation: To guarantee zero hydration lag and peak performance, the Splitter block compiled via the CMS Page Builder always renders in static presentation mode (interactive={false}). Because a panel's content holds arbitrary nested JSX block elements, keeping it static prevents the serialization boundary issues that occur during island hydration.
• Pure CSS Layout Flexbox: Static Splitter layouts are compiled as pure, lightweight CSS Flexbox rows or columns. This eliminates the need for any JavaScript layout execution on load, avoiding layout shift (CLS) completely.
• WAI-ARIA Layout Roles: Generates semantic layout attributes pointing out panel groupings clearly. The horizontal and vertical divider lines compile to standard divider separators (role="separator"), helping screen reader users understand layout transitions.