Components

See them live in Storybook

Browse every component interactively — props, states, and variants — in the FlowDrop Storybook.

Editor components

`App`

Full-featured application wrapper with sidebar, editor, navbar, and config panel.

<script>
  import { App } from '@flowdrop/flowdrop/editor';
</script>

<App
  workflow={myWorkflow}
  nodes={nodeMetadataList}
  endpointConfig={config}
  authProvider={auth}
  showNavbar={true}
/>

Prop	Type	Default	Description
`workflow`	`Workflow`	—	Initial workflow to load
`nodes`	`NodeMetadata[]`	—	Available node types (overrides API fetch)
`endpointConfig`	`EndpointConfig`	—	API endpoint configuration
`authProvider`	`AuthProvider`	—	Authentication provider
`height`	`string \| number`	`'100vh'`	Editor height
`width`	`string \| number`	`'100%'`	Editor width
`showNavbar`	`boolean`	`false`	Show the top navbar
`disableSidebar`	`boolean`	`false`	Hide the node sidebar
`mode`	`'edit' \| 'readonly' \| 'locked'`	`'edit'`	Interaction mode; `'readonly'`/`'locked'` disable all canvas editing
`showSettings`	`boolean`	`true`	Show settings gear in navbar
`showStatus`	`boolean`	`true`	Show the "Connected" status indicator in the navbar
`navbarTitle`	`string`	—	Custom title in navbar
`navbarActions`	`NavbarAction[]`	—	Custom action buttons in navbar
`pipelineId`	`string`	—	Pipeline ID for execution status display
`theme`	`FlowDropTheme \| FlowDropThemeName`	—	Visual theme — named built-in (`'default'`/`'minimal'`) or a custom theme object
`on*` handlers	see below	—	Flat lifecycle callbacks: `onBeforeSave`, `onAfterSave`, `onSaveError`, `onApiError`, `onWorkflowLoad`, `onBeforeSwap`, `onAfterSwap`
`features`	`FlowDropFeatures`	—	Feature flags
`instance`	`FlowDropInstance`	—	Per-instance state container; defaults to context, then the page-default instance

The <App> component takes flat on* event props. The grouped eventHandlers object is the mount API only — see Event Handlers.

Core canvas component using SvelteFlow. Renders nodes and edges with drag-and-drop, zoom, pan, and minimap. It reads its nodes, edges, and dimensions from the instance state container rather than from props.

<script>
  import { WorkflowEditor } from '@flowdrop/flowdrop/editor';
</script>

<WorkflowEditor {endpointConfig} />

Prop	Type	Default	Description
`endpointConfig`	`EndpointConfig`	—	API configuration
`mode`	`'edit' \| 'readonly' \| 'locked'`	`'edit'`	Interaction mode; `'readonly'`/`'locked'` disable all canvas editing
`openConfigSidebar`	`(node: WorkflowNode) => void`	—	Callback invoked when a node is clicked to open its config panel
`pipelineId`	`string`	—	Pipeline ID for fetching node execution status
`refreshTrigger`	`number`	`0`	Increment to force a re-fetch of node execution status from the server
`consoleOpen`	`boolean`	—	Whether the bottom console panel is open
`onToggleConsole`	`() => void`	—	Callback to toggle the console panel
`instance`	`FlowDropInstance`	—	Per-instance state container; defaults to context, then the page-default instance

`NodeSidebar`

Left sidebar displaying available node types organized by category.

<script>
  import { NodeSidebar } from '@flowdrop/flowdrop/editor';
</script>

<NodeSidebar {nodes} />

Prop	Type	Default	Description
`nodes`	`NodeMetadata[]`	`[]`	Node types to display
`selectedCategory`	`NodeCategory`	—	Pre-select a category filter
`activeFormat`	`WorkflowFormat`	—	Filter nodes by workflow format compatibility

`UniversalNode`

Dynamic node wrapper that resolves and renders the correct node component based on type. Automatically injects NodeStatusOverlay. Used internally by the editor.

Node components

All node components accept NodeComponentProps from the registry:

