API reference

dash_flows

AnimatedCircleNode

AnimatedCircleNode - A circular node designed for use with animated edges. Features a distinctive pink circular design that works well with AnimatedNodeEdge to create animated dot effects along connections.

prop	type	default	description
`data` *	dict		Node data object containing the label content

AnimatedNodeEdge

AnimatedNodeEdge is a custom edge component that animates a node along its path.

prop	type	default	description
`id`	string		The ID of the edge
`data`	dict	{ animatedNode: '' }	Edge data containing the ID of the node to animate
`sourcePosition`	string		Position of the source handle
`sourceX`	number		X coordinate of the source node
`sourceY`	number		Y coordinate of the source node
`targetPosition`	string		Position of the target handle
`targetX`	number		X coordinate of the target node
`targetY`	number		Y coordinate of the target node

AnimatedSvgEdge

AnimatedSvgEdge - An edge that animates a custom SVG element along the path Useful for showing data flow direction or active connections

prop	type	description
`id` *	string	Unique identifier for the edge
`data`	dict	Configuration data for the animated SVG edge
`markerEnd`	any	Marker configuration for the edge end
`markerStart`	any	Marker configuration for the edge start
`selected`	bool	Whether the edge is currently selected
`sourcePosition`	string	Position of the source handle ('top', 'bottom', 'left', 'right')
`sourceX` *	number	X coordinate of the edge source
`sourceY` *	number	Y coordinate of the edge source
`style`	object	Custom CSS styles for the edge path
`targetPosition`	string	Position of the target handle ('top', 'bottom', 'left', 'right')
`targetX` *	number	X coordinate of the edge target
`targetY` *	number	Y coordinate of the edge target

ButtonEdge

ButtonEdge - Glass morphism styled edge with an interactive button and optional toolbar

prop	type	description
`id` *	string	Unique identifier for the edge
`data`	dict	Configuration data for the button edge
`label`	any	Label text to display on the edge
`labelStyle`	object	Custom CSS styles for the label
`markerEnd`	any	Marker configuration for the edge end
`markerStart`	any	Marker configuration for the edge start
`selected`	bool	Whether the edge is currently selected
`sourcePosition`	string	Position of the source handle ('top', 'bottom', 'left', 'right')
`sourceX` *	number	X coordinate of the edge source
`sourceY` *	number	Y coordinate of the edge source
`style`	object	Custom CSS styles for the edge path
`targetPosition`	string	Position of the target handle ('top', 'bottom', 'left', 'right')
`targetX` *	number	X coordinate of the edge target
`targetY` *	number	Y coordinate of the edge target

ButtonHandle

ButtonHandle - A handle that can also function as a button Useful for triggering actions when clicking on a connection point

prop	type	default	description
`id`	string		Unique identifier for the handle
`buttonClassName`	string		CSS class for the button
`buttonContent`	node		Content to display in the button
`buttonStyle`	object		Inline styles for the button
`children`	node		Child content for the button
`className`	string		CSS class for the handle
`isConnectable`	bool	true	Whether the handle can connect to other nodes
`onClick`	func		Click handler for the button
`onConnect`	func		Called when a connection is made
`position`	one of 'top', 'bottom', 'left', 'right'	'bottom'	Position of the handle on the node
`showButton`	bool	false	Whether to show the button (default: false)
`style`	object		Inline styles for the handle
`type` *	one of 'source', 'target'		Type of handle - source or target

DashFlows

DashFlows - A React Flow-based node graph component for Dash applications. Provides interactive node-based workflow visualization with support for custom node types, edge types, glass morphism styling, and extensive callback integration for Python-based interactivity.

