Embedding the Editor

FlowDrop Editor

What you’ll learn: How to install FlowDrop and mount a blank workflow editor canvas in your application.

Notice the empty canvas above — no nodes in the sidebar, no workflow loaded. This is the most minimal FlowDrop setup: just the editor itself. You can already zoom (scroll wheel) and pan (click and drag the background).

Mount the editor

After installing FlowDrop, two imports are all you need:

import { mountFlowDropApp } from '@flowdrop/flowdrop/editor';
import '@flowdrop/flowdrop/styles';

Then mount it into any container element:

const app = await mountFlowDropApp(document.getElementById('editor'), {
  height: '600px'
});

That’s it. The editor renders a pannable, zoomable canvas with a grid background.

What mountFlowDropApp returns

The mount function returns a controller object you can use later:

const app = await mountFlowDropApp(container, options);

// Check if the user has unsaved changes
app.isDirty();

// Get the current workflow data
app.getWorkflow();

// Clean up when done
app.destroy();

Using with Svelte

If you’re building a Svelte application, you can use the WorkflowEditor component directly:

<script>
  import { WorkflowEditor } from '@flowdrop/flowdrop/editor';
  import '@flowdrop/flowdrop/styles';
</script>

<div style="height: 600px;">
  <WorkflowEditor />
</div>

What’s next

The editor is running, but there’s nothing to build with yet. Before adding nodes, you need to tell FlowDrop where your backend API lives.

---

Tutorial progress: Step 1 of 5

Next: Configuring Endpoints →