TL;DR
Get the rendered element with bind:this, wait for tick(), then call SnapDOM.
Install and use SnapDOM in Svelte
<script>
import { tick } from 'svelte'
import { snapdom } from '@zumer/snapdom'
let card
async function save() {
await tick()
await snapdom.download(card, { format: 'png', filename: 'card' })
}
</script>
<article bind:this={card}>Your component</article>
<button on:click={save}>Download PNG</button>Lifecycle and fidelity
SnapDOM captures the DOM Svelte has already rendered. Keep the capture attached to the component instance, wait for updates to settle, and use embedFonts: true when the output must travel independently.
Browser-only boundary
Run capture from client-side interaction. SnapDOM needs layout, computed styles, SVG and Canvas APIs, so it does not execute during server rendering.
Frequently asked questions
Does SnapDOM have a Svelte-specific package?
No. SnapDOM captures the browser DOM, so the same @zumer/snapdom package works across frameworks.
When should capture run in Svelte?
Run it in the browser after tick() and after important fonts, images and asynchronous data are ready.
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstall from npm