prop	type	default	description
`id`	string		The ID used to identify this component in Dash callbacks.
`addNodeOnEdgeDrop`	bool		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`	bool	false	Enable smooth animated transitions when applying ELK layout. Nodes interpolate from current to target positions with an ease-out curve.
`animateLayoutDuration`	number	300	Duration of layout animation in milliseconds (default: 300)
`ariaLabelConfig`	object		ARIA label configuration for accessibility. Customize labels for screen readers. Keys: nodes, edges, controls, minimap. Values are label strings.
`autoPanOnConnect`	bool	true	Auto-pan viewport when making a new connection near edges
`autoPanOnNodeDrag`	bool	true	Auto-pan viewport when dragging a node near edges
`autoPanOnNodeFocus`	bool	true	Auto-pan the viewport when focusing a node via keyboard (Tab key).
`autoPanSpeed`	number	15	Speed of auto-panning (default: 15)
`backgroundColor`	string		Color of the background pattern
`backgroundGap`	number \	list of number	16	Gap between background pattern elements
`backgroundSize`	number	1	Size of background pattern elements
`backgroundVariant`	one of 'dots', 'lines', 'cross'	'dots'	Background pattern type: 'dots', 'lines', 'cross'
`className`	string	''	CSS class name for the container div
`clickedEdge`	dict		The edge that was clicked
`clickedNode`	dict		The node that was clicked
`clipboard`	dict		Internal clipboard containing copied nodes and edges. Populated by copyAction, consumed by pasteAction.
`collapsedGroups`	list of string		List of currently collapsed group node IDs (read-only output).
`colorMode`	one of 'light', 'dark', 'system'	'light'	Color mode: 'light', 'dark', or 'system'
`colorScheme`	one of 'default', 'ocean', 'forest', 'sunset', 'midnight', 'rose'		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		Trigger a graph computation. Set to { action: 'compute' } to perform topological sort and emit traversal order with input mappings. Will be reset to null after execution.
`computeResult`	dict		Result of the last computation. Contains traversalOrder (array of node IDs in topological order) and nodeInputs (map of nodeId to input details).
`connectOnClick`	bool	true	Enable click-based connection mode (click source then target)
`connectionDragThreshold`	number	0	Minimum drag distance in pixels before a connection line appears. Useful to prevent accidental connections. Default is 0 (immediate).
`connectionLineStyle`	object		Style for the connection line while dragging
`connectionLineType`	one of 'bezier', 'straight', 'step', 'smoothstep', 'simplebezier'	'bezier'	Type of connection line: 'bezier', 'straight', 'step', 'smoothstep', 'simplebezier'
`connectionMode`	one of 'strict', 'loose'	'strict'	Connection mode: 'strict' (same handle type) or 'loose' (any handle)
`connectionRadius`	number	20	Radius for connection drop detection (default: 20)
`connectionRules`	dict		Rules for validating connections
`connectionStartHandle`	dict		Current connection being created
`contextMenuEdge`	dict		Context menu info for an edge
`contextMenuNode`	dict		Context menu info for a node
`controlsPosition`	one of 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'	'bottom-left'	Position of controls panel
`controlsShowFitView`	bool	true	Show fit-view button in controls
`controlsShowInteractive`	bool	true	Show interactive toggle in controls
`controlsShowZoom`	bool	true	Show zoom buttons in controls
`copyAction`	bool		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		Default options applied to all new edges
`defaultMarkerColor`	string	'#555'	Default color for edge markers
`defaultViewport`	dict		The initial viewport position and zoom level
`deleteElementsAction`	dict		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 null.
`deleteKeyCode`	string	'Backspace'	Key code for deleting selected elements (default: 'Backspace', null to disable)
`deletedEdges`	list of string		IDs of recently deleted edges
`deletedNodes`	list of string		IDs of recently deleted nodes
`disableKeyboardA11y`	bool	false	Disable keyboard accessibility features
`doubleClickedEdge`	dict		The edge that was double-clicked
`doubleClickedNode`	dict		The node that was double-clicked
`downloadImage`	dict		Trigger to download the flow as an image. Set to a config object to initiate download. Will be reset to null 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)
`draggedNode`	dict		The node being dragged
`droppedNode`	dict		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.
`edgeDroppedNode`	dict		Info about the node created by dropping an edge on empty canvas. Contains nodeId, position, sourceNodeId, sourceHandleId, handleType, timestamp.
`edges`	list of dict	[]	Array of edges defining connections between nodes
`edgesFocusable`	bool	true	Enable/disable keyboard focus on edges
`edgesReconnectable`	bool	true	Allow edges to be reconnected after creation
`elementsSelectable`	bool	true	Enable/disable the ability to select elements
`elevateEdgesOnSelect`	bool	false	Raise z-index of selected edges
`elevateNodesOnSelect`	bool	true	Raise z-index of selected nodes
`enableUndoRedo`	bool	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`	bool		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`	bool	false	Automatically fit all nodes in view on initialization
`fitViewOptions`	dict		Options for fitView behavior
`flowState`	dict		The exported flow state as a serializable object containing nodes, edges, and viewport. This is populated when exportFlowState is triggered.
`helperLineThreshold`	number		Distance in pixels within which helper lines snap and appear (default: 5)
`helperLines`	bool		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		The edge being hovered
`hoveredNode`	dict		The node being hovered
`imageDownloaded`	dict		Information about the last successful image download. Populated after a successful downloadImage operation.
`initialized`	bool		Whether the flow has been initialized
`lastConnection`	dict		The last connection that was made
`lastError`	dict		Last error that occurred
`layoutOptions`	string		Layout options for arranging nodes using the ELK layout engine (JSON string)
`maxZoom`	number	2	Maximum zoom level (default: 2)
`minZoom`	number	0.5	Minimum zoom level (default: 0.5)
`miniMapMaskColor`	string		Color for the minimap mask (viewport indicator)
`miniMapNodeBorderRadius`	number		Border radius for minimap nodes
`miniMapNodeColor`	string		Color function or string for minimap nodes
`miniMapNodeStrokeColor`	string		Stroke color for minimap nodes
`miniMapPannable`	bool	false	Allow panning by dragging the minimap
`miniMapPosition`	one of 'top-left', 'top-right', 'bottom-left', 'bottom-right'	'bottom-right'	Position of the minimap
`miniMapZoomable`	bool	false	Allow zooming via the minimap
`multiSelectionKeyCode`	string		Key code for adding to selection
`noDragClassName`	string	'nodrag'	CSS class name that prevents dragging when applied to elements
`noPanClassName`	string	'nopan'	CSS class name that prevents panning when applied to elements
`noWheelClassName`	string	'nowheel'	CSS class name that prevents wheel zoom when applied to elements
`nodeConnections`	object		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 number		Limit where nodes can be placed [[minX, minY], [maxX, maxY]]
`nodes`	list of dict	[]	Array of nodes to display in the flow
`nodesConnectable`	bool	true	Enable/disable the ability to make new connections between nodes
`nodesDraggable`	bool	true	Enable/disable node dragging behavior
`nodesFocusable`	bool	true	Enable/disable keyboard focus on nodes
`onlyRenderVisibleElements`	bool	false	Only render nodes and edges that are visible in the viewport
`panActivationKeyCode`	string	'Space'	Key code to activate pan mode (default: 'Space')
`panOnDrag`	bool \	list of number	true	Enable/disable panning by dragging. Can be boolean or array of mouse buttons [0,1,2]
`panOnScroll`	bool	false	Enable panning by scrolling
`panOnScrollMode`	one of 'free', 'vertical', 'horizontal'	'free'	Restrict scroll panning direction: 'free', 'vertical', 'horizontal'
`panOnScrollSpeed`	number	0.5	Speed of scroll-based panning (default: 0.5)
`paneClickPosition`	dict		Position where the pane was clicked
`paneContextMenu`	dict		Context menu info for the pane
`panels`	list of dict		Array of panel configurations for custom UI overlays
`pasteAction`	dict		Trigger to paste nodes and edges from clipboard. Set to an object with optional offset: { offset: { x: 50, y: 50 } } Will be reset to null after pasting.
`pastedElements`	dict		Information about the last paste operation. Contains the IDs of newly created nodes and edges.
`preventDelete`	bool	false	Enable delete prevention checks
`preventDeleteEdges`	list of string		List of edge IDs that cannot be deleted
`preventDeleteNodes`	list of string		List of node IDs that cannot be deleted
`preventScrolling`	bool	true	Prevent scrolling on the page when the mouse is over the flow
`reconnectRadius`	number	10	Radius for reconnection detection (default: 10)
`restoreFlowState`	dict		Import/restore a previously exported flow state. Set this to a flowState object to restore the flow.
`selectNodesOnDrag`	bool	true	Select nodes when dragging over them
`selectedEdges`	list of string		IDs of currently selected edges
`selectedNodes`	list of string		IDs of currently selected nodes
`selectionKeyCode`	string	'Shift'	Key code for multi-selection box (default: 'Shift')
`selectionMode`	one of 'full', 'partial'	'full'	Selection mode: 'full' (fully enclosed) or 'partial' (touching)
`selectionOnDrag`	bool	false	Enable selection box by dragging on the pane
`showBackground`	bool	true	Show/hide the background pattern
`showControls`	bool	true	Show/hide the control panel
`showDevTools`	bool	false	Show/hide the developer tools panel
`showMiniMap`	bool	true	Show/hide the minimap navigation component
`smartHandles`	bool		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 number	[15, 15]	The grid size for snapping [x, y] (default: [15, 15])
`snapToGrid`	bool	false	Whether to snap nodes to a grid when dragging
`style`	object	{}	Custom CSS styles for the container div
`theme`	dict		Custom theme configuration. Overrides CSS variables for fine-grained control. All properties are optional - only specify what you want to customize.
`themePreset`	one of 'glass', 'solid', 'minimal'		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		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 null after processing.
`trackNodeDrag`	bool	false	Track node position during drag (can be expensive)
`trackViewport`	bool	false	Track viewport changes during pan/zoom
`translateExtent`	list of list of number		Limit the viewport panning extent [[minX, minY], [maxX, maxY]]
`undoRedoAction`	dict		Trigger an undo or redo action. Set to { action: 'undo' } or { action: 'redo' }. Will be reset to null after execution.
`undoRedoMaxHistory`	number	50	Maximum number of history snapshots to keep (default: 50)
`undoRedoState`	dict		Current undo/redo state. Contains canUndo, canRedo, undoCount, redoCount. Updated automatically when history changes.
`viewport`	dict		Current viewport state (read-only, updated by callbacks)
`viewportAction`	dict		Trigger viewport actions programmatically. Set to an action object to execute. Will be reset to null 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 }
`viewportMoving`	bool		Whether viewport is currently moving (panning/zooming)
`viewportOverlays`	list of dict		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.
`zIndexMode`	one of 'default', 'elevate'		Z-index calculation mode. 'default' uses standard stacking. 'elevate' raises selected nodes and connected edges above all other elements.
`zoomActivationKeyCode`	string		Key code to activate zoom mode
`zoomOnDoubleClick`	bool	true	Enable zooming by double-clicking
`zoomOnPinch`	bool	true	Enable zooming by pinching on touch devices
`zoomOnScroll`	bool	true	Enable zooming by scrolling

DataEdge

DataEdge - An edge that displays data from the source node Useful for showing data flow between nodes

prop	type	description
`id` *	string	Unique identifier for the edge
`data`	dict	Configuration data for the data edge
`markerEnd`	any	Marker configuration for the edge end
`markerStart`	any	Marker configuration for the edge start
`selected`	bool	Whether the edge is currently selected
`source` *	string	ID of the source node to read data from
`sourcePosition`	string	Position of the source handle ('top', 'bottom', 'left', 'right')
`sourceX` *	number	X coordinate of the edge source
`sourceY` *	number	Y coordinate of the edge source
`style`	object	Custom CSS styles for the edge path
`targetPosition`	string	Position of the target handle ('top', 'bottom', 'left', 'right')
`targetX` *	number	X coordinate of the edge target
`targetY` *	number	Y coordinate of the edge target

DefaultNode

DefaultNode - Glass morphism styled node with source and target handles Equivalent to React Flow's built-in 'default' node type

Uses CSS classes from glass-theme.css for styling, supporting:

Light/dark mode via colorMode prop or Mantine color scheme
Theme presets (glass, solid, minimal)
Custom CSS variable overrides via theme prop
Status indicators (initial, loading, success, error)
Custom icons via DashIconify or any Dash component

prop	type	description
`data` *	dict	Node data object containing label, styling, and handle configuration
`isConnectable`	bool	Whether connections can be made to/from this node
`selected`	bool	Whether the node is currently selected

DevTools

DevTools component for displaying debug information about the flow

prop	type	default	description
`nodes` *	list of dict		Array of nodes to display information about

FloatingEdge

FloatingEdge - Edge that connects to the nearest point on each node's border instead of fixed handle positions. Creates more natural-looking connections.

prop	type	description
`id` *	string	Unique identifier for the edge
`data`	object	Additional data passed to the edge
`label`	any	Label text to display on the edge
`labelStyle`	object	Custom CSS styles for the label
`markerEnd`	any	Marker configuration for the edge end
`markerStart`	any	Marker configuration for the edge start
`selected`	bool	Whether the edge is currently selected
`source` *	string	Source node ID
`sourceX`	number	X coordinate of the edge source
`sourceY`	number	Y coordinate of the edge source
`style`	object	Custom CSS styles for the edge path
`target` *	string	Target node ID
`targetX`	number	X coordinate of the edge target
`targetY`	number	Y coordinate of the edge target

GroupNode

GroupNode - A simple labeled group container for child nodes

This follows the React Flow pattern for group nodes:

The node's width/height is controlled via the style prop on the node definition
Child nodes use parentId to reference this node
Child nodes can use extent: 'parent' to stay within bounds
Supports collapse/expand via data.collapsed (managed by DashFlows toggleCollapseNode prop)

Unlike standard nodes, group nodes are rendered as simple containers that React Flow manages for parent-child relationships.

prop	type	description
`id`	string	Node ID
`data`	dict	Node data object containing label, icon, and styling options
`selected`	bool	Whether the group is currently selected

InputNode

InputNode - Glass morphism styled node with only a source handle (no incoming connections) Features a green accent bar at the top

Uses CSS classes from glass-theme.css for styling, supporting:

Light/dark mode via colorMode prop or Mantine color scheme
Theme presets (glass, solid, minimal)
Custom CSS variable overrides via theme prop
Custom icons via DashIconify or any Dash component

prop	type	description
`data` *	dict	Node data configuration object containing display and behavior settings
`isConnectable`	bool	Whether connections can be made from this node
`selected`	bool	Whether the node is currently selected

NodeSearch

NodeSearch - A search panel for finding and focusing nodes Supports searching by node id, label, or data properties

prop	type	default	description
`className`	string		Additional CSS class name
`focusOnSelect`	bool	true	Whether to focus on the selected node
`highlightDuration`	number	2000	Duration of highlight effect in ms
`highlightOnSelect`	bool	true	Whether to highlight the selected node
`isOpen`	bool	false	Whether the search panel is open
`onClose`	func		Callback when the panel should close
`placeholder`	string	'Search nodes...'	Placeholder text for the search input
`searchKeys`	list of string	['id', 'label', 'type', 'title', 'name']	Keys to search in node data (default: ['id', 'label', 'type'])
`style`	object		Custom inline styles
`zoomLevel`	number	1.5	Zoom level when focusing on a node

NodeStatusIndicator

NodeStatusIndicator - A wrapper component that shows status indicators around nodes Status can be: "initial", "loading", "success", "error" Loading variants: "border" (spinning border) or "overlay" (full overlay with spinner)

prop	type	default	description
`children`	node		The node content to wrap
`className`	string		Additional CSS class name
`loadingVariant`	one of 'border', 'overlay'	'border'	Loading animation variant - "border" shows spinning border, "overlay" shows full overlay
`status`	one of 'initial', 'loading', 'success', 'error'	'initial'	The current status of the node
`style`	object		Custom inline styles

NodeTooltip

NodeTooltip - A wrapper that displays a tooltip when hovered Built on top of React Flow's NodeToolbar component

prop	type	default	description
`children`	node		The node content
`className`	string		CSS class for the container
`offset`	number	10	Offset from the node in pixels
`position`	one of 'top', 'bottom', 'left', 'right'	'top'	Position of the tooltip relative to the node
`showOnHover`	bool	true	Show tooltip only on hover (default: true)
`style`	object		Inline styles for the container
`tooltipClassName`	string		CSS class for the tooltip
`tooltipContent`	node		Content to display in the tooltip
`tooltipStyle`	object		Inline styles for the tooltip

OutputNode

OutputNode - Glass morphism styled node with only a target handle (no outgoing connections) Features a purple accent bar at the bottom

Uses CSS classes from glass-theme.css for styling, supporting:

Light/dark mode via colorMode prop or Mantine color scheme
Theme presets (glass, solid, minimal)
Custom CSS variable overrides via theme prop
Custom icons via DashIconify or any Dash component

prop	type	description
`data` *	dict	Node data configuration object containing display and behavior settings
`isConnectable`	bool	Whether connections can be made to this node
`selected`	bool	Whether the node is currently selected

ResizableNode

ResizableNode - A node that can be resized by the user

This node supports embedding Dash components that will resize along with the node container. The node receives width/height from React Flow when resized.

prop	type	default	description
`data` *	dict		Node data object containing label, handles, and styling options
`height`	number		Current height of the node (set by React Flow during resize)
`selected`	bool	false	Whether the node is currently selected
`width`	number		Current width of the node (set by React Flow during resize)

SimpleBezierEdge

SimpleBezierEdge - Glass morphism styled simple bezier curve edge

prop	type	description
`id` *	string	Unique identifier for the edge
`data`	object	Additional data passed to the edge
`label`	any	Label text to display on the edge
`labelStyle`	object	Custom CSS styles for the label
`markerEnd`	any	Marker configuration for the edge end
`markerStart`	any	Marker configuration for the edge start
`selected`	bool	Whether the edge is currently selected
`sourcePosition`	string	Position of the source handle ('top', 'bottom', 'left', 'right')
`sourceX` *	number	X coordinate of the edge source
`sourceY` *	number	Y coordinate of the edge source
`style`	object	Custom CSS styles for the edge path
`targetPosition`	string	Position of the target handle ('top', 'bottom', 'left', 'right')
`targetX` *	number	X coordinate of the edge target
`targetY` *	number	Y coordinate of the edge target

SmoothStepEdge

SmoothStepEdge - Glass morphism styled stepped edge with rounded corners

prop	type	description
`id` *	string	Unique identifier for the edge
`data`	object	Additional data passed to the edge (borderRadius can be set here)
`label`	any	Label text to display on the edge
`labelStyle`	object	Custom CSS styles for the label
`markerEnd`	any	Marker configuration for the edge end
`markerStart`	any	Marker configuration for the edge start
`selected`	bool	Whether the edge is currently selected
`sourcePosition`	string	Position of the source handle ('top', 'bottom', 'left', 'right')
`sourceX` *	number	X coordinate of the edge source
`sourceY` *	number	Y coordinate of the edge source
`style`	object	Custom CSS styles for the edge path
`targetPosition`	string	Position of the target handle ('top', 'bottom', 'left', 'right')
`targetX` *	number	X coordinate of the edge target
`targetY` *	number	Y coordinate of the edge target

StepEdge

StepEdge - Glass morphism styled stepped edge with sharp corners

prop	type	description
`id` *	string	Unique identifier for the edge
`data`	object	Additional data passed to the edge
`label`	any	Label text to display on the edge
`labelStyle`	object	Custom CSS styles for the label
`markerEnd`	any	Marker configuration for the edge end
`markerStart`	any	Marker configuration for the edge start
`selected`	bool	Whether the edge is currently selected
`sourcePosition`	string	Position of the source handle ('top', 'bottom', 'left', 'right')
`sourceX` *	number	X coordinate of the edge source
`sourceY` *	number	Y coordinate of the edge source
`style`	object	Custom CSS styles for the edge path
`targetPosition`	string	Position of the target handle ('top', 'bottom', 'left', 'right')
`targetX` *	number	X coordinate of the edge target
`targetY` *	number	Y coordinate of the edge target

StraightEdge

StraightEdge - Glass morphism styled straight line edge

prop	type	description
`id` *	string	Unique identifier for the edge
`data`	object	Additional data passed to the edge
`label`	any	Label text to display on the edge
`labelStyle`	object	Custom CSS styles for the label
`markerEnd`	any	Marker configuration for the edge end
`markerStart`	any	Marker configuration for the edge start
`selected`	bool	Whether the edge is currently selected
`sourceX` *	number	X coordinate of the edge source
`sourceY` *	number	Y coordinate of the edge source
`style`	object	Custom CSS styles for the edge path
`targetX` *	number	X coordinate of the edge target
`targetY` *	number	Y coordinate of the edge target

ToolbarNode

ToolbarNode - Glass morphism styled node with a configurable toolbar

prop	type	description
`data` *	dict	Node data configuration object
`isConnectable`	bool	Whether connections can be made to/from this node
`selected`	bool	Whether the node is currently selected

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/llms.txt — LLM-friendly documentation
/sitemap.xml
/robots.txt