🚀🚀 SnapDOM v2 — first public beta is live!

[tinchox5]

v2.0.0-dev.0 — October 14, 2025

This developer preview introduces the new plugin system and composable exporters. It’s meant for early testing and feedback before the RC.

Highlights

• Plugin system documented (hooks like beforeSnap, afterClone, defineExports, etc.).

• First drafts of a plugin and an exporter to validate the API.

• Demos updated to showcase plugins in real scenarios.

• Engine fixes & improvements:

  • Sub-pixel rendering fix (see toCanvas() sometimes produces a 1-pixel uncolored right or bottom edge #261).
  • More reliable complex canvas rendering on Safari (see Charts are not rendered in image #263).
  • Better detection for CSS variables and external SVG defs (see SVG gradients from external defs don't capture #262).
  • Consistent background-repeat (see The SVG background image has been repeated multiple times #259).
  • Fixed CSS counter reset and a bug when background-image exists (see When background-image is used in ordered or unordered lists, the images generated by snapdom may exhibit styling errors‌ #265).
  • Misc: excludeFonts definitions fix (Outdated docs #260), local plugin registration fixes, export name jpg → jpeg, and allowing custom exporters to reuse built-in ones.

• Roadmap updated for the v2 series.

Install / Try it

NPM

npm i @zumer/[email protected]

CDN (ESM)

<script type="module">
  import { snapdom } from "https://unpkg.com/@zumer/snapdom@dev/dist/snapdom.mjs";
  // Example: register a tiny plugin
  snapdom.plugins(() => ({
    name: "hello",
    async afterClone(ctx) { /* ... */ }
  }));
</script>

Migration notes (v1.9.x → v2 dev)

• No panic, core call stays the same: snapdom(element, options).

We’d love your feedback on

• Real-world plugins (watermark, timestamp, clip-region, custom exporters).
• Hook ergonomics and defineExports DX.

Thanks for testing v2 and shaping the RC with us! 🙌

Special thanks to @sdraper69 for the generous sponsorship. 💛

[tinchox5]

There are two plugins demos at https://snapdom.dev !

[jaskang]

v2 is really great with plugins. I can make some modifications to the exported nodes in the afterClone hook.

However, in my usage scenario, I need to perform different exports based on different states each time. So, I think it would be great if there could be custom data in the options that can be passed to the plugins.
Example:

const myPlugin = {
  name: 'border',
  async afterClone(ctx) {
    ctx.clone.style.borderColor = ctx.customData.borderColor
  }
}
snapdom(el,{
  plugins: [ myPlugin ]
  customData: { borderColor: 'red' } // There needs to be a way to deliver data to the plugin.
})

[tinchox5]

@jaskang thank you for feedback!! Is not documented but you can pass any custom plugin option as payload. In a few weeks I will release V2 as stable version documenting this.

Maybe creating a sort of awesome community plugins as well

[jaskang]

In the current code, the options used by captureDOM are created by createContext and cannot be passed through as shown in the code above.

snapdom/src/api/snapdom.js

Lines 94 to 97 in 00b7909

	snapdom.capture = async (el, context, _token) => {
	if (_token !== INTERNAL_TOKEN) throw new Error('[snapdom.capture] is internal. Use snapdom(...) instead.')
	const url = await captureDOM(el, context)

snapdom/src/api/snapdom.js

Lines 42 to 46 in 00b7909

	export async function snapdom(element, userOptions) {
	if (!element) throw new Error('Element cannot be null or undefined')
	// Normalize options into a capture context
	const context = createContext(userOptions)

snapdom/src/core/context.js

Lines 49 to 102 in 00b7909

	export function createContext(options = {}) {
	let resolvedFormat = options.format ?? 'png'
	if (resolvedFormat === 'jpg') resolvedFormat = 'jpeg'
	/** @type {CachePolicy} */
	const cachePolicy = normalizeCachePolicy(options.cache)
	return {
	// Debug & perf
	debug: options.debug ?? false,
	fast: options.fast ?? true,
	scale: options.scale ?? 1,
	// DOM filters
	exclude: options.exclude ?? [],
	excludeMode: options.excludeMode ?? 'hide',
	filter: options.filter ?? null,
	filterMode: options.filterMode ?? 'hide',
	// Placeholders
	placeholders: options.placeholders !== false, // default true
	// Fonts
	embedFonts: options.embedFonts ?? false,
	iconFonts: Array.isArray(options.iconFonts) ? options.iconFonts
	: (options.iconFonts ? [options.iconFonts] : []),
	localFonts: Array.isArray(options.localFonts) ? options.localFonts : [],
	excludeFonts: options.excludeFonts ?? undefined,
	fallbackURL: options.fallbackURL ?? undefined,
	/** @type {CachePolicy} */
	cache: cachePolicy,
	// Network
	useProxy: typeof options.useProxy === 'string' ? options.useProxy : '',
	// Output
	width: options.width ?? null,
	height: options.height ?? null,
	format: resolvedFormat,
	type: options.type ?? 'svg',
	quality: options.quality ?? 0.92,
	dpr: options.dpr ?? (window.devicePixelRatio || 1),
	backgroundColor:
	options.backgroundColor ?? (['jpeg', 'webp'].includes(resolvedFormat) ? '#ffffff' : null),
	filename: options.filename ?? 'snapDOM',
	// NEW flags (user-friendly)
	outerTransforms: options.outerTransforms ?? true,
	outerShadows: options.outerShadows ?? false,
	// Plugins (reservado)
	// plugins: normalizePlugins(...),
	}
	}

[tinchox5]

I truly appreciate your feedbacks! Thank you

Please see src/core/plugins.js

There plugin options the share the plugin context and a payload