DEV Community

Cover image for I Built a CLI to Capture Website Screenshots From The Terminal
Erik
Erik

Posted on

I Built a CLI to Capture Website Screenshots From The Terminal

#showdev #rust #webdev #productivity

The Problem That Kept Bugging Me

As developers, we spend a lot of time in the terminal. Git, Docker, SSH, package managers - it's where we're most productive. But the moment I needed to see or screenshot a website, I'd have to break that flow entirely.

The routine was often the same:

  1. Need to check a site
  2. Open browser
  3. Navigate to URL
  4. Open DevTools to resize viewport (if testing responsiveness)
  5. Find a screenshot tool or use the browser's built-in one
  6. Save the file
  7. Drag it into Slack/docs/issue tracker

For something I did multiple times a day, such as checking deploys, documenting bugs, archiving pages for clients, this friction was frustrating. I wanted curl for screenshots.

So I Built It

allscreenshots is a CLI tool that captures website screenshots and displays them directly in your terminal! If your terminal supports Sixel, iTerm2, or Kitty image protocols, you'll see the screenshot inline. No context switch required!

Dev.to Capture in the Terminal

Also, if it doesn't support those image protocols, there's a blocky fallback option, which is better than you may think.

allscreenshots https://your-site.com
Enter fullscreen mode Exit fullscreen mode

That's it. The screenshot is rendered right where you're working.

Why Rust?

When deciding what language to pick, I had a few options. Go and Rust were my initial choices.

I chose Rust for a few reasons:

  • Fast startup time - CLI tools should feel instant. No waiting for a runtime to spin up.
  • Single binary distribution - brew install and you're done. There are no dependencies to manage.
  • Cross-platform - Works on macOS, Linux, and Windows without separate codebases*. (*in theory, only macOS is tested at this stage!)
  • Reliability - Memory safety without a garbage collector means fewer surprises in production.

The actual rendering happens via a cloud API, so you don't need a local browser installation or deal with headless Chrome configuration. The Rust CLI handles authentication, image processing, and terminal rendering.

Features Built for Developer Workflows

The CLI comes packaged with a large amount of features

Device Emulation

Are you testing responsive designs? Then you can emulate specific devices without opening DevTools:

allscreenshots https://mysite.com --device "iPhone 14"
allscreenshots https://mysite.com --device "iPad Pro"
allscreenshots https://mysite.com --width 1920 --height 1080
Enter fullscreen mode Exit fullscreen mode

Netflix Mobile Capture

Full-Page Captures

Capture the entire scrollable page, not just the viewport:

allscreenshots https://mysite.com --full-page -o full.png
Enter fullscreen mode Exit fullscreen mode

Batch Processing

Have a list of URLs to capture? Feed them from a file:

allscreenshots batch urls.txt -o ./screenshots/
Enter fullscreen mode Exit fullscreen mode

Perfect for visual regression testing, documentation, or archiving.

Watch Mode

Continuously capture screenshots during development:

allscreenshots https://localhost:3000 --watch --interval 5
Enter fullscreen mode Exit fullscreen mode

Clean Screenshots

Cookie banners and ads can ruin screenshots. You can Bblock them automatically:

allscreenshots https://example.com --block-ads --block-cookies
Enter fullscreen mode Exit fullscreen mode

Multiple Output Formats

Export to whatever you need:

allscreenshots https://example.com -o page.png   # PNG
allscreenshots https://example.com -o page.jpg   # JPEG
allscreenshots https://example.com -o page.webp  # WebP
allscreenshots https://example.com -o page.pdf   # PDF
Enter fullscreen mode Exit fullscreen mode

(More formats are on the way!)

Real-World Use Cases

CI/CD Visual Testing
Capture screenshots after each deploy and compare them automatically. Catch visual regressions before users do.

Documentation
Generating docs that include UI screenshots? Script it instead of manually capturing and cropping.

Bug Reports
Quickly attach a screenshot to an issue without leaving your terminal workflow.

Archiving
Need to preserve how a page looked at a specific point in time? Batch capture and store.

Client Reporting
Capture multiple pages across device sizes for client deliverables.

Getting Started

Installation 

# macOS
brew tap allscreenshots/allscreenshots && brew install allscreenshots

# Or download binaries from GitHub releases
Enter fullscreen mode Exit fullscreen mode

Quick Start 

# Capture and display inline
allscreenshots https://github.com

# Save to file
allscreenshots https://github.com -o github.png

# Full page, iPhone viewport, no cookie banners
allscreenshots https://example.com --full-page --device "iPhone 14" --block-cookies -o mobile.png
Enter fullscreen mode Exit fullscreen mode

Links

What's Next?

I'm actively developing this and would love feedback from the community:

  • What features would make this more useful for your workflow?
  • Any edge cases or sites that don't render correctly?
  • Integration ideas (GitHub Actions, VS Code, etc.)?

Drop a comment below or open an issue on GitHub. Thanks for reading!

Top comments (1)

Collapse
 
erik_df43be0db3da3f32f636 profile image
Erik •

Thanks for reading, let me know if you have comments or suggestions!