Vanilla JS

Drop a FlowDrop editor into any page — no framework required.

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

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.