---
title: "React"
description: "Mount a FlowDrop editor into a React component."
source: https://flowdrop.io/docs/editor/frameworks/react
site: FlowDrop documentation
---
# React
In React, mount FlowDrop into a container ref inside `useEffect`, and destroy it
on cleanup. No Svelte knowledge required.

## 1. Install

<CodeGroup>

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

```bash pnpm
pnpm add @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
```

```bash yarn
yarn add @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
```

</CodeGroup>

<Note>
  **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](/start/quickstart) for the
  full config.
</Note>

## 2. Mount the editor

```jsx
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' }} />;
}
```

<Warning>
  **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.
</Warning>

<Note>
  **FlowDrop needs a backend.**

  It serves nodes and stores workflows. Point `endpointConfig` at your API, or
  [run a ready-made server](/start).
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="What is a workflow?" icon="diagram-project" href="/concepts/what-is-a-workflow">
    The mental model behind the editor.
  </Card>
  <Card title="Connect a backend" icon="server" href="/editor/integration/backend-implementation">
    The REST endpoints FlowDrop calls.
  </Card>
</CardGroup>