datacodepng

Code Snippet Card

Turn any code block into a shareable image. Shiki syntax highlighting, macOS window chrome.

Request body

{
  "type": "code",
  "content": "import Renderfy from '@renderfy/sdk';\n\nconst client = new Renderfy({ apiKey: process.env.RENDERFY_API_KEY });\n\nconst image = await client.render({\n  type: 'tailwind',\n  content: '<div class=\"...\">Hello world</div>',\n  options: { format: 'png', dimensions: 'og-image' },\n});\n\nawait fs.writeFile('output.png', image);",
  "lang": "typescript",
  "theme": "one-dark-pro",
  "options": {
    "format": "png",
    "dimensions": {
      "width": 900,
      "height": 480
    },
    "scale": 2
  }
}

Code example

curl -X POST https://renderfy.io/api/v1/render \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "type": "code",
  "content": "import Renderfy from '\''@renderfy/sdk'\'';\n\nconst client = new Renderfy({ apiKey: process.env.RENDERFY_API_KEY });\n\nconst image = await client.render({\n  type: '\''tailwind'\'',\n  content: '\''<div class=\"...\">Hello world</div>'\'',\n  options: { format: '\''png'\'', dimensions: '\''og-image'\'' },\n});\n\nawait fs.writeFile('\''output.png'\'', image);",
  "lang": "typescript",
  "theme": "one-dark-pro",
  "options": {
    "format": "png",
    "dimensions": {
      "width": 900,
      "height": 480
    },
    "scale": 2
  }
}' \
  --output render.png

Fork this template to my account →

One click. Free tier includes 1 saved template.

More data templates

Line Chart — Weekly Metrics

Embed a static chart PNG in emails, Slack, or reports. Chart.js rendered server-side.

Bar Chart — Revenue Breakdown

Monthly revenue by plan tier as a bar chart PNG. Drop into any email or dashboard screenshot.

Pie Chart — Traffic Sources

Visualise distribution data as a clean pie chart. Great for presentations and weekly digests.

View all templates →