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 install @flowdrop/flowdrop @iconify/svelte @xyflow/svelteYour 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.