Custom Node Kit

Badges, method pills, status dots and handles — a tour of custom node building blocks.

Drag nodes, pan and zoom — this is a live React Flow canvas.

How it works

Custom nodes are plain React components. Register them in a stable nodeTypes map and compose handles, badges and live state however your domain needs.

Source code

tsx

const nodeTypes = { api: ApiNode, cache: CacheNode };

function ApiNode({ data }) {
  return (
    <div className="api-node">
      <Handle type="target" position={Position.Left} />
      <span className="method">{data.method}</span> {data.path}
      <Handle type="source" position={Position.Right} />
    </div>
  );
}

Further reading: https://reactflow.dev/learn