..

LineIndent · LineIndent · commit b7a5599ed0e2 · 2025-09-16T12:34:37.000+03:00
diff --git a/docs/enterprise/react_flow/edges.md b/docs/enterprise/react_flow/edges.md
@@ -94,3 +94,124 @@ edges: list[Edge] = [
     }
 ]
 ```
+
+# Custom Edges
+
+React Flow in Reflex also allows you to define custom edge types. This is useful when you want edges to carry extra functionality (like buttons, labels, or dynamic styling) beyond the default straight or bezier connectors.
+
+```python demo exec
+import reflex as rx
+import reflex_enterprise as rxe
+from reflex_enterprise.components.flow.types import (
+    ConnectionInProgress,
+    Edge,
+    NoConnection,
+    Node,
+    Position,
+)
+
+class SimpleEdgeDemoState(rx.State):
+    nodes: list[Node] = [
+        {"id": "1", "position": {"x": 0, "y": 0}, "data": {"label": "Node A"}, "style": {"color": "#000000",}},
+        {"id": "2", "position": {"x": 250, "y": 150}, "data": {"label": "Node B"}, "style": {"color": "#000000",}},
+    ]
+    edges: list[Edge] = [
+        {"id": "e1-2", "source": "1", "target": "2", "type": "button"}
+    ]
+
+    @rx.event
+    def set_nodes(self, nodes: list[Node]):
+        self.nodes = nodes
+
+    @rx.event
+    def set_edges(self, edges: list[Edge]):
+        self.edges = edges
+
+    @rx.event
+    def handle_connect_end(
+        self,
+        connection_status: NoConnection | ConnectionInProgress,
+    ):
+        if not connection_status["isValid"]:
+            new_edge = {
+                "id": f"{connection_status['fromNode']['id']}-{connection_status['toNode']['id']}",
+                "source": connection_status["fromNode"]["id"],
+                "target": connection_status["toNode"]["id"],
+                "type": "button",
+            }
+            self.edges.append(new_edge)
+
+
+
+@rx.memo
+def button_edge(
+    id: rx.Var[str],
+    sourceX: rx.Var[float],
+    sourceY: rx.Var[float],
+    targetX: rx.Var[float],
+    targetY: rx.Var[float],
+    sourcePosition: rx.Var[Position],
+    targetPosition: rx.Var[Position],
+    markerEnd: rx.Var[str],
+):
+    bezier_path = rxe.components.flow.util.get_bezier_path(
+        source_x=sourceX,
+        source_y=sourceY,
+        target_x=targetX,
+        target_y=targetY,
+        source_position=sourcePosition,
+        target_position=targetPosition,
+    )
+
+    mid_x = bezier_path.label_x
+    mid_y = bezier_path.label_y
+
+    return rx.fragment(
+        rxe.flow.base_edge(path=bezier_path.path, markerEnd=markerEnd),
+        rxe.flow.edge_label_renderer(
+            rx.el.div(
+                rx.el.button(
+                    "×",
+                    class_name=("w-[30px] h-[30px] border-2 border-gray-200 bg-gray-200 text-black rounded-full text-[12px] pt-0 cursor-pointer hover:bg-gray-400 hover:text-white"),
+                    on_click=rx.run_script(
+                        rxe.flow.api.set_edges(
+                            rx.vars.FunctionStringVar.create(
+                                "Array.prototype.filter.call"
+                            ).call(
+                                rxe.flow.api.get_edges(),
+                                rx.Var(f"((edge) => edge.id !== {id})"),
+                            ),
+                        )
+                    ),
+                    style={
+                        "position": "absolute",
+                        "left": f"{mid_x}px",
+                        "top": f"{mid_y}px",
+                        "transform": "translate(-50%, -50%)",
+                        "pointerEvents": "all",
+                    },
+                ),
+            )
+        ),
+    )
+
+def very_simple_custom_edge_example():
+    return rx.box(
+        rxe.flow(
+            rxe.flow.background(),
+            default_nodes=SimpleEdgeDemoState.nodes,
+            default_edges=SimpleEdgeDemoState.edges,
+            nodes=SimpleEdgeDemoState.nodes,
+            edges=SimpleEdgeDemoState.edges,
+            on_connect=lambda connection: SimpleEdgeDemoState.set_edges(
+                rxe.flow.util.add_edge(connection, SimpleEdgeDemoState.edges)
+            ),
+            on_connect_end=lambda status, event: SimpleEdgeDemoState.handle_connect_end(status),
+            edge_types={"button": button_edge},
+            fit_view=True,
+        ),
+        height="100vh",
+        width="100%",
+    )
+
+```
diff --git a/docs/enterprise/react_flow/interactivity.md b/docs/enterprise/react_flow/interactivity.md
@@ -53,7 +53,6 @@ def interactive_flow():
             rxe.flow.controls(),
             rxe.flow.background(),
             rxe.flow.mini_map(),
-
             nodes=FlowState.nodes,
             edges=FlowState.edges,
             on_nodes_change=lambda node_changes: FlowState.set_nodes(
diff --git a/docs/enterprise/react_flow/nodes.md b/docs/enterprise/react_flow/nodes.md
@@ -83,3 +83,198 @@ node_with_handles = {
     "targetPosition": "left"
 }
 ```
