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

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

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!