HTML & screenshot rendering#

The html element renders any HTML/CSS/JS snippet inside a real headless browser and composites the result onto the video. This unlocks anything you can build with web technologies: animated cards, code highlighting, animated charts, web fonts, custom layouts.

Two flavours: inline HTML and URL#

You can either provide an HTML string inline or point at a URL the engine will load.

Inline HTML#

{
  "type": "html",
  "html": "<div style='font-family:Inter;background:#0a0a0a;color:#fff;padding:40px;font-size:80px'>Hello world</div>",
  "duration": 5
}

The engine renders the HTML in a transparent-background browser at the element's width/height, then composites it onto the scene.

External URL#

{
  "type": "html",
  "src": "https://example.com/my-template.html?title=Hello&accent=ff6b00",
  "duration": 5
}

This is useful for complex templates hosted on your own server. JSON2Video maintains a set of pre-built components at https://cdn.json2video.com/components/ — these are HTML templates accepted as component elements (see component reference).

Sizing and DPI#

By default the HTML is rendered at the element's width × height (in pixels). To improve crispness on smaller elements, set a higher dpi:

{
  "type": "html",
  "html": "<div>...</div>",
  "width": 600,
  "height": 200,
  "dpi": 2
}

dpi: 2 doubles the render resolution and scales back down — equivalent to a Retina rendering pass. Higher values cost more render time.

Animations#

The HTML element captures frame by frame for duration seconds. CSS animations and JS-driven animations are recorded in real time. Common patterns:

• CSS keyframe animations: work out of the box.
• requestAnimationFrame-driven JS: works, but make sure your script does not rely on user interaction.
• Web fonts: the engine waits for fonts to load before capturing.

When to use HTML rendering vs components#

See also#

• HTML element reference
• Tutorial 6 — HTML elements
• Components deep-dive