react-diagrams

react-diagrams is a TypeScript library for building interactive flow diagrams inside React applications. Think of the node-based visual editors in tools like Blender or Unreal Engine, where you connect boxes with lines to represent a process or data flow. This library gives you the building blocks to create that kind of interface for your own web app.

The library is designed around HTML elements rather than SVG graphics for its nodes, which makes it easier to build complex inputs and controls directly inside each diagram box. You can add dropdowns, text fields, or any other HTML content to a node without fighting against the constraints of vector graphics.

It is built to be extended. The core engine, the node shapes, and the routing logic are all separate packages, so you can include only what you need. If the default visual style does not fit your project, the library is structured so that you can replace or override almost any part of it. The README describes the design as inspired by software that lets users rewire programs at runtime, meaning the library suits applications where the diagram itself represents a live configuration rather than just a static illustration.

The project is organized as a monorepo: one repository containing multiple related packages. To get started you install the full bundle with one command, or you can pick individual sub-packages for a leaner setup. A demo gallery and a demo project are included in the repository to show common usage patterns, and a live demo is hosted online.

The library is available on npm and is written entirely in TypeScript, with type definitions included.