+
+# Custom Nodes
+
+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.
+
+```python demo exec
+
+from typing import Any
+
+import reflex as rx
+
+import reflex_enterprise as rxe
+from reflex_enterprise.components.flow.types import Connection, Edge, Node
+
+
+class CustomNodeState(rx.State):
+    bg_color: rx.Field[str] = rx.field(default="#c9f1dd")
+    nodes: rx.Field[list[Node]] = rx.field(
+        default_factory=lambda: [
+            {
+                "id": "1",
+                "type": "input",
+                "data": {"label": "An input node"},
+                "position": {"x": 0, "y": 50},
+                "sourcePosition": "right",
+                "style": {"color": "#000000",}
+            },
+            {
+                "id": "2",
+                "type": "selectorNode",
+                "data": {
+                    "color": "#c9f1dd",
+                },
+                "position": {"x": 300, "y": 50},
+            },
+            {
+                "id": "3",
+                "type": "output",
+                "data": {"label": "Output A"},
+                "position": {"x": 650, "y": 25},
+                "targetPosition": "left",
+                "style": {"color": "#000000",}
+            },
+            {
+                "id": "4",
+                "type": "output",
+                "data": {"label": "Output B"},
+                "position": {"x": 650, "y": 100},
+                "targetPosition": "left",
+                "style": {"color": "#000000",}
+            },
+        ]
+    )
+    edges: rx.Field[list[Edge]] = rx.field(
+        default_factory=lambda: [
+            {
+                "id": "e1-2",
+                "source": "1",
+                "target": "2",
+                "animated": True,
+            },
+            {
+                "id": "e2a-3",
+                "source": "2",
+                "target": "3",
+                "animated": True,
+            },
+            {
+                "id": "e2b-4",
+                "source": "2",
+                "target": "4",
+                "animated": True,
+            },
+        ]
+    )
+
+    @rx.event
+    def on_change_color(self, color: str):
+        self.nodes = [
+            node
+            if node["id"] != "2" or "data" not in node
+            else {**node, "data": {**node["data"], "color": color}}
+            for node in self.nodes
+        ]
+        self.bg_color = color
+
+    @rx.event
+    def set_nodes(self, nodes: list[Node]):
+        self.nodes = nodes
+
+    @rx.event
+    def set_edges(self, edges: list[Edge]):
+        self.edges = edges
+
+
+@rx.memo
+def color_selector_node(data: rx.Var[dict[str, Any]], isConnectable: rx.Var[bool]):  # noqa: N803
+    data = data.to(dict)
+    return rx.el.div(
+        rxe.flow.handle(
+            type="target",
+            position="left",
+            on_connect=lambda params: rx.console_log(f"handle onConnect {params}"),
+            is_connectable=isConnectable,
+        ),
+        rx.el.div(
+            "Custom Color Picker Node: ",
+            rx.el.strong(data["color"]),
+        ),
+        rx.el.input(
+            class_name="nodrag",
+            type="color",
+            on_change=CustomNodeState.on_change_color,
+            default_value=data["color"],
+        ),
+        rxe.flow.handle(
+            type="source",
+            position="right",
+            is_connectable=isConnectable,
+        ),
+        class_name="border border-1 p-2 rounded-sm",
+        border_color=rx.color_mode_cond("black", ""),
+        color="black",
+        bg="white",
+    )
+
+
+def node_stroke_color(node: rx.vars.ObjectVar[Node]):
+    return rx.match(
+        node["type"],
+        ("input", "#0041d0"),
+        (
+            "selectorNode",
+            CustomNodeState.bg_color,
+        ),
+        ("output", "#ff0072"),
+        None,
+    )
+
+
+def node_color(node: rx.vars.ObjectVar[Node]):
+    return rx.match(
+        node["type"],
+        (
+            "selectorNode",
+            CustomNodeState.bg_color,
+        ),
+        "#fff",
+    )
+
+
+@rx.page(route="/nodes/custom-node", title="Custom Node Demo")
+def custom_node():
+    return rx.box(
+        rxe.flow(
+            rxe.flow.background(bg_color=CustomNodeState.bg_color),
+            rxe.flow.mini_map(
+                node_stroke_color=rx.vars.function.ArgsFunctionOperation.create(
+                    ("node",), node_stroke_color(rx.Var("node").to(Node))
+                ),
+                node_color=rx.vars.function.ArgsFunctionOperation.create(
+                    ("node",), node_color(rx.Var("node").to(Node))
+                ),
+            ),
+            rxe.flow.controls(),
+            default_nodes=CustomNodeState.nodes,
+            default_edges=CustomNodeState.edges,
+            nodes=CustomNodeState.nodes,
+            edges=CustomNodeState.edges,
+            on_nodes_change=lambda changes: CustomNodeState.set_nodes(
+                rxe.flow.util.apply_node_changes(CustomNodeState.nodes, changes)
+            ),
+            on_edges_change=lambda changes: CustomNodeState.set_edges(
+                rxe.flow.util.apply_edge_changes(CustomNodeState.edges, changes)
+            ),
+            on_connect=lambda connection: CustomNodeState.set_edges(
+                rxe.flow.util.add_edge(
+                    connection.to(dict).merge({"animated": True}).to(Connection),
+                    CustomNodeState.edges,
+                )
+            ),
+            node_types={"selectorNode": color_selector_node},
+            color_mode="light",
+            snap_grid=(20, 20),
+            default_viewport={"x": 0, "y": 0, "zoom": 1.5},
+            snap_to_grid=True,
+            attribution_position="bottom-left",
+            fit_view=True,
+        ),
+        height="100vh",
+        width="100vw",
+    )
+```
diff --git a/uv.lock b/uv.lock
