API Reference
The full DashFlows prop table plus node and edge component props.
Overview
Auto-generated prop tables for the dash-flows components. DashFlows is the main component; the node and edge components below are the custom types it can render.
DashFlows component
The main component. Set nodes, edges, and a style with a height; everything else is optional. Interaction outputs (e.g. clickedNode, selectedNodes, lastConnection) are read in callbacks.
| Name | Type | Description | ||||
|---|---|---|---|---|---|---|
| id | string; optional | The ID used to identify this component in Dash callbacks. | ||||
| addNodeOnEdgeDrop | boolean; optional | When True, dragging a connection from a handle and dropping on empty canvas creates a new default node at that position and connects it. | ||||
| animateLayout | boolean; default False | Enable smooth animated transitions when applying ELK layout. Nodes interpolate from current to target positions with an ease-out curve. | ||||
| animateLayoutDuration | number; default 300 | Duration of layout animation in milliseconds (default: 300). | ||||
| ariaLabelConfig | dict; optional | ARIA label configuration for accessibility. Customize labels for screen readers. Keys: nodes, edges, controls, minimap. Values are label strings. | ||||
| autoPanOnConnect | boolean; default True | Auto-pan viewport when making a new connection near edges. | ||||
| autoPanOnNodeDrag | boolean; default True | Auto-pan viewport when dragging a node near edges. | ||||
| autoPanOnNodeFocus | boolean; default True | Auto-pan the viewport when focusing a node via keyboard (Tab key). | ||||
| autoPanSpeed | number; default 15 | Speed of auto-panning (default: 15). | ||||
| backgroundColor | string; optional | Color of the background pattern. | ||||
| backgroundGap | number \ | list of numbers; default 16 | Gap between background pattern elements. | |||
| backgroundSize | number; default 1 | Size of background pattern elements. | ||||
| backgroundVariant | a value equal to: 'dots', 'lines', 'cross'; default 'dots' | Background pattern type: 'dots', 'lines', 'cross'. | ||||
| className | string; default '' | CSS class name for the container div. | ||||
| clickedEdge | dict; optional | The edge that was clicked. clickedEdge is a dict with keys: - id (string; optional) - source (string; optional) - target (string; optional) | ||||
| clickedNode | dict; optional | The node that was clicked. clickedNode is a dict with keys: - id (string; optional) - data (dict; optional) - position (dict; optional) | ||||
| clipboard | dict; optional | Internal clipboard containing copied nodes and edges. Populated by copyAction, consumed by pasteAction. clipboard is a dict with keys: - nodes (list; optional) - edges (list; optional) - timestamp (number; optional) | ||||
| collapsedGroups | list of strings; optional | List of currently collapsed group node IDs (read-only output). | ||||
| colorMode | a value equal to: 'light', 'dark', 'system'; default 'light' | Color mode: 'light', 'dark', or 'system'. | ||||
| colorScheme | a value equal to: 'default', 'ocean', 'forest', 'sunset', 'midnight', 'rose'; optional | Color scheme preset for node and edge colors. Works in combination with themePreset for full customization. Each scheme includes light and dark mode variants. - default: Neutral blue/purple (default) - ocean: Blues and teals - forest: Greens and browns - sunset: Oranges and reds - midnight: Deep blues and purples - rose: Pinks and reds. | ||||
| computeAction | dict; optional | Trigger a graph computation. Set to { action: 'compute' } to perform topological sort and emit traversal order with input mappings. Will be reset to None after execution. computeAction is a dict with keys: - action (a value equal to: 'compute', 'computeNode'; optional) - nodeId (string; optional) - inputData (dict; optional) | ||||
| computeResult | dict; optional | Result of the last computation. Contains traversalOrder (array of node IDs in topological order) and nodeInputs (map of nodeId to input details). computeResult is a dict with keys: - traversalOrder (list of strings; optional) - nodeInputs (dict; optional) - timestamp (number; optional) | ||||
| connectOnClick | boolean; default True | Enable click-based connection mode (click source then target). | ||||
| connectionDragThreshold | number; default 0 | Minimum drag distance in pixels before a connection line appears. Useful to prevent accidental connections. Default is 0 (immediate). | ||||
| connectionLineStyle | dict; optional | Style for the connection line while dragging. | ||||
| connectionLineType | a value equal to: 'bezier', 'straight', 'step', 'smoothstep', 'simplebezier'; default 'bezier' | Type of connection line: 'bezier', 'straight', 'step', 'smoothstep', 'simplebezier'. | ||||
| connectionMode | a value equal to: 'strict', 'loose'; default 'strict' | Connection mode: 'strict' (same handle type) or 'loose' (any handle). | ||||
| connectionRadius | number; default 20 | Radius for connection drop detection (default: 20). | ||||
| connectionRules | dict; optional | Rules for validating connections. connectionRules is a dict with keys: - allowSelfConnection (boolean; optional) - allowDuplicateConnections (boolean; optional) - validSourceTypes (list of strings; optional) - validTargetTypes (list of strings; optional) | ||||
| connectionStartHandle | dict; optional | Current connection being created. connectionStartHandle is a dict with keys: - nodeId (string; optional) - handleId (string; optional) - handleType (string; optional) | ||||
| contextMenuEdge | dict; optional | Context menu info for an edge. contextMenuEdge is a dict with keys: - id (string; optional) - source (string; optional) - target (string; optional) - clientX (number; optional) - clientY (number; optional) | ||||
| contextMenuNode | dict; optional | Context menu info for a node. contextMenuNode is a dict with keys: - id (string; optional) - data (dict; optional) - position (dict; optional) - clientX (number; optional) - clientY (number; optional) | ||||
| controlsPosition | a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'; default 'bottom-left' | Position of controls panel. | ||||
| controlsShowFitView | boolean; default True | Show fit-view button in controls. | ||||
| controlsShowInteractive | boolean; default True | Show interactive toggle in controls. | ||||
| controlsShowZoom | boolean; default True | Show zoom buttons in controls. | ||||
| copyAction | boolean; optional | Trigger to copy selected nodes and edges to clipboard. Set to True to copy. Will be reset to False after copying. If nothing is selected, copies all nodes and their connecting edges. | ||||
| defaultEdgeOptions | dict; optional | Default options applied to all new edges. defaultEdgeOptions is a dict with keys: - type (string; optional) - style (dict; optional) - animated (boolean; optional) - markerStart (dict; optional) - markerEnd (dict; optional) | ||||
| defaultMarkerColor | string; default '#555' | Default color for edge markers. | ||||
| defaultViewport | dict; optional | The initial viewport position and zoom level. defaultViewport is a dict with keys: - x (number; optional) - y (number; optional) - zoom (number; optional) | ||||
| deleteElementsAction | dict; optional | Delete specific nodes and/or edges by ID. Routes through reactFlowInstance.deleteElements() so undo/redo middleware can capture the change. Set to { nodeIds: [...], edgeIds: [...] }; auto-resets to None. deleteElementsAction is a dict with keys: - nodeIds (list of strings; optional): IDs of nodes to delete (connected edges are also removed). - edgeIds (list of strings; optional): IDs of edges to delete. | ||||
| deleteKeyCode | string; default 'Backspace' | Key code for deleting selected elements (default: 'Backspace', None to disable). | ||||
| deletedEdges | list of strings; optional | IDs of recently deleted edges. | ||||
| deletedNodes | list of strings; optional | IDs of recently deleted nodes. | ||||
| disableKeyboardA11y | boolean; default False | Disable keyboard accessibility features. | ||||
| doubleClickedEdge | dict; optional | The edge that was double-clicked. doubleClickedEdge is a dict with keys: - id (string; optional) - source (string; optional) - target (string; optional) | ||||
| doubleClickedNode | dict; optional | The node that was double-clicked. doubleClickedNode is a dict with keys: - id (string; optional) - data (dict; optional) - position (dict; optional) | ||||
| downloadImage | dict; optional | Trigger to download the flow as an image. Set to a config object to initiate download. Will be reset to None after download. Config options: - format: 'png' \ | 'svg' \ | 'jpeg' (default: 'png') - filename: string (default: 'flow') - quality: number 0-1 (default: 0.95, for jpeg only) - backgroundColor: string (default: '#ffffff') - pixelRatio: number (default: 2, for higher resolution). downloadImage is a dict with keys: - format (a value equal to: 'png', 'svg', 'jpeg', 'jpg'; optional) - filename (string; optional) - quality (number; optional) - backgroundColor (string; optional) - pixelRatio (number; optional) | ||
| draggedNode | dict; optional | The node being dragged. draggedNode is a dict with keys: - id (string; optional) - isDragging (boolean; optional) - startPosition (dict; optional) - currentPosition (dict; optional) - endPosition (dict; optional) | ||||
| droppedNode | dict; optional | Node data from a drop event (drag and drop from external source). Contains the type, position, and data of the dropped item. Use this in a callback to create a new node at the drop position. droppedNode is a dict with keys: - type (string; optional) - position (dict; optional) position is a dict with keys: - x (number; optional) - y (number; optional) - data (dict; optional) - clientX (number; optional) - clientY (number; optional) - timestamp (number; optional) | ||||
| edgeDroppedNode | dict; optional | Info about the node created by dropping an edge on empty canvas. Contains nodeId, position, sourceNodeId, sourceHandleId, handleType, timestamp. edgeDroppedNode is a dict with keys: - nodeId (string; optional) - position (dict; optional) position is a dict with keys: - x (number; optional) - y (number; optional) - sourceNodeId (string; optional) - sourceHandleId (string; optional) - handleType (string; optional) - timestamp (number; optional) | ||||
| edges | list of dicts; optional | Array of edges defining connections between nodes. edges is a list of dicts with keys: - id (string; required) - source (string; required) - target (string; required) - sourceHandle (string; optional) - targetHandle (string; optional) - type (string; optional) - data (dict; optional) - style (dict; optional) - className (string; optional) - hidden (boolean; optional) - selected (boolean; optional) - animated (boolean; optional) - deletable (boolean; optional) - selectable (boolean; optional) - focusable (boolean; optional) - zIndex (number; optional) - ariaLabel (string; optional) - interactionWidth (number; optional) - label (string; optional) - labelStyle (dict; optional) - labelShowBg (boolean; optional) - labelBgStyle (dict; optional) - labelBgPadding (list of numbers; optional) - labelBgBorderRadius (number; optional) - markerStart (dict; optional) markerStart is a string Or dict with keys: - type (string; required) - color (string; optional) - width (number; optional) - height (number; optional) - markerUnits (string; optional) - orient (string; optional) - strokeWidth (number; optional) - markerEnd (dict; optional) markerEnd is a string \ | dict with keys: - type (string; required) - color (string; optional) - width (number; optional) - height (number; optional) - markerUnits (string; optional) - orient (string; optional) - strokeWidth (number; optional) | |||
| edgesFocusable | boolean; default True | Enable/disable keyboard focus on edges. | ||||
| edgesReconnectable | boolean; default True | Allow edges to be reconnected after creation. | ||||
| elementsSelectable | boolean; default True | Enable/disable the ability to select elements. | ||||
| elevateEdgesOnSelect | boolean; default False | Raise z-index of selected edges. | ||||
| elevateNodesOnSelect | boolean; default True | Raise z-index of selected nodes. | ||||
| enableUndoRedo | boolean; default False | Enable the undo/redo history system. When enabled, node and edge changes (add, remove, position drag-stop) are recorded to a history stack. | ||||
| exportFlowState | boolean; optional | Trigger to export the current flow state. Set to True to export. After export, this will be reset to False and flowState will be populated. | ||||
| fitView | boolean; default False | Automatically fit all nodes in view on initialization. | ||||
| fitViewOptions | dict; optional | Options for fitView behavior. fitViewOptions is a dict with keys: - padding (number; optional) - includeHiddenNodes (boolean; optional) - minZoom (number; optional) - maxZoom (number; optional) - duration (number; optional) - nodes (list of dicts; optional) nodes is a list of dicts with keys: - id (string; optional) | ||||
| flowState | dict; optional | The exported flow state as a serializable object containing nodes, edges, and viewport. This is populated when exportFlowState is triggered. flowState is a dict with keys: - nodes (list; optional) - edges (list; optional) - viewport (dict; optional) viewport is a dict with keys: - x (number; optional) - y (number; optional) - zoom (number; optional) | ||||
| helperLineThreshold | number; optional | Distance in pixels within which helper lines snap and appear (default: 5). | ||||
| helperLines | boolean; optional | Enable visual alignment guides (helper lines) when dragging nodes. Lines appear when a node aligns with another node's top/center/bottom or left/center/right. | ||||
| hoveredEdge | dict; optional | The edge being hovered. hoveredEdge is a dict with keys: - id (string; optional) - source (string; optional) - target (string; optional) | ||||
| hoveredNode | dict; optional | The node being hovered. hoveredNode is a dict with keys: - id (string; optional) - data (dict; optional) | ||||
| imageDownloaded | dict; optional | Information about the last successful image download. Populated after a successful downloadImage operation. imageDownloaded is a dict with keys: - filename (string; optional) - format (string; optional) - timestamp (number; optional) | ||||
| initialized | boolean; optional | Whether the flow has been initialized. | ||||
| lastConnection | dict; optional | The last connection that was made. lastConnection is a dict with keys: - source (string; optional) - sourceHandle (string; optional) - target (string; optional) - targetHandle (string; optional) | ||||
| lastError | dict; optional | Last error that occurred. lastError is a dict with keys: - id (string; optional) - message (string; optional) - type (string; optional) - timestamp (number; optional) | ||||
| layoutOptions | string; optional | Layout options for arranging nodes using the ELK layout engine (JSON string). | ||||
| maxZoom | number; default 2 | Maximum zoom level (default: 2). | ||||
| minZoom | number; default 0.5 | Minimum zoom level (default: 0.5). | ||||
| miniMapMaskColor | string; optional | Color for the minimap mask (viewport indicator). | ||||
| miniMapNodeBorderRadius | number; optional | Border radius for minimap nodes. | ||||
| miniMapNodeColor | string; optional | Color function or string for minimap nodes. | ||||
| miniMapNodeStrokeColor | string; optional | Stroke color for minimap nodes. | ||||
| miniMapPannable | boolean; default False | Allow panning by dragging the minimap. | ||||
| miniMapPosition | a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right'; default 'bottom-right' | Position of the minimap. | ||||
| miniMapZoomable | boolean; default False | Allow zooming via the minimap. | ||||
| multiSelectionKeyCode | string; optional | Key code for adding to selection. | ||||
| noDragClassName | string; default 'nodrag' | CSS class name that prevents dragging when applied to elements. | ||||
| noPanClassName | string; default 'nopan' | CSS class name that prevents panning when applied to elements. | ||||
| noWheelClassName | string; default 'nowheel' | CSS class name that prevents wheel zoom when applied to elements. | ||||
| nodeConnections | dict; optional | Map of nodeId to connection metadata. Each entry has 'incoming' and 'outgoing' arrays with edge/node details. Updated automatically when edges change. | ||||
| nodeExtent | list of list of numberss; optional | Limit where nodes can be placed [[minX, minY], [maxX, maxY]]. | ||||
| nodes | list of dicts; optional | Array of nodes to display in the flow. nodes is a list of dicts with keys: - id (string; required) - type (string; optional) - data (dict; required) - position (dict; required) position is a dict with keys: - x (number; required) - y (number; required) - style (dict; optional) - className (string; optional) - hidden (boolean; optional) - selected (boolean; optional) - draggable (boolean; optional) - selectable (boolean; optional) - connectable (boolean; optional) - deletable (boolean; optional) - dragHandle (string; optional) - width (number; optional) - height (number; optional) - parentId (string; optional) - zIndex (number; optional) - extent (string \ | list of list of numberss; optional) - expandParent (boolean; optional) - positionAbsolute (dict; optional) positionAbsolute is a dict with keys: - x (number; optional) - y (number; optional) - ariaLabel (string; optional) - focusable (boolean; optional) - resizing (boolean; optional) | |||
| nodesConnectable | boolean; default True | Enable/disable the ability to make new connections between nodes. | ||||
| nodesDraggable | boolean; default True | Enable/disable node dragging behavior. | ||||
| nodesFocusable | boolean; default True | Enable/disable keyboard focus on nodes. | ||||
| onlyRenderVisibleElements | boolean; default False | Only render nodes and edges that are visible in the viewport. | ||||
| panActivationKeyCode | string; default 'Space' | Key code to activate pan mode (default: 'Space'). | ||||
| panOnDrag | boolean \ | list of numbers; default True | Enable/disable panning by dragging. Can be boolean or array of mouse buttons [0,1,2]. | |||
| panOnScroll | boolean; default False | Enable panning by scrolling. | ||||
| panOnScrollMode | a value equal to: 'free', 'vertical', 'horizontal'; default 'free' | Restrict scroll panning direction: 'free', 'vertical', 'horizontal'. | ||||
| panOnScrollSpeed | number; default 0.5 | Speed of scroll-based panning (default: 0.5). | ||||
| paneClickPosition | dict; optional | Position where the pane was clicked. paneClickPosition is a dict with keys: - clientX (number; optional) - clientY (number; optional) | ||||
| paneContextMenu | dict; optional | Context menu info for the pane. paneContextMenu is a dict with keys: - clientX (number; optional) - clientY (number; optional) | ||||
| panels | list of dicts; optional | Array of panel configurations for custom UI overlays. panels is a list of dicts with keys: - position (a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'; optional) - children (boolean \ | number \ | string \ | dict \ | list; optional) |
| pasteAction | dict; optional | Trigger to paste nodes and edges from clipboard. Set to an object with optional offset: { offset: { x: 50, y: 50 } } Will be reset to None after pasting. pasteAction is a dict with keys: - offset (dict; optional) offset is a dict with keys: - x (number; optional) - y (number; optional) | ||||
| pastedElements | dict; optional | Information about the last paste operation. Contains the IDs of newly created nodes and edges. pastedElements is a dict with keys: - nodeIds (list of strings; optional) - edgeIds (list of strings; optional) - timestamp (number; optional) | ||||
| preventDelete | boolean; default False | Enable delete prevention checks. | ||||
| preventDeleteEdges | list of strings; optional | List of edge IDs that cannot be deleted. | ||||
| preventDeleteNodes | list of strings; optional | List of node IDs that cannot be deleted. | ||||
| preventScrolling | boolean; default True | Prevent scrolling on the page when the mouse is over the flow. | ||||
| reconnectRadius | number; default 10 | Radius for reconnection detection (default: 10). | ||||
| restoreFlowState | dict; optional | Import/restore a previously exported flow state. Set this to a flowState object to restore the flow. restoreFlowState is a dict with keys: - nodes (list; optional) - edges (list; optional) - viewport (dict; optional) viewport is a dict with keys: - x (number; optional) - y (number; optional) - zoom (number; optional) | ||||
| selectNodesOnDrag | boolean; default True | Select nodes when dragging over them. | ||||
| selectedEdges | list of strings; optional | IDs of currently selected edges. | ||||
| selectedNodes | list of strings; optional | IDs of currently selected nodes. | ||||
| selectionKeyCode | string; default 'Shift' | Key code for multi-selection box (default: 'Shift'). | ||||
| selectionMode | a value equal to: 'full', 'partial'; default 'full' | Selection mode: 'full' (fully enclosed) or 'partial' (touching). | ||||
| selectionOnDrag | boolean; default False | Enable selection box by dragging on the pane. | ||||
| showBackground | boolean; default True | Show/hide the background pattern. | ||||
| showControls | boolean; default True | Show/hide the control panel. | ||||
| showDevTools | boolean; default False | Show/hide the developer tools panel. | ||||
| showMiniMap | boolean; default True | Show/hide the minimap navigation component. | ||||
| smartHandles | boolean; optional | Enable smart handle positioning. When True, nodes render handles on all 4 sides and edges automatically connect to the closest handle pair based on relative node positions. This prevents edges from wrapping around nodes unnecessarily. | ||||
| snapGrid | list of numbers; default [15, 15] | The grid size for snapping [x, y] (default: [15, 15]). | ||||
| snapToGrid | boolean; default False | Whether to snap nodes to a grid when dragging. | ||||
| theme | dict; optional | Custom theme configuration. Overrides CSS variables for fine-grained control. All properties are optional - only specify what you want to customize. theme is a dict with keys: - glassBlur (number; optional): Glass blur intensity in pixels (default: 12). - glassSaturate (number; optional): Glass saturation percentage (default: 180). - nodeBackground (string; optional): Node background color (e.g., 'rgba(255, 255, 255, 0.72)'). - nodeBorder (string; optional): Node border color. - nodeText (string; optional): Node primary text color. - nodeTextSecondary (string; optional): Node secondary/subtitle text color. - inputNodeBackground (string; optional): Input node background color. - inputNodeBorder (string; optional): Input node border color. - inputNodeAccent (string; optional): Input node accent color (top bar). - outputNodeBackground (string; optional): Output node background color. - outputNodeBorder (string; optional): Output node border color. - outputNodeAccent (string; optional): Output node accent color (bottom bar). - edgeStroke (string; optional): Edge stroke color. - edgeStrokeSelected (string; optional): Selected edge stroke color. - edgeStrokeAnimated (string; optional): Animated edge stroke color. - edgeStrokeWidth (number; optional): Edge stroke width in pixels. - handleBackground (string; optional): Handle background color. - handleBorder (string; optional): Handle border color. - handleConnected (string; optional): Connected handle color. - backgroundColor (string; optional): Flow background color. - backgroundPattern (string; optional): Background pattern color. - selectionBackground (string; optional): Selection box background color. - selectionBorder (string; optional): Selection box border color. - borderRadius (number; optional): Node border radius in pixels. | ||||
| themePreset | a value equal to: 'glass', 'solid', 'minimal'; optional | Theme preset: 'glass' (default), 'solid', or 'minimal' - glass: Glassmorphism with blur and transparency - solid: Opaque nodes with subtle shadows (better for complex backgrounds) - minimal: Clean lines with minimal styling. | ||||
| toggleCollapseNode | string; optional | Set to a group node ID to toggle its collapsed/expanded state. When collapsed, child nodes are hidden and boundary edges remap to the group. Will be reset to None after processing. | ||||
| trackNodeDrag | boolean; default False | Track node position during drag (can be expensive). | ||||
| trackViewport | boolean; default False | Track viewport changes during pan/zoom. | ||||
| translateExtent | list of list of numberss; optional | Limit the viewport panning extent [[minX, minY], [maxX, maxY]]. | ||||
| undoRedoAction | dict; optional | Trigger an undo or redo action. Set to { action: 'undo' } or { action: 'redo' }. Will be reset to None after execution. undoRedoAction is a dict with keys: - action (a value equal to: 'undo', 'redo'; optional) | ||||
| undoRedoMaxHistory | number; default 50 | Maximum number of history snapshots to keep (default: 50). | ||||
| undoRedoState | dict; optional | Current undo/redo state. Contains canUndo, canRedo, undoCount, redoCount. Updated automatically when history changes. undoRedoState is a dict with keys: - canUndo (boolean; optional) - canRedo (boolean; optional) - undoCount (number; optional) - redoCount (number; optional) | ||||
| viewport | dict; optional | Current viewport state (read-only, updated by callbacks). viewport is a dict with keys: - x (number; optional) - y (number; optional) - zoom (number; optional) | ||||
| viewportAction | dict; optional | Trigger viewport actions programmatically. Set to an action object to execute. Will be reset to None after execution. Supported actions: - { action: 'fitView', options: {...} } - { action: 'zoomIn', options: {...} } - { action: 'zoomOut', options: {...} } - { action: 'setZoom', zoom: 1.5, options: {...} } - { action: 'setCenter', x: 100, y: 100, options: {...} } - { action: 'setViewport', viewport: {x, y, zoom}, options: {...} } - { action: 'focusNode', nodeId: 'node-1', zoom: 1.5, duration: 500 }. viewportAction is a dict with keys: - action (a value equal to: 'fitView', 'zoomIn', 'zoomOut', 'setZoom', 'setCenter', 'setViewport', 'focusNode'; optional) - nodeId (string; optional) - x (number; optional) - y (number; optional) - zoom (number; optional) - duration (number; optional) - viewport (dict; optional) viewport is a dict with keys: - x (number; optional) - y (number; optional) - zoom (number; optional) - options (dict; optional) | ||||
| viewportMoving | boolean; optional | Whether viewport is currently moving (panning/zooming). | ||||
| viewportOverlays | list of dicts; optional | Array of overlay elements rendered in flow coordinates via ViewportPortal. Each overlay moves with the viewport (pan/zoom) and is positioned at (x, y) in flow space. viewportOverlays is a list of dicts with keys: - x (number; optional): X position in flow coordinates. - y (number; optional): Y position in flow coordinates. - content (string; optional): Text content to display. - style (dict; optional): Custom CSS styles for the overlay div. | ||||
| zIndexMode | a value equal to: 'default', 'elevate'; optional | Z-index calculation mode. 'default' uses standard stacking. 'elevate' raises selected nodes and connected edges above all other elements. | ||||
| zoomActivationKeyCode | string; optional | Key code to activate zoom mode. | ||||
| zoomOnDoubleClick | boolean; default True | Enable zooming by double-clicking. | ||||
| zoomOnPinch | boolean; default True | Enable zooming by pinching on touch devices. | ||||
| zoomOnScroll | boolean; default True | Enable zooming by scrolling. |
Node components
Custom node types you can register and render inside a flow.
| Name | Type | Description | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| data | dict; required | Node data object containing label, styling, and handle configuration. data is a dict with keys: - label (boolean \ | number \ | string \ | dict \ | list; optional): Primary content to display in the node - string or Dash component. - title (boolean \ | number \ | string \ | dict \ | list; optional): Alias for label - use for clarity when also using body text. - sublabel (string; optional): Secondary text displayed below the main label. - body (boolean \ | number \ | string \ | dict \ | list; optional): Body text displayed below title/sublabel. - icon (boolean \ | number \ | string \ | dict \ | list; optional): Custom icon - DashIconify component or any Dash component. - iconColor (string; optional): Background color for the icon container. - showIcon (boolean; optional): Show/hide icon (default: True if icon prop provided, False otherwise). - layout (a value equal to: 'stacked', 'horizontal'; optional): Layout mode: 'stacked' (vertical) or 'horizontal' (icon left, text right). - multiline (boolean; optional): Allow multiline text wrapping. - style (dict; optional): Custom CSS styles for the node container. - className (string; optional): Additional CSS class name. - handleStyle (dict; optional): Custom CSS styles for connection handles. - targetPosition (string; optional): Position for the target (input) handle: 'top', 'bottom', 'left', 'right'. - sourcePosition (string; optional): Position for the source (output) handle: 'top', 'bottom', 'left', 'right'. - status (a value equal to: 'initial', 'loading', 'success', 'error'; optional): Node status: 'initial', 'loading', 'success', 'error'. - loadingVariant (a value equal to: 'border', 'overlay'; optional): Loading animation variant: 'border' or 'overlay'. - smartHandles (boolean; optional): Enable smart handles mode - renders handles on all 4 sides for optimal edge routing. |
| isConnectable | boolean; optional | Whether connections can be made to/from this node. | ||||||||||||||||
| selected | boolean; optional | Whether the node is currently selected. |
| Name | Type | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| id | string; optional | Node ID. | ||||||||
| data | dict; optional | Node data object containing label, icon, and styling options. data is a dict with keys: - label (boolean \ | number \ | string \ | dict \ | list; optional): Label content for the group - displayed in top-left corner. - icon (boolean \ | number \ | string \ | dict \ | list; optional): Icon element to display next to the label. - labelStyle (dict; optional): Custom CSS styles for the label element. - resizable (boolean; optional): Whether the group can be resized (default: True). - minWidth (number; optional): Minimum width constraint for resizing. - minHeight (number; optional): Minimum height constraint for resizing. - maxWidth (number; optional): Maximum width constraint for resizing. - maxHeight (number; optional): Maximum height constraint for resizing. - keepAspectRatio (boolean; optional): Maintain aspect ratio when resizing. - collapsed (boolean; optional): Whether the group is collapsed (managed by DashFlows toggleCollapseNode). - collapsedWidth (number; optional): Width when collapsed (default: 150). - collapsedHeight (number; optional): Height when collapsed (default: 50). |
| selected | boolean; optional | Whether the group is currently selected. |
Edge components
| Name | Type | Description | ||||
|---|---|---|---|---|---|---|
| id | string; required | Unique identifier for the edge. | ||||
| data | dict; optional | Configuration data for the button edge. data is a dict with keys: - label (boolean \ | number \ | string \ | dict \ | list; optional): Label text to display next to the button. - showButton (boolean; optional): Whether to show the button (default: True). - buttonLabel (string; optional): Text/symbol to display on the button (default: '×'). - buttonStyle (dict; optional): Custom CSS styles for the button. - buttonTitle (string; optional): Tooltip title for the button. - onButtonClick (optional): Callback function when button is clicked. - showToolbar (boolean; optional): Show glass morphism toolbar when edge is selected. - toolbarStyle (dict; optional): Custom CSS styles for the toolbar container. |
| label | boolean \ | number \ | string \ | dict \ | list; optional | Label text to display on the edge. |
| labelStyle | dict; optional | Custom CSS styles for the label. | ||||
| markerEnd | boolean \ | number \ | string \ | dict \ | list; optional | Marker configuration for the edge end. |
| markerStart | boolean \ | number \ | string \ | dict \ | list; optional | Marker configuration for the edge start. |
| selected | boolean; optional | Whether the edge is currently selected. | ||||
| sourcePosition | string; optional | Position of the source handle ('top', 'bottom', 'left', 'right'). | ||||
| sourceX | number; required | X coordinate of the edge source. | ||||
| sourceY | number; required | Y coordinate of the edge source. | ||||
| targetPosition | string; optional | Position of the target handle ('top', 'bottom', 'left', 'right'). | ||||
| targetX | number; required | X coordinate of the edge target. | ||||
| targetY | number; required | Y coordinate of the edge target. |
| Name | Type | Description | ||||
|---|---|---|---|---|---|---|
| id | string; required | Unique identifier for the edge. | ||||
| data | dict; optional | Additional data passed to the edge. | ||||
| label | boolean \ | number \ | string \ | dict \ | list; optional | Label text to display on the edge. |
| labelStyle | dict; optional | Custom CSS styles for the label. | ||||
| markerEnd | boolean \ | number \ | string \ | dict \ | list; optional | Marker configuration for the edge end. |
| markerStart | boolean \ | number \ | string \ | dict \ | list; optional | Marker configuration for the edge start. |
| selected | boolean; optional | Whether the edge is currently selected. | ||||
| source | string; required | Source node ID. | ||||
| sourceX | number; optional | X coordinate of the edge source. | ||||
| sourceY | number; optional | Y coordinate of the edge source. | ||||
| target | string; required | Target node ID. | ||||
| targetX | number; optional | X coordinate of the edge target. | ||||
| targetY | number; optional | Y coordinate of the edge target. |
Source: /api-reference
Note for AI agents: This is the static, prerendered view of an interactive Dash application served because we detected a non-JS user agent. Full prose docs:
- /api-reference/llms.txt — LLM-friendly documentation
- /sitemap.xml
- /robots.txt