termsnap

Creates beautiful screenshots of terminal command output with full local font and emoji support.

pnpx termsnap "lolcat -f <(figlet -f banner3 termsnap)"

Features

This project leverages Go-based terminal output proxy combined with web rendering technology to deliver pixel-perfect terminal screenshots.

• Interactive Terminal Support: Capture interactive terminal sessions through Go-based terminal output proxy
• Local Font & Emoji Support: Perfect rendering of your system fonts and emoji characters
• Customizable Themes: Extensive theme customization through configuration files
• Multiple Output Formats: Export as HTML, images (PNG/JPEG/WebP), or browser preview

Usage Examples

# Browser preview
pnpx termsnap "command" --open

# Save as HTML file
pnpx termsnap "command" --html index.html

# Save as screenshot
pnpx termsnap "command" --screenshot image.png

# Custom theme and decoration
pnpx termsnap "command" --open --theme vitesse-light --decoration

Output Formats

Generate your terminal output in multiple formats:

• HTML: Save as standalone HTML file with embedded styling
• Images: Export as PNG, JPEG, or WebP formats
• Browser Preview: Open directly in browser (powered by Broz)

Known Issues

In some cases, especially with custom fonts, width and height calculations may be inaccurate. When this occurs, you can manually set the height and width parameters to force specific viewport dimensions.

When setting lineHeight greater than 1, box drawing characters may appear discontinuous with gaps between adjacent lines due to limitations in xterm.js rendering.

Theme Customization

termsnap supports termsnap.config.ts for persistent configuration and theme customization. You can:

• Use built-in themes (vitesse, catppuccin)
• Use remote themes from iTerm2-Color-Schemes VSCode directory
• Create custom themes in termsnap.config.ts

Remote Themes

You can use any theme from the iTerm2-Color-Schemes VSCode directory. If the theme name is not in the built-in list, termsnap will automatically attempt to download it from the repository:

# Use a remote theme (e.g., 0x96f)
pnpx termsnap "command" --theme "0x96f"

Configuration Options

Server Settings

• port - Server port (default: 3000)
• cdn - CDN provider for xterm.js (jsdelivr, unpkg)
• force - Force to download the theme from remote

Output Options

• screenshot - Generate screenshot and save to file
• dpi - Device pixel ratio for screenshot
• html - Generate HTML template and save to file
• open - Open browser after generating HTML template

Terminal Styling

• theme - Terminal theme (vitesse-dark, vitesse-light, catppuccin variants, etc.)
• colors - Custom terminal color configuration
• height - Terminal height
• width - Terminal width

Font Configuration

• fontFamily - Terminal font family
• fontSize - Terminal font size
• fontWeight - Terminal font weight
• lineHeight - Terminal line height

Border & Layout

• borderRadius - Terminal border radius
• borderWidth - Terminal border width
• borderColor - Terminal border color
• boxShadow - Terminal box shadow
• padding - Terminal padding
• margin - Terminal margin
• decoration - Draw window decorations (minimize, maximize, close buttons)

Acknowledgments

This project was inspired by:

• termshot - Creates screenshots based on terminal command output
• freeze - Generate images of code and terminal output 📸

Why termsnap?

I wanted a simple way to create screenshots for my CLI tools to include in README files. However, existing tools had limitations with fonts, emoji support, and interactive terminal sessions. This led me to create termsnap - a terminal screenshot tool that feels like recording your terminal sessions with perfect fidelity.

License

MIT License © jinghaihan