Component	Type	Description
`WorkflowNodeComponent`	`workflowNode`	Full-featured node with input/output port lists
`SimpleNode`	`simple`	Compact layout with header, icon, description
`SquareNode`	`square`	Minimal icon-only square design
`ToolNode`	`tool`	Agent tool node with badge indicator
`GatewayNode`	`gateway`	Conditional branching with multiple output ports
`TerminalNode`	`terminal`	Circular start/end node
`NotesNode`	`note`	Sticky note with markdown content

See Node Types for visual examples.

Form components

`SchemaForm`

Renders a form from JSON Schema definition.

<script>
  import { SchemaForm } from '@flowdrop/flowdrop/form';
</script>

<SchemaForm
  schema={jsonSchema}
  values={formValues}
  onChange={(values) => {
    /* handle change */
  }}
/>

`ConfigForm`

Configuration form with support for dynamic schemas, template variables, and external edit links.

Prop	Type	Default	Description
`node`	`WorkflowNode`	—	Node to configure (derives schema/values)
`schema`	`ConfigSchema`	—	Direct JSON Schema (alternative to `node`)
`uiSchema`	`UISchemaElement`	—	Layout definition for the form
`values`	`Record<string, unknown>`	—	Configuration values
`showUIExtensions`	`boolean`	`false`	Show UI extension fields
`workflowId`	`string`	—	For dynamic schema and variable API requests
`workflowNodes`	`WorkflowNode[]`	—	All nodes (for template variable resolution)
`workflowEdges`	`WorkflowEdge[]`	—	All edges (for template variable resolution)
`authProvider`	`AuthProvider`	—	Auth for API requests
`onChange`	`function`	—	Called on any field change
`onSave`	`function`	—	Called when form is saved
`onCancel`	`function`	—	Called when form is cancelled

`ConfigPanel`

Generic panel wrapper for displaying details and a configuration form.

Prop	Type	Default	Description
`title`	`string`	—	Panel title
`id`	`string`	—	Entity identifier
`description`	`string`	—	Description text
`details`	`DetailItem[]`	—	Key-value detail rows
`configTitle`	`string`	—	Config section title
`onClose`	`function`	—	Close callback
`children`	`Snippet`	—	Slot for form content

Field components

Component	Schema Match	Description
`FormTextField`	`type: "string"`	Text input
`FormTextarea`	`format: "multiline"`	Multi-line text
`FormNumberField`	`type: "number"` / `"integer"`	Number input
`FormToggle`	`type: "boolean"`	Toggle switch
`FormSelect`	`enum` or `oneOf`	Select dropdown
`FormCheckboxGroup`	`enum` + `multiple: true`	Checkbox group
`FormRangeField`	`format: "range"`	Range slider
`FormArray`	`type: "array"`	Dynamic array editor
`FormCodeEditor`	`format: "json"`	JSON/code editor (requires `form/code`)
`FormTemplateEditor`	`format: "template"`	Template editor with variables (requires `form/code`)
`FormMarkdownEditor`	`format: "markdown"`	Markdown editor (requires `form/markdown`)

Display components

`MarkdownDisplay`

Renders markdown content using the marked library.

<script>
  import { MarkdownDisplay } from '@flowdrop/flowdrop/display';
</script>

<MarkdownDisplay content="**Hello** world" />

Playground components

`Playground`

Full interactive playground with chat interface and session management.

Prop	Type	Default	Description
`workflowId`	`string`	—	Workflow to test (required)
`workflow`	`Workflow`	—	Pre-loaded workflow data
`mode`	`PlaygroundMode`	`'standalone'`	`'standalone'` or `'embedded'`
`initialSessionId`	`string`	—	Resume a previous session
`endpointConfig`	`EndpointConfig`	—	API configuration
`config`	`PlaygroundConfig`	—	Playground options
`onClose`	`function`	—	Close callback (for embedded mode)
`instance`	`FlowDropInstance`	—	Per-instance state container; defaults to context, then the page-default instance

Interrupt components

Component	Interrupt Type	Description
`InterruptBubble`	All	Container that renders the correct prompt
`ConfirmationPrompt`	`confirmation`	Yes/No approval
`ChoicePrompt`	`choice`	Selection from options
`TextInputPrompt`	`text_input`	Text entry
`FormPrompt`	`form`	JSON Schema form
`ReviewPrompt`	`review`	Field change review with diffs

