Spacer / Separator

A lightweight visual divider and vertical spacing control. Renders as a horizontal rule (solid or dashed) with configurable thickness, color, and surrounding whitespace, or as an invisible spacer block when the line is hidden.

Overview

A Spacer / Separator (spacer_separator) inserts a horizontal dividing line and/or vertical whitespace between other elements in a template. It is the simplest layout utility node - no children, no data binding, no expressions beyond visibleWhen.

It has three modes controlled by the lineStyle property:

Mode	Description
`solid` (default)	A solid horizontal rule drawn the full content width.
`dashed`	A dashed horizontal rule (5pt dash / 4pt gap).
`none`	No visible line - pure vertical whitespace only.

Properties

Property	Type	Default	Description
`lineStyle`	`select`	`solid`	Visual style of the rule. Options: `solid`, `dashed`, `none (space only)`.
`lineColor`	`color`	`theme.borderColor`	Color of the rule. Accepts theme tokens such as `theme.borderColor` or any hex value.
`lineWidth`	`number`	`0.5`	Thickness of the rule in points.
`spaceAbove`	`number`	`8`	Vertical space (pt) inserted above the rule.
`spaceBelow`	`number`	`8`	Vertical space (pt) inserted below the rule.

Spacer-only mode

Setting lineStyle: "none" renders an invisible block that consumes spaceAbove + spaceBelow points of vertical space. Use this to:

Add breathing room between two sections without drawing a line.
Create precise vertical offsets in complex layouts.

Orphan Protection

The renderer automatically hides trailing spacer_separator nodes that become orphaned when the section or container immediately after them is conditionally hidden. This prevents stray divider lines appearing at the bottom of a page or section when their following content is absent.

Tip

You do not need to add visibleWhen expressions to separators that sit directly before conditionally-visible sections - orphan protection handles this automatically.

Conditional Visibility

Property	Path	Description
`Visible When`	`expressions.visibleWhen`	Expression evaluated at render time. The element is omitted entirely (no space, no line) when falsy.

Examples

Default hairline rule

All defaults - a subtle 0.5pt solid line using the theme border color.

{
  "type": "spacer_separator",
  "props": {
    "lineStyle": "solid",
    "lineColor": "theme.borderColor",
    "lineWidth": 0.5,
    "spaceAbove": 8,
    "spaceBelow": 8
  }
}

Pure vertical spacer (no line)

{
  "type": "spacer_separator",
  "props": {
    "lineStyle": "none",
    "spaceAbove": 16,
    "spaceBelow": 0
  }
}

Dashed section break

{
  "type": "spacer_separator",
  "props": {
    "lineStyle": "dashed",
    "lineColor": "theme.borderColor",
    "lineWidth": 0.5,
    "spaceAbove": 12,
    "spaceBelow": 12
  }
}

Heavy accent rule

{
  "type": "spacer_separator",
  "props": {
    "lineStyle": "solid",
    "lineColor": "theme.primary",
    "lineWidth": 2,
    "spaceAbove": 12,
    "spaceBelow": 12
  }
}

With conditional visibility

{
  "type": "spacer_separator",
  "props": {
    "lineStyle": "dashed",
    "lineColor": "theme.borderColor",
    "lineWidth": 0.5,
    "spaceAbove": 8,
    "spaceBelow": 8
  },
  "expressions": {
    "visibleWhen": "showDivider === true"
  }
}

Spacer / Separator

On this page