HTML Layer

The HTML layer brings full HTML/CSS rendering to your videos. Use it to create rich overlays, animated text, dashboards, branded graphics, or record CSS animations as video segments.

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
}

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:

{
  "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 are significantly faster than animated ones. Only use animated: true when you actually need CSS animation recording.

Combining TailwindCSS, Fonts & Animations

All features can 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; } }",
  "tailwindcss": 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)
allowJavaScript	boolean	No	false	Enable JavaScript execution
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.