;
+ }
+
+ return (
+
+ );
+}
+
+export function App() {
+ return (
+
+
+
+ );
+}
+```
+
+
+
+ Default nodes used when the room has no data yet.
+
+
+ Per-type sync configuration for node `data` keys. See [Sync
+ config](#sync-config).
+
+
+ Default edges used when the room has no data yet.
+
+
+ Per-type sync configuration for edge `data` keys. See [Sync
+ config](#sync-config).
+
+
+ The key used to store the diagram in Liveblocks Storage. Defaults to
+ `"flow"`. See [`storageKey`](#storageKey).
+
+
+ When `true`, suspends until the diagram is ready. Learn more about this in
+ the [Suspense](#suspense) section.
+
+
+
+
+
+The options passed to the hook (initial nodes, edges, storage key, Suspense,
+etc.) are read once when the hook mounts. Later changes to those options will
+not take effect.
+
+
+
+
+
+ Current nodes, `null` while loading unless [using Suspense](#suspense), in
+ which case it is always an array.
+
+
+ Current edges, `null` while loading unless [using Suspense](#suspense), in
+ which case it is always an array.
+
+
+ Whether the diagram is still loading. When [using Suspense](#suspense),
+ always `false` after the hook has resumed.
+
+
+ Pass to React Flow’s `onNodesChange`.
+
+
+ Pass to React Flow’s `onEdgesChange`.
+
+
+ Pass to React Flow’s `onConnect`. Handles new edges.
+
+
+ Pass to React Flow’s `onDelete`. Handles node and edge deletions atomically
+ so that deleting a node and its related edges count as a single undoable
+ action.
+
+
+
+### Local state vs Storage
+
+Some React Flow fields are intentionally **not** written to Liveblocks Storage
+so each client keeps their own selection and interaction state:
+
+- **Nodes:** `selected`, `dragging`, `measured`, `resizing`
+- **Edges:** `selected`
+
+Everything else on nodes and edges (including `position`, `width` and `height`,
+`data`, handles, and edge endpoints) is synchronized through Storage. If you
+want specific keys inside `node.data` or `edge.data` to stay local-only too, use
+the [sync config](#sync-config).
+
+### Undo / Redo [#undo-redo]
+
+Undo and redo are automatically enabled for the entire flow state. All synced
+changes to nodes and edges are recorded on the undo stack, including position
+changes, data updates, additions, and removals.
+
+A few things are handled automatically:
+
+- **Dragging** and **resizing** produce many live updates during a drag, but
+ produce only a single action on the undo stack
+- **Deleting** nodes and edges in a single action will undo together
+- **Local-only** properties are not recorded on the undo stack
+
+To wire up undo/redo in your UI, just use Liveblocks’ normal
+[`useHistory`](/docs/api-reference/liveblocks-react#useHistory) hook:
+
+```tsx
+import { useHistory } from "@liveblocks/react";
+
+function Toolbar() {
+ const history = useHistory();
+ return (
+ <>
+
+
+
+ );
+}
+```
+
+### Custom nodes [#custom-nodes]
+
+[Custom nodes](https://reactflow.dev/learn/customization/custom-nodes) work like
+in any React Flow setup.
+
+```tsx
+"use client";
+
+import { useLiveblocksFlow } from "@liveblocks/react-flow";
+import type { Node, NodeProps } from "@xyflow/react";
+import { ReactFlow, useReactFlow } from "@xyflow/react";
+import { memo, useCallback } from "react";
+
+type TaskNode = Node<{ title: string }, "task">;
+
+const TaskNode = memo(({ id, data }: NodeProps) => {
+ const { updateNode } = useReactFlow();
+
+ const rename = useCallback(() => {
+ updateNode(id, (node) => ({
+ ...node,
+ data: { ...node.data, title: "Updated" },
+ }));
+ }, [id, updateNode]);
+
+ return (
+
+
+
+ );
+});
+
+function Flow() {
+ const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onDelete } =
+ useLiveblocksFlow({
+ suspense: true,
+ nodes: {
+ initial: [
+ {
+ id: "1",
+ type: "task",
+ position: { x: 0, y: 0 },
+ data: { title: "Shared task" },
+ },
+ ],
+ },
+ });
+
+ return (
+
+ );
+}
+```
+
+### Suspense [#suspense]
+
+By default, `useLiveblocksFlow` returns `isLoading: true`, `nodes: null`, and
+`edges: null` while loading. You can use the `suspense` option to suspend until
+the diagram is ready, when doing so, `nodes` and `edges` will always be arrays
+and `isLoading` will always be `false`.
+
+```tsx
+"use client";
+
+import { ReactFlow } from "@xyflow/react";
+import { RoomProvider, ClientSideSuspense } from "@liveblocks/react";
+import { useLiveblocksFlow } from "@liveblocks/react-flow";
+import "@xyflow/react/dist/style.css";
+
+function Flow() {
+ const {
+ nodes,
+ edges,
+ onNodesChange,
+ onEdgesChange,
+ onConnect,
+ onDelete,
+ // +++
+ } = useLiveblocksFlow({ suspense: true });
+ // +++
+
+ return (
+
+ );
+}
+
+export function App() {
+ return (
+
+ // +++
+ Loading…}>
+
+
+ // +++
+
+ );
+}
+```
+
+### Storage key [#storageKey]
+
+By default, `useLiveblocksFlow` stores nodes and edges under key `"flow"` in
+Liveblocks Storage. Use the `storageKey` option to choose a different key or to
+support multiple diagrams in a single room.
+
+```tsx
+"use client";
+
+import { ReactFlow } from "@xyflow/react";
+import { useLiveblocksFlow } from "@liveblocks/react-flow";
+
+function FlowA() {
+ // +++
+ const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onDelete } =
+ useLiveblocksFlow({ suspense: true, storageKey: "flowA" });
+ // +++
+
+ return (
+
+ );
+}
+
+function FlowB() {
+ // +++
+ const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onDelete } =
+ useLiveblocksFlow({ suspense: true, storageKey: "flowB" });
+ // +++
+
+ return (
+
+ );
+}
+```
+
+### Sync config for `node.data` [#sync-config]
+
+By default, every key inside a node or edge’s `data` object is getting deeply
+synced. Internally objects are stored as LiveObjects, arrays as LiveLists, etc,
+to enable fine-grained conflict-free merging automatically. If two users update
+different properties on the same node or edge, their changes will get merged
+without conflicts.
+
+For some data, this default behavior is not desirable.
+
+Each key in the config accepts a **sync mode**:
+
+| Mode | Behavior |
+| ---------- | ---------------------------------------------------------------------------------------------- |
+| `true` | Deeply sync and allow conflict-free merging (default). |
+| `false` | Keep value local-only. Not synced to other clients at all. Other clients will see `undefined`. |
+| `"atomic"` | Synced, but replaced as a whole (last-writer-wins). No automatic conflict resolution. |
+| `{ ... }` | Nested config. Applies recursively to sub-keys of the value. |
+
+Use `"*"` as a fallback for all node (or edge) types.
+
+```tsx
+const { ... } = useLiveblocksFlow({
+ nodes: {
+ sync: {
+ // Applies to all node types
+ "*": {
+ label: false, // Don’t sync node.data.label
+ color: "atomic", // Sync as a single value, replaced as-a-whole
+ },
+
+ // Additional overrides for specific node types
+ myCustomNode: {
+ showPreview: false, // Don’t sync myCustomNode.data.showPreview
+ },
+ },
+ },
+ edges: {
+ sync: {
+ "*": {
+ hovered: false, // Don’t sync edge.data.hovered
+ style: "atomic", // Sync as a single value, replaced as-a-whole
+ },
+ },
+ },
+});
+```
+
+## Cursors
+
+Add the `Cursors` component inside your `ReactFlow` component to add realtime
+cursors inside React Flow’s canvas. Also import Liveblocks’ styles when using
+it.
+
+```tsx
+"use client";
+
+import { RoomProvider } from "@liveblocks/react";
+// +++
+import { useLiveblocksFlow, Cursors } from "@liveblocks/react-flow";
+// +++
+import "@xyflow/react/dist/style.css";
+// +++
+import "@liveblocks/react-ui/styles.css";
+import "@liveblocks/react-flow/styles.css";
+// +++
+
+function Flow() {
+ const {
+ nodes,
+ edges,
+ onNodesChange,
+ onEdgesChange,
+ onConnect,
+ onDelete,
+ isLoading,
+ } = useLiveblocksFlow();
+
+ if (isLoading) {
+ return
Loading…
;
+ }
+
+ return (
+
+ // +++
+
+ // +++
+
+ );
+}
+```
+
+It works similarly to `@liveblocks/react-ui`’s
+[`Cursors`](/docs/api-reference/liveblocks-react-ui#Cursors) component.
+
+By default, cursor coordinates are stored in Presence under `"cursor"`. Use
+`presenceKey` to support multiple diagrams in a single room.
+
+### User information
+
+`Cursors` uses
+[`resolveUsers`](/docs/api-reference/liveblocks-react#LiveblocksProviderResolveUsers)
+to resolve each user’s information and then uses the `name` and `color`
+properties.
+
+```tsx
+ {
+ // ["stacy@example.com", ...]
+ console.log(userIds);
+
+ // Get users from your back-end
+ const users = await __fetchUsers__(userIds);
+
+ // [{ name: "Stacy", color: "#22c55e"}, ...]
+ console.log(users);
+
+ // Return a list of users
+ return users;
+ }}
+ // +++
+>
+ {/* ... */}
+
+```
+
+### Customize cursors
+
+Pass a `Cursor` component through the `components` prop to control how each
+cursor is rendered. It receives `userId` and `connectionId` via its props. Its
+position and visibility are still handled by `Cursors`.
+
+```tsx
+"use client";
+
+import { Cursors } from "@liveblocks/react-flow";
+import { Cursor, type CursorsCursorProps } from "@liveblocks/react-ui";
+import { useUser } from "@liveblocks/react";
+
+function MyCursor({ userId }: CursorsCursorProps) {
+ const { user, isLoading } = useUser(userId);
+
+ if (isLoading) {
+ return null;
+ }
+
+ return (
+
+ {user.countryFlag} {user.name}
+
+ ) : undefined
+ }
+ color={user?.color}
+ />
+ );
+}
+
+function Flow() {
+ return (
+
+ // +++
+
+ // +++
+
+ );
+}
+```
+
+### Props [#Cursors-props]
+
+
+
+ The key used to store cursor coordinates in users’ Presence.
+
+
+ Override the component’s components.
+
+
diff --git a/docs/pages/api-reference/liveblocks-react-ui.mdx b/docs/pages/api-reference/liveblocks-react-ui.mdx
index 7fc9c7ebd0a..096e45619d9 100644
--- a/docs/pages/api-reference/liveblocks-react-ui.mdx
+++ b/docs/pages/api-reference/liveblocks-react-ui.mdx
@@ -3898,7 +3898,7 @@ properties.
// Get users from your back-end
const users = await __fetchUsers__(userIds);
- // [{ name: "Stacy", color: "#22c55e", ...]
+ // [{ name: "Stacy", color: "#22c55e" }, ...]
console.log(users);
// Return a list of users
@@ -3910,6 +3910,42 @@ properties.
```
+##### Customize cursors
+
+Pass a `Cursor` component through the `components` prop to control how each
+cursor is rendered. It receives `userId` and `connectionId` via its props. Its
+position and visibility are still handled by `Cursors`.
+
+```tsx
+import { Cursors, Cursor, type CursorsCursorProps } from "@liveblocks/react-ui";
+import { useUser } from "@liveblocks/react";
+
+function MyCursor({ userId }: CursorsCursorProps) {
+ const { user, isLoading } = useUser(userId);
+
+ if (isLoading) {
+ return null;
+ }
+
+ return (
+
+ {user.countryFlag} {user.name}
+
+ ) : undefined
+ }
+ color={user?.color}
+ />
+ );
+}
+
+
+
+;
+```
+
##### Props [#Cursors-props]
@@ -3920,6 +3956,12 @@ properties.
>
The key used to store cursor coordinates in users’ Presence.
+
+ Override the component’s components.
+
#### Cursor
diff --git a/docs/pages/collaboration-features/multiplayer/sync-engine.mdx b/docs/pages/collaboration-features/multiplayer/sync-engine.mdx
index 236029d0695..cfa0f9cca85 100644
--- a/docs/pages/collaboration-features/multiplayer/sync-engine.mdx
+++ b/docs/pages/collaboration-features/multiplayer/sync-engine.mdx
@@ -57,12 +57,13 @@ maintenance for you.
/>
diff --git a/docs/pages/collaboration-features/multiplayer/sync-engine/liveblocks-storage.mdx b/docs/pages/collaboration-features/multiplayer/sync-engine/liveblocks-storage.mdx
index ca677c360d0..e2a28922af7 100644
--- a/docs/pages/collaboration-features/multiplayer/sync-engine/liveblocks-storage.mdx
+++ b/docs/pages/collaboration-features/multiplayer/sync-engine/liveblocks-storage.mdx
@@ -16,8 +16,8 @@ maintenance for you.
-Our [interactive React tutorial](/docs/tutorial/react/getting-started/storage) guides you through
-using each of the concepts listed on this page.
+Our [interactive React tutorial](/docs/tutorial/react/getting-started/storage)
+guides you through using each of the concepts listed on this page.
@@ -484,14 +484,4 @@ The same operation can be performed using the
technologies={["nextjs"]}
openInNewWindow
/>
-
diff --git a/docs/pages/get-started/nextjs-react-flow.mdx b/docs/pages/get-started/nextjs-react-flow.mdx
new file mode 100644
index 00000000000..387f395b03a
--- /dev/null
+++ b/docs/pages/get-started/nextjs-react-flow.mdx
@@ -0,0 +1,318 @@
+---
+meta:
+ title: "Get started with React Flow using Liveblocks and Next.js"
+ parentTitle: "Quickstart"
+ description:
+ "Learn how to add a collaborative React Flow diagram using Liveblocks and
+ Next.js."
+---
+
+Liveblocks is a realtime collaboration infrastructure for building performant
+collaborative experiences. Follow the following steps to start adding
+collaboration to your Next.js application using the APIs from the
+[`@liveblocks/react-flow`](/docs/api-reference/liveblocks-react-flow) package.
+
+## Quickstart
+
+
+
+ Install Liveblocks and React Flow
+
+
+ Every Liveblocks package should use the same version.
+
+ ```bash trackEvent="install_liveblocks"
+ npm install @liveblocks/client @liveblocks/react @liveblocks/react-ui @liveblocks/react-flow @xyflow/react
+ ```
+
+
+
+
+
+ Initialize the `liveblocks.config.ts` file
+
+
+ We can use this file later to [define types for our application](/docs/api-reference/liveblocks-react#Typing-your-data).
+
+ ```bash
+ npx create-liveblocks-app@latest --init --framework react
+ ```
+
+
+
+
+
+ Create a Liveblocks room
+
+
+ Liveblocks uses the concept of rooms, separate virtual spaces where people
+ collaborate, and to create a realtime experience, multiple users must
+ be connected to the same room. When using Next.js’ `/app` router,
+ we recommend creating your room in a `Room.tsx` file in the same directory
+ as your current route.
+
+ Set up a Liveblocks client with
+ [`LiveblocksProvider`](/docs/api-reference/liveblocks-react#LiveblocksProvider),
+ join a room with [`RoomProvider`](/docs/api-reference/liveblocks-react#RoomProvider),
+ and use [`ClientSideSuspense`](/docs/api-reference/liveblocks-react#ClientSideSuspense)
+ to add a loading spinner to your app.
+
+ ```tsx file="app/Room.tsx"
+ "use client";
+
+ import { ReactNode } from "react";
+ import {
+ LiveblocksProvider,
+ RoomProvider,
+ ClientSideSuspense,
+ } from "@liveblocks/react/suspense";
+
+ export function Room({ children }: { children: ReactNode }) {
+ return (
+ // +++
+
+
+ Loading…}>
+ {children}
+
+
+
+ // +++
+ );
+ }
+ ```
+
+
+
+
+
+ Add the Liveblocks room to your page
+
+
+ After creating your room file, it’s time to join it. Import
+ your room into your `page.tsx` file, and place
+ your collaborative app components inside it.
+
+ ```tsx file="app/page.tsx"
+ import { Room } from "./Room";
+ import { Flow } from "./Flow";
+
+ export default function Page() {
+ return (
+ // +++
+
+
+
+ // +++
+ );
+ }
+ ```
+
+
+
+
+
+ Set up the collaborative React Flow diagram
+
+
+ Now that Liveblocks is set up, integrate React Flow in the `Flow.tsx` file.
+ [`useLiveblocksFlow`](/docs/api-reference/liveblocks-react-flow#useLiveblocksFlow)
+ keeps nodes and edges in sync across clients using Liveblocks Storage.
+
+ ```tsx file="app/Flow.tsx"
+ "use client";
+
+ import { ReactFlow } from "@xyflow/react";
+ import { useLiveblocksFlow } from "@liveblocks/react-flow";
+ import "@xyflow/react/dist/style.css";
+
+ export function Flow() {
+ const {
+ nodes,
+ edges,
+ onNodesChange,
+ onEdgesChange,
+ onConnect,
+ onDelete,
+ } = useLiveblocksFlow({
+ suspense: true,
+ nodes: {
+ initial: [
+ {
+ id: "1",
+ type: "input",
+ data: { label: "Start" },
+ position: { x: 250, y: 0 },
+ },
+ {
+ id: "2",
+ data: { label: "Process" },
+ position: { x: 100, y: 110 },
+ },
+ {
+ id: "3",
+ type: "output",
+ data: { label: "End" },
+ position: { x: 250, y: 220 },
+ },
+ ],
+ },
+ edges: {
+ initial: [
+ { id: "e1-2", source: "1", target: "2" },
+ { id: "e2-3", source: "2", target: "3" },
+ ],
+ },
+ });
+
+ return (
+
+ );
+ }
+ ```
+
+
+
+
+
+ Next: authenticate and add your users
+
+ Your diagram and cursors work now, but each user is anonymous—the next step is to
+ authenticate each user as they connect, and attach their name, color, and avatar for components
+ like [`Cursors`](/docs/api-reference/liveblocks-react-flow#Cursors) or [`AvatarStack`](/docs/api-reference/liveblocks-react-ui#AvatarStack).
+
+
+
+
+
+
+
+
+## What to read next
+
+Congratulations! You now have set up the foundation for a collaborative React
+Flow diagram inside your Next.js application.
+
+- [@liveblocks/react-flow API Reference](/docs/api-reference/liveblocks-react-flow)
+- [Next.js and React guides](/docs/guides?technologies=nextjs%2Creact)
+- [React Flow website](https://reactflow.dev)
+
+---
+
+## Examples using React Flow
+
+
+
+
+
diff --git a/docs/pages/get-started/zustand.mdx b/docs/pages/get-started/zustand.mdx
index a69a36c24d5..3b48060abb1 100644
--- a/docs/pages/get-started/zustand.mdx
+++ b/docs/pages/get-started/zustand.mdx
@@ -188,14 +188,4 @@ collaborative experiences for your Zustand store.
technologies={["nextjs", "redux", "zustand"]}
openInNewWindow
/>
-
diff --git a/docs/routes.json b/docs/routes.json
index 672316c0a10..5bd60c316f7 100644
--- a/docs/routes.json
+++ b/docs/routes.json
@@ -146,6 +146,11 @@
"path": "/get-started/nextjs-tiptap",
"hidden": true
},
+ {
+ "title": "React Flow",
+ "path": "/get-started/nextjs-react-flow",
+ "hidden": true
+ },
{
"title": "BlockNote",
"path": "/get-started/react-blocknote",
@@ -820,6 +825,10 @@
"title": "@liveblocks/react-ui",
"path": "/api-reference/liveblocks-react-ui"
},
+ {
+ "title": "@liveblocks/react-flow",
+ "path": "/api-reference/liveblocks-react-flow"
+ },
{
"title": "@liveblocks/react-tiptap",
"path": "/api-reference/liveblocks-react-tiptap"
diff --git a/e2e/next-react-flow-kitchen-sink/.env.example b/e2e/next-react-flow-kitchen-sink/.env.example
new file mode 100644
index 00000000000..cb2198bc968
--- /dev/null
+++ b/e2e/next-react-flow-kitchen-sink/.env.example
@@ -0,0 +1,2 @@
+LIVEBLOCKS_SECRET_KEY=
+OPENAI_API_KEY=
\ No newline at end of file
diff --git a/e2e/next-react-flow-kitchen-sink/.gitignore b/e2e/next-react-flow-kitchen-sink/.gitignore
new file mode 100644
index 00000000000..7aa302d0648
--- /dev/null
+++ b/e2e/next-react-flow-kitchen-sink/.gitignore
@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+.env
+.env.*
+!.env.example
+*.tsbuildinfo
+.vercel
+.next
+out
+next-env.d.ts
\ No newline at end of file
diff --git a/e2e/next-react-flow-kitchen-sink/README.md b/e2e/next-react-flow-kitchen-sink/README.md
new file mode 100644
index 00000000000..e215bc4ccf1
--- /dev/null
+++ b/e2e/next-react-flow-kitchen-sink/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/e2e/next-react-flow-kitchen-sink/app/api/auth/liveblocks/route.ts b/e2e/next-react-flow-kitchen-sink/app/api/auth/liveblocks/route.ts
new file mode 100644
index 00000000000..0522a3d850a
--- /dev/null
+++ b/e2e/next-react-flow-kitchen-sink/app/api/auth/liveblocks/route.ts
@@ -0,0 +1,35 @@
+import { USERS } from "@/database";
+import { Liveblocks } from "@liveblocks/node";
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * Authenticating your Liveblocks application
+ * https://liveblocks.io/docs/authentication
+ */
+
+const liveblocks = new Liveblocks({
+ secret: process.env.LIVEBLOCKS_SECRET_KEY!,
+ baseUrl: process.env.NEXT_PUBLIC_LIVEBLOCKS_BASE_URL!,
+});
+
+export async function POST(_request: NextRequest) {
+ if (!process.env.LIVEBLOCKS_SECRET_KEY) {
+ return new NextResponse("Missing LIVEBLOCKS_SECRET_KEY", { status: 403 });
+ }
+
+ // Get a random user from the database (for demo purposes)
+ const user = USERS[Math.floor(Math.random() * USERS.length)];
+
+ // Create a session for the current user (access token auth)
+ const session = liveblocks.prepareSession(`${user.id}`, {
+ userInfo: user.info,
+ });
+
+ // Use a naming pattern to allow access to rooms with a wildcard
+ session.allow(`liveblocks:examples:*`, session.FULL_ACCESS);
+
+ // Authorize the user and return the result
+ const { status, body } = await session.authorize();
+
+ return new NextResponse(body, { status });
+}
diff --git a/e2e/next-react-flow-kitchen-sink/app/api/users/route.ts b/e2e/next-react-flow-kitchen-sink/app/api/users/route.ts
new file mode 100644
index 00000000000..4122bae41aa
--- /dev/null
+++ b/e2e/next-react-flow-kitchen-sink/app/api/users/route.ts
@@ -0,0 +1,20 @@
+import { USERS } from "@/database";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+ const { searchParams } = new URL(request.url);
+ const userIds = searchParams.getAll("userIds");
+
+ if (!userIds.length) {
+ return NextResponse.json(
+ { error: "Missing or invalid userIds" },
+ { status: 400 }
+ );
+ }
+
+ return NextResponse.json(
+ userIds.map(
+ (userId) => USERS.find((u) => u.id === userId)?.info ?? null
+ )
+ );
+}
diff --git a/e2e/next-react-flow-kitchen-sink/app/api/users/search/route.ts b/e2e/next-react-flow-kitchen-sink/app/api/users/search/route.ts
new file mode 100644
index 00000000000..cf8b63eda07
--- /dev/null
+++ b/e2e/next-react-flow-kitchen-sink/app/api/users/search/route.ts
@@ -0,0 +1,18 @@
+import { USERS } from "@/database";
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * Returns a list of user IDs from a partial search input
+ * For `resolveMentionSuggestions` in liveblocks.config.ts
+ */
+
+export async function GET(request: NextRequest) {
+ const { searchParams } = new URL(request.url);
+ const text = searchParams.get("text") as string;
+
+ const filteredUserIds = USERS.filter((user) => {
+ return user.info.name.toLowerCase().includes(text.toLowerCase());
+ }).map((user) => user.id);
+
+ return NextResponse.json(filteredUserIds);
+}
diff --git a/e2e/next-react-flow-kitchen-sink/app/basic-undo-redo/page.tsx b/e2e/next-react-flow-kitchen-sink/app/basic-undo-redo/page.tsx
new file mode 100644
index 00000000000..90a77f99903
--- /dev/null
+++ b/e2e/next-react-flow-kitchen-sink/app/basic-undo-redo/page.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import {
+ ClientSideSuspense,
+ RoomProvider,
+ useCanRedo,
+ useCanUndo,
+ useRedo,
+ useUndo,
+} from "@liveblocks/react";
+import { Cursors, useLiveblocksFlow } from "@liveblocks/react-flow";
+import { Panel, ReactFlow } from "@xyflow/react";
+import { EXAMPLES } from "../examples";
+
+function UndoRedoButtons() {
+ const undo = useUndo();
+ const redo = useRedo();
+ const canUndo = useCanUndo();
+ const canRedo = useCanRedo();
+
+ return (
+
+