Code snippet that exports PNG & SVG. No sign-up, fully in the browser

SnippitKit: Code Snippets That Actually Look Good
Every developer has faced this moment: you've written something worth sharing - a clever pattern, a tricky fix, a tutorial worth documenting - and you want to share it beautifully. But a plain code block on Twitter looks generic. A screenshot of your editor looks amateurish. The popular snippet tools are bloated, require accounts, or lock you into their aesthetic.

There's friction where there shouldn't be.

**SnippitKit **removes it. Paste your code, pick a theme and font, adjust the layout, and export a polished PNG or SVG in seconds. No accounts. No bloat. No compromise on customization.

• Try it live
• View on GitHub (MIT licensed)

The Problem With Code Snippet Sharing
Plain code blocks are functional for documentation. But for blog covers, social media, tutorials, and technical articles, they're invisible. The tools that solve this fall into predictable traps:

Bloated: Overloaded with features you don't need, animation you didn't ask for, and metrics dashboards.

Paywalled: Free tier is crippled. Export sizes are limited. Watermarks are mandatory until you pay.

Aesthetic lock-in: You get their themes, their fonts, their style. No way to customize beyond swapping colors.

SnippitKit rejects all three. It's minimal, fully customizable, and completely free. One tool. No accounts. Export whatever you want.

What You Get:

1. Syntax Highlighting That Works Instantly
Powered by Prism.js with intelligent language autoloading, every code snippet highlights correctly the moment you paste it. Select a language from the dropdown — highlighting applies instantly. No manual setup. No broken syntax. Prism handles all the heavy lifting behind the scenes.

2. Themes & Gradient Backgrounds
Choose from a curated set of preset themes, each with carefully chosen gradient backgrounds. Toggle between dark and light modes to suit your use case - dark for blogs, light for presentations. All theme data is stored in JSON, making it trivial to add your own custom themes without touching the component logic.

3. Dynamic Font Selection
Browse and load Google Fonts directly from the interface. Pick a typeface, and only that font downloads - no bloated font bundles. Clean typography matters when you're sharing code. Monospace fonts like JetBrains Mono, Fira Code, and Cascadia Code render with proper ligatures. The font picker loads instantly and supports searching.

4. Complete Layout Control
Every visual detail is adjustable. Set padding, border radius, and font size with numeric inputs. Live preview updates in real-time as you tweak — no guessing. No export-then-regret cycle. See exactly what you'll ship before you click export.

5. Accessible, Keyboard-First UI
Custom select menus with full keyboard navigation — arrow keys move between options, Enter selects, Escape closes. ARIA labels throughout. No mouse required if you prefer the keyboard.

The Architecture You'll Appreciate!

JSON-Driven Configuration
Here's what makes SnippitKit maintainable: themes, fonts, and languages are all data-driven. Every theme is a JSON object. Every language is an entry in a language JSON file. Want to add a new gradient theme? Add one line to the themes JSON. Want to support a new language? One entry in the language file. No digging through React components. No refactoring. The UI and the data are cleanly separated.

This design makes it trivial to extend without breaking anything. Community contributions are easy because contributors only need to understand JSON, not component architecture.

The Tech Stack
Simple, purposeful tools with no unnecessary dependencies:

• HTML5 + CSS3 + JavaScript (ES6+) - Core logic and styling
• Prism.js - Syntax highlighting with intelligent language autoloading
• dom-to-image-more - High-quality PNG and SVG export from the DOM
• Google Fonts API - Dynamic font loading on demand
• Devicons (jsDelivr) - Language and technology icons
• Vite - Fast dev server and optimized bundling
• Vercel - Instant global deployment

No bloated frameworks. No unnecessary dependencies. Fast startup. Small bundle. Ships instantly.

Run It Locally
Clone and start creating:

bashgit clone https://github.com/byllzz/snippitkit.git
cd snippitkit
npm install
npm run dev

Open http://localhost:5173. No environment variables needed. The entire app runs instantly.

How to Contribute
Contributions improve SnippitKit for everyone. Good first issues:

• Add new theme presets to the themes JSON file
• Expand the language definitions with additional languages
• Improve SVG export fidelity and scaling
• Suggest new font size or padding presets
• Enhance accessibility — focus management, screen reader testing, keyboard navigation

Contribution workflow:

bashgit checkout -b feat/your-feature
# make your changes
git commit -m "feat: your short description"
git push origin feat/your-feature

Keep PRs focused - one feature or fix per request.

If SnippitKit helped you share code that actually looks polished, a ⭐ on GitHub means a lot.