Edge

Overview

Edge is a namespace object that ships two production-ready edge components for xyflow workflows:

• Edge.Temporary - a dashed simple-bezier path tinted with var(--color-ring). Use it to represent in-flight or speculative connections that have not been committed.
• Edge.Animated - a standard bezier path with a small primary-colored circle that animates along it via <animateMotion>. Use it to represent live data flow between nodes (streaming tokens, observability traces, agent message passing).

Both variants are React components that conform to xyflow's EdgeProps contract. You register them on the Canvas through the edgeTypes prop and then reference them by key when constructing the edge data.

Preview

'use client';import '@xyflow/react/dist/style.css';import { Canvas, Edge } from '@gremorie/rx-ai';import {  type Edge as FlowEdge,  type EdgeTypes,  type Node as FlowNode,  ReactFlowProvider,} from '@xyflow/react';const edgeTypes: EdgeTypes = {  temporary: Edge.Temporary,  animated: Edge.Animated,};const edgeNodes: FlowNode[] = [  { id: 'a', position: { x: 0, y: 60 }, data: { label: 'Source' } },  { id: 'b', position: { x: 280, y: 0 }, data: { label: 'Target A' } },  { id: 'c', position: { x: 280, y: 140 }, data: { label: 'Target B' } },];const edgeEdges: FlowEdge[] = [  { id: 'a-b', source: 'a', target: 'b', type: 'animated' },  { id: 'a-c', source: 'a', target: 'c', type: 'temporary' },];export function EdgePreview() {  return (    <div className="h-[360px] w-full">      <ReactFlowProvider>        <Canvas edgeTypes={edgeTypes} edges={edgeEdges} nodes={edgeNodes} />      </ReactFlowProvider>    </div>  );}

Anatomy

Edge                  custom React Flow edge
├─ Edge.Temporary     dashed provisional edge
└─ Edge.Animated      solid edge with a traveling dot

Installation

Requires @xyflow/react.

Usage

import { Canvas, Edge } from "@gremorie/rx-ai";

const edgeTypes = {
temporary: Edge.Temporary,
animated: Edge.Animated,
};

const edges = [
{ id: "e1", source: "1", target: "2", type: "animated" },
{ id: "e2", source: "2", target: "3", type: "temporary" },
];

export function Workflow() {
  return (
    <Canvas nodes={nodes} edges={edges} edgeTypes={edgeTypes}>
      {/* ... */}
    </Canvas>
  );
}

API

Edge.Temporary

A dashed simple-bezier edge. Renders BaseEdge with stroke-1 stroke-ring and strokeDasharray: "5, 5".

Accepts standard EdgeProps from @xyflow/react:

You do not call these props yourself - xyflow forwards them automatically.

Edge.Animated

A bezier edge with a circle (fill="var(--primary)", r="4") animating along the path via <animateMotion> (2-second loop). Resolves the actual handle coordinates by reading InternalNode data so the animation lines up with the rendered handles even after node movement.

Returns null if either the source or target node has not yet hydrated through useInternalNode.

Accepts standard EdgeProps:

Internal helpers:

• getHandleCoordsByPosition(node, position) - resolves the absolute handle coordinates from node.internals.
• getEdgeParams(source, target) - computes source and target points using Position.Right -> Position.Left.

The Animated variant is hardcoded to a left-to-right flow direction (source on the right of one node, target on the left of the next).

Composition

1. <Canvas> owns the edgeTypes registry. Pass Edge.Temporary and Edge.Animated keyed by whatever name you want to use in edge data.
2. Edge data carries type: "temporary" or type: "animated" (or your custom key) per edge. xyflow picks the matching component.
3. Style overrides flow through the style prop on each edge entry, or via CSS targeting .react-flow__edge[data-id="..."].

Variations

Speculative connection

Show a dashed Edge.Temporary while the user is still configuring the connection, then swap to a solid edge once committed.

const edges = [{ id: 'draft-1', source: 'a', target: 'b', type: 'temporary' }];

Live agent message flow

Use Edge.Animated to visualize messages flowing between agents in a multi-agent graph.

const edges = [
  { id: 'trace-1', source: 'planner', target: 'tools', type: 'animated' },
  { id: 'trace-2', source: 'tools', target: 'synthesizer', type: 'animated' },
];

Mix with default xyflow edges

xyflow's built-in edge types remain registered. Combine them with the Gremorie variants for variety.

const edgeTypes = {
  temporary: Edge.Temporary,
  animated: Edge.Animated,
  // built-ins: "default", "straight", "step", "smoothstep", "simplebezier"
};

Accessibility

• Pointer / keyboard parity: xyflow allows selecting edges with click and supports keyboard deletion (Backspace / Delete) when the edge has focus. Both variants are real SVG elements, so focus follows.

• Reduced motion: Edge.Animated uses SVG <animateMotion>. Wrap with CSS to disable the animation for users who prefer reduced motion:

  @media (prefers-reduced-motion: reduce) {
    .react-flow__edge animateMotion {
      display: none;
    }
  }

• Color contrast: var(--color-ring) (Temporary stroke) and var(--primary) (Animated dot) must clear 3:1 for non-text UI. Gremorie tokens meet this in both themes - re-verify if you swap to a custom palette.

• Screen readers: Edges by default carry no accessible name. If the relationship matters for users on assistive tech, supply aria-label on the wrapping Canvas or use xyflow's aria-labels config.

Related

• Canvas - the surface that hosts edges via edgeTypes
• Connection - the in-progress drag line shown before an edge is committed
• Node - the source and target of every edge