HTML Layer

The HTML layer renders HTML/CSS content or screenshots a URL as an image. This enables rich visual elements — TailwindCSS utility classes, Google Fonts, JavaScript libraries (GSAP, Lottie, Chart.js), complex layouts, gradients, shadows, and more.

Example

{
  "type": "image",
  "config": {
    "width": 1200,
    "height": 630,
    "layers": [
      {
        "type": "html",
        "html": "<div style=\"width:100%;height:100%;background:linear-gradient(135deg,#0f172a,#1e293b);display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;\"><div style=\"text-align:center;\"><div style=\"display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:32px;\"><div style=\"width:56px;height:56px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:14px;display:flex;align-items:center;justify-content:center;\"><span style=\"color:white;font-size:28px;font-weight:800;\">J</span></div><span style=\"color:white;font-size:36px;font-weight:700;letter-spacing:-0.5px;\">JsonCut</span></div><h1 style=\"color:#f1f5f9;font-size:52px;font-weight:800;letter-spacing:-1px;margin:0 0 16px 0;\">Create visuals from JSON</h1><p style=\"color:#94a3b8;font-size:22px;margin:0;\">Images &amp; Videos via API — powered by HTML, CSS, and JSON configs</p></div></div>",
        "googleFonts": ["Inter"]
      }
    ]
  }
}

Inline HTML

Provide HTML content directly via the html property:

{
  "type": "image",
  "config": {
    "width": 1200,
    "height": 630,
    "layers": [
      {
        "type": "html",
        "html": "<div style='display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:white;font-size:48px;font-weight:bold;'>Hello World</div>",
        "width": 1200,
        "height": 630
      }
    ]
  }
}

TailwindCSS Support

Enable the TailwindCSS CDN with tailwindcss: true:

{
  "type": "html",
  "html": "<div class='flex items-center justify-center w-full h-full bg-gradient-to-br from-indigo-500 to-purple-600'><h1 class='text-6xl font-bold text-white drop-shadow-lg'>TailwindCSS Works!</h1></div>",
  "tailwindcss": true,
  "width": 1200,
  "height": 630
}

JavaScript Libraries

Set enableLibraries: true to unlock a curated set of JavaScript libraries. 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.

Chart.js Example

{
  "type": "html",
  "html": "<canvas id='chart' style='width:100%;height:100%;'></canvas><script>new Chart(document.getElementById('chart'),{type:'doughnut',data:{labels:['Direct','Social','Organic','Referral'],datasets:[{data:[35,25,28,12],backgroundColor:['#6366f1','#ec4899','#10b981','#f59e0b']}]},options:{responsive:true,plugins:{legend:{labels:{color:'#fff',font:{size:16}}}}}})</script>",
  "css": "body{background:#0f172a;display:flex;align-items:center;justify-content:center;}",
  "enableLibraries": true,
  "width": 1200,
  "height": 630
}

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
• Storage APIs (localStorage, sessionStorage, indexedDB)
• 3D / WebGL libraries (e.g. Three.js)
• Node.js / Server-side code

Google Fonts

Load Google Fonts by specifying font families:

{
  "type": "html",
  "html": "<div style='font-family:Inter,sans-serif;font-size:42px;padding:40px;'>Beautiful typography with Google Fonts</div>",
  "googleFonts": ["Inter"],
  "width": 800,
  "height": 200
}

URL Screenshot

Screenshot an external webpage using the src property (HTTPS only):

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

caution

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

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)
x	number	No	0	X position in pixels
y	number	No	0	Y position in pixels
width	number	No	canvas width	Render width in pixels
height	number	No	canvas height	Render height in pixels
position	string/object	No	—	Position preset or relative coordinates
opacity	number	No	1	Transparency (0-1)
rotation	number	No	0	Rotation in degrees
blur	number	No	—	Blur radius in pixels

Custom CSS

Provide additional CSS via the css property for finer layout control:

{
  "type": "html",
  "html": "<div class='card'><h1>Sales Report</h1><p>Q4 2024 Results</p></div>",
  "css": ".card { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; background:#1a1a2e; color:#e94560; font-family:sans-serif; } h1 { font-size:48px; margin-bottom:12px; } p { font-size:24px; color:#aaa; }",
  "width": 800,
  "height": 400
}

Limits

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