Framework Guides
zumerlab/snapdom

SnapDOM in your framework

Drop SnapDOM into a React component, a Vue setup, or a Next.js page. Copy-paste examples and the gotchas to watch out for in each environment.

React 18+

SnapDOM in React

useRef + a click handler. Capture any component to PNG without ejecting from the React tree.

Vue 3

SnapDOM 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.

Why a framework guide?

SnapDOM itself is framework-agnostic — it manipulates the DOM the browser already has, so any setup that produces real HTML can use it. The reason these guides exist is that every framework has one or two specific gotchas: refs vs querySelector, hydration boundaries, SSR-only environments, lifecycle timing, etc.

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