# Snippix > Turn code snippets into PNG or SVG images for social posts Turns pasted code into PNG or SVG images for social posts, and what you export matches exactly what you see in the editor. - Type: Web App - Role: Full-stack Developer - Tech: nextjs, react, zustand, typescript, shadcn-ui, tailwindcss, highlightjs, react-hotkeys-hook - Published: 2025-04-01 - Updated: 2026-10-04 - Live: https://snippix.vercel.app - Repo: https://github.com/aayushbharti/snippix - URL: https://aayushbharti.in/projects/snippix **TL;DR:** Snippix is a Next.js web app that turns code snippets into styled images for Twitter and LinkedIn. It uses Zustand for editor state, flourite for optional language detection, Highlight.js for highlighting, and html-to-image to export the preview DOM node as PNG or SVG. The hard part was making the exported file match the on-screen preview exactly. ## Highlights - 10 editor themes with a dark mode toggle, and 14 monospace fonts. - Syntax highlighting for 40 languages, with optional auto-detection. - Export as PNG or SVG, or copy the image to your clipboard. - Adjustable font size, background and padding. - Drag to resize the snippet container, and use keyboard shortcuts. --- ## What it is Snippix turns a code snippet into an image for Twitter or LinkedIn. You paste code, pick one of 10 themes and 14 monospace fonts, set font size, padding and background, then save a PNG or SVG or copy the image to the clipboard. Highlight.js does the coloring, and with Auto Detect selected, flourite guesses the language as you type. I share snippets often enough that I wanted export to be one keystroke: `Ctrl+S` saves a PNG, `Shift+Ctrl+S` saves an SVG, and `Ctrl+C` copies the image. --- ![Snippix editor showing a C snippet on a pink-to-orange gradient, a 642px width ruler, and theme, language, font, padding and export controls below](/projects/snippix/screen1.png) --- ## Exporting the preview DOM with html-to-image The exported file has to look exactly like the preview. I tried canvas-based screenshot libraries first, and they struggled with CSS transforms, custom fonts and z-index stacking, so Snippix uses html-to-image, which captures the actual preview DOM node and lets the browser render it. All three export paths pass `pixelRatio: 2`, which only affects the raster output: the 642px-wide snippet in the screenshot above saves as a 1,284px-wide PNG. Copying uses `toBlob` and wraps the result in a `ClipboardItem`, so the image lands on the clipboard as a PNG with no download step. DOM capture is fragile in its own way. Scroll offsets, transforms and shadow DOM elements can all break it, so I isolated the preview node and made sure no external CSS bled in during export. The cost is slightly larger files than a canvas render. I'll take that for an exact match. The preview sits inside `re-resizable` with a live width readout under it, so the width you drag to is the width you export. --- ## What I'd change Copy Link puts the whole editor state in the URL, with the code base64-encoded by `btoa`. `btoa` only accepts Latin-1 characters, so a snippet containing an emoji or non-Latin text throws, and all you see is a "Something went wrong!" toast. I'd encode the code as UTF-8 bytes with `TextEncoder` before base64-encoding it. --- ## Frequently asked questions ### What is Snippix? Snippix is a web tool for turning code snippets into styled images to share on social media like Twitter and LinkedIn. You paste code, pick a theme and font, and export the result as PNG or SVG or copy it to the clipboard. ### How does Snippix detect the programming language? Snippix has an Auto Detect option in its language menu that runs flourite on the code as you type, and Highlight.js then applies the syntax highlighting. You can also pick one of 40 languages manually. ### What customization options does Snippix have? Snippix has 10 editor themes with a dark mode toggle and 14 monospace fonts, plus controls for font size, padding, background and the window title. The snippet container resizes by dragging, and keyboard shortcuts cover copying and saving. ### How does Snippix export code snippets as images? Snippix uses html-to-image to capture the actual preview DOM node, so the exported PNG or SVG matches the preview exactly. Canvas-based screenshot libraries were ruled out because they struggled with CSS transforms, custom fonts and z-index stacking. ### What is Snippix built with? Snippix is built with Next.js, React, TypeScript, Tailwind CSS and shadcn/ui, with Zustand for state, Highlight.js for syntax highlighting and react-hotkeys-hook for keyboard shortcuts. Zustand's persist middleware saves the editor settings to localStorage between visits.