DOMShot
LiveDOMShot turns any element on a live webpage into a clean PNG. I use the same capture code in the Chrome extension, the preview editor, the command line, and the MCP server for coding agents.
A screenshot often creates more work than it should.
A useful UI component may already exist in the browser, but turning it into a clean image often means opening developer tools, cropping a screenshot, rebuilding spacing, adding a background, and checking the export again.
DOMShot uses the browser’s rendering instead. It captures the selected element and opens an editor for the final background, spacing, shadow, and size.
Select the real element. See the final composition. Export once.
Pick the element, adjust the image, and save it.
Select an element
The extension overlays the current page and makes the capture boundary visible.
Capture the element
DOMShot separates the selected content and keeps the way it looks in the browser.
Adjust the image
Presets and simple controls set the background, padding, shadow, corners, and scale.
Export the PNG
The preview becomes a local image at the chosen size and composition.
I kept the editor quick without removing the controls people need.
Preview before saving
The editor shows the final composition before the user downloads it.
Local by default
DOMShot handles the selected content in the browser and does not upload it to a DOMShot server.
Transparent when possible
The capture path preserves transparency and has explicit fallbacks when a page cannot be rendered cleanly.
One capture path
The extension, Node API, CLI, and MCP server share the same capture logic.
How the extension, command line, and agent tools work together.
I made DOMShot available in three ways: a Chrome extension for people, Node and command-line tools for scripts, and an MCP server for coding agents. They all use the same capture path.
Chrome capture
The element picker, the browser capture, recent images, and the step that opens the editor.
Background and spacing controls
Presets and direct controls for preparing an image to share.
Node, command line, and MCP
The same capture steps packaged for scripts, coding agents, and local automation.
Website and documentation
Where people can install DOMShot, see examples, read the privacy details, and get help.
The difficult parts
Every webpage behaves differently
Elements can contain transparent pixels, nested styles, unusual fonts, or page behavior that does not survive a basic crop.
Power can become clutter
An image editor can grow endlessly. DOMShot needs enough control to be useful without turning a quick capture into a design session.
Failed captures must look failed
The CLI and MCP tools need clear errors, fallbacks, and saved output so a failed capture cannot look successful.
What I’ve learned from building a small developer tool.
- A small tool feels dependable when every screen makes the next step obvious.
- Keeping the capture in the browser is better for privacy and makes the product simpler.
- The automation works best when it follows the same steps that already work in the extension.
The extension is live. I’m still testing the agent tools.
I’ve released the Chrome extension and the public website. The Node API, command-line tool, and MCP server work locally, and I’m still testing them together as one package.
- I’m fixing difficult capture cases and making the fallbacks clearer when transparency fails.
- I’m adding more to the agent tools without making the browser extension harder to use.
- I’m adding better examples and documentation for repeatable interface captures.