Carbon과 Ray.so가 없기 때문에 코드 스크린샷 REST API를 만들었습니다.

작성자

카테고리:

← 피드로
DEV Community · The Flutter Guy · 2026-06-28 개발(SW)

The Flutter Guy

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.

원문에서 계속 ↗

코멘트

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다