# xyflow/xyflow **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/xyflow-xyflow).** 35,274 stars · 2,302 forks · TypeScript · mit ## Links - GitHub: https://github.com/xyflow/xyflow - Homepage: https://xyflow.com - awesome-repositories: https://awesome-repositories.com/repository/xyflow-xyflow.md ## Topics `flowchart` `graph` `javascript` `node-based-ui` `react` `react-flow` `svelte` `svelte-flow` `typescript` `typescript-library` `workflow` ## Description This project is a React-based framework for constructing interactive, node-based visual interfaces. It provides a platform for building canvases where users define, connect, and organize logical processes, data pipelines, or complex workflows through a graphical interface. By utilizing a modular component architecture, it enables the development of low-code environments, visual programming tools, and interactive diagramming applications. The framework distinguishes itself through a declarative approach where state changes automatically synchronize with the visual representation of nodes and edges. It employs a coordinate-aware container that renders elements as scalable vector graphics, ensuring consistent visual quality across zoom levels. Developers can leverage an integrated event-driven layer to manage user gestures, alongside automated layout algorithms that organize graph elements in real time to improve readability. The system includes comprehensive utilities for managing node properties, connection handles, and nested hierarchies. It supports a wide range of applications, from data exploration and automated graph visualization to specialized use cases like real-time audio synthesis. The project is distributed as a library of components designed to facilitate the creation of custom, interactive graph editors within web applications. ## Tags ### Web Development - [Node-Based Diagramming Frameworks](https://awesome-repositories.com/f/web-development/node-based-diagramming-frameworks.md) — The project provides a React-based framework for constructing interactive node-based diagrams that manage complex data flows and visual relationships within a web interface. ([source](https://xyflow.com)) - [Declarative Diagramming Frameworks](https://awesome-repositories.com/f/web-development/declarative-diagramming-frameworks.md) — Provides a development environment for creating custom visual interfaces where state changes automatically update the layout. ### Development Tools & Productivity - [Visual Workflow Engines](https://awesome-repositories.com/f/development-tools-productivity/visual-workflow-engines.md) — Provides an interactive canvas for defining, connecting, and organizing logical processes through a graphical interface. - [Visual Programming Environments](https://awesome-repositories.com/f/development-tools-productivity/visual-programming-environments.md) — Enables the construction of functional applications and logic structures through a low-code interface of linked visual blocks. ### User Interface & Experience - [Visual Node Editors](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors.md) — Enables the creation of interactive interfaces where users connect nodes and edges to represent complex workflows, data pipelines, or logic structures. - [Graph Editors](https://awesome-repositories.com/f/user-interface-experience/graph-editors.md) — Provides interactive components for building visual graph editors that manage complex data flows and node connections. - [Node-Based UI Editors](https://awesome-repositories.com/f/user-interface-experience/node-based-ui-editors.md) — Provides a visual interface for managing complex data hierarchies and component interactions through node-based connections. - [Node-Based UI Components](https://awesome-repositories.com/f/user-interface-experience/node-based-ui-components.md) — Provides modular node components that communicate via standardized connection handles and properties. - [Interactive Diagramming Tools](https://awesome-repositories.com/f/user-interface-experience/interactive-diagramming-tools.md) — Allows users to draw, manipulate, and connect shapes to represent complex processes or relationships. - [Vector Graphics Renderers](https://awesome-repositories.com/f/user-interface-experience/vector-graphics-renderers.md) — Renders nodes and edges as scalable vector graphics within a coordinate-aware container to ensure crisp visuals at any zoom level. - [State Reconciliation Engines](https://awesome-repositories.com/f/user-interface-experience/state-reconciliation-engines.md) — Synchronizes the visual representation of nodes and edges with a centralized state store to ensure consistent updates across the interface. - [Interaction Event Buses](https://awesome-repositories.com/f/user-interface-experience/interaction-event-buses.md) — Captures and propagates user gestures through a unified event bus to trigger node selection, dragging, and connection creation behaviors. ### Graphics & Multimedia - [Audio Synthesis Tools](https://awesome-repositories.com/f/graphics-multimedia/audio-music/audio-synthesis-tools.md) — Enables the creation of complex audio effects and soundscapes through a visual node-based interface. ([source](https://xyflow.com/labs/strudel-flow)) - [Visual Programming Environments](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/visual-programming-environments.md) — Develops low-code environments where users build functional applications by linking visual blocks. ### Data & Databases - [Interactive Graph Visualizers](https://awesome-repositories.com/f/data-databases/interactive-graph-visualizers.md) — Provides a set of tools for rendering and manipulating directed graphs where nodes and edges represent data relationships. - [Graph Layout Engines](https://awesome-repositories.com/f/data-databases/graph-layout-engines.md) — Includes automated algorithms to arrange visual elements by adjusting parameters for improved readability. ([source](https://xyflow.com/labs/react-flow-playground)) - [Interactive Data Exploration Tools](https://awesome-repositories.com/f/data-databases/interactive-data-exploration-tools.md) — Renders and manipulates directed graphs to help visualize and analyze data relationships. - [Automated Graph Layouts](https://awesome-repositories.com/f/data-databases/automated-graph-layouts.md) — Organizes large sets of interconnected data points into readable layouts using algorithms. - [Graph Management Utilities](https://awesome-repositories.com/f/data-databases/graph-management-utilities.md) — Provides tools to inspect and modify node properties including position, size, and connection handles. ([source](https://xyflow.com/labs/react-flow-playground))