# Pipeline Canvas

TypeScript source: `components/PipelineCanvas.tsx`

## Components

### PipelineCanvas

Source: `components/PipelineCanvas.tsx:177`

```ts
React.FC<PipelineCanvasProps>
```

Renders an interactive DepthAI pipeline graph.

#### Remarks

The component expects graph data produced by parsePipeline and can overlay runtime node/handle state produced by
parsePipelineState. It wraps the graph in a React Flow provider, lays nodes out automatically until the user drags a node, and
exposes a built-in legend panel.

#### Example

```tsx
<PipelineCanvas pipeline={pipeline} pipelineState={pipelineState} />
```

## Types

### PipelineCanvasProps

Source: `components/PipelineCanvas.tsx:29`

Props for PipelineCanvas.

#### Members

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `header?` | `React.ReactNode` |  | Optional content rendered in the top-center panel above the graph. |
| `isDebugging?` | `boolean` | `false` | Shows debugging-oriented legend entries when enabled. |
| `pipeline` | `Pipeline | null` |  | Parsed pipeline graph to render, or `null` while pipeline data is loading. |
| `pipelineState` | `PipelineState[] | null` | | Runtime state for nodes and IO handles, or `null` when live state is unavailable.
|