Docs / Templates / Code Screenshot template

Code Screenshot template

The code-screenshot template renders a developer image as a PNG. POST a JSON payload to the endpoint below and you receive a CDN URL in the response.

Endpoint

POST https://html2img.com/api/v1/templates/code-screenshot
X-API-Key: <your-api-key>
Content-Type: application/json

Authentication uses the X-API-Key header. See the authentication docs for details on issuing and rotating keys.

Inputs

The full set of inputs the template accepts:

Name	Type	Required	Description	Example
`code`	string	Yes	Text value for the code.	export async function fetchUser(id: string) { const res = await fetch(`/api/users/${id}`); if (!res.ok) { throw new Error(`Failed to load user ${id}`); } return res.json() as Promise<User>; }
`language`	string	No	Text value for the language.	`typescript`
`title`	string	No	Main headline shown in the image.	`src/lib/users.ts`
`theme`	string	No	Text value for the theme.	`github-dark`
`background`	string	No	Text value for the background.	`linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%)`
`padding`	number	No	Numeric value for padding.	`72`
`show_window_chrome`	enum (true \| false)	No	One of the supported show window chrome values listed below.	`true`
`show_line_numbers`	enum (true \| false)	No	One of the supported show line numbers values listed below.	`false`

Enum values

show_window_chrome accepts one of: true , false .

show_line_numbers accepts one of: true , false .

Defaults

Defaults applied automatically when not overridden in the request:

Option	Default value
`width`	`1600`
`height`	`1000`
`ms_delay`	`1200`

Code examples

curl -X POST https://app.html2img.com/api/v1/templates/code-screenshot \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"code":"export async function fetchUser(id: string) {\n  const res = await fetch(`/api/users/${id}`);\n\n  if (!res.ok) {\n    throw new Error(`Failed to load user ${id}`);\n  }\n\n  return res.json() as Promise<User>;\n}","language":"typescript","title":"src/lib/users.ts","theme":"github-dark","background":"linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%)","padding":72,"show_window_chrome":"true","show_line_numbers":"false"}'

<?php
$response = \Illuminate\Support\Facades\Http::withHeaders([
    'X-API-Key' => 'YOUR_API_KEY',
])->post('https://app.html2img.com/api/v1/templates/code-screenshot', ['code' => 'export async function fetchUser(id: string) {
  const res = await fetch(`/api/users/${id}`);

  if (!res.ok) {
    throw new Error(`Failed to load user ${id}`);
  }

  return res.json() as Promise<User>;
}', 'language' => 'typescript', 'title' => 'src/lib/users.ts', 'theme' => 'github-dark', 'background' => 'linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%)', 'padding' => 72, 'show_window_chrome' => 'true', 'show_line_numbers' => 'false']);

$url = $response->json('url');

const response = await fetch('https://app.html2img.com/api/v1/templates/code-screenshot', {
  method: 'POST',
  headers: {
    'X-API-Key': 'YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    "code": "export async function fetchUser(id: string) {\n  const res = await fetch(`/api/users/${id}`);\n\n  if (!res.ok) {\n    throw new Error(`Failed to load user ${id}`);\n  }\n\n  return res.json() as Promise<User>;\n}",
    "language": "typescript",
    "title": "src/lib/users.ts",
    "theme": "github-dark",
    "background": "linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%)",
    "padding": 72,
    "show_window_chrome": "true",
    "show_line_numbers": "false"
}),
});

const { url } = await response.json();

import requests

response = requests.post(
    'https://app.html2img.com/api/v1/templates/code-screenshot',
    headers={'X-API-Key': 'YOUR_API_KEY'},
    json={'code': 'export async function fetchUser(id: string) {
  const res = await fetch(`/api/users/${id}`);

  if (!res.ok) {
    throw new Error(`Failed to load user ${id}`);
  }

  return res.json() as Promise<User>;
}', 'language': 'typescript', 'title': 'src/lib/users.ts', 'theme': 'github-dark', 'background': 'linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%)', 'padding': 72, 'show_window_chrome': 'true', 'show_line_numbers': 'false'},
)

url = response.json()['url']

Looking for a fuller integration sketch in your language? The usage guides cover PHP, Laravel, Rails, Python, JavaScript, React and Vue.

Response

A successful render returns:

{
  "success": true,
  "id": "abc123",
  "url": "https://i.html2img.com/abc123.png",
  "credits_remaining": 1234,
  "template": "code-screenshot"
}

The url field is a CDN URL for the rendered PNG. credits_remaining tracks your monthly quota. Shared response fields are documented in the API parameters reference.

Errors

The template endpoint returns the following error responses:

422 Validation failed

Returned when one or more inputs fail validation. The errors object lists field-specific messages.

{
  "success": false,
  "error": "validation_failed",
  "errors": {
    "title": ["The title field is required."]
  }
}

404 Template not found

Returned with {"code": "template_not_found"} if the slug is not registered. Check the template list for current slugs.

401 Unauthorised

Missing or invalid API key. See the authentication docs.

429 Too many requests

You have hit the rate limit or used your monthly credits. The pricing page covers higher-volume plans.

Related templates

GitHub Social Preview — Repo cards sized for GitHub social preview, share posts, and READMEs
Project Showcase — "We shipped X" hero cards for changelogs and launch announcements

See the Code Screenshot template in our gallery for sample renders and use cases.

Documentation