Quick start
Get a live FlowDrop editor running in your app in minutes — Svelte, React, Vue, vanilla JS, or Drupal.
You're three steps from a working workflow editor: install the package, point it at a backend, and mount it. Pick your framework below for copy‑paste setup, or follow the universal path underneath.
Choose your framework
Svelte
Use FlowDrop as a native Svelte 5 component.
React
Mount into a useEffect with a container ref.
Vue
Mount on onMounted, tear down on unmount.
Vanilla JS
Drop into any element — no framework needed.
Drupal
Install the module; the editor ships with it.
1. Install
npm install @flowdrop/flowdrop @iconify/svelte @xyflow/svelteNo Svelte required in your app.
FlowDrop is built with Svelte 5 internally, but you don't need to write Svelte to use it. The mount API works in React, Vue, vanilla JS, or any framework.
2. Mount the editor
This is the universal path — it works anywhere. Drop the editor into any element and point it at your backend:
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'),
});<div id="editor" style="height: 100vh"></div>That's the happy path — you now have a live editor wired to your backend. For framework‑idiomatic setup (Svelte components, React refs, Vue lifecycle), use the tiles above.
3. Connect a backend
FlowDrop needs a backend.
As a frontend editor, it relies on a backend to serve node definitions, store workflows, and run executions. Until one is connected, the canvas loads but has no nodes to place.
You have two ways to get there:
Run a ready-made server
Skip the backend work — run a server that already speaks the FlowDrop API, like the Drupal module.
Build your own
Implement the REST contract on your own stack — the guide lists every endpoint FlowDrop calls.
Going further
The happy path above is all most apps need. Expand the sections below when you hit a specific case.