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