/

Adding Interactivity to Your Flow

This guide shows how to create an interactive flow in Reflex, allowing you to select, drag, and connect nodes and edges.

Define the State

We start by defining the nodes and edges of the flow. The FlowState class holds the nodes and edges as state variables and includes event handlers to respond to changes.

Add Event Handlers

Event handlers allow the flow to respond to user interactions such as dragging nodes, updating edges, or creating new connections.

set_nodes updates nodes when they are moved or edited.

set_edges updates edges when they are modified or deleted.

Render the Interactive Flow

Finally, we render the flow using rxe.flow, passing in the state and event handlers. Additional UI features include zoom/pan controls, a background grid, and a mini-map for navigation.