Skip to content

Element schemas

Slides are built from positioned elements. Each element type is identified by its content field (e.g. markdown:); see its page for the full field list.

Element Description
container Positioned box holding child elements in its own %-coordinate space.
html Inline raw HTML content.
iframe Sandboxed iframe embedding a self-contained HTML document.
image Image from an external file (PNG, JPEG, SVG, …).
image_sequence Scroll-driven filmstrip of crossfading images.
markdown Markdown content, rendered to HTML at build time.
mermaid Mermaid diagram, rendered client-side.
template Jinja2 template rendering to a container of child elements.

Common fields

Every element shares these positioning and animation fields:

Field Type Default Description
name string (optional) null Optional human-readable label. Used in error messages only, not for rendering.
position [x, y] (animatable) [5.0, 5.0] Element position as [x%, y%] of the slide viewport, or animated via keyframes. Default [5, 5] — a 5%-inset top-left. [0, 0] = exact top-left, [100, 100] = bottom-right corner. The anchor point of the element is placed at this position.
width number | "auto" (animatable) 90.0 Element width as % of slide viewport, "auto", or animated via keyframes. Default 90, pairing with position [5, 5] for a centered 90%-wide column. Use "auto" to preserve aspect ratio (images) or size to content (text).
height number | "auto" (animatable) "auto" Element height as % of slide viewport, "auto", or animated via keyframes. Default "auto" — content-driven height. Set to a number to fix the height, or animate via keyframes.
anchor [x, y] (animatable) [0.0, 0.0] Reference point within the element as [x%, y%] of the element's own box, or animated via keyframes. [0, 0] = top-left corner placed at position (default), [50, 50] = center placed at position. Also serves as the pivot for scale and angle transforms.
opacity number (animatable) 1.0 Element opacity (0.0 = invisible, 1.0 = fully visible), or animated via keyframes.
scale number (animatable) 1.0 Scale factor (1.0 = original size), or animated via keyframes.
angle number (animatable) 0.0 Rotation in degrees (positive = clockwise), or animated via keyframes.