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.
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
Last updated on