Framework Guide · Lit 3

Capture a Lit component

Export a rendered Lit component as PNG, SVG or Canvas with the framework’s native element reference.

TL;DR

Get the rendered element with renderRoot query, wait for updateComplete, then call SnapDOM.

Install and use SnapDOM in Lit

import { LitElement, html } from 'lit'
import { snapdom } from '@zumer/snapdom'

class ShareCard extends LitElement {
  async save() {
    await this.updateComplete
    const card = this.renderRoot.querySelector('#card')
    await snapdom.download(card, { format: 'png', filename: 'card' })
  }
  render() {
    return html`<article id="card">Your component</article>
      <button @click=${this.save}>Download PNG</button>`
  }
}

Lifecycle and fidelity

SnapDOM captures the DOM Lit 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 Lit-specific package?

No. SnapDOM captures the browser DOM, so the same @zumer/snapdom package works across frameworks.

When should capture run in Lit?

Run it in the browser after updateComplete 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 demo Install from npm