Skip to content
FlowDrop™
Get started

Quick Start

FlowDrop is a visual workflow editor you embed directly in your application. Below is a live instance — drag nodes from the left sidebar onto the canvas, connect their ports, and click Save. This is exactly what your users will see.

FlowDrop Editor

Svelte Component (Simplest)

Section titled “Svelte Component (Simplest)”

Import the editor component directly in a Svelte 5 project:

<script lang="ts">
  import { WorkflowEditor } from '@flowdrop/flowdrop';
  import '@flowdrop/flowdrop/styles/base.css';
</script>


<WorkflowEditor />

5 lines. One fully-functional workflow editor.

Mount API (Any Framework)

Section titled “Mount API (Any Framework)”

For vanilla JS, React, Vue, Angular, or any framework — use the mount API:

<script lang="ts">
  import '@flowdrop/flowdrop/styles';
  import { mountFlowDropApp, createEndpointConfig } from '@flowdrop/flowdrop';
  import { onMount } from 'svelte';


  let container: HTMLDivElement;


  onMount(() => {
    const app = mountFlowDropApp(container, {
      endpointConfig: createEndpointConfig('/api/flowdrop'),
      eventHandlers: {
        onDirtyStateChange: (isDirty) => console.log('Unsaved changes:', isDirty),
        onAfterSave: (workflow) => console.log('Saved!', workflow)
      }
    });


    return () => app.destroy();
  });
</script>


<div bind:this={container} style="width: 100%; height: 600px;" />

Vanilla JS (with Vite)

Section titled “Vanilla JS (with Vite)”

FlowDrop works in any project that bundles ES modules. Here’s a complete setup with Vite:

1. Scaffold a project

Terminal window
npm create vite@latest my-flowdrop-app -- --template vanilla
cd my-flowdrop-app
npm install @flowdrop/flowdrop @iconify/svelte @xyflow/svelte svelte

2. Configure Vite

vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';


export default defineConfig({
  plugins: [svelte()],
  optimizeDeps: {
    exclude: ['@flowdrop/flowdrop', '@xyflow/svelte']
  }
});

You’ll also need a minimal Svelte config:

svelte.config.js
export default {};

3. Create the editor page

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Workflow Editor</title>
    <style>
      body { margin: 0; font-family: system-ui, sans-serif; }
      #editor { width: 100vw; height: 100vh; }
    </style>
  </head>
  <body>
    <div id="editor"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
main.js
import { mountFlowDropApp } from '@flowdrop/flowdrop/editor';
import { createEndpointConfig } from '@flowdrop/flowdrop/core';
import '@flowdrop/flowdrop/styles';


const app = await mountFlowDropApp(document.getElementById('editor'), {
  endpointConfig: createEndpointConfig('/api/flowdrop'),
  eventHandlers: {
    onDirtyStateChange: (isDirty) => {
      document.title = isDirty ? '● Unsaved Changes' : 'My Workflow Editor';
    },
    onAfterSave: (workflow) => console.log('Saved!', workflow)
  }
});

4. Run it

Terminal window
npm run dev

Open http://localhost:5173 — you have a full workflow editor.

5. Programmatic control

The mount function returns an API object you can use from anywhere in your code:

// Check for unsaved changes
if (app.isDirty()) {
  const confirmed = confirm('You have unsaved changes. Save now?');
  if (confirmed) await app.save();
}


// Read the current workflow as JSON
const workflow = app.getWorkflow();
console.log(JSON.stringify(workflow, null, 2));


// Export the workflow as a downloadable JSON file
app.export();


// Clean up when navigating away
window.addEventListener('beforeunload', () => app.destroy());

What’s Next?

Section titled “What’s Next?”

New to FlowDrop? Follow the tutorial — it builds a complete integration step by step:

→ Tutorial: Embedding the Editor (Step 1 of 5)

Already have a backend? Jump straight to connecting it:

Going deeper: