Turn a code snippet into an exportable image, entirely in the browser.
A single-file web app for producing styled code screenshots — macOS-style window, syntax highlighting, modern gradients — ready to drop into a tweet, README, or blog post. No server, no build step, no data leaves the client.
- Live syntax highlighting via Prism.js
- Languages: JavaScript, TypeScript, Python, HTML, CSS, Rust, Go, JSON, Bash, SQL
Tabkey indents two spaces- Typed text and highlighted overlay stay pixel-aligned
- Background: 8 built-in gradients (Mesh, Neon, Sunset, Cyberpunk, Vercel, ...), solid color, or transparent PNG (with checkerboard preview)
- Window: toggle macOS traffic-light buttons and filename independently; custom window color
- Geometry: sliders for card padding, card corner radius, and window corner radius
- Code: font size, inner padding, optional line numbers
Six one-click themes that restyle the whole card:
| Template | Description |
|---|---|
| Cyberpunk | Neon violet/pink on near-black |
| Vercel Dark | Minimal black, Vercel-style |
| Sunset | Orange to pink to violet gradient |
| Minimal Light | Light card, white window |
| Ocean | Deep blues, marine feel |
| Matrix | Green on black, terminal aesthetic |
- Download as PNG (rendered at 2x for sharpness, via html2canvas)
- Copy image to clipboard (via ClipboardItem)
- Transparent mode produces a transparent PNG
- Dark, centered on the preview
- Sticky glass header
- Shuffle button for a random style
- Custom toggle switches and sliders
- Responsive: single-column layout on mobile
| Layer | Library |
|---|---|
| UI | Tailwind CSS (CDN) |
| Highlighting | Prism.js |
| PNG export | html2canvas |
| Fonts | Inter, JetBrains Mono (Google Fonts) |
| Build | None |
The entire app is one index.html file.
# Python
python -m http.server 8000
# or Node
npx serveOpen http://localhost:8000.
You can also just open index.html directly in a browser.
- Click the code area and type or paste a snippet.
- Pick the language and filename (extension is suggested automatically).
- Apply a template, or tweak background, window, and geometry.
- Click Download PNG or Copy.
CodeShot/
├── index.html # the whole app
└── README.md
- SVG export
- Optional CodeShot watermark
- Monospace font picker
- Fullscreen preview mode
- Persist preferences in localStorage
- Shareable themes via URL
- Custom card width/height
PRs welcome. For larger changes, open an issue first to discuss.
git clone https://github.com/<your-user>/CodeShot.git
cd CodeShot
# open index.html in a browserMIT