Server Side Image Creation

This example demonstrates how to create static images of React Flow graphs on the server side. The application lets you interact with nodes on the left side of the screen while automatically generating and displaying the corresponding flow image on the right. The implementation uses React Flow’s new static rendering capabilities combined with Puppeteer to capture screenshots.

This is a Pro example. Get all pro examples, templates, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.

Subscribe Sign In

About this Pro Example

Dependencies: @xyflow/react , express , puppeteer , react , react-dom , zustand , cors
Showcases React Flow’s server-side rendering capabilities (available since v12)
Includes a complete backend implementation for image generation
Provides Dockerfile configuration for containerized deployment
License: xyflow Pro License