Every developer has been there - you want to share a code snippet on Twitter, a blog post,
or in documentation, and a plain code block just doesn't cut it visually.
So I built SnippitKit. A lightweight tool where you paste your code, pick a theme and font,
tweak the layout, and export a polished PNG or SVG in seconds.
Live at snippitkit.vercel.app - open source, MIT licensed.
Table of Contents
- The Problem
- What It Does
- Export Options
- My Favourite Detail — JSON-driven Config
- Tech Stack
- Run It Locally
- Contributing
The Problem
Plain code blocks are fine for documentation. But for blog covers, social media posts,
and tutorial screenshots you want something that actually looks good. The popular tools
are either bloated, paywalled, or lock you into their style. I wanted something minimal,
customizable, and fast — so I built it myself.
What It Does
Syntax Highlighting
Powered by Prism.js with autoloading language components. Paste your code, pick a language,
and highlighting applies instantly — no manual setup per language.
Themes & Gradients
Choose from a set of gradient and preset themes to change the background.
Toggle between dark and light modes for different looks. All theme data is JSON-driven
so it's easy to extend.
Google Fonts
Select a font from the picker and it loads dynamically via Google Fonts API.
No bloated font bundles — only the font you pick gets loaded.
Full Layout Control
Adjust padding, border radius, and font size with numeric inputs.
Live preview updates instantly so you see exactly what you'll export.
Accessible UI
Custom select menus with full keyboard support — Arrow keys to navigate,
Enter to select, Escape to close. ARIA labels throughout.
Export Options
| Format | How |
|---|---|
| PNG | High-quality raster export via dom-to-image-more |
| SVG | Vector export — scales to any size |
| Copy image | Write directly to clipboard (requires HTTPS + browser support) |
| Copy link | Share a link to your current snippet config |
| Copy code text | Double-click the main export button |
My Favourite Detail — JSON-driven Config
Themes, fonts, and languages are all driven by JSON data files.
Want to add a new theme? Add an entry to the themes JSON. New language? One line.
No hunting through component logic — the data and the UI are cleanly separated.
Tech Stack
| Tool | Purpose |
|---|---|
| HTML5 + CSS3 + JavaScript (ES6+) | Core structure, styling, and app logic |
| Prism.js | Syntax highlighting with autoloader |
| dom-to-image-more | PNG / SVG DOM export |
| Google Fonts | Dynamic font loading |
| Devicons (jsDelivr) | Language and tech icons |
| Vite | Dev server and build tooling |
| Vercel | Deployment |
Run It Locally
git clone https://github.com/byllzz/snippitkit.git
cd snippitkit
npm install
npm run dev
Open http://localhost:5173.
No environment variables needed - open index.html and you're running.
Contributing
Contributions are welcome. Good first issues:
- [ ] Add new theme presets to the themes JSON
- [ ] Add more language entries
- [ ] Improve SVG export fidelity
- [ ] Additional font size / padding presets
- [ ] Accessibility improvements — focus management, screen reader testing
git checkout -b feat/your-feature
# make your changes
git commit -m "feat: your short description"
git push origin feat/your-feature
If SnippitKit saved you from a boring plain code block - a ⭐ on the
GitHub repo means a lot.
Drop feedback in the comments below!