React
Mount a FlowDrop editor into a React component.
In React, mount FlowDrop into a container ref inside useEffect, and destroy it
on cleanup. No Svelte knowledge required.
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 alongside the React plugin —
see the Bundler setup section of the quick start for the
full config.
2. Mount the editor
import { useEffect, useRef } from 'react';
import { mountFlowDropApp } from '@flowdrop/flowdrop/editor';
import { createEndpointConfig } from '@flowdrop/flowdrop/core';
import '@flowdrop/flowdrop/styles';
export function FlowDropEditor() {
const containerRef = useRef(null);
useEffect(() => {
let app;
mountFlowDropApp(containerRef.current, {
endpointConfig: createEndpointConfig('/api/flowdrop'),
eventHandlers: {
onAfterSave: async (workflow) => console.log('Saved:', workflow.id),
},
}).then((instance) => {
app = instance;
});
return () => app?.destroy();
}, []);
return <div ref={containerRef} style={{ height: '100vh' }} />;
}Mount in useEffect, destroy on cleanup.
Mount after the DOM exists, not during render. Always call app.destroy() in
the cleanup function — under React Strict Mode effects run twice in development,
and skipping cleanup leaves a dangling editor.
FlowDrop needs a backend.
It serves nodes and stores workflows. Point endpointConfig at your API, or
run a ready-made server.