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, 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
}

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)
allowJavaScript	boolean	No	false	Enable JavaScript execution
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.