JSON2VIDEO Documentation 6. HTML elements
When the component library does not have what you need — say, a custom price tag with rounded corners, brand colours, and a dollar-sign icon — drop an html element. JSON2Video renders the HTML, takes a snapshot (optionally after a delay), and composes it onto the canvas. This chapter adds a styled $849,000 price tag in the bottom-right corner of every room scene.
Prerequisites: chapter 5. You should know what scene-level vs movie-level elements are.
Step 1 — A minimal HTML element
The html element takes an html string. Empty/default styles inherit from a transparent body — useful for overlays.
{
"type": "html",
"html": "<div style='padding:24px;background:#0E7C66;color:#fff;border-radius:12px;font:700 64px/1 Inter,sans-serif;'>$849,000</div>",
"position": "bottom-right",
"x": -60,
"y": -60,
"duration": 4
}
The HTML is rendered in a transparent viewport and trimmed to the element's bounding box. Position works exactly like the text element from chapter 4.
Step 2 — Use Tailwind utilities for readability
Inline style attributes become unreadable past a couple of properties. JSON2Video can preload Tailwind CSS for html elements — flip the tailwind flag.
{
"type": "html",
"tailwind": true,
"html": "<div class='inline-flex items-center gap-2 px-6 py-4 rounded-xl bg-emerald-700 text-white text-5xl font-bold shadow-lg'><span>💰</span><span>$849,000</span></div>",
"position": "bottom-right",
"x": -60,
"y": -60,
"duration": 4
}
With tailwind: true the element's HTML is wrapped in a document with the Tailwind stylesheet preloaded — so utility classes resolve directly.
Step 3 — Wait for fonts / images to load before screenshot
Custom fonts and remote images need time to load. The wait property delays the screenshot by N seconds:
{
"type": "html",
"tailwind": true,
"wait": 0.5,
"html": "<div class='inline-flex items-center gap-2 px-6 py-4 rounded-xl bg-emerald-700 text-white text-5xl font-bold shadow-lg'>💰 $849,000</div>",
"position": "bottom-right",
"x": -60,
"y": -60,
"duration": 4
}
500 ms is enough for Tailwind + a Google Font; 1–2 s is safe for any custom asset.
Step 4 — Apply the price tag to every room scene
Promote the price tag to a movie-level element so it shows on every room scene. Limit it to scenes 2–4 with start/duration so it does not overlay the title card.
{
"resolution": "full-hd",
"elements": [
{
"type": "audio",
"src": "https://cdn.json2video.com/assets/audios/uplifting-corporate.mp3",
"volume": 0.4
},
{
"type": "html",
"tailwind": true,
"wait": 0.5,
"html": "<div class='inline-flex items-center gap-2 px-6 py-4 rounded-xl bg-emerald-700 text-white text-5xl font-bold shadow-lg'>💰 $849,000</div>",
"position": "bottom-right",
"x": -60,
"y": -60,
"start": 4,
"duration": 12
}
],
"scenes": [
{ "duration": 4, "elements": [ { "type": "component", "component": "basic/000", "settings": { "headline": "FOR SALE", "subline": "123 Oak Street" } } ] },
{ "duration": 4, "transition": { "style": "fade", "duration": 0.5 }, "elements": [ { "type": "image", "src": "https://cdn.json2video.com/assets/images/sample-house-front.jpg" }, { "type": "text", "text": "Exterior", "position": "bottom-left", "x": 60, "y": -60 } ] },
{ "duration": 4, "transition": { "style": "fade", "duration": 0.5 }, "elements": [ { "type": "image", "src": "https://cdn.json2video.com/assets/images/sample-house-kitchen.jpg" }, { "type": "text", "text": "Chef's Kitchen", "position": "bottom-left", "x": 60, "y": -60 } ] },
{ "duration": 4, "transition": { "style": "fade", "duration": 0.5 }, "elements": [ { "type": "image", "src": "https://cdn.json2video.com/assets/images/sample-house-bedroom.jpg" }, { "type": "text", "text": "Master Bedroom", "position": "bottom-left", "x": 60, "y": -60 } ] }
]
}
Movie-level elements use the movie timeline, so start: 4 means "4 s into the movie" — i.e. right when scene 2 begins. duration: 12 covers the three room scenes.
The complete final JSON
{
"resolution": "full-hd",
"elements": [
{
"type": "audio",
"src": "https://cdn.json2video.com/assets/audios/uplifting-corporate.mp3",
"volume": 0.4
},
{
"type": "html",
"tailwind": true,
"wait": 0.5,
"html": "<div class='inline-flex items-center gap-2 px-6 py-4 rounded-xl bg-emerald-700 text-white text-5xl font-bold shadow-lg'>💰 $849,000</div>",
"position": "bottom-right",
"x": -60,
"y": -60,
"start": 4,
"duration": 12
}
],
"scenes": [
{
"duration": 4,
"elements": [
{
"type": "component",
"component": "basic/000",
"settings": { "headline": "FOR SALE", "subline": "123 Oak Street" }
}
]
},
{
"duration": 4,
"transition": { "style": "fade", "duration": 0.5 },
"elements": [
{ "type": "image", "src": "https://cdn.json2video.com/assets/images/sample-house-front.jpg" },
{ "type": "text", "text": "Exterior", "position": "bottom-left", "x": 60, "y": -60 }
]
},
{
"duration": 4,
"transition": { "style": "fade", "duration": 0.5 },
"elements": [
{ "type": "image", "src": "https://cdn.json2video.com/assets/images/sample-house-kitchen.jpg" },
{ "type": "text", "text": "Chef's Kitchen", "position": "bottom-left", "x": 60, "y": -60 }
]
},
{
"duration": 4,
"transition": { "style": "fade", "duration": 0.5 },
"elements": [
{ "type": "image", "src": "https://cdn.json2video.com/assets/images/sample-house-bedroom.jpg" },
{ "type": "text", "text": "Master Bedroom", "position": "bottom-left", "x": 60, "y": -60 }
]
}
]
}
Expected output
A 16-second video. The intro title card runs for 4 s, then a green rounded "💰 $849,000" tag appears bottom-right and stays through the three room scenes. Sample render: tutorial-06.mp4 (placeholder).
What you learned
type: htmlrenders an arbitrary HTML snippet into an image and composes it on the canvas.tailwind: truepreloads Tailwind utility classes so you can skip inlinestyleblocks.waitdelays the screenshot — set it to ~0.5 s for Tailwind, longer for custom fonts or remote images.- Movie-level elements have a movie-wide timeline;
startis measured from movie start, not scene start.
Going further
The html element accepts a src URL instead of inline html for screenshots of a live web page. See HTML element reference and the HTML rendering guide.