DEV Community

basenull
basenull

Posted on

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

#api #productivity #showdev #tooling

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:

  1. Open Carbon, paste snippet 1, screenshot, save with sensible name, upload, embed
  2. Repeat for snippets 2-5
  3. 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" />
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)