Most people don't know you can take screenshots of any DOM element directly in the browser. snapdom makes it trivial. It clones the DOM tree, inlines all computed styles, and wraps everything in an SVG <foreignObject>. The browser's own rendering engine does the rest.
npm i @zumer/snapdom
Install it, and then capture any element as an image:
import { snapdom } from '@zumer/snapdom';
const png = await snapdom.toPng(document.querySelector('#my-element'));Try It
Original DOM Element
128128 4,2174,217 312312
posts
followers
following
Joaquin Ossandon
Software Engineer
Building things for the web
Captured Image
Click the button to capture
Freezing CSS Animations
Capturing an element mid-animation? snapdom snapshots the current frame exactly as the browser is painting it. Try clicking at different moments to see different frozen states.
Live Animation
CSS Animation
snapdom freezes the current frame
Captured Image
Click the button to capture
It Works with WebGL
Most DOM-to-image tools break on <canvas> elements with WebGL content. snapdom handles them. Here's a live shader inspired by Paper Shaders:
Captured Image
Click the button to capture