Nodes are the fundamental building blocks of a flow. This page explains how to define and customize nodes in Reflex Flow.

A node is represented as a Python dictionary with the following fields:

• id (str) – Unique identifier for the node.
• position (dict) – Position of the node with x and y coordinates.
• data (dict) – Arbitrary data passed to the node component.
• type (str) – Node type defined in node_types.
• sourcePosition (str) – Controls source handle position ("top", "right", "bottom", "left").
• targetPosition (str) – Controls target handle position ("top", "right", "bottom", "left").
• hidden (bool) – Whether the node is visible on the canvas.
• selected (bool) – Whether the node is currently selected.
• draggable (bool) – Whether the node can be dragged.
• selectable (bool) – Whether the node can be selected.
• connectable (bool) – Whether the node can be connected to other nodes.
• deletable (bool) – Whether the node can be deleted.
• width (float) – Width of the node.
• height (float) – Height of the node.
• parentId (str) – Parent node ID for creating sub-flows.
• style (dict) – Custom styles for the node.
• className (str) – CSS class name for the node.

Reflex Flow includes several built-in node types:

• input – Entry point with only source handles
• default – Standard node with both source and target handles
• output – Exit point with only target handles

Creating custom nodes is as easy as building a regular React component and passing it to the node_types. Since they’re standard React components, you can display any content and implement any functionality you need. Plus, you’ll have access to a range of props that allow you to extend and customize the default node behavior.

Below is an example custom node using a color picker component.