snapcode

Code screenshots your agent can make itself.

Paste code and export in seconds. Or install the CLI and let Claude Code and Cursor render snippets while they write your docs. Same renderer either way — and nothing leaves your machine.

Open the tool
hero.ts
1export async function generateReadmeHero(readme: string) {
2 const card = await snapcode.render({
3 code: readme,
4 });
5
6− return card.save("hero.png");
7}
1export async function generateReadmeHero(readme: string) {
2 const card = await snapcode.render({
3 code: readme,
4+ theme: "ember",
5+ background: "espresso",
6 });
7
8+ return card.save("hero.png", { scale: 2 });
9}

computed split diff, straight from the tool

Built for agentic workflows

Your agent can use this too.

Snapcode ships an MCP server and a skill file. Claude Code and Cursor call it directly while writing docs, so the code in your README looks like someone cared.

  • mcp
    snapcode mcp — local stdio server, no account, works offline.
  • cli
    snapcode generate — pipe it, script it, run it in CI.
  • skill
    SKILL.md — teaches the agent when a snippet is worth rendering.
Read the docs →
~/code/api — zsh
$ snapcode generate --file src/auth.ts --diff --theme acme-docs --out docs/auth.png

✓ rendered  1240×620  · 84ms
✓ wrote     docs/auth.png

How it works

Or just paste it. No account.

01

Drop in code

Paste it, type it, or drag a file onto the canvas. The language detects itself.

02

Style it

Theme, background, font. Line numbers, highlights, or a full computed diff.

03

Export or automate

Download a PNG or SVG — or hand the job to your agent and never open the browser.

Gallery

See it in action

Five snippets, five styles. Click any card to open it live in the editor.

useDebounce.ts
1import { useEffect, useState } from "react";
2
3export function useDebounce<T>(value: T, delay = 300): T {
4 const [debounced, setDebounced] = useState(value);
5
6 useEffect(() => {
7 const timer = setTimeout(() => setDebounced(value), delay);
useDebounce.ts
Ember on Espresso
Open in editor →
retry.py
import time
from functools import wraps
def retry(times: int = 3, backoff: float = 0.5):
def decorator(fn):
@wraps(fn)
def wrapper(*args, **kwargs):
retry.py
Dracula on Lagoon
Open in editor →
main.go
1package main
2
3import (
4 "log"
5 "net/http"
6)
7
main.go
Nord on Graphite
Open in editor →
monthly_report.sql
SELECT
date_trunc('month', created_at) AS month,
count(*) AS signups,
count(*) FILTER (WHERE plan = 'pro') AS pro_signups
FROM users
WHERE created_at >= now() - interval '12 months'
GROUP BY 1
monthly_report.sql
GitHub Light on Paper
Open in editor →
pager.ts
export function pageCount(total: number, perPage: number): number {
if (perPage <= 0) return 0;
return Math.ceil(total / perPage);
}
Fix off-by-one in pager
Computed diff, Ember
Open in editor →

Pricing

Free where it matters.

The tool, the CLI, and the MCP server are free forever. Pay when you want your own brand on it.

Free
$0 forever
  • Unlimited exports
  • All themes and backgrounds
  • PNG and SVG export
  • Shareable links
  • Watermarked output
Start for free
Pro
$9 /mo · $90/year
  • No watermark
  • Saved brand themes
  • Higher-resolution export
  • CLI and API access
  • MCP + AI agent integration
  • Snippet history
  • Invite your workspace
Upgrade to Pro