Components deep-dive#

Components are pre-built HTML templates rendered as part of your video. They are the fastest way to add polished, animated elements — lower-thirds, intros, outros, social cards — without writing HTML yourself.

The catalog lives at https://json2video.com/components/. Each component has a unique ID and a set of parameters you can pass via the settings object.

Anatomy of a component element#

{
  "type": "component",
  "component": "advanced/intro-001",
  "settings": {
    "title": "Welcome",
    "subtitle": "to JSON2Video",
    "background-color": "#0a0a0a",
    "text-color": "#ffffff"
  },
  "duration": 5
}

• component — the component ID from the catalog.
• settings — a key-value object whose accepted keys are documented on the component's page in the catalog.
• duration — how long the component plays, in seconds. Some components have built-in animations that loop or freeze when duration is longer than the animation.

Discovering components#

The component catalog is grouped by section:

• Text cards — headline + body cards with positioning controls.
• Lower-thirds — name/title overlays for the bottom of the frame.
• Text animations — stand-alone animated text (zoom, falling) beyond the basic text styles.
• Items — buttons, counters, ratings, images, tables.
• Shapes — animated rectangles, polygons, cutouts, custom HTML/SVG.
• Backgrounds — full-screen animated or patterned backgrounds.
• Effects — vignettes, wipes, transitions.
• Textboxes — positioned text boxes with backgrounds and borders.

Browse the full catalog at the component library reference; each component links to a detail page with the accepted settings and a video preview.

Combining components and other elements#

Components are regular elements — you can stack them with images, videos, voice, etc. A typical pattern:

{
  "scenes": [
    {
      "elements": [
        { "type": "video", "src": "https://example.com/background.mp4" },
        { "type": "component", "component": "advanced/lower-third-001", "settings": { "name": "Ana López", "title": "Product Manager" }, "duration": 8 }
      ]
    }
  ]
}

The video plays as background; the lower-third animates in on top.

Building your own components#

Components are HTML/CSS/JS templates hosted on the JSON2Video CDN. If you need a reusable template that's specific to your product or brand:

1. Build the HTML/CSS yourself (any framework — vanilla, Tailwind, React-compiled).
2. Host it on your own server.
3. Use the html element with src pointing at your URL.

Pass parameters as query string variables in the URL; your HTML reads them with URLSearchParams.

For higher-volume use cases, contact support@json2video.com about adding a private component to the catalog.

See also#

• Component element reference
• Tutorial 5 — Component library
• HTML & screenshot rendering