Component Library¶

Core React components for building node-based UIs.

NodeFactory¶

Registry for node type components.

import { nodeFactory } from 'pynodewidget';

// Register a node type
nodeFactory.register("custom", CustomNodeComponent);

// Check if registered
if (nodeFactory.has("custom")) {
  const Component = nodeFactory.get("custom");
}

// Get all node types for ReactFlow
const nodeTypes = nodeFactory.getAll();

<ReactFlow nodeTypes={nodeTypes} />

Methods: - register(type, component, options?) - Register node component - registerCustom(type, component) - Register custom (non-parameters) node - registerParameters(type, component) - Register parameters-based node - get(type) - Get component for type - has(type) - Check if type exists - getAll() - Get all as Record<string, Component>

NodeComponentBuilder¶

Builds optimized React components from schema.

import { NodeComponentBuilder } from 'pynodewidget';

// Build component from schema
const schema = {
  label: "Processor",
  layoutType: "horizontal",
  handleType: "button",
  header: { show: true, icon: "⚙️" }
};

const component = NodeComponentBuilder.buildComponent(schema);
nodeFactory.register("processor", component);

Features: - Pre-computes static configuration at build time - Resolves layout/handle components once - Returns memoized components for performance - Validates schema structure with clear errors

NodePanel¶

Sidebar with draggable node types.

import { NodePanel } from 'pynodewidget';

<NodePanel
  nodeTypes={[
    { type: "input", label: "Input", icon: "📥" },
    { type: "process", label: "Process", icon: "⚙️" },
    { type: "output", label: "Output", icon: "📤" }
  ]}
  onNodeDragStart={handleDragStart}
/>

FlowCanvas¶

Main ReactFlow canvas wrapper with common features.

import { FlowCanvas } from 'pynodewidget';

<FlowCanvas
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  onConnect={onConnect}
  nodeTypes={nodeTypes}
/>

Includes: minimap, controls, background, connection line.

FlowToolbar¶

Action buttons for common operations.

import { FlowToolbar } from 'pynodewidget';

<FlowToolbar
  onAutoLayout={() => onLayout("TB")}
  onExport={exportToJSON}
  onClear={() => {
    setNodes([]);
    setEdges([]);
  }}
/>

NodeForm¶

Renders field inputs from JSON schema.

import { NodeForm } from 'pynodewidget';

<NodeForm
  nodeId={node.id}
  parameters={node.data.parameters}
  values={values}
  onValueChange={(field, value) => updateValue(node.id, field, value)}
/>

Uses FieldFactory internally to render appropriate field types.

BaseHandle, ButtonHandle, LabeledHandle¶

Handle components from the Handle System.

import { BaseHandle, ButtonHandle, LabeledHandle } from 'pynodewidget';

<BaseHandle type="target" position="left" id="in" />
<ButtonHandle type="source" position="right" id="out" />
<LabeledHandle type="target" position="left" id="data" label="Data" />

ContextMenu¶

Right-click menu component.

import { ContextMenu } from 'pynodewidget';

<ContextMenu
  x={contextMenu.x}
  y={contextMenu.y}
  onDelete={handleDelete}
  onDuplicate={handleDuplicate}
  onClose={handleClose}
/>