SnapDOM in your framework
Use the guide for your framework and capture an element after it renders.
SnapDOM in React
useRef + a click handler. Capture a rendered component to PNG without ejecting from the React tree.
Vue 3SnapDOM in Vue
ref() + onMounted in the Composition API. Capture single-file components in two lines of script.
Next.js 14+SnapDOM in Next.js
Client component + dynamic import. Avoid the SSR bundle and ship a clean app router page.
Svelte 5SnapDOM in Svelte
Use bind:this and tick() to capture a component after its DOM update settles.
Angular 17+SnapDOM in Angular
Capture an ElementRef from a component method using Angular's viewChild API.
Lit 3SnapDOM in Lit
Wait for updateComplete and capture content rendered inside an open shadow root.
Why a framework guide?
SnapDOM captures the DOM your framework has already rendered. These guides cover refs, hydration boundaries and lifecycle timing. Core exports include SVG, raster images, Canvas and Blob; optional plugins add HTML, structured context and maps, PDF images, GIF and video.
Each guide gives you a copy-paste component, the right place to call SnapDOM in the lifecycle, and the one common mistake that makes captures come out blank.
Don't see your stack?
SnapDOM works in plain HTML, Astro, SvelteKit, Solid, Qwik and more. Open an issue on GitHub if you'd like a dedicated guide.
Request a guide Open the demo