FlowDrop™
Build beautiful workflow editors in minutes, not months.
An awesome workflow editor built with Svelte 5 and @xyflow/svelte.
You own the backend. You own the data. You own the orchestration.
Quickstart •
Features •
Integration •
Docs
Build AI-powered workflows with drag-and-drop simplicity. Connect nodes, configure inputs/outputs, and visualize your entire pipeline.
## Why FlowDrop?
Most workflow tools are SaaS platforms that lock you in. Your data lives on their servers. Your execution logic runs in their cloud. You pay per workflow, per user, per run.
**FlowDrop is different.**
FlowDrop is a pure visual editor. You implement the backend. You control the orchestration. Your workflows run on your infrastructure, with your security policies, at your scale.
No vendor lock-in. No data leaving your walls. No surprise bills.
```bash
npm install @flowdrop/flowdrop
```
> **Note:** FlowDrop supports **one editor instance per page** (module-level singleton stores). See [Architecture Notes](#architecture-notes) for details.
You get a production-ready workflow UI. You keep full control of everything else.
## Quickstart
```svelte
```
**5 lines. One fully-functional workflow editor.**
## Features
| | |
| ------------------------- | ------------------------------------------------------------------------- |
| **Visual Editor Only** | Pure UI component. No hidden backend, no external dependencies |
| **You Own Everything** | Your data, your servers, your orchestration logic, your security policies |
| **Backend Agnostic** | Connect to any API: Drupal, Laravel, Express, FastAPI, or your own |
| **8 Built-in Node Types** | From simple icons to complex gateway logic |
| **Framework Flexible** | Use as Svelte component or mount into React, Vue, Angular, or vanilla JS |
| **Deploy Anywhere** | Runtime config means build once, deploy everywhere |
## Architecture Notes
- **Single instance per page.** FlowDrop uses module-level singleton stores for state management. Only one FlowDrop editor instance can exist on a page at a time.
- **Svelte 5 required.** FlowDrop uses Svelte 5 runes (`$state`, `$derived`, `$effect`) throughout. Svelte 4 is not supported.
- **Modern browsers only.** The library targets ES2020+ and does not include polyfills for older browsers.
## Node Types
FlowDrop ships with 8 beautifully designed node types:
| Type | Purpose |
| ---------- | --------------------------------------- |
| `default` | Full-featured nodes with inputs/outputs |
| `simple` | Compact, space-efficient layout |
| `square` | Icon-only minimal design |
| `tool` | AI agent tool nodes |
| `gateway` | Conditional branching logic |
| `terminal` | Start/end workflow points |
| `note` | Markdown documentation blocks |
| `idea` | Conceptual BPMN-like flow nodes |
From simple triggers to complex branching logic, each node type is designed for specific workflow patterns.
## Themes
FlowDrop includes a theme system with built-in light/dark support:
```svelte
```
Themes bundle a visual skin (CSS token palette) with behavioral UI defaults. You can also pass a custom theme object with your own skin tokens for full control over the light and dark palettes.
```javascript
// Via the mount API
const app = await mountFlowDropApp(container, {
theme: 'minimal'
// or a custom theme object:
// theme: { name: 'minimal', skin: { tokens: { primary: '#e11d48' } } }
});
```
## Customising messages
Every user-facing string flows through a typed `Messages` tree. Pass a callback to override any subset:
```svelte
({ form: { schema: { save: 'Apply' } } })} />
```
Wire the callback to your i18n library (paraglide-js, sveltekit-i18n, etc.) — locale changes propagate automatically. See the [i18n & Custom Messages guide](https://docs.flowdrop.io/guides/i18n) for the full shape and a paraglide-js worked example.
## Sub-Module Exports
FlowDrop provides tree-shakeable sub-module exports so you can import only what you need:
| Export Path | Contents |
| ---------------------------------- | -------------------------------------------------- |
| `@flowdrop/flowdrop` | Full library (components, stores, services, types) |
| `@flowdrop/flowdrop/core` | Types and utilities only (no heavy dependencies) |
| `@flowdrop/flowdrop/editor` | WorkflowEditor, stores, services |
| `@flowdrop/flowdrop/form` | SchemaForm, form fields, registry |
| `@flowdrop/flowdrop/form/code` | Code editor field (CodeMirror) |
| `@flowdrop/flowdrop/form/markdown` | Markdown editor field |
| `@flowdrop/flowdrop/display` | MarkdownDisplay component |
| `@flowdrop/flowdrop/playground` | Playground components and services |
| `@flowdrop/flowdrop/settings` | SettingsPanel, stores, services |
| `@flowdrop/flowdrop/styles` | Base CSS stylesheet |
| `@flowdrop/flowdrop/schema` | Workflow JSON schema |
| `@flowdrop/flowdrop/openapi` | OpenAPI spec (YAML) for the FlowDrop backend API |
### OpenAPI spec
The full OpenAPI spec for the FlowDrop backend API ships with the package, version-matched to your installed release. It defines the node-config / form-element schema (`ConfigProperty`), playground messages, and every endpoint. Resolve it from `@flowdrop/flowdrop/openapi`, or read it directly at `node_modules/@flowdrop/flowdrop/dist/openapi/v1/openapi.yaml`. Point your AI assistant at that file when authoring node config schemas. The latest spec is also browsable at [api.flowdrop.io](https://api.flowdrop.io).
## Integration
### Svelte (Native)
```svelte
```
### Vanilla JS / React / Vue / Angular
```javascript
import { mountFlowDropApp, createEndpointConfig } from '@flowdrop/flowdrop';
const app = await mountFlowDropApp(document.getElementById('editor'), {
workflow: myWorkflow,
endpointConfig: createEndpointConfig('/api/flowdrop'),
eventHandlers: {
onDirtyStateChange: (isDirty) => console.log('Unsaved changes:', isDirty),
onAfterSave: (workflow) => console.log('Saved!', workflow)
}
});
// Full control over the editor
app.save();
app.getWorkflow();
app.destroy();
```
### Enterprise Integration
```javascript
import { mountFlowDropApp, CallbackAuthProvider } from '@flowdrop/flowdrop';
const app = await mountFlowDropApp(container, {
// Dynamic token refresh
authProvider: new CallbackAuthProvider({
getToken: () => authService.getAccessToken(),
onUnauthorized: () => authService.refreshToken()
}),
// Lifecycle hooks
eventHandlers: {
onBeforeUnmount: (workflow, isDirty) => {
if (isDirty) saveDraft(workflow);
}
},
// Auto-save, toasts, and more
features: {
autoSaveDraft: true,
autoSaveDraftInterval: 30000
}
});
```
## API Configuration
Connect to any backend in seconds:
```typescript
import { createEndpointConfig } from '@flowdrop/flowdrop';
const config = createEndpointConfig('https://api.example.com', {
endpoints: {
nodes: { list: '/nodes', get: '/nodes/{id}' },
workflows: {
list: '/workflows',
get: '/workflows/{id}',
create: '/workflows',
update: '/workflows/{id}',
execute: '/workflows/{id}/execute'
}
}
});
```
## Customization
The recommended way to customize FlowDrop's appearance is through the [theme system](#themes). For fine-grained control, you can also override individual CSS custom properties:
```css
:root {
--fd-background: #0a0a0a;
--fd-primary: #6366f1;
--fd-border: #27272a;
--fd-foreground: #fafafa;
}
```
## Deploy
### Docker (Recommended)
```bash
cd ../../apps/example-client-docker
cp env.example .env
docker-compose up -d
```
### Node.js
```bash
npm run build
FLOWDROP_API_BASE_URL=http://your-backend/api node build
```
Runtime configuration means you build once and deploy to staging, production, or anywhere else with just environment variables.
## Documentation
| Resource | Description |
| -------------------------------------------------------------------------------------------- | ------------------------ |
| [QUICK_START.md](https://docs.flowdrop.io/getting-started/installation/) | Get running in 5 minutes |
| [API Documentation](https://api.flowdrop.io/v1/) | REST API specification |
| [CHANGELOG.md](https://github.com/flowdrop-io/flowdrop/blob/main/libs/flowdrop/CHANGELOG.md) | Version history |
## Development
```bash
pnpm install # Install dependencies
pnpm dev # Start dev server
pnpm build # Build library
pnpm test # Run all tests
pnpm storybook # Launch Storybook
```
## Contributing
FlowDrop is stabilizing. Contributions will open soon. Star the repo to stay updated.
FlowDrop - The visual workflow editor you own completely
Built with ❤️ Svelte 5 and @xyflow/svelte