DepthAI Pipeline Lib

React components and parsing utilities for rendering DepthAI pipeline graphs.

Purpose

@luxonis/depthai-pipeline-lib converts DepthAI pipeline payloads into renderable graph data and provides a React Flow based canvas for displaying pipeline structure and runtime state.

Use this package when an application needs to:

• Parse raw pipeline graph payloads from a DepthAI backend.
• Parse live node and handle runtime state.
• Render an interactive pipeline canvas.
• Display device/host nodes, grouped nodes, bridge edges, connected handles, and runtime timing/state overlays.

Installation

npm install @luxonis/depthai-pipeline-lib

The package expects the host application to provide compatible React and React DOM versions.

Imports

import {
	PipelineCanvas,
	parsePipeline,
	parsePipelineState,
} from '@luxonis/depthai-pipeline-lib';
import '@luxonis/depthai-pipeline-lib/styles';

Basic Usage

import {
	PipelineCanvas,
	parsePipeline,
	parsePipelineState,
} from '@luxonis/depthai-pipeline-lib';
import '@luxonis/depthai-pipeline-lib/styles';

export function PipelineView({ rawPipeline, rawPipelineState }) {
	const pipeline = rawPipeline ? parsePipeline(rawPipeline) : null;
	const pipelineState = rawPipelineState
		? parsePipelineState(rawPipelineState)
		: null;

	return (
		<PipelineCanvas
			pipeline={pipeline}
			pipelineState={pipelineState}
		/>
	);
}

API Documentation

TSDoc comments in src/ are the source of truth for generated API reference documentation.

Generate the TypeDoc JSON API model from the repository root:

npm run docs:api-json:pipelines

The generated JSON is written to:

dist/docs-api/depthai-pipeline-lib.json

This file is an intermediate build artifact for the docs-content pipeline. Do not edit it manually.

Development

From the repository root:

npm run build:depthai-pipeline-lib

On Windows:

npm run build:depthai-pipeline-lib:win