Component library

Components are pre-built animated HTML templates rendered by the JSON2Video engine on their own canvas. You reference a component by its ID (e.g. basic/000) inside a component element and customise its appearance through the settings object.

The catalog below is generated from the live CDN, so it always reflects the current production library. Each card links to a detail page with the full settings reference and a video preview.

Components are pre-built animated HTML elements rendered via Puppeteer. Use with type 'component' and set the 'component' property to the component path (e.g. 'basic/050'). Each component has configurable setting groups with CSS properties.

{ "type": "component", "component": "<pack>/<id>", "settings": { ... } }

Text Cards

Text card components with headline, body, and optional decorative elements

Lower Thirds

Lower-third overlays typically positioned at the bottom of the video, for titles, names, or news-style banners

CNN-style lower-third

Text Animations

Special text animation effects (zoom, falling) that go beyond the basic text styles

Zoom-in text animation

advanced/000

Falling text animation

advanced/001

Items

Interactive or data-driven elements: buttons, counters, ratings, images, tables

Button with mouse click

Shapes

Animated geometric shapes, rectangles, polygons, cutouts, and custom HTML/SVG

Textboxes

Positioned text boxes with backgrounds, borders, and animations

Simple textbox(es)

textbox/simple