Why I Built This
I share code snippets on Twitter and LinkedIn regularly, and every tool I tried had the same problems — limited themes, no export control, or a clunky interface that made a 10-second task take a minute. I wanted something I'd actually enjoy using: fast, keyboard-driven, and visually sharp.
Snippix started as a weekend project and grew into a proper tool once I realized other developers had the same frustration.
How It Works
You paste code, pick a theme and font, and Snippix generates a styled preview in real-time. Highlight.js handles syntax detection automatically — no need to manually select a language. The preview is fully customizable: font size, padding, background style, window controls, and line numbers.
When you're happy with the result, export as PNG or SVG, or copy directly to clipboard. The export uses html-to-image to capture the DOM node as a pixel-perfect image.
State management runs on Zustand. Every customization option — theme, font, padding, background — lives in a single store with selector-based subscriptions, so changing one setting doesn't re-render the entire app.
Key Decisions
Zustand for instant theme switching
Theme and font changes need to feel instant. React Context would re-render the entire tree on every change. Zustand's granular subscriptions mean only the preview panel and the active control re-render — the rest of the UI stays untouched.
html-to-image over canvas-based rendering
I evaluated canvas-based screenshot libraries, but they struggled with CSS transforms, custom fonts, and z-index stacking. html-to-image captures the actual DOM, which means the export matches the preview exactly. The tradeoff is slightly larger file sizes, but accuracy matters more for this use case.
Drag-to-resize with react-resizable-box
Rather than fixed width presets, I added drag handles so users can size their snippet to fit any context — a tweet, a blog post, or a slide deck. This was a small addition that significantly improved usability.
What I Learned
DOM-to-image is fragile. Scroll offsets, transforms, and shadow DOM elements can all break the capture. I spent time isolating the preview node and ensuring no external CSS bled in during export.
Defaults matter more than options. My first version had too many controls visible at once. Reducing the initial UI to theme + font + export, with advanced options tucked behind a toggle, made the tool feel faster even though it has the same feature set.
Keyboard shortcuts change the UX entirely. Once I added hotkeys for the most common actions, my own workflow sped up dramatically. It's a small investment that signals to power users that the tool respects their time.
