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

#productivity #webdev #vscode #opensource

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: