I have this habit of sharing code snippets online.
Not tutorials. Not threads. — "Look at this interesting thing I wrote today."
The problem was that it always looked ugly. So I'd open some tool, fiddle with settings, realize I needed a browser frame too, open another tool, give up, and post the ugly version anyway.
Eventually, I just built what I actually wanted.
What I built
KromaStudio — a free, browser-based studio:
Code screenshots with syntax highlighting (15 themes)
Browser mockup frames (Chrome, Safari, Arc, macOS)
Social postcards (announcement, metrics, tweet-style)
Animated .webm export (float, 3D tilt, scroll)
100% client-side — nothing uploaded, no backend
→ kromastudio.in
Technical decisions
Why fully client-side?
I didn't want to run a server just to convert HTML to an image. html-to-image does the job entirely in the browser — faster for users, cheaper for me, and no privacy concerns.
The hardest part: defaults
Most users paste code and immediately export. They won't touch settings. So if the defaults look bad, the tool is bad.
I think I tweaked the default padding alone ~40 times.
Stack
Next.js (App Router)
Tailwind CSS
html-to-image for export
Deployed on Vercel
What I'd do differently
Ship faster. I spent too long polishing before anyone had even tried it. The first version should have been uglier.
Try it
kromastudio.in — free, no sign-up.
If something feels off or something's missing, open an issue on GitHub or just tell me here https://github.com/Ritesh0888/kroma-studio.
Top comments (0)