DEV Community

The Flutter Guy
The Flutter Guy

Posted on

I built a Code Screenshot REST API because Carbon and Ray.so don't have one

#api #saas #webdev #showdev

The itch I had to scratch

Every time I wrote a technical blog post or generated docs, I needed code screenshots. I'd open Carbon, paste my snippet, tweak the theme, hit export, download the file. Repeat for every snippet. It was manual, slow, and couldn't be automated.

Carbon is beautiful. Ray.so is slick. But neither has a REST API. If you want code screenshots in a pipeline — you're on your own.

So I built SnapMyCode.

What it is

SnapMyCode is a code screenshot service with three ways to use it:

  1. Snap — paste code, pick a theme, download instantly. No account needed, unlimited quick use.
  2. Editor — visual canvas editor. Arrange multiple code snippets, customize everything, export as a single image.
  3. REST API — the real reason I built this.

The API 

curl -X POST https://api.snapmycode.in/api/v1/image \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"code": "const greet = (name) => `Hello, ${name}!`", "theme": "tokyo-night", "language": "javascript"}' \
  --output screenshot.png
Enter fullscreen mode Exit fullscreen mode

POST your code, get back a PNG. Or SVG. Or JPEG. Or WebP. 19 themes, 27 languages, line highlighting, custom font size and padding.

Why this matters for developers

  • Docs generators: auto-produce code screenshots at build time
  • Blog pipelines: never manually screenshotting code again
  • GitHub Actions: generate README screenshots on push
  • Portfolio sites: consistent code image style across all posts
  • Discord/Slack bots: share beautiful code snippets automatically
  • Content creators: automate your entire code-to-social pipeline

How it's built

The rendering stack is Playwright + Chromium on Google Cloud Run — full headless browser, not a canvas hack. This means pixel-perfect output at any resolution.

Syntax highlighting: Shiki v4 (the same library VS Code uses internally).

Backend: Fastify v5 + Node.js, TypeScript throughout. Auth: Firebase. Data: Firestore. Frontend: Next.js + Tailwind v4 on Vercel.

What makes it different vs Carbon and Ray.so

Feature SnapMyCode Carbon Ray.so
REST API ✅ ❌ ❌
SVG export ✅ ❌ ❌
Multi-snippet editor ✅ ❌ ❌
Line highlighting ✅ ❌ ❌
PNG/JPEG/WebP ✅ ✅ ✅
19 themes ✅ ✅ ❌
Free tier ✅ ✅ ✅

Pricing

  • Free: 10 API renders/day + unlimited quick paste — enough to try everything
  • Pro: $9/mo — 500 renders/day
  • Enterprise: $49/mo — 1000 renders/day + priority rendering + email support

Try it

snapmycode.in — free to start, no credit card.

Curious what other devs think — especially those who've tried to automate code screenshots before. What was your workaround? Would love to hear.

Top comments (0)