HTML Layer

The HTML layer brings full HTML/CSS rendering to your videos. Use it to create rich overlays, animated text, dashboards, data visualizations, branded graphics, or record CSS/JS animations as video segments — with full transparent background support.

Static HTML Example

{
  "type": "video",
  "config": {
    "width": 1280,
    "height": 720,
    "fps": 25,
    "clips": [
      {
        "duration": 5,
        "layers": [
          {
            "type": "fill-color",
            "color": "#0f172a"
          },
          {
            "type": "html",
            "html": "<div style=\"width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Inter',sans-serif;\"><h1 style=\"color:#f8fafc;font-size:64px;font-weight:800;\">HTML in Video</h1><p style=\"color:#94a3b8;font-size:28px;margin-top:16px;\">Static HTML rendered as a video layer</p></div>",
            "googleFonts": ["Inter"]
          }
        ]
      }
    ]
  }
}

CSS Animation Example

{
  "type": "video",
  "config": {
    "width": 1280,
    "height": 720,
    "fps": 25,
    "clips": [
      {
        "duration": 4,
        "layers": [
          {
            "type": "html",
            "html": "<style>@keyframes fadeSlideUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}@keyframes expandLine{from{width:0}to{width:200px}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.scene{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);font-family:'Inter',sans-serif}.title{color:white;font-size:64px;font-weight:800;opacity:0;animation:fadeSlideUp 1s ease forwards}.line{height:4px;background:white;border-radius:2px;margin-top:24px;width:0;animation:expandLine 0.8s ease 0.6s forwards}.subtitle{color:rgba(255,255,255,0.8);font-size:24px;margin-top:20px;opacity:0;animation:fadeIn 0.6s ease 1.2s forwards}</style><div class='scene'><h1 class='title'>Breaking News</h1><div class='line'></div><p class='subtitle'>CSS Animations in Video</p></div>",
            "googleFonts": ["Inter"],
            "animated": true,
            "duration": 4
          }
        ]
      }
    ]
  }
}

Static HTML Overlay

Use static HTML to create overlays rendered as a single frame. Ideal for lower thirds, watermarks, or branded elements:

{
  "type": "html",
  "html": "<div style='display:flex;align-items:center;padding:20px 40px;background:rgba(0,0,0,0.7);border-radius:12px;'><span style='color:white;font-size:28px;font-weight:600;'>LIVE — London</span></div>",
  "position": "bottom-left",
  "start": 0,
  "stop": 10
}

TailwindCSS Support

Enable TailwindCSS utility classes with tailwindcss: true:

{
  "type": "html",
  "html": "<div class='flex items-center justify-center w-full h-full bg-gradient-to-r from-violet-600 to-indigo-600'><h1 class='text-7xl font-extrabold text-white tracking-tight drop-shadow-xl'>Summer Sale</h1></div>",
  "tailwindcss": true,
  "width": 1920,
  "height": 1080
}

JavaScript Libraries

Set enableLibraries: true to unlock a curated set of JavaScript libraries for animations, data visualizations, and motion graphics. When enabled, you can use inline <script> tags to write code using the provided libraries.

Included Libraries

Library	Version	Global	Use Case
TailwindCSS	Play CDN	—	Utility-first CSS framework
GSAP	3.x	`gsap`	Professional-grade animations & timelines
Lottie Web	5.x	`lottie`	After Effects JSON animations
Chart.js	4.x	`Chart`	Data visualizations (bar, line, pie, etc.)
Motion	12.x	`Motion`	Spring physics, keyframe animations, stagger
Anime.js	4.x	`anime`	Lightweight timeline & property animations
D3.js	7.x	`d3`	Advanced data visualizations (maps, graphs, custom charts)
Lucide Icons	1.x	`lucide`	1500+ open-source SVG icons

All libraries are loaded automatically — you do not need to add any <script src="..."> tags. Just use the global variable directly in your inline <script> code.

If you accidentally include a <script> tag that imports one of these libraries, it will be automatically removed to prevent loading the library twice.

GSAP Animation Example

{
  "type": "html",
  "html": "<div id='box' style='width:100px;height:100px;background:#e11d48;border-radius:12px;'></div><script>gsap.to('#box',{x:400,rotation:360,duration:2,repeat:-1,yoyo:true})</script>",
  "enableLibraries": true,
  "animated": true,
  "duration": 5,
  "width": 1920,
  "height": 1080
}

Lottie Animation Example

{
  "type": "html",
  "html": "<div id='lottie' style='width:400px;height:400px;margin:auto;'></div><script>lottie.loadAnimation({container:document.getElementById('lottie'),renderer:'svg',loop:true,autoplay:true,path:'https://cdn.jsdelivr.net/npm/lottie-web@5/demo/lottie/data.json'})</script>",
  "enableLibraries": true,
  "animated": true,
  "duration": 5,
  "width": 1920,
  "height": 1080
}

Chart.js Example

