DEV Community

Cover image for I built a VS Code extension to capture terminal output as styled screenshots
Kushak Zohaad Jafry
Kushak Zohaad Jafry

Posted on

I built a VS Code extension to capture terminal output as styled screenshots

Ever tried sharing terminal output with someone? You've got two bad options:

Copy-paste - and watch your perfectly aligned table turn into a mess. Paste into WhatsApp, Slack, Google Docs, or Word and the columns misalign, box-drawing characters break, and structured output becomes an unreadable wall of text.

Screenshot - but your platform's screenshot tool only captures what's on screen. If your table or log extends beyond the viewport, you're stitching multiple screenshots or just giving up.

I kept hitting both problems, so I built TermSnap.

What is TermSnap?

A VS Code extension that lets you select terminal text - no matter how long - press Cmd+Shift+S, and get a single Carbon-style screenshot of the entire output.

TermSnap Preview

Features

  • One shortcut - Select text in terminal, press Cmd+Shift+S (Mac) / Ctrl+Shift+S (Windows/Linux)
  • Full selection capture - Even hundreds of lines that don't fit on screen
  • Carbon-style rendering - Rounded window frame, macOS dots, shadow, themed background
  • 11 built-in themes - Dracula, Tokyo Night, Nord, Monokai, GitHub Dark, Catppuccin Mocha, and more
  • Custom themes - Define your own colors in VS Code settings
  • Live preview - Adjust theme, font size, padding, line numbers, window chrome in real time
  • Export options - Save as PNG, copy image to clipboard, or copy raw text

Works great for

  • Tables, ASCII art, mermaid diagrams, flowcharts
  • Deployment logs and CLI output (kubectl, docker, aws cli, firebase)
  • Documentation, presentations, slides, blog posts
  • Anywhere plain text loses formatting when pasted

How to use

  1. Open terminal in VS Code
  2. Run your commands
  3. Select the output
  4. Press Cmd+Shift+S
  5. Adjust theme and settings in the preview panel
  6. Click Save as PNG, Copy Image, or Copy Text

Custom themes

Don't like the built-in themes? Define your own:

{
  "termsnap.theme": "custom",
  "termsnap.customBackground": "#1a1a2e",
  "termsnap.customTextColor": "#e0e0e0",
  "termsnap.customTitleBarColor": "#16213e"
}
Enter fullscreen mode Exit fullscreen mode

Install

It's free and open source (MIT). Would love to hear what features or themes you'd want to see - drop a comment or open a GitHub issue!

Top comments (0)