Components

Key Svelte components exported by FlowDrop.

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.

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.

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