{
  "type": "html",
  "html": "<canvas id='chart' style='width:100%;height:100%;'></canvas><script>new Chart(document.getElementById('chart'),{type:'bar',data:{labels:['Jan','Feb','Mar','Apr','May'],datasets:[{label:'Revenue',data:[12,19,8,15,22],backgroundColor:['#6366f1','#8b5cf6','#a78bfa','#c4b5fd','#ddd6fe']}]},options:{responsive:true,plugins:{legend:{labels:{color:'#fff'}},title:{display:true,text:'Monthly Revenue',color:'#fff',font:{size:24}}},scales:{x:{ticks:{color:'#94a3b8'}},y:{ticks:{color:'#94a3b8'}}}}})</script>",
  "css": "body{background:#0f172a;display:flex;align-items:center;justify-content:center;}",
  "enableLibraries": true,
  "width": 1920,
  "height": 1080
}

Motion Example

{
  "type": "html",
  "html": "<div id='box' style='width:120px;height:120px;background:#6366f1;border-radius:16px;'></div><script>Motion.animate('#box',{x:[0,400],rotate:[0,360],scale:[1,1.2,1]},{duration:2,repeat:Infinity,direction:'alternate',easing:'spring(1,80,10,0)'})</script>",
  "enableLibraries": true,
  "animated": true,
  "duration": 5,
  "width": 1920,
  "height": 1080
}

Anime.js Example

{
  "type": "html",
  "html": "<div style='display:flex;gap:20px;align-items:center;justify-content:center;width:100%;height:100%;'><div class='dot' style='width:60px;height:60px;background:#f43f5e;border-radius:50%;'></div><div class='dot' style='width:60px;height:60px;background:#f43f5e;border-radius:50%;'></div><div class='dot' style='width:60px;height:60px;background:#f43f5e;border-radius:50%;'></div></div><script>anime.animate('.dot',{y:[-40,40],scale:[1,0.8,1]},{duration:800,loop:true,alternate:true,delay:anime.stagger(100)})</script>",
  "css": "body{background:#0f172a;}",
  "enableLibraries": true,
  "animated": true,
  "duration": 4,
  "width": 1920,
  "height": 1080
}

D3.js Example

{
  "type": "html",
  "html": "<svg id='chart' width='800' height='400'></svg><script>const data=[30,86,168,281,303,365];const w=800,h=400,bar=h/data.length;const x=d3.scaleLinear().domain([0,d3.max(data)]).range([0,w-40]);const svg=d3.select('#chart');svg.selectAll('rect').data(data).join('rect').attr('y',(d,i)=>i*bar+2).attr('width',d=>x(d)).attr('height',bar-4).attr('fill','#6366f1').attr('rx',4);svg.selectAll('text').data(data).join('text').attr('x',d=>x(d)+6).attr('y',(d,i)=>i*bar+bar/2+5).text(d=>d).attr('fill','#e2e8f0').attr('font-size','16px')</script>",
  "css": "body{background:#0f172a;display:flex;align-items:center;justify-content:center;}",
  "enableLibraries": true,
  "width": 1920,
  "height": 1080
}

Lucide Icons Example

{
  "type": "html",
  "html": "<div style='display:flex;gap:24px;align-items:center;justify-content:center;height:100%;'><i data-lucide='heart' style='width:64px;height:64px;color:#e11d48;'></i><i data-lucide='star' style='width:64px;height:64px;color:#eab308;'></i><i data-lucide='zap' style='width:64px;height:64px;color:#6366f1;'></i></div><script>lucide.createIcons()</script>",
  "css": "body{background:#0f172a;}",
  "enableLibraries": true,
  "width": 800,
  "height": 400
}

info

enableLibraries: true also enables TailwindCSS automatically — you do not need to set tailwindcss: true separately.

What's Not Supported

The following are not available in HTML layers, even with enableLibraries: true:

Custom external scripts — only the built-in libraries listed above can be used
External network requests from JavaScript (e.g. fetch(), XMLHttpRequest)
WebSockets and WebRTC
Web Workers and SharedWorkers
Storage APIs (localStorage, sessionStorage, indexedDB)
3D / WebGL libraries (e.g. Three.js) — not currently supported
Node.js / Server-side code — HTML layers run in a browser environment

tip

For CSS-only animations (no JS needed), you don't need enableLibraries — use CSS @keyframes with animated: true and the css property.

Google Fonts

Load one or more Google Font families for custom typography:

{
  "type": "html",
  "html": "<div style='display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:#0f172a;'><h1 style='font-family:Playfair Display,serif;font-size:56px;color:#f8fafc;'>Chapter One</h1><p style='font-family:Inter,sans-serif;font-size:24px;color:#94a3b8;margin-top:12px;'>The Beginning</p></div>",
  "googleFonts": ["Playfair Display", "Inter"],
  "width": 1920,
  "height": 1080
}

Animated HTML (CSS Animations)

Record CSS animations as a video segment with animated: true. The animation is captured frame-by-frame for the specified duration. Animated HTML layers support transparent backgrounds, so they work as overlays on top of other layers.

