--- title: "API overview" description: "Module structure and exports of the FlowDrop library." source: https://flowdrop.io/docs/editor/reference/api-overview site: FlowDrop documentation --- # API overview FlowDrop is organized as tree-shakable sub-modules. Import only what you need to minimize bundle size. ## Module structure ### `@flowdrop/flowdrop/core` Types and utilities with zero heavy dependencies. Safe to import anywhere without pulling in Svelte components or CodeMirror. **Key exports:** | Category | Purpose | Exports | | -------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | | Core types | The workflow graph data model | `Workflow`, `WorkflowNode`, `WorkflowEdge`, `NodeMetadata`, `NodePort` | | Node types | Built-in node type enums | `BuiltinNodeType`, `NodeCategory` | | Auth providers | Strategies for authenticating backend requests | `AuthProvider`, `StaticAuthProvider`, `CallbackAuthProvider`, `NoAuthProvider` | | Configuration | Library and endpoint setup | `FlowDropConfig`, `EndpointConfig`, `createEndpointConfig` | | Event handlers | Editor event hooks and feature flags | `FlowDropEventHandlers`, `FlowDropFeatures` | | Port system | Port typing and connection compatibility | `PortConfig`, `PortDataTypeConfig`, `PortCompatibilityRule` | | UI Schema | Declarative layout for generated forms | `UISchemaElement`, `UISchemaControl`, `UISchemaGroup` | | Form types | Field-level form schema | `FieldSchema`, `FieldType`, `SchemaFormProps` | | Agent Spec | Import/export interop with Agent Spec | Types and adapters | | Theme | Theme state and switching | `theme`, `resolvedTheme`, `setTheme`, `toggleTheme` | | Utilities | Graph and UI helpers | colors, icons, node types, connections, cycle detection | ### `@flowdrop/flowdrop/editor` Visual workflow editor with `@xyflow/svelte`. **Key exports:** | Category | Purpose | Exports | | --------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | Components | Top-level editor UI | `WorkflowEditor`, `App`, `NodeSidebar`, `ConfigForm`, `ConfigPanel` | | Node components | Per-node-type renderers | `WorkflowNodeComponent`, `SimpleNode`, `ToolNode`, `NotesNode`, `GatewayNode`, `SquareNode`, `TerminalNode`, `UniversalNode` | | Mount functions | Imperative mount/unmount entry points | `mountFlowDropApp`, `mountWorkflowEditor`, `unmountFlowDropApp` | | Helpers | Programmatic workflow and styling operations | `WorkflowOperationsHelper`, `NodeOperationsHelper`, `EdgeStylingHelper`, `ConfigurationHelper` | | Store classes | Instance-scoped editor state (resolve with `getInstance()`) | `WorkflowStore`, `HistoryStore`, `HistoryService`, `PortCoordinateStore` | | Instance access | Create and resolve editor instances | `getInstance`, `provideInstance`, `createFlowDropInstance` | | Services | API client, toasts, and node execution | `EnhancedFlowDropApiClient` / `ApiContext`, toast service, node execution | | Registration | Register custom nodes and plugins | `NodeComponentRegistry` (`fd.nodes`), `createPlugin`, `isValidNamespace` | ### `@flowdrop/flowdrop/form` Dynamic form generation from JSON Schema. **Key exports:** | Category | Purpose | Exports | | ----------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------- | | Components | Form renderer and field wrappers | `SchemaForm`, `FormField`, `FormFieldWrapper` | | Field types | Built-in field widgets | `FormTextField`, `FormTextarea`, `FormNumberField`, `FormToggle`, `FormSelect`, `FormArray`, `FormCheckboxGroup`, `FormRangeField` | | UISchema | Layout and grouping renderers | `FormFieldset`, `FormUISchemaRenderer` | | Registry | Register custom field types | `FieldComponentRegistry` (`fd.fields`), matchers | ### `@flowdrop/flowdrop/form/code` Code and JSON editor support (adds ~300KB, requires CodeMirror). **Key exports:** | Category | Purpose | Exports | | ------------ | ------------------------ | ------------------------------------------------------------------------ | | Components | Code and template editors | `FormCodeEditor`, `FormTemplateEditor` | | Registration | Register the field types | `registerCodeEditorField(fd.fields)`, `registerTemplateEditorField(fd.fields)` | ### `@flowdrop/flowdrop/form/markdown` Markdown editor support (requires CodeMirror + `@codemirror/lang-markdown`). **Key exports:** | Category | Purpose | Exports | | ------------ | ----------------------- | ---------------------------------------- | | Component | Markdown editor | `FormMarkdownEditor` | | Registration | Register the field type | `registerMarkdownEditorField(fd.fields)` | ### `@flowdrop/flowdrop/display` Content rendering components. **Key exports:** | Category | Purpose | Exports | | --------- | ----------------------------------------- | ---------------- | | Component | Renders markdown via the `marked` library | `MarkdownDisplay` | ### `@flowdrop/flowdrop/playground` Interactive workflow testing and human-in-the-loop. **Key exports:** | Category | Purpose | Exports | | --------------- | -------------------------------- | ------------------------------------------------------------------------------------------------ | | Components | Playground UI | `Playground`, `PlaygroundModal`, `ChatPanel`, `SessionManager`, `ExecutionLogs`, `MessageBubble` | | Interrupts | Human-in-the-loop prompt UI | `InterruptBubble`, `ConfirmationPrompt`, `ChoicePrompt`, `TextInputPrompt`, `FormPrompt`, `ReviewPrompt` | | Services | Session and interrupt logic | `PlaygroundService`, `InterruptService` | | Store | Playground and interrupt state | playground state, interrupt management | | Mount functions | Imperative mount/unmount | `mountPlayground`, `unmountPlayground` | | Types | Session and interrupt types | `PlaygroundSession`, `PlaygroundMessage`, `Interrupt`, `InterruptType` | ### `@flowdrop/flowdrop/settings` User preferences with hybrid persistence. **Key exports:** | Category | Purpose | Exports | | ---------- | ---------------------- | ---------------------------------------------------------------------- | | Components | Settings and theme UI | `ThemeToggle`, `SettingsPanel`, `SettingsModal` | | Store | Settings state | theme, editor, UI, behavior, API categories | | Types | Settings types | `FlowDropSettings`, `ThemeSettings`, `EditorSettings`, `UISettings` | ### `@flowdrop/flowdrop/styles` CSS styling with design tokens. **Exports:** CSS files with `--fd-*` custom properties for theming. ### `@flowdrop/flowdrop` Full bundle — re-exports from all sub-modules for convenience. Use this when bundle size is not a concern. ## REST API FlowDrop expects a backend implementing these endpoint groups. Not all are required — see [Backend Implementation](/editor/integration/backend-implementation) for which tier each belongs to. ### Required (Tier 1 — Minimum Viable Backend) | Method | Path | Purpose | | ------ | ---------------- | ------------------------------ | | `GET` | `/health` | Health check (called on mount) | | `GET` | `/nodes` | List available node types | | `GET` | `/workflows/:id` | Load a workflow | | `POST` | `/workflows` | Create a new workflow | | `PUT` | `/workflows/:id` | Update a workflow | ### Recommended (Tier 2 — Full Editor) | Method | Path | Purpose | | -------- | ---------------- | --------------------------------------- | | `GET` | `/categories` | Category definitions for sidebar groups | | `GET` | `/port-config` | Port data types and compatibility rules | | `GET` | `/nodes/:id` | Get single node metadata | | `GET` | `/workflows` | List all workflows | | `DELETE` | `/workflows/:id` | Delete a workflow | | `GET` | `/system/config` | Runtime configuration | ### Optional (Tier 3 — Advanced Features) | Group | Paths | Purpose | | ---------- | ------------------------------------------------------------ | ------------------------ | | Execution | `/workflows/{id}/execute`, `/executions/{id}` | Workflow execution | | Pipelines | `/pipeline/{id}` | Pipeline status & logs | | Playground | `/workflows/{id}/playground/sessions`, `/playground/sessions/{id}/messages` | Interactive testing | | Interrupts | `/interrupts/{id}`, `/interrupts/{id}/cancel` | Human-in-the-loop | | Agent Spec | `/agentspec` | Agent Spec import/export | See the [API reference](/api) for full endpoint documentation, or follow the [Backend: Express.js](/tutorials/recipes/backend-express) recipe to get started quickly.