---
name: codetoimage
description: Turn code snippets into beautiful syntax-highlighted images (PNG/SVG) with themes, gradients, and window chrome. Use for rendering code images, building shareable editor links, hosted API rendering, or MCP setup.
---

# Code to Image

Turn code into polished, shareable images at https://codetoimage.com — 40+ themes, 35+ languages, gradient backgrounds, macOS/Windows window chrome.

## Choose an interface

- Use the **hosted API** to render a PNG or SVG from a script or agent (no browser needed).
- Use a **share link** to hand a human an editable version of the exact snippet and styling.
- Use **MCP** when an agent should call Code to Image repeatedly as structured tools.
- Use the **web editor** at https://codetoimage.com for hands-on tweaking.

Do not send private or sensitive source code to the hosted API without authorization. The web editor renders entirely in the browser; the API renders statelessly on the server and stores nothing.

When the user supplies a snippet, render it line for line. Preserve every line, blank line, indentation, comment, and character. Do not rewrite, reformat, or truncate unless the user asks.

## Hosted API

Render an image:

```sh
curl -X POST https://codetoimage.com/api/image \
  -H 'Content-Type: application/json' \
  -d '{"code": "const answer = 42;", "language": "javascript", "theme": "dracula"}' \
  -o code.png
```

GET works too: `https://codetoimage.com/api/image?code=const%20answer%20%3D%2042%3B&language=javascript`

Key parameters (all optional except `code`): `language`, `theme`, `format` (`png` default, or `svg`), `scale` (1, 2, 4, 6 — default 2), `backgroundGradient` (CSS `linear-gradient(...)` or `null`), `backgroundColor` (hex), `padding` (0–256), `borderRadius` (0–48), `windowChrome` (`macos`, `macos-outline`, `macos-gray`, `windows`, `none`), `windowTitle`, `shadow` (`none`, `sm`, `md`, `lg`, `bottom`), `fontSize` (10–28), `lineNumbers` (bool), `lineNumberStart`, `tabSize`, `aspectRatio` (`auto`, `16:9`, `4:3`, `1:1`).

- Full schema: https://codetoimage.com/api/openapi.json
- Accepted values (themes, languages, gradient presets): https://codetoimage.com/api/options.json

### Errors

Every 4xx and 5xx response is JSON with the same shape — never an HTML error page:

```json
{ "error": "human-readable message", "code": "missing_code", "hint": "what to do next" }
```

Branch on `code`, not on the message text. Codes: `missing_code` (400, no code field),
`invalid_state` (400, undecodable `s` blob), `invalid_json` (400, body was not a JSON object),
`render_failed` (500, retry once).

## Share links

Editor state is a JSON object of the parameters above. Encode it as base64url and append as a fragment:

```
https://codetoimage.com/#s=BASE64URL_JSON
```

Example (JavaScript): `` `https://codetoimage.com/#s=${btoa(JSON.stringify({code, language, theme})).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,'')}` ``

The same blob renders directly as an image: `https://codetoimage.com/api/image?s=BASE64URL_JSON` — swap `/#s=` for `/api/image?s=` to turn any share link into a hotlinkable PNG (add `&format=svg` for SVG).

## MCP

Add the hosted MCP server (streamable HTTP, no auth):

```sh
claude mcp add --transport http codetoimage https://codetoimage.com/mcp
```

Tools: `create_code_image` (render PNG/SVG, returns the image plus share + image URLs), `create_share_link` (editor link without rendering), `list_style_options` (themes, languages, gradient presets).

Setup docs for other clients: https://codetoimage.com/mcp-server (also served as
markdown — request it with `Accept: text/markdown`). `/developers` and `/docs` redirect there.

## Tips

- Pick a theme that matches the destination: dark themes (`github-dark`, `dracula`, `tokyo-night`) for dark UIs, light themes (`github-light`, `one-light`) for docs.
- Set `windowTitle` to the filename (e.g. `app.ts`) for context.
- Use `scale: 2` or higher for social media and retina displays.
- Omit `aspectRatio` so the frame fits the code; use `16:9` for social cards.