SnapDOM in React
useRef + a click handler. Capture any 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 App RouterSnapDOM in Next.js
Capture after hydration in a Client Component, or inject SnapDOM into a browser controlled by a Node server action.
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.
Framework-specific details
SnapDOM is framework-agnostic, but it needs a live browser DOM with layout and computed styles—not just an HTML string produced during SSR. A server job can provide that environment by opening the rendered page with Puppeteer or Playwright and injecting SnapDOM. The guides cover each framework's refs, hydration boundaries and lifecycle timing.
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.
Other frameworks
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