DEV Community

Ondrej Machala
Ondrej Machala

Posted on • Edited on

You Can Screenshot Any Website from Your Terminal

#webdev #documentation #automation #testing

I was putting together docs for a side project and needed screenshots. The usual drill - open browser, navigate, resize, screenshot tool, crop, save, rename. Repeat 20 times.

There's a terminal tool for this. You just run:

npx heroshot https://example.com
Enter fullscreen mode Exit fullscreen mode

That's it. PNG file appears in your folder. Done.

No browser window. No clicking. No cropping. Just the URL and you get a clean screenshot of the entire page.

Wait, it gets better

Need just the hero section, not the whole page? Run it without flags and it opens an interactive browser where you click to select elements:

npx heroshot
Enter fullscreen mode Exit fullscreen mode

Point, click, done. No CSS selectors to figure out.

Mobile version?

npx heroshot https://example.com --mobile
Enter fullscreen mode Exit fullscreen mode

Dark mode?

npx heroshot https://example.com --dark
Enter fullscreen mode Exit fullscreen mode

Both light and dark variants at once?

npx heroshot https://example.com --light --dark
Enter fullscreen mode Exit fullscreen mode

Why this is useful

I've spent embarrassing amounts of time manually screenshotting stuff. Documentation images. Bug reports. Mockup comparisons. Every time something changed, back to the browser.

Now I just run the command again. Same screenshot, updated. Takes two seconds.

The --retina flag is great for docs - crisp images without any extra work.

Under the hood

It's Playwright doing the actual work - spinning up a headless browser, loading the page, taking the shot. But wrapped in a way where you don't have to think about any of that. No scripts to write. No dependencies to manage beyond the npx call.

Anyway, thought this was cool. Heroshot if you want to try it.

Top comments (0)