Render Code Diff

POST/visual/v1/render-code-diff

What it does

Takes two code snippets — before and after — computes a unified diff, and renders the result as a syntax-highlighted SVG or PNG with green/red line backgrounds showing additions and removals. By default, success is a JSON wrapper; set responseFormat: "file" for raw SVG or PNG bytes.

Why use it?

Code review images. Generate visual diffs for pull request summaries, changelogs, or blog posts explaining code changes.
Tutorial before/after. Show readers exactly what changed — the diff highlighting draws attention to the important lines.
Social media. Share code transformations on Twitter/X with clear visual context of what was added or removed.
Low cost. At just 1 credit per request, it's the most affordable way to generate code images.

Examples

Minimal example

curl -X POST https://api.creatornode.io/visual/v1/render-code-diff \
  -H "Content-Type: application/json" \
  -H "X-API-Key: YOUR_KEY" \
  -d '{
    "before": "const x = 1;",
    "after": "const x = 2;",
    "language": "typescript"
  }'

Raw PNG diff

curl -X POST https://api.creatornode.io/visual/v1/render-code-diff   -H "Content-Type: application/json"   -H "X-API-Key: YOUR_KEY"   -d '{
    "before": "const x = 1;",
    "after": "const x = 2;",
    "language": "typescript",
    "format": "png",
    "responseFormat": "file"
  }'   --output diff.png

Full-featured example

{
  "before": "function greet() {\n  console.log(\"hello\");\n}",
  "after": "function greet(name: string) {\n  console.log('Hello, ' + name + '!');\n}",
  "language": "typescript",
  "format": "png",
  "theme": "github-dark",
  "options": {
    "lineNumbers": true,
    "filename": "greet.ts",
    "preset": "og"
  }
}

How the diff works

The endpoint computes a line-level diff using an LCS (Longest Common Subsequence) algorithm, then merges the result into a single code block with diff markers (+ for added, - for removed). Added lines get a green background, removed lines get a red background.

In the default JSON mode, the response meta.diff object includes statistics:

Field	Description
`added`	Number of lines added
`removed`	Number of lines removed
`unchanged`	Number of lines unchanged

Tips & tricks

Use JSON when you need diff stats. The default wrapper includesmeta.diff. File mode is better when you only need the rendered asset.
Use it for refactoring showcases. Show the before/after of a refactor — the diff colours make the improvement immediately visible.
Empty before = all green. Pass an empty before string to show a code block where every line is highlighted as "new".
Same options as render-code. You can use lineNumbers, filename, themes, and PNG presets — everything from render-code except highlightLines (the diff handles highlighting automatically).

Cost & Limits

Feature	Detail
Credit cost	1 credits per request
Output formats	SVG, PNG
Themes	All VS Code / Shiki themes

Tier Limits

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

Other Endpoints

POST/visual/v1/render-code