Skip to main content

Rendering Adapters

A rendering adapter implements the kernel's rendering-engine contract: it receives layer-sync calls and turns them into pixels — or into nothing, for non-visual execution. The kernel never assumes a particular engine; you inject one.

web-layering​

@picsart/runtime/adapters/web-layering

The Picsart web-layering rendering engine — the primary browser target. Create it with the layering setup and pass it to the kernel:

import { createWebLayeringEngine } from '@picsart/runtime/adapters/web-layering';
import setupLayering from '@picsart/web-layering';

const engine = createWebLayeringEngine({ setupLayering });

const runtime = createRuntime({
  container: document.getElementById('editor'),
  renderingEngine: engine,
  hostName: 'my-app',
  // ...services
});

Headless​

@picsart/runtime/adapters/headless

A zero-overhead no-op rendering engine for non-visual execution — CI, Node.js, and headless analysis. It satisfies the same contract but performs no drawing, so the kernel lifecycle runs end-to-end without a DOM canvas.

import { createHeadlessEngine } from '@picsart/runtime/adapters/headless';

const runtime = createRuntime({
  container,
  renderingEngine: createHeadlessEngine(),
  hostName: 'ci-runner',
  // ...
});

The rendering-engine contract​

Any engine — including a custom one — implements the same surface the kernel calls during a miniapp's lifecycle:

  • init() / destroy() — engine setup and teardown
  • getCanvasSizes() — current canvas dimensions
  • getVisibleBounds() — the visible drawing region
  • syncLayers() — reconcile the miniapp's layer tree (async)
  • renderLayerToImage(id) — rasterize a single layer

Because this contract is small and explicit, a host can supply its own engine without touching the kernel. The exact types are in the API Reference and the Architecture Deep Dive.