Create stunning screenshots of your code in seconds. Free, open-source alternative to Carbon.
No sign-up. No backend. No build step. Just open and go.
- 🎨 8 beautiful themes — Dracula, Monokai, GitHub Dark, One Dark, Nord, Solarized, Night Owl, Tokyo Night
- 🌐 15 languages — JavaScript, Python, TypeScript, HTML, CSS, Java, C++, Go, Rust, PHP, Ruby, SQL, Bash, JSON, YAML
- 🌈 Gradient backgrounds — Sunset, Ocean, Forest, Midnight, Candy, or pick a custom color
- 📐 Customizable padding — 16px, 32px, or 64px
- 🔢 Line numbers — Toggle on or off
- 🖥️ macOS window controls — Classic red/yellow/green dots or none
- 🔤 Adjustable font size — 12px to 20px
- 📏 Border radius control — From sharp to rounded corners
- 📸 Export as PNG — High-resolution 2x export via html2canvas
- 📋 Copy to clipboard — One-click copy as image
- ⚡ Zero dependencies — Pure HTML/CSS/JS with CDN libraries
- 🚀 No build step — Just open
index.html
- Paste your code into the editor
- Customize the theme, language, background, padding, and more
- Export as PNG or copy to clipboard
That's it!
| Theme | Style |
|---|---|
| Dracula | Dark purple tones |
| Monokai | Classic dark with vibrant colors |
| GitHub Dark | GitHub's dark mode |
| One Dark | Atom's iconic dark theme |
| Nord | Arctic, north-bluish palette |
| Solarized | Ethan Schoonover's dark variant |
| Night Owl | Designed for night owls |
| Tokyo Night | A Tokyo-inspired dark theme |
CodeSnap is a static site — no server required.
# Clone the repo
git clone https://github.com/Senzo13/codesnap.git
# Open it
cd codesnap
open index.html # macOS
start index.html # Windows
xdg-open index.html # LinuxOr simply deploy the folder to any static hosting provider:
- GitHub Pages — Push and enable Pages in repo settings
- Netlify — Drag and drop the folder
- Vercel — Import the repo
codesnap/
├── index.html # Main HTML page
├── css/
│ ├── style.css # Core styles & layout
│ └── themes.css # Code editor theme colors
├── js/
│ ├── app.js # Main application logic
│ └── export.js # PNG export & clipboard
└── README.md
Contributions are welcome! Here's how:
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.
- highlight.js — Syntax highlighting
- html2canvas — Screenshot capture
- JetBrains Mono — Monospace font
- Inspired by Carbon