Headless

Run React Native Skia on Node.js for server-side rendering

Thanks to its offscreen capabilities, React Native Skia can run on Node.js. This means you can use the Skia API to draw and encode images on the server. By default, drawings execute on the CPU, but GPU acceleration is also possible.

Hello World

The import URL looks different for Node programs. You need to use the CommonJS build and import only the APIs that work on Node without React Native dependencies.

import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";
import { 
  Circle, 
  drawOffscreen, 
  getSkiaExports, 
  Group, 
  makeOffscreenSurface 
} from "@shopify/react-native-skia/lib/commonjs/headless";

(async () => {
  const width = 256;
  const height = 256;
  const size = 60;
  const r = size * 0.33;
  
  await LoadSkiaWeb();
  
  // Once CanvasKit is loaded, access Skia via getSkiaExports()
  const { Skia } = getSkiaExports();
  
  using surface = makeOffscreenSurface(width, height);
  using image = await drawOffscreen(
    surface,
    <Group blendMode="multiply">
      <Circle cx={r} cy={r} r={r} color="cyan" />
      <Circle cx={size - r} cy={r} r={r} color="magenta" />
      <Circle cx={size/2} cy={size - r} r={r} color="yellow" />
    </Group>
  );
  
  console.log(image.encodeToBase64());
})();

GPU Acceleration

React Native Skia relies on the OffscreenCanvas API to support GPU-accelerated offscreen surfaces.

To benefit from GPU acceleration, provide a polyfill of the OffscreenCanvas API on Node. For example, here’s an OffscreenCanvas polyfill that uses WebGL via headless-gl.

Use Cases

• Image generation - Generate charts, graphs, and graphics on the server
• PDF creation - Render complex graphics for PDF documents
• Social media cards - Create dynamic Open Graph images
• Batch processing - Process multiple images efficiently
• Testing - Visual regression testing without a browser