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

npm install @flowdrop/flowdrop @iconify/svelte @xyflow/svelte

No 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.

Peer dependencies

Install these alongside @flowdrop/flowdrop:

Package	Version	Required
svelte	^5.0.0	Yes (internal runtime)
@xyflow/svelte	^1.2	Yes (for editor module)
@iconify/svelte	^5.0.0	Yes (for icons)

Entry points (keep your bundle small)

Import from the most specific entry point you need — the main entry is a slim front door, so form fields, display components, and the playground live in their own sub‑modules.

Entry point	Description
@flowdrop/flowdrop	Bootstrap front door — App, mount functions, instances, config helpers, auth providers
@flowdrop/flowdrop/core	Types and utilities (zero heavy dependencies)
@flowdrop/flowdrop/editor	Visual workflow editor components
@flowdrop/flowdrop/form	Dynamic form field components
@flowdrop/flowdrop/form/code	Code and JSON editor fields (requires CodeMirror)
@flowdrop/flowdrop/form/markdown	Markdown editor field (requires CodeMirror)
@flowdrop/flowdrop/form/full	All form components pre-bundled
@flowdrop/flowdrop/display	Display-only components (MarkdownDisplay)
@flowdrop/flowdrop/playground	Interactive workflow playground
@flowdrop/flowdrop/settings	Settings UI components and stores
@flowdrop/flowdrop/styles	Base CSS styles and design tokens

Optional: CodeMirror (code & markdown editors)

Only needed if you use the form/code or form/markdown entry points:

npm install codemirror @codemirror/state @codemirror/view @codemirror/commands \
  @codemirror/language @codemirror/theme-one-dark @codemirror/autocomplete \
  @codemirror/lang-json @codemirror/lang-markdown @codemirror/lint

Running multiple editors on one page

Multiple FlowDrop editors can run on the same page. Each mount gets its own isolated FlowDropInstance (workflow, history, playground, and panel state). When mounting more than one editor with drafts enabled, pass an instanceId so their stored drafts don’t collide. See the multiple instances guide.

Bundler setup (Vite, React, Vue, vanilla)

FlowDrop ships its UI as Svelte 5 components, so a bundler needs the Svelte plugin to compile them — even in React, Vue, or vanilla-JS apps. You still don’t write any Svelte yourself. With Vite:

npm install -D @sveltejs/vite-plugin-svelte svelte

// vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  // The mountFlowDropApp examples use top-level await.
  build: { target: 'es2022' }
});

SvelteKit already configures the Svelte plugin — no extra setup needed.

Still seeing Failed to resolve import? Exclude FlowDrop from Vite’s dependency pre-bundling:

optimizeDeps: { exclude: ['@flowdrop/flowdrop', '@xyflow/svelte'] }

Verify your installation

Confirm the package resolved correctly:

import { createEndpointConfig } from '@flowdrop/flowdrop/core';
const config = createEndpointConfig('/api/flowdrop');
console.log(config); // EndpointConfig object

If you see Cannot find module '@flowdrop/flowdrop', check that the install finished without errors, that your bundler supports ES modules (Vite 5+, webpack 5+), and that you aren’t importing in a server-side context.

Requirements & browser support

• Node.js v20 or later.
• A bundler that handles ES modules (Vite, webpack, esbuild, Rollup, Next.js, Nuxt, SvelteKit, or similar).
• Svelte 5 internally — FlowDrop uses Svelte 5 runes under the hood; your app does not need to be written in Svelte.
• Modern browsers only — targets ES2020+ with no bundled polyfills.