code-shot: the code-screenshot API that I wish existed

basenull — Mon, 27 Apr 2026 21:05:01 +0000

For seven years Carbon has been the canonical "make a code screenshot" tool. Same with Ray.so since 2020. Both are fantastic — and both are design surfaces, not endpoints.

If I'm writing a dev journal post with five code blocks, the workflow is:

Open Carbon, paste snippet 1, screenshot, save with sensible name, upload, embed
Repeat for snippets 2-5
Realize the OG image on Twitter is still stock

That's 45 minutes for what should be one HTML tag.

So I built code-shot.

How it works

One GET endpoint. Code in the query string, image/png in the response.

<img src="https://code-shot.labs.basenull.com/api/img?code=const%20x%20%3D%201&theme=dracula" />

Drop the URL into <img>, OG meta, Markdown — same URL renders inline anywhere images do. Cached forever at the Vercel CDN.

For longer snippets (over ~1500 chars URL-encoded), POST to /api/snippets and use the returned ?id= URL.

CLI

If you'd rather pipe than encode:

# Download (no npm needed — single Node.js file, ~12 KB)
curl -o code-shot https://code-shot.labs.basenull.com/code-shot
chmod +x code-shot
mv code-shot ~/.local/bin/

# Render
echo "const x = 1" | code-shot --theme dracula
# → https://code-shot.labs.basenull.com/api/img?id=abc123

code-shot login opens a browser for one-click pairing. After that, snippets you create are attributed to your account.

What's behind it

Shiki for syntax highlighting (themes inline)
Satori for layout (HTML/JSX → SVG)
@resvg/resvg-js for SVG → PNG
Magic-link auth, Stripe Checkout for Pro
Turso (libSQL) for snippet metadata; Vercel CDN handles the render cache

Live: https://code-shot.labs.basenull.com

DEV Community: basenull

code-shot: the code-screenshot API that I wish existed

How it works

CLI

What's behind it