Render Code

POST/visual/v1/render-code

What it does

Takes a source code snippet and a language identifier, runs it through Shiki (the same syntax highlighter used in VS Code), and returns a beautifully rendered SVG or PNG image. By default, success comes back as a JSON wrapper with data and meta; set responseFormat: "file" to get raw SVG or PNG bytes instead. Supports 200+ languages and every VS Code theme.

Why use it?

Social media code cards. Generate Open Graph images with your code — perfect for Twitter/X posts, blog previews, and README badges.
Documentation images. Some platforms (PDF, email, Notion embeds) don't support syntax highlighting. Render your code as images instead.
Automated screenshots. Instead of manually screenshotting VS Code, automate code image generation in your CI pipeline.
Line highlighting. Draw attention to specific lines — great for tutorials, code reviews, and presentations.

Examples

Minimal example

curl -X POST https://api.creatornode.io/visual/v1/render-code \
  -H "Content-Type: application/json" \
  -H "X-API-Key: YOUR_KEY" \
  -d '{
    "code": "const hello = () => console.log(\"Hello, World!\");\nhello();",
    "language": "typescript"
  }'

Raw file response

curl -X POST https://api.creatornode.io/visual/v1/render-code   -H "Content-Type: application/json"   -H "X-API-Key: YOUR_KEY"   -d '{
    "code": "const hello = () => console.log("Hello, World!");",
    "language": "typescript",
    "format": "svg",
    "responseFormat": "file"
  }'   --output snippet.svg

Full-featured example

{
  "code": "async function fetchUser(id: string) {\n  const res = await fetch('/api/users/' + id);\n  if (!res.ok) throw new Error('User not found');\n  return res.json();\n}",
  "language": "typescript",
  "format": "png",
  "theme": "github-dark",
  "options": {
    "lineNumbers": true,
    "filename": "api.ts",
    "highlightLines": "2-3",
    "preset": "og"
  }
}

PNG presets for social media

Instead of guessing dimensions, use built-in presets optimized for each platform:

Preset	Dimensions	Use case
`og`	1200 × 630	Open Graph — link previews on Facebook, LinkedIn, Slack
`twitter`	1200 × 675	Twitter/X summary cards
`square`	1080 × 1080	Instagram, Square format posts

💡 Tip: Use preset for standard sizes. If you need a custom aspect ratio, override with width and height instead (up to 4096 px).

Line highlighting

The highlightLines option lets you emphasize specific lines with a colored background. Supported formats:

Format	Example	Highlights
Single line	`"5"`	Line 5
Multiple lines	`"1,3,7"`	Lines 1, 3, and 7
Range	`"2-6"`	Lines 2 through 6
Combined	`"1,3-5,10"`	Line 1, lines 3–5, and line 10

The default highlight color is a semi-transparent yellow.

Popular themes

Code rendering uses Shiki's full theme library (same themes as VS Code). Some popular choices:

github-light

Clean, familiar. Great for docs and light-mode sites.

github-dark

The GitHub dark mode look. Default theme. Perfect for dark-themed content.

dracula

Bold, colorful. Popular with developer audiences.

nord

Muted arctic palette. Elegant and easy on the eyes.

one-dark-pro

Atom's iconic theme. High contrast, great readability.

vitesse-dark

Minimal, modern. Subtle highlights with warm accents.

Tips & tricks

Pick the transport deliberately. Omit responseFormat for the default JSON wrapper, or set responseFormat: "file" when you want a raw SVG/PNG response body for direct downloads or piping.
Add a filename header. Set "filename": "app.ts" to show a file tab at the top of the image — makes your code screenshots look professional.
Use startLine for excerpts. If you're showing lines 45–60 of a file, set "startLine": 45 so line numbers match the real source.
Match your site's theme. If your blog has a dark background, use github-dark or dracula. For light backgrounds, github-light blends right in.
Highlight the important parts. When sharing code on social media, always highlight the key 2–3 lines so readers instantly know where to look.
Use SVG for web, PNG for everything else. SVG renders crisply at any resolution and is smaller. Use PNG only when the target platform doesn't support SVG (social cards, email).
Keep code short for social cards. 5–15 lines work best visually on social media. If your snippet is longer, extract the most interesting part and highlight the key lines.

Cost & Limits

Feature	Detail
Credit cost	2 credits per request
Output formats	SVG, PNG
Themes	All VS Code / Shiki themes
PNG presets	og (1200×630), twitter (1200×675), square (1080×1080)

Tier Limits

Limit	Free	Premium
Max lines	150	500
Max input size	30 KB	100 KB
Max PNG resolution	800 × 800	2048 × 2048

Other Endpoints

POST/visual/v1/render-code-diff