{
  "type": "html",
  "html": "<div class='scene'><h1 class='title'>Breaking News</h1><div class='bar'></div></div>",
  "css": ".scene { width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent; } .title { font-size:72px;font-weight:800;color:white;opacity:0;animation:fadeSlide 1.5s ease forwards; } .bar { width:0;height:4px;background:#e11d48;margin-top:16px;animation:expand 1s ease 0.5s forwards; } @keyframes fadeSlide { from { opacity:0;transform:translateY(40px); } to { opacity:1;transform:translateY(0); } } @keyframes expand { from { width:0; } to { width:300px; } }",
  "animated": true,
  "duration": 3,
  "width": 1920,
  "height": 1080
}

tip

Static HTML layers render as a single frame and are significantly faster than animated ones. Only use animated: true when you need CSS or JavaScript animation recording.

Combining Features

TailwindCSS, Google Fonts, libraries, and animations can all be combined in a single layer:

{
  "type": "html",
  "html": "<div class='flex items-center justify-center w-full h-full'><h1 class='animate-text text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500' style='font-family:Montserrat,sans-serif;'>EPIC</h1></div>",
  "css": ".animate-text { animation:scaleIn 1s ease forwards; } @keyframes scaleIn { from { transform:scale(0.3);opacity:0; } to { transform:scale(1);opacity:1; } }",
  "enableLibraries": true,
  "googleFonts": ["Montserrat"],
  "animated": true,
  "duration": 2
}

URL Screenshot

Screenshot an external webpage and use it as a video overlay (HTTPS only):

{
  "type": "html",
  "src": "https://example.com",
  "width": 1280,
  "height": 720,
  "wait": 2,
  "position": "center"
}

caution

The html and src properties are mutually exclusive — use one or the other per layer.

Custom CSS

The css property provides a full stylesheet, separate from the inline style attributes in your HTML:

{
  "type": "html",
  "html": "<div class='scoreboard'><div class='team home'>Manchester United</div><div class='score'>2 — 1</div><div class='team away'>Liverpool</div></div>",
  "css": ".scoreboard { display:flex;align-items:center;gap:24px;padding:16px 32px;background:rgba(15,23,42,0.9);border-radius:8px;font-family:sans-serif; } .team { font-size:20px;color:#e2e8f0;font-weight:600; } .score { font-size:32px;color:white;font-weight:800;letter-spacing:4px; }",
  "position": "top"
}

Timing Control

Control when an HTML layer appears and disappears within a clip using start and stop:

{
  "clips": [
    {
      "duration": 10,
      "layers": [
        { "type": "video", "path": "background.mp4" },
        {
          "type": "html",
          "html": "<div class='flex items-center gap-3 px-6 py-3 bg-red-600 rounded-full'><span class='text-white font-bold text-xl'>🔴 LIVE</span></div>",
          "tailwindcss": true,
          "position": "top-right",
          "start": 2,
          "stop": 8
        }
      ]
    }
  ]
}

Global HTML Layers

HTML layers work with globalLayers to span across the entire video:

{
  "clips": [ ... ],
  "globalLayers": [
    {
      "type": "html",
      "html": "<img src='data:image/svg+xml,...' style='width:120px;opacity:0.5;' />",
      "position": "bottom-right",
      "start": 0,
      "stop": 60
    }
  ]
}

Properties

Property	Type	Required	Default	Description
`type`	`"html"`	Yes	—	Layer type identifier
`html`	string	One of html/src	—	Inline HTML snippet (max 100KB)
`src`	string	One of html/src	—	URL to screenshot (HTTPS only, max 2048 chars)
`css`	string	No	—	Additional CSS styles (max 50KB)
`tailwindcss`	boolean	No	`false`	Enable TailwindCSS CDN
`googleFonts`	string[]	No	—	Google Font families to load (max 10)
`wait`	number	No	`0`	Seconds to wait before screenshot (0–5)
`enableLibraries`	boolean	No	`false`	Enable JS libraries (GSAP, Lottie, Chart.js, TailwindCSS)
`animated`	boolean	No	`false`	Record CSS animations as video
`duration`	number	No	`5`	Animation recording duration in seconds (max 30)
`width`	number	No	video width	Render width in pixels
`height`	number	No	video height	Render height in pixels
`position`	string/object	No	—	Position in frame
`start`	number	No	—	Start time within clip (seconds)
`stop`	number	No	—	Stop time within clip (seconds)
`opacity`	number	No	`1`	Transparency (0–1)

Limits

HTML layers have specific size and rendering constraints. See the Rate Limits & Tokens page for the full list.

Static HTML Example​

CSS Animation Example​

Static HTML Overlay​

TailwindCSS Support​

JavaScript Libraries​

Included Libraries​

GSAP Animation Example​

Lottie Animation Example​

Chart.js Example​

Motion Example​

Anime.js Example​

D3.js Example​

Lucide Icons Example​

What's Not Supported​

Google Fonts​

Animated HTML (CSS Animations)​

Combining Features​

URL Screenshot​

Custom CSS​

Timing Control​

Global HTML Layers​

Properties​

Limits​