Settings components

`ThemeToggle`

Button to cycle through light/dark/auto themes.

<script>
  import { ThemeToggle } from '@flowdrop/flowdrop/settings';
</script>

<ThemeToggle />

`SettingsPanel`

Tabbed settings interface for managing user preferences across categories (theme, editor, UI, behavior, API). Can be embedded anywhere in your layout.

<script>
  import { SettingsPanel } from '@flowdrop/flowdrop/settings';
</script>

<SettingsPanel
  categories={['theme', 'editor', 'ui']}
  showSyncButton={false}
  showResetButton={true}
  onSettingsChange={(category, values) => {
    /* handle change */
  }}
  onClose={() => {
    /* handle close */
  }}
/>

Prop	Type	Default	Description
`categories`	`SettingsCategory[]`	All categories	Which tabs to display. Options: `"theme"`, `"editor"`, `"ui"`, `"behavior"`, `"api"`
`showSyncButton`	`boolean`	`true`	Show the "Sync to Cloud" button in the footer
`showResetButton`	`boolean`	`true`	Show the reset/reset-all buttons in the footer
`onSettingsChange`	`function`	—	Called when any setting changes with `(category, values)`
`onClose`	`function`	—	Close callback (also renders a "Close" button in the footer)
`class`	`string`	—	Custom CSS class

`SettingsModal`

Modal dialog wrapper around SettingsPanel. Provides backdrop, close-on-escape, and open/close animations.

<script>
  import { SettingsModal } from '@flowdrop/flowdrop/settings';
  let open = $state(false);
</script>

<button onclick={() => (open = true)}>Open Settings</button>
<SettingsModal bind:open showSyncButton={false} />

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the modal is open (bindable)
`categories`	`SettingsCategory[]`	All categories	Which tabs to display
`showSyncButton`	`boolean`	`true`	Show the "Sync to Cloud" button
`showResetButton`	`boolean`	`true`	Show the reset buttons
`onClose`	`function`	—	Called when the modal is closed
`onSettingsChange`	`function`	—	Called when any setting changes
`class`	`string`	—	Custom CSS class for the modal

Hiding features

To hide the cloud sync button (e.g. for self-hosted deployments):

<SettingsModal bind:open showSyncButton={false} />

To show only specific settings categories:

<SettingsModal bind:open categories={['theme', 'editor']} />

Vanilla JS / `mountFlowDropApp`

When using the vanilla JS mount API, pass settings modal options via FlowDropMountOptions:

import { mountFlowDropApp, createEndpointConfig } from '@flowdrop/flowdrop';

const app = await mountFlowDropApp(document.getElementById('editor'), {
  endpointConfig: createEndpointConfig('/api/flowdrop'),
  showSettings: true,

  // Customize the settings modal
  settingsCategories: ['theme', 'editor', 'ui'], // hide Behavior & API tabs
  showSettingsSyncButton: false, // hide "Sync to Cloud"
  showSettingsResetButton: true // show reset (default)
});

Option	Type	Default	Description
`showSettings`	`boolean`	`true`	Show the settings gear icon in the navbar
`settingsCategories`	`SettingsCategory[]`	All categories	Which tabs to display in the settings modal
`showSettingsSyncButton`	`boolean`	`true`	Show the "Sync to Cloud" button
`showSettingsResetButton`	`boolean`	`true`	Show the reset buttons

Status components

Component	Description
`NodeStatusOverlay`	Displays execution status on nodes (pending, running, completed, error)
`StatusIcon`	Color-coded status icon
`PipelineStatus`	Full pipeline execution view with logs sidebar

Component hierarchy

App
├── Navbar (Logo, workflow name, save/export, custom actions)
├── NodeSidebar (search, category groups, draggable node cards)
├── WorkflowEditor (SvelteFlow canvas)
│   └── UniversalNode
│       ├── NodeStatusOverlay
│       └── [Node Component] (WorkflowNode, SimpleNode, etc.)
└── ConfigSidebar
    └── ConfigForm (JSON Schema form with template variables)