#@shipplane/visualizer-react

React bindings for @shipplane/visualizer — renders a @shipplane/core workflow as an interactive graph, and a full editor panel for building one.

#Install

npm install @shipplane/visualizer-react

Peer dependencies: react and react-dom (^19).

#Usage

import "@shipplane/visualizer-react/style.css";
import { WorkflowGraph } from "@shipplane/visualizer-react";
import { workflow } from "@shipplane/core";

const wf = workflow("init").task("install", { type: "install_bin" }).toJSON();

export function DeployGraph() {
  return <WorkflowGraph workflow={wf} onSelectTask={(taskId) => console.log(taskId)} />;
}

Import @shipplane/visualizer-react/style.css once per app — components render unstyled without it.

#Public API

• WorkflowGraph, useWorkflowGraph — renders/derives a graph from a WorkflowDefinition (and optional WorkflowSnapshot for run-status coloring).
• WorkflowEditorPanel, WorkflowEditor — full editing UI (graph + task form) over a workflow definition.
• useWorkflowComposer — headless state hook for adding/updating/deleting tasks, backing a custom editor UI.
• createWorkflowDraft — re-exported from @shipplane/visualizer, creates an empty workflow definition.
• buildTaskTypes, buildParamsMeta, splitTaskParams — helpers for driving task type/param forms from a task registry.