> For the complete documentation index, see [llms.txt](https://enhancio.gitbook.io/reactflow-for-bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enhancio.gitbook.io/reactflow-for-bubble.io/guides/interactivity.md).

# Interactivity

### Handle User Interactions

Create workflows that trigger on these events:

* [**Node clicked**](/reactflow-for-bubble.io/element-reference/events.md#node-clicked) - When user clicks any node (example: show popup with node details)
* [**Node changed position**](/reactflow-for-bubble.io/element-reference/events.md#node-changed-position) - When user drags nodes (example: update X/Y coordinates in database)
* [**Edge added**](/reactflow-for-bubble.io/element-reference/events.md#edge-added)**/**[**removed**](/reactflow-for-bubble.io/element-reference/events.md#edge-removed) - When user creates/deletes connections (example: update relationships in database)
* [**Edge clicked**](/reactflow-for-bubble.io/element-reference/events.md#edge-clicked) - When user clicks any connection line (example: show connection properties dialog)
* [**Edge dropped on canvas**](/reactflow-for-bubble.io/element-reference/events.md#edge-dropped-on-canvas) - When user drags edge but drops it on empty space (example: create new node dynamically at drop location)

### Control the Chart

Use these actions in your workflows:

* [**Fit view**](/reactflow-for-bubble.io/element-reference/actions/fit-view.md) - Zoom to show all nodes perfectly
* [**Auto layout**](/reactflow-for-bubble.io/element-reference/actions/auto-layout.md) - Organize nodes with automatic layout
* [**Zoom in**](/reactflow-for-bubble.io/element-reference/actions/zoom-in.md)**/**[**out**](/reactflow-for-bubble.io/element-reference/actions/zoom-out.md) or [**Set zoom**](/reactflow-for-bubble.io/element-reference/actions/set-zoom.md) - Control zoom level precisely
* [**Set center**](/reactflow-for-bubble.io/element-reference/actions/set-center.md) - Pan to specific coordinates
* [**Export to JSON**](/reactflow-for-bubble.io/element-reference/actions/export-to-json.md) - Get complete chart state with all current positions and connections
* [**Clear graph**](/reactflow-for-bubble.io/element-reference/actions/clear-graph.md) - Remove all nodes and edges