Konva Render Backends

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.