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

Kushak Zohaad Jafry — Wed, 01 Apr 2026 12:41:27 +0000

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.

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

Open terminal in VS Code
Run your commands
Select the output
Press Cmd+Shift+S
Adjust theme and settings in the preview panel
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"
}

Install

https://marketplace.visualstudio.com/items?itemName=KushakJafry.termsnap
https://open-vsx.org/extension/kushakjafry/termsnap (for Cursor, VSCodium, etc.)
https://github.com/kushakjafry/termsnap

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!

Kushak's Portfolio

Kushak Zohaad Jafry — Mon, 11 Jan 2021 07:16:14 +0000

What I built

I built a portfolio for myself using Angular/ Universal and Strapi.

Category Submission:

Personal Site/Portfolio

App Link

FrontEnd

https://kushakjafry.tech/
https://portfolio-jdo2v.ondigitalocean.app/

Backend

https://portfolio-backend-9fful.ondigitalocean.app/

Screenshots

Description

I was planning to make my personal portfolio for a long time.
After seeing the hackathon, I was very excited and decided to start
making my own portfolio.
After my failed attempts to design the UI, I decided to go by design, inspired by a template.

I picked the design idea and started designing my own site on Adobe site.

After the UI designing part was completed, it was time for Frontend and Backend.

I thought of using strapi as backend as it seemed pretty good and was also provided in the hackathon description.
Being a newbie at strapi, it was pretty hard to grasp it initially.

For the frontend, I decided to use Angular with Universal for Server Side Rendering. I decided not to use any jquery or jquery based library. Developing the frontend from scratch using HTML/CSS and TS according to design was a pretty tough task.

Link to Source Code

Frontend

https://github.com/kushakjafry/portfolio

Backend

https://github.com/kushakjafry/portfolio-backend

Permissive License

Frontend

MIT

Backend

MIT

Background

I was always planning to make my own personal portfolio site for a long time. And the idea of a hackathon excited me to build the site.
I learned a lot about Strapi, the digitalocean App platform, adding Deploy to do buttons to GitHub repositories, and learned to connect the app to custom domains.

How I built it

I used ADOBE XD for designing UI.
Angular for developing frontend.
Strapi for developing the backend.
Angular Universal for SSR.

DEV Community: Kushak Zohaad Jafry

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

What is TermSnap?

Features

Works great for

How to use

Custom themes

Kushak's Portfolio

What I built

Category Submission:

App Link

FrontEnd

Backend

Screenshots

Description

Link to Source Code

Frontend

Backend

Permissive License

Frontend

Backend

Background

How I built it

Additional Resources/Info