I built a VS Code extension to capture terminal output as styled screenshots
<p>Ever tried sharing terminal output with someone? You've got two bad options:</p> <p><strong>Copy-paste</strong> - 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.</p> <p><strong>Screenshot</strong> - 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.</p> <p>I kept hitting both problems, so I built <strong>TermSnap</strong>.</p> <h2> What is TermSnap? </h2> <p>A VS Code extension that lets you select terminal text - no matter how long - press <code>Cmd+Shift+S</code>, and get a single Carbon-style
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" }{ "termsnap.theme": "custom", "termsnap.customBackground": "#1a1a2e", "termsnap.customTextColor": "#e0e0e0", "termsnap.customTitleBarColor": "#16213e" }Enter fullscreen mode
Exit fullscreen mode
Install
-
https://marketplace.visualstudio.com/items?itemName=KushakJafry.termsnap
-
https://open-vsx.org/extension/kushakjafry/termsnap (for Cursor, VSCodium, etc.)
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!
DEV Community
https://dev.to/kushakjafry/i-built-a-vs-code-extension-to-capture-terminal-output-as-styled-screenshots-4ch9Sign in to highlight and annotate this article

Conversation starters
Daily AI Digest
Get the top 5 AI stories delivered to your inbox every morning.
More about
open sourceplatformfeature
I Shipped an AI SaaS in 4 Hours. Here Is the Exact Stack.
I Shipped an AI SaaS in 4 Hours. Here Is the Exact Stack. Every AI SaaS project starts the same way. You have a great idea. You open your editor. Then you spend three weeks on auth, Stripe integration, a dashboard, and a landing page — none of which is your actual product. I built a kit that eliminates that. Here is the exact stack and what each piece does. The Stack next.js 14 (App Router) tailwind css stripe billing nextauth openai / claude api routes prisma + postgresql What Comes Pre-Wired Authentication (NextAuth) // app/api/auth/[...nextauth]/route.ts import NextAuth from " next-auth " import { authOptions } from " @/lib/auth " const handler = NextAuth ( authOptions ) export { handler as GET , handler as POST } Google OAuth, GitHub OAuth, and email/password — all configured. Sessions

MFE: A Multimodal Hand Exoskeleton with Interactive Force, Pressure and Thermo-haptic Feedback
arXiv:2604.02820v1 Announce Type: new Abstract: Recent advancements in virtual reality and robotic teleoperation have greatly increased the variety of haptic information that must be conveyed to users. While existing haptic devices typically provide unimodal feedback to enhance situational awareness, a gap remains in their ability to deliver rich, multimodal sensory feedback encompassing force, pressure, and thermal sensations. To address this limitation, we present the Multimodal Feedback Exoskeleton (MFE), a hand exoskeleton designed to deliver hybrid haptic feedback. The MFE features 20 degrees of freedom for capturing hand pose. For force feedback, it employs an active mechanism capable of generating 3.5-8.1 N of pushing and pulling forces at the fingers' resting pose, enabling realist

Free MCP Server: Real-Time Crypto Data for Claude Code and Cursor
Free MCP Server: Real-Time Crypto Data for Claude Code and Cursor If you do any crypto trading, DeFi research, or blockchain development, this is useful. I built an MCP server that gives Claude Code, Cursor, and any MCP-compatible AI tool direct access to real-time cryptocurrency data — powered by CoinGecko. It is free. No API key required. What It Does Five tools: get_price Real-time prices for any token by ID or symbol. Get me the current price of ETH and BTC → ETH: $3,847.22 | BTC: $94,221.55 get_market_data Full market data: price, volume, market cap, 24h change. What is SOL market cap and 24h volume? → Market cap: $89.4B | 24h volume: $4.2B | Change: +2.3% search_tokens Search by name or symbol across 70+ tokens. Find tokens related to "layer 2" → ARB, OP, MATIC, IMX, METIS, ZK... get
Knowledge Map
Connected Articles — Knowledge Graph
This article is connected to other articles through shared AI topics and tags.
More in Products

I Shipped an AI SaaS in 4 Hours. Here Is the Exact Stack.
I Shipped an AI SaaS in 4 Hours. Here Is the Exact Stack. Every AI SaaS project starts the same way. You have a great idea. You open your editor. Then you spend three weeks on auth, Stripe integration, a dashboard, and a landing page — none of which is your actual product. I built a kit that eliminates that. Here is the exact stack and what each piece does. The Stack next.js 14 (App Router) tailwind css stripe billing nextauth openai / claude api routes prisma + postgresql What Comes Pre-Wired Authentication (NextAuth) // app/api/auth/[...nextauth]/route.ts import NextAuth from " next-auth " import { authOptions } from " @/lib/auth " const handler = NextAuth ( authOptions ) export { handler as GET , handler as POST } Google OAuth, GitHub OAuth, and email/password — all configured. Sessions

Full Stack Developer Roadmap 2026: The Complete Guide from Beginner to Pro 🚀
Have a Look at My Portfolio Introduction: Why Full Stack Development Is Still the Best Bet in 2026 Let me be straight with you. When I started learning web development years ago, I had seventeen browser tabs open, three half-finished Udemy courses, and absolutely no idea what to actually learn first. Sound familiar? The good news: in 2026, the path is clearer than ever — if you know where to look. Full stack development remains one of the most in-demand, highest-paying, and genuinely exciting career paths in tech. Despite all the noise about AI replacing developers, companies continue to hire full stack developers because AI can assist coding — but it cannot design, architect, and scale real-world applications independently. What has changed is the stack itself. In 2026, being a full stack

10 Claude Code Skills That Replaced My Boilerplate Folders
10 Claude Code Skills That Replaced My Boilerplate Folders I used to keep a folder of boilerplate code. Auth templates. Stripe integration files. Docker configs. I do not do that anymore. Here are the 10 Claude Code skills that replaced them. What Is a Claude Code Skill? A skill is a markdown file Claude Code reads before writing code. It gives Claude full context about your preferences, patterns, and requirements — so the output is production-ready, not generic. You invoke a skill with a slash command: /auth → full authentication system /pay → Stripe billing setup Claude reads the skill, asks clarifying questions, then outputs complete implementations. The 10 Skills 1. /auth — Authentication System Asks: OAuth providers? Session or JWT? Role-based access needed? Outputs: Complete auth imp


Discussion
Sign in to join the discussion
No comments yet — be the first to share your thoughts!