Konva Render Backends

All Tags /Server Rendering Testing Fonts

Overview

EditorNode defaults to the node-canvas backend. For render tests, you can opt into the Skia backend via an environment variable. This only affects server-side rendering and does not change the browser runtime.

Configuration

Environment Variable

DESIGNFUL_KONVA_BACKEND controls the backend:

canvas (default)
skia

Any other value falls back to canvas.

Example

DESIGNFUL_KONVA_BACKEND=skia pnpm run pen-to-designful:screenshots -- -f font-weight -u

Notes

Skia requires the skia-canvas dependency. Install it once via: pnpm add -D skia-canvas
Skia and canvas render slightly differently. Expect snapshot diffs when switching.
node-canvas collapses very light weights (100/200/300) for some fonts. Skia renders those weights more accurately.
When Skia is enabled, EditorNode prefers variable font files (from the Google Fonts repo) so weights like 100/200/300 keep their separation.