CodeShot

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.

Features

Editor

Live syntax highlighting via Prism.js
Languages: JavaScript, TypeScript, Python, HTML, CSS, Rust, Go, JSON, Bash, SQL
Tab key indents two spaces
Typed text and highlighted overlay stay pixel-aligned

Card customization (real-time)

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

Templates

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

Export

Download as PNG (rendered at 2x for sharpness, via html2canvas)
Copy image to clipboard (via ClipboardItem)
Transparent mode produces a transparent PNG

UX

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

Stack

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.

Usage

Run locally

# Python
python -m http.server 8000

# or Node
npx serve

Open http://localhost:8000.

You can also just open index.html directly in a browser.

Steps

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.

Project structure

CodeShot/
├── index.html   # the whole app
└── README.md

Roadmap

SVG export
Optional CodeShot watermark
Monospace font picker
Fullscreen preview mode
Persist preferences in localStorage
Shareable themes via URL
Custom card width/height

Contributing

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 browser

License

MIT