Shape Dividers

A Shape Divider is a decorative SVG shape attached to the edge of a section, container, or block. It creates a more interesting visual transition between sections — not just a flat horizontal line, but waves, triangles, zigzags, and more.

How to use

Add a shapeDividers field at the top level of a layout element (not inside style). It is an array — you can attach multiple shapes per element (e.g. a wave on top + a tilt at the bottom).

{
  "type": "section",
  "shapeDividers": [
    { "shape": "waves", "fill": "#ffffff", "height": "80px" }
  ],
  "children": []
}

29 Preset shapes

Horizontal (sit on the top/bottom edge):

• waves, wave, wave-brush
• triangle, triangle-concave, triangle-convex, triangle-double
• tilt, zigzag, stroke, stroke-2
• cloud, drops, grid-round, grid-square, round, square

Vertical (sit on the left/right edge, all prefixed vertical-):

• vertical-waves, vertical-wave, vertical-wave-brush
• vertical-triangle, vertical-triangle-double, vertical-tilt
• vertical-zigzag, vertical-stroke, vertical-stroke-2
• vertical-cloud, vertical-drops, vertical-pixels

Plus custom — paste your own SVG markup.

Field reference

Field	Type	Default	Description
shape	enum	(required)	One of the presets above, or "custom"
shapeCustom	string	—	Raw SVG markup (when shape: "custom"). Auto-sanitized for XSS safety.
fill	CSS color	currentColor	Fill color
height	CSS length	80px	Shape height
width	CSS length	100%	Shape width
rotate	number (deg)	0	Rotation
flipHorizontal	boolean	false	Mirror on the X axis
flipVertical	boolean	false	Mirror on the Y axis
front	boolean	false	true = above content, false = behind content
overflow	boolean	false	true = the shape may overflow the element box
horizontalAlign	enum	—	flex-start | center | flex-end
verticalAlign	enum	—	flex-start | center | flex-end
top / right / bottom / left	CSS length	—	Override alignment with an explicit offset

Default behavior: if verticalAlign/top/bottom are all empty, the shape is pinned to the bottom edge.

Common use cases

1. Hero-to-body transition — a wave at the bottom of a hero section:

{
  "type": "section",
  "shapeDividers": [{ "shape": "waves", "fill": "#ffffff", "height": "90px" }],
  "style": { "desktop": { "background": { "color": "#0a1312" } } }
}

2. Dual divider — wave at the top + tilt at the bottom:

{
  "shapeDividers": [
    { "shape": "wave", "fill": "#0a1312", "height": "70px", "verticalAlign": "flex-start", "flipVertical": true },
    { "shape": "tilt", "fill": "#0a1312", "height": "80px" }
  ]
}

3. Custom SVG from a designer:

{
  "shapeDividers": [
    {
      "shape": "custom",
      "shapeCustom": "<svg viewBox='0 0 1200 100' preserveAspectRatio='none'><path d='M0,0 L1200,100 L0,100 Z'/></svg>",
      "fill": "#1a1a1a"
    }
  ]
}

Inspector UI

Open the Style tab → Shape Dividers group (only shown for section/container/block). Click Add to add a new divider, then configure it via the shape dropdown + color picker + dimension fields. Multiple dividers? Reorder with the ↑/↓ buttons, delete with 🗑.

Security

shapeCustom passes through a server-side sanitizer before rendering — it strips <script>, event handlers (onload, onclick, etc.), and external references. Only visual tags survive: path, polygon, g, rect, etc. Safe for user input.

Tips

• Use a fill that matches the next section's color for a seamless transition. If the next section is #ffffff, set the divider fill: "#ffffff".
• flipVertical: true on a bottom-default shape makes it "rise upward" — useful for hero dividers.
• Responsive: for now a single value applies to all devices. Per-device mode is coming soon.