DOM to Image

This tool captures a live piece of the page and turns it into a downloadable image, all without a server:

1. Paste HTML into the input box; inline style attributes and standard HTML elements are supported.
2. Render Preview injects your markup into a container on the page so you can see exactly how it looks.
3. snapDOM walks the DOM of that container, inlining computed styles, fonts, and background images into a self-contained <svg> using a foreignObject.
4. For raster formats (PNG / JPG / WebP), that SVG is drawn onto a <canvas> at your chosen scale and exported as a blob.
5. The file is handed to your browser as a download; nothing is ever uploaded.

Options explained

• Scale multiplies pixel density; use 2× or 3× for crisp screenshots on high-DPI displays.
• Background lets you keep transparency (PNG/SVG/WebP) or bake in a solid color. JPG has no alpha channel, so a background color is recommended.
• Padding adds breathing room around your snippet before capture.

Good to know

• Everything is 100% client-side; your HTML never leaves your device.
• External images must allow cross-origin access (CORS) to be captured; data URIs and same-origin images always work.
• SVG output stays sharp at any size and keeps text selectable in some viewers, while PNG/JPG are fixed-resolution bitmaps.
• Because it reads computed styles, your snippet inherits the current light/dark theme unless you set explicit colors.

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.