A lightweight, browser-based code snippet studio for turning plain code into polished, shareable screenshots - with live syntax highlighting, themes, fonts, and full export control.
Live Demo • Report Bug • Request Feature
SnippitKit is a lightweight web tool for producing polished code screenshots and shareable code templates. Paste or type code into the editor, pick a language for Prism.js syntax highlighting, choose a theme and font, and fine-tune padding, border radius, and font size until it matches your brand or post style - then export it as a clean PNG or SVG, or copy it straight to your clipboard.
There's no backend, no build pipeline required, and no account to sign up for. Everything - the editor, the highlighting, the themes, and the export - runs entirely in the browser. Open index.html, paste your code, and you have a shareable image in seconds.
It's built for developers who want a fast way to produce nice-looking code snippets for documentation, blog posts, tutorials, or social media, without reaching for a full design tool.
| Category | Highlights |
|---|---|
| Live Editor | Type or paste code directly, with real-time Prism.js syntax highlighting as you go |
| Language Support | Kotlin, JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Rust, PHP, Ruby, Swift, SQL, HTML, CSS, SCSS, Bash, JSON, YAML, XML, Markdown, and more |
| Automatic Detection | Falls back to lightweight pattern-based language detection when no language is manually selected |
| Themes | A curated set of gradient backgrounds, selectable from a searchable, keyboard-accessible dropdown |
| Fonts | Dynamically loaded Google Fonts, swapped live without a page reload |
| Layout Controls | Adjustable padding, border radius, and font size via live-updating range/number inputs |
| Background Toggle | Switch the panel background on or off for a transparent export |
| Dark / Light Mode | Toggle the code panel between dark and light presentation |
| Export | Download as high-quality PNG or SVG |
| Clipboard Support | Copy the rendered image or a PNG data URL directly to your clipboard (requires HTTPS) |
| JSON-Driven Config | Themes, fonts, and languages are all defined in plain JSON - no code changes needed to add new ones |
| Accessible UI | Custom dropdown selects built with proper ARIA roles, full keyboard navigation (arrow keys, Enter, Escape, Home/End), and focus handling |
SnippitKit is intentionally framework-free. The whole app is plain HTML, CSS, and JavaScript, split into a small number of focused files rather than a component tree.
The editing surface is a two-layer overlay. A transparent <textarea> sits directly on top of a <pre><code> block. The textarea captures all real keystrokes, selection, undo/redo, and paste behavior - things browsers handle natively and reliably. The <pre><code> block underneath is purely for display: its content mirrors the textarea's value on every input event, and Prism.js re-highlights it. This split exists because merging the two into a single contenteditable element causes the cursor to jump around every time Prism rewrites the highlighted HTML - the overlay approach avoids that entirely while keeping typing feel completely native.
Themes, fonts, and languages are data, not code. Each is defined as an array of plain objects in data/themes.json, data/fonts.json, and data/languages.json. On load, script.js fetches all three, then generates the dropdown markup for each from that data. Adding a new theme, font, or language is a JSON edit, not a JavaScript change.
Export is handled separately. export.js is a standalone file that captures the rendered panel using dom-to-image-more and turns it into a downloadable PNG/SVG or a clipboard write. Keeping export logic out of the main editor script keeps each file focused on one job.
Open data/themes.json and add a new entry:
{
"id": "sunset-glow",
"label": "Sunset Glow",
"gradient": "linear-gradient(120deg, #ff512f 0%, #f09819 100%)",
"icon": "/assets/theme-pngs/017 Sunset Glow.png"
}gradient accepts any valid CSS background value. icon is optional - omit or set it to null if you don't have a preview thumbnail.
Open data/languages.json and add a new entry:
{
"id": "dart",
"label": "Dart",
"prismClass": "language-dart",
"icon": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dart/dart-original.svg"
}prismClass must match a Prism.js component name so the autoloader can fetch the right highlighting grammar on demand.
Open data/fonts.json and add a new entry:
{
"id": "victor-mono",
"name": "Victor Mono",
"fallback": "monospace",
"weights": [400]
}name must exactly match the font's name on Google Fonts, since it's used to build the dynamic stylesheet request.
Once added to the relevant JSON file, the new option automatically appears in its dropdown, works with the live preview, and behaves exactly like every built-in option - no further wiring required.
snippitkit
├── assets
│ ├── favicon
│ └── theme-pngs
├── data
│ ├── themes.json
│ ├── languages.json
│ └── fonts.json
├── index.html
├── script.js
├── export.js
├── style.css
├── package.json
└── LICENSE
| File / Directory | Purpose |
|---|---|
index.html |
App markup - editor panel, selectors, layout controls, and export menu |
script.js |
Editor logic: textarea/preview sync, language detection, custom select components, live controls, JSON loading |
export.js |
Export logic: PNG/SVG download, copy image, copy data URL, toast notifications |
style.css |
All styling - panel, controls, custom selects, toasts, dark/light states |
data/ |
Theme, language, and font definitions consumed by the dropdowns |
assets/ |
Favicon, theme preview thumbnails, and other static images |
| Principle | Description |
|---|---|
| No Build Step Required | The app runs directly from static files - no bundler is required to develop or deploy it |
| Data-Driven UI | Themes, languages, and fonts are generated from JSON, not hardcoded into the markup |
| Native Input First | Real browser input elements (textarea, range, number) are used wherever possible instead of reimplementing them |
| Separation of Concerns | Editing logic and export logic live in separate files with no shared state beyond the DOM |
| Fully Client-Side | No server, no API calls beyond fetching local JSON and Google Fonts - everything else happens in-browser |
| Accessible by Default | Custom controls follow ARIA combobox/listbox patterns with full keyboard support |
SnippitKit is built from a small, deliberate set of tools - each one covering a single job rather than a framework doing everything.
The foundation. No framework, no bundler - just the browser.
Renders the code panel and gives every language/tool option its icon in the dropdowns.
Handles live font swapping in the editor and turning the finished panel into a downloadable image.
Version control and where the site actually lives.
Running SnippitKit locally takes seconds - there's no build step.
- A modern web browser such as Chrome, Edge, Firefox, or Safari
- Optionally, a local static server (Live Server,
npx serve, etc.) - recommended over opening the file directly, sincefetch()for the theme/font/language JSON is blocked onfile://URLs by browser security rules
Clone the repository.
git clone https://github.com/byllzz/snippitkit.gitMove into the project directory.
cd snippitkitServe the project with any static file server. For example, with the VS Code Live Server extension, right-click index.html and select Open with Live Server. Or, using Node:
npx serve .Then open the local address shown in your terminal.
- Open the app in your browser.
- Paste or type code into the editor.
- Choose a Language from the dropdown to apply Prism highlighting (or let auto-detection handle it).
- Pick a Theme to change the background gradient.
- Select a Font to load a Google Font dynamically.
- Adjust Font Size, Padding, and Border Radius to style the output.
- Toggle Background and Dark/Light for different looks.
- Click Export to open PNG/SVG download and copy options.
- Double-click the export button to copy the raw code text to your clipboard.
- Keyboard users: Arrow keys + Enter navigate custom selects; Escape closes an open menu.
Contributions of every size are welcome - fixing a typo, improving accessibility, adding a new theme or language, or introducing a new feature all help.
The fastest way to contribute a new theme, language, or font is described above under Architecture - most additions are a single JSON entry and require no other code changes.
- Fork the repository
- Create a feature branch
- Make your changes
- Open a pull request describing what changed and why
If you find SnippitKit useful, consider giving it a ⭐ on GitHub - it helps others discover the project.
This project is licensed under the MIT License.
MIT License
Copyright (c) 2025 Bilal Malik
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software. The above copyright notice and this permission notice shall
be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
© 2025 SnippitKit. Licensed under the MIT License.