🚀 Three new “super power” export plugins — toHtml / toGif / toMp4 (+ snapdom 2.12.2)

[tinchox5]

This release expands the official plugins package with three new client-side exporters: HTML, GIF, and video.

Showcase: https://snapdom.dev

npm i @zumer/snapdom-plugins

Current version: @zumer/snapdom-plugins@2.2.0

New Plugins

html-export: result.toHtml()

Export a capture as a self-contained, re-renderable HTML document instead of a raster image.

The plugin unwraps the SVG <foreignObject> generated by SnapDOM, preserving the captured markup and inlined CSS. This makes it useful for snapshot diffing, archiving, or restoring a capture as real DOM.

import { snapdom } from '@zumer/snapdom';
import { htmlExport } from '@zumer/snapdom-plugins/html-export';

const result = await snapdom(el, { plugins: [htmlExport()] });

const html = await result.toHtml();
await result.toHtml({ download: 'snapshot.html' });

gif-export: result.toGif()

Record an animated GIF by repeatedly capturing the live element over time.

The plugin includes a built-in GIF89a encoder with median-cut quantization and LZW compression, with no external dependencies. CSS animations and dynamic content are captured as they run.

import { gifExport } from '@zumer/snapdom-plugins/gif-export';

const result = await snapdom(el, {
  plugins: [gifExport({ fps: 12, duration: 3000 })]
});

const blob = await result.toGif();
await result.toGif({ download: 'animation.gif' });

Options include fps, duration, frames, maxColors, background, scale, and repeat.

video-export: result.toMp4()

Record video using the native MediaRecorder API.

Safari typically exports MP4/H.264, while Chromium-based browsers usually exports WebM/VP8 or WebM/VP9. The plugin selects the best supported codec and adjusts the downloaded filename accordingly.

import { videoExport } from '@zumer/snapdom-plugins/video-export';

const result = await snapdom(el, {
  plugins: [videoExport({ fps: 30, duration: 4000 })]
});

const blob = await result.toMp4();
await result.toMp4({ download: true });

Options include fps, duration, frames, background, scale, and bitrate.

All three plugins follow the same exporter plugin contract as the core SnapDOM exporters. They support the existing beforeExport and afterExport pipeline and can be composed with other official plugins such as filters, timestamp overlays, and color tinting.

Core Update: snapdom 2.12.2

This release also includes a fix for scrolled elements, such as <pre> blocks with overflow: auto.

Previously, inherited text formatting could be lost during capture. In some cases, properties like white-space: pre-wrap and monospace fonts were overridden, causing code blocks to render incorrectly.

The issue was caused by the scroll wrapper injected by SnapDOM to offset scrolled content. Since the wrapper was a <div>, default per-tag CSS could override inherited formatting. The wrapper now uses all: unset, allowing inherited text properties to pass through while keeping non-inherited properties neutral.

Scrolled code blocks should now match the live DOM more accurately.

Links

• Showcase: https://snapdom.dev
• Plugins package: @zumer/snapdom-plugins
• Core package: @zumer/snapdom@2.12.2
• Community plugins: open a PR adding an entry to community-plugins.md