@reactsnap/core

@reactsnap/core is the package you reach for when you want low-level control over browser-side rendering and export behavior.

Main exports#

`renderToPng(input, options?)`#

Render a DOM node to a PNG Blob.

import { renderToPng } from '@reactsnap/core';

const blob = await renderToPng(document.getElementById('card')!, {
  width: 1200,
  height: 630,
  scale: 2,
  background: '#ffffff',
});

`renderToJpeg(input, options?)`#

Render a DOM node to a JPEG Blob.

`renderToWebp(input, options?)`#

Render a DOM node to a WebP Blob.

`renderToCanvas(input, options?)`#

Render a DOM node to an HTMLCanvasElement for post-processing inside the browser.

`supportsHtmlInCanvas()`#

Check whether the current browser exposes the experimental WICG APIs ReactSnap uses today.

import { renderToPng, supportsHtmlInCanvas } from '@reactsnap/core';

const blob = await renderToPng(node, {
  strategy: supportsHtmlInCanvas() ? 'html-in-canvas' : 'foreign-object',
  debug: true,
});

Render options#

The published package exposes these important options:

width
height
scale
background
pixelRatio
strategy
waitUntil
fontEmbed
imageEmbed
allowTaint
timeout
debug
onStrategyResolved

Strategy usage guidance#

Use auto for most in-browser preview flows.
Use html-in-canvas only when you explicitly want the experimental route and can handle unsupported browsers.
Use foreign-object when a deterministic baseline matters.

@reactsnap/core also exposes nodeToCanvas, nodeToSvgString, nodeToSvgDataUrl, and downloadBlob for lower-level browser workflows.

Next@reactsnap/react

Main exports#

renderToPng(input, options?)#

renderToJpeg(input, options?)#

renderToWebp(input, options?)#

renderToCanvas(input, options?)#

supportsHtmlInCanvas()#