Skip to main content
With no framework, the mount API is all you need: give FlowDrop an element and an endpoint, and it takes over the rest.

​
1. Install

npm install @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
Your bundler needs the Svelte plugin.FlowDrop ships its UI as Svelte 5 components, so your bundler must compile them (you won’t write any Svelte). With Vite, add @sveltejs/vite-plugin-svelte and svelte as dev dependencies and enable the plugin — see the Bundler setup section of the quick start for the full config.

​
2. Mount the editor

<div id="flowdrop-editor" style="height: 100vh"></div>

<script type="module">
  import { mountFlowDropApp } from '@flowdrop/flowdrop/editor';
  import { createEndpointConfig } from '@flowdrop/flowdrop/core';
  import '@flowdrop/flowdrop/styles';

  const app = await mountFlowDropApp(
    document.getElementById('flowdrop-editor'),
    {
      endpointConfig: createEndpointConfig('/api/flowdrop'),
      eventHandlers: {
        onAfterSave: async (workflow) => console.log('Saved:', workflow.id),
      },
    }
  );
</script>
The returned app handle lets you drive the editor programmatically — app.save(), app.getWorkflow(), app.isDirty(), and app.destroy() when you remove it from the page.
FlowDrop needs a backend.It serves nodes and stores workflows. Point endpointConfig at your API, or run a ready-made server.

​
Next steps

What is a workflow?

The mental model behind the editor.

Mount API reference

Every option and method on the mount handle.