---
title: "Components"
description: "Key Svelte components exported by FlowDrop."
source: https://flowdrop.io/docs/editor/reference/components
site: FlowDrop documentation
---
# Components
<Card title="See them live in Storybook" icon="book" href="https://flowdrop-demo.netlify.app/storybook/">
  Browse every component interactively — props, states, and variants — in the FlowDrop Storybook.
</Card>

## Editor components

### `App`

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

```svelte
<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](/editor/reference/event-handlers).

### `WorkflowEditor`

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.

```svelte
<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.

```svelte
<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](/editor/node-types) for visual examples.

## Form components

### `SchemaForm`

Renders a form from JSON Schema definition.

```svelte
<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.

```svelte
<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.

```svelte
<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.

```svelte
<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.

```svelte
<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):

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

To show only specific settings categories:

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

#### Vanilla JS / `mountFlowDropApp`

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

```javascript
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

```text
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)
```