AI News Hub Logo

AI News Hub

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

DEV Community
basenull

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. One GET endpoint. Code in the query string, image/png in the response. Drop the URL into , 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. 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. 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