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

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

Next steps

What is a workflow?

The mental model behind the editor.

Connect a backend

The REST endpoints FlowDrop calls.