DEV Community: Ritesh Kumar

I built a VS Code extension so you never copy-paste code into Carbon again

Ritesh Kumar — Sun, 07 Jun 2026 11:01:56 +0000

If you've ever written a tweet, a README hero, or a LinkedIn post with a code snippet, you've probably done this dance:

Select code in your editor
Copy
Open Carbon or ray.so
Paste
Fix the language and theme
Export

It works. But it's friction, especially when you're iterating on a thread or shipping a launch post and want five screenshots in ten minutes.

So I shipped a VS Code extension for KromaStudio that skips the copy-paste step entirely.

The workflow: select, shortcut, export

Select code in VS Code or Cursor (or capture the whole file).

Press Cmd+Shift+K on macOS or Ctrl+Shift+K on Windows/Linux.

KromaStudio opens in your browser with language, syntax theme, and background already applied.

Tweak the padding, frame, and gradient, then export a PNG or an animated .webm.

That's it. No paste. No re-picking Dracula for the 47th time.

Before: select code in VS Code

After: styled snippet ready to export in KromaStudio

Install

Search "KromaStudio" in the VS Code Extensions panel, or install from the Marketplace:

https://marketplace.visualstudio.com/items?itemName=KromaStudio.kroma-studio

CLI:

code --install-extension KromaStudio.kroma-studio

Commands

KromaStudio: Capture Selection Shortcut: Cmd+Shift+K (macOS) or Ctrl+Shift+K (Windows/Linux)

KromaStudio: Capture Current File Command Palette

KromaStudio: Open Studio Command Palette

You can also right-click in the editor and choose KromaStudio: Capture Selection.

Why a browser handoff instead of an in-editor export?

Carbon and ray.so are great screenshot tools. KromaStudio is a broader visual studio: code screenshots, browser mockups, social post templates, and animated exports, all client-side.

The extension's job is narrow and fast:

Read your selection from the editor
Map VS Code's language ID to KromaStudio language
Encode the snippet and open a handoff URL
Pre-fill theme and background from your settings

The heavy lifting (syntax highlighting, gradients, export) stays in the web app, where it's easier to iterate and where users already style mockups and social cards.

Settings worth knowing

kromaStudio.defaultTheme: dracula kromaStudio.defaultBackground: midnight kromaStudio.openMode: external kromaStudio.modeIntent: static

openMode: system browser vs VS Code Simple Browser modeIntent: set to animated to land with the float animation preset. studioUrl: point at http://localhost:3000 if you're self-hosting

Privacy

KromaStudio runs 100% client-side in the browser. Your code and images are not uploaded to a server for rendering. The extension just opens a URL, the same idea as opening Carbon, but with your snippet already loaded.

Carbon/ray.so, or something more?

If you only need a quick code window, Carbon and ray.so are still excellent.

KromaStudio makes sense when you want:

Editor-native capture with this extension
Gradient backgrounds and 15 syntax themes in one place
Browser mockups for launch posts
Social templates for tweet, LinkedIn, thread, and more
Animated .webm loops for demos

All from one studio, free, no sign-up.

Open source

The web app and extension are MIT licensed.

Repo: https://github.com/Ritesh0888/kroma-studio Extension source: extensions/vscode/ Live app: https://www.kromastudio.in

If you try it, I'd love feedback. Issues welcome on GitHub.

Links

KromaStudio: https://www.kromastudio.in
VS Code extension: https://marketplace.visualstudio.com/items?itemName=KromaStudio.kroma-studio
How it works: https://www.kromastudio.in/how-it-works
Carbon alternative comparison: https://www.kromastudio.in/carbon-alternative

I built a free, client-side code screenshot tool — here's what I learned

Ritesh Kumar — Mon, 01 Jun 2026 22:20:00 +0000

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.

Stop posting boring black-and-white screenshots of your code. I built a free tool to fix this.

Ritesh Kumar — Tue, 26 May 2026 07:50:58 +0000

Hey everyone,

As a frontend developer, I love sharing quick code snippets and learning moments on LinkedIn and Twitter. But every time I wanted to post something, I faced a minor friction point: taking screenshots directly from VS Code looked dull, gray, and completely boring.

The alternative? Open Figma, create a canvas, add a trendy gradient background, drop the code image, fix the shadows, and then export. Doing this for a 10-second social media post felt like complete over-engineering.

I just wanted something fast. Like, 5 seconds fast.

So over the last few days, I built KromaStudio.in.

It’s a lightweight, no-nonsense web tool designed to instantly beautify your raw code screenshots into premium, aesthetic mockups.

✨ What it does right now:
Drag & Drop: Just drop your screenshot onto the canvas.

Premium Gradients: Toggle between beautiful, hand-picked backgrounds.

Browser Frame: Adds a clean, professional window wrapper around your code.

No Signup Required: I hate landing pages that force me to sign up just to use a basic utility tool. KromaStudio has zero login screens and zero watermarks. You use it, you export, you're done.

🛠️ The Tech Stack:
I wanted to keep it extremely fast and responsive, so I built it using:

Next.js / React (for the frontend)

Tailwind CSS (for the UI styling)

Vercel (for lightning-fast hosting and analytics)

🙌 I need your brutal feedback!
I literally just launched this tool today. Since this community is packed with amazing developers, I’d love to get some honest feedback:

Is the UI intuitive enough?

What feature should I build next? (Should I add code syntax highlighting themes directly inside the tool?)

Check it out here: KromaStudio.in

If you like it, awesome! If you think it needs work, please drop your suggestions in the comments below. I'm actively improving it.

Cheers! 🚀