diff --git a/docs/pages/get-started/yjs-superdoc-javascript.mdx b/docs/pages/get-started/yjs-superdoc-javascript.mdx
new file mode 100644
index 0000000000..e005c9b8cc
--- /dev/null
+++ b/docs/pages/get-started/yjs-superdoc-javascript.mdx
@@ -0,0 +1,142 @@
+---
+meta:
+ title: "Get started with a SuperDoc DOCX editor using Liveblocks and JavaScript"
+ parentTitle: "Quickstart"
+ description:
+ "Learn how to install a SuperDoc DOCX editor using Liveblocks and JavaScript"
+---
+
+Liveblocks is a realtime collaboration infrastructure for building performant
+collaborative experiences. Follow the following steps to start adding
+collaboration to your JavaScript application using the APIs from the
+[`@liveblocks/yjs`](/docs/api-reference/liveblocks-yjs) package, and
+[SuperDoc](https://superdoc.dev), a collaborative DOCX editor for the web.
+
+## Quickstart
+
+
+
+ Install Liveblocks, Yjs, and SuperDoc
+
+
+ Every Liveblocks package should use the same version.
+
+ ```bash trackEvent="install_liveblocks"
+ npm install @liveblocks/client @liveblocks/yjs yjs superdoc
+ ```
+
+
+
+
+
+ Initialize the `liveblocks.config.ts` file
+
+
+ We can use this file later to [define types for our application](/docs/api-reference/liveblocks-client#Typing-your-data).
+
+ ```bash
+ npx create-liveblocks-app@latest --init --framework javascript
+ ```
+
+
+
+
+
+
+ Create the HTML elements
+
+
+ ```html
+
+
+ ```
+
+
+
+
+
+
+ Set up your collaborative SuperDoc editor
+
+
+ SuperDoc relies on browser APIs, so we wait for the provider’s first `sync`
+ before mounting the editor, and pass the shared `ydoc` and `provider` to
+ SuperDoc through `modules.collaboration`.
+
+ ```js file="app.js"
+ import { createClient } from "@liveblocks/client";
+ import { getYjsProviderForRoom } from "@liveblocks/yjs";
+ import { SuperDoc } from "superdoc";
+ import "superdoc/style.css";
+
+ // Set up Liveblocks client
+ const client = createClient({
+ publicApiKey: "{{PUBLIC_KEY}}",
+ });
+
+ // Enter a multiplayer room
+ const { room, leave } = client.enterRoom("my-room");
+
+ // Set up Yjs document and Liveblocks Yjs provider
+ const yProvider = getYjsProviderForRoom(room);
+ const yDoc = yProvider.getYDoc();
+
+ function initSuperDoc() {
+ new SuperDoc({
+ selector: "#superdoc",
+ toolbar: "#superdoc-toolbar",
+ documentMode: "editing",
+ user: {
+ name: "User " + Math.floor(Math.random() * 1000),
+ email: "user@example.com",
+ },
+ modules: {
+ // The collaboration contract is the same for every Yjs provider:
+ // pass the shared `ydoc` and `provider`
+ collaboration: { ydoc: yDoc, provider: yProvider },
+ },
+ });
+ }
+
+ // Wait for the initial sync so the document isn’t created twice
+ if (yProvider.synced) {
+ initSuperDoc();
+ } else {
+ yProvider.on("sync", initSuperDoc);
+ }
+ ```
+
+
+
+
+
+ Next: set up authentication
+
+ By default, Liveblocks is configured to work without an authentication endpoint
+ where everyone automatically has access to rooms. This approach is great for
+ prototyping and marketing pages where setting up your own security isn’t always
+ required. If you want to limit access to a room for certain users, you’ll need
+ to set up an authentication endpoint to enable permissions.
+
+
+
+ Set up authentication
+
+
+
+
+
+
+
+## What to read next
+
+Congratulations! You now have set up the foundation for your collaborative
+SuperDoc DOCX editor inside your JavaScript application.
+
+- [Yjs guides](/docs/guides?technologies=yjs)
+- [@liveblocks/yjs API Reference](/docs/api-reference/liveblocks-yjs)
+- [@liveblocks/client API Reference](/docs/api-reference/liveblocks-client)
+- [SuperDoc website](https://superdoc.dev)
+- [SuperDoc collaboration docs](https://docs.superdoc.dev/editor/collaboration/overview)
diff --git a/docs/pages/get-started/yjs-superdoc-nextjs.mdx b/docs/pages/get-started/yjs-superdoc-nextjs.mdx
new file mode 100644
index 0000000000..42e462d6cf
--- /dev/null
+++ b/docs/pages/get-started/yjs-superdoc-nextjs.mdx
@@ -0,0 +1,220 @@
+---
+meta:
+ title: "Get started with a SuperDoc DOCX editor using Liveblocks and Next.js"
+ parentTitle: "Quickstart"
+ description:
+ "Learn how to install a SuperDoc DOCX editor 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/yjs`](/docs/api-reference/liveblocks-yjs) package, and
+[SuperDoc](https://superdoc.dev), a collaborative DOCX editor for the web.
+
+## Quickstart
+
+
+
+ Install Liveblocks, Yjs, and SuperDoc
+
+
+ Every Liveblocks package should use the same version.
+
+ ```bash trackEvent="install_liveblocks"
+ npm install @liveblocks/client @liveblocks/react @liveblocks/yjs yjs @superdoc-dev/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" highlight="12-18"
+ "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" highlight="6-8"
+ import { Room } from "./Room";
+ import { Editor } from "./Editor";
+
+ export default function Page() {
+ return (
+
+
+ );
+ }
+ ```
+
+
+
+
+
+ Set up the collaborative SuperDoc editor
+
+
+ Now that we set up Liveblocks, we can start integrating SuperDoc and Yjs in the `Editor.tsx` file.
+ We use [`getYjsProviderForRoom`](/docs/api-reference/liveblocks-yjs#getYjsProviderForRoom) to
+ get a Yjs document and provider, then pass them to the
+ [`
+
+ );
+ }
+ ```
+
+
+
+
+
+ Import the SuperDoc styles
+
+
+ Import the SuperDoc styles into the root layout of your app, so the editor
+ and toolbar are styled correctly.
+
+ ```tsx file="app/layout.tsx"
+ import "@superdoc-dev/react/style.css";
+ ```
+
+
+
+
+
+ Next: authenticate and add your users
+
+ Text Editor is set up and working now, but each user is anonymous—the next step is to
+ authenticate each user as they connect, and attach their name, color, and avatar, to their cursors and mentions.
+
+
+
+ Add your users to Text Editor
+
+
+
+
+
+
+
+## What to read next
+
+Congratulations! You now have set up the foundation for your collaborative
+SuperDoc DOCX editor inside your Next.js application.
+
+- [@liveblocks/yjs API Reference](/docs/api-reference/liveblocks-yjs)
+- [@liveblocks/react API Reference](/docs/api-reference/liveblocks-react)
+- [SuperDoc website](https://superdoc.dev)
+- [SuperDoc collaboration docs](https://docs.superdoc.dev/editor/collaboration/overview)
+
+---
+
+## Examples using SuperDoc
+
+
+
diff --git a/docs/pages/get-started/yjs-superdoc-react.mdx b/docs/pages/get-started/yjs-superdoc-react.mdx
new file mode 100644
index 0000000000..a906cc8660
--- /dev/null
+++ b/docs/pages/get-started/yjs-superdoc-react.mdx
@@ -0,0 +1,208 @@
+---
+meta:
+ title: "Get started with a SuperDoc DOCX editor using Liveblocks and React"
+ parentTitle: "Quickstart"
+ description:
+ "Learn how to install a SuperDoc DOCX editor using Liveblocks and React"
+---
+
+Liveblocks is a realtime collaboration infrastructure for building performant
+collaborative experiences. Follow the following steps to start adding
+collaboration to your React application using the APIs from the
+[`@liveblocks/yjs`](/docs/api-reference/liveblocks-yjs) package, and
+[SuperDoc](https://superdoc.dev), a collaborative DOCX editor for the web.
+
+## Quickstart
+
+
+
+ Install Liveblocks, Yjs, and SuperDoc
+
+
+ Every Liveblocks package should use the same version.
+
+ ```bash trackEvent="install_liveblocks"
+ npm install @liveblocks/client @liveblocks/react @liveblocks/yjs yjs @superdoc-dev/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
+ ```
+
+
+
+
+
+
+ Set up the Liveblocks client
+
+
+ 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. Set up a Liveblocks client with [`LiveblocksProvider`](/docs/api-reference/liveblocks-react#LiveblocksProvider), and join a room with [`RoomProvider`](/docs/api-reference/liveblocks-react#RoomProvider).
+
+ ```tsx file="App.tsx" highlight="11-15"
+ "use client";
+
+ import {
+ LiveblocksProvider,
+ RoomProvider,
+ } from "@liveblocks/react/suspense";
+ import { Editor } from "./Editor";
+
+ export default function App() {
+ return (
+
+
+ {/* ... */}
+
+
+ );
+ }
+ ```
+
+
+
+
+
+ Join a Liveblocks room
+
+
+ After setting up the room, you can add collaborative components inside it, using
+ [`ClientSideSuspense`](/docs/api-reference/liveblocks-react#ClientSideSuspense) to add loading spinners to your app.
+
+ ```tsx file="App.tsx" highlight="14-16"
+ "use client";
+
+ import {
+ LiveblocksProvider,
+ RoomProvider,
+ ClientSideSuspense,
+ } from "@liveblocks/react/suspense";
+ import { Editor } from "./Editor";
+
+ export default function App() {
+ return (
+
+
+ Loading…}>
+
+
+
+ );
+ }
+ ```
+
+
+
+
+
+ Set up the collaborative SuperDoc editor
+
+
+ Now that we set up Liveblocks, we can start integrating SuperDoc and Yjs in the `Editor.tsx` file.
+ We use [`getYjsProviderForRoom`](/docs/api-reference/liveblocks-yjs#getYjsProviderForRoom) to
+ get a Yjs document and provider, then pass them to the
+ [`
+
+ );
+ }
+ ```
+
+
+
+
+
+
+ Next: authenticate and add your users
+
+ Text Editor is set up and working now, but each user is anonymous—the next step is to
+ authenticate each user as they connect, and attach their name, color, and avatar, to their cursors and mentions.
+
+
+
+ Add your users to Text Editor
+
+
+
+
+
+
+
+
+## What to read next
+
+Congratulations! You now have set up the foundation for your collaborative
+SuperDoc DOCX editor inside your React application.
+
+- [Yjs guides](/docs/guides?technologies=yjs)
+- [@liveblocks/yjs API Reference](/docs/api-reference/liveblocks-yjs)
+- [SuperDoc website](https://superdoc.dev)
+- [SuperDoc collaboration docs](https://docs.superdoc.dev/editor/collaboration/overview)
+
+---
+
+## Examples using SuperDoc
+
+
+
diff --git a/docs/pages/get-started/yjs-superdoc-svelte.mdx b/docs/pages/get-started/yjs-superdoc-svelte.mdx
new file mode 100644
index 0000000000..bc5e208d20
--- /dev/null
+++ b/docs/pages/get-started/yjs-superdoc-svelte.mdx
@@ -0,0 +1,143 @@
+---
+meta:
+ title: "Get started with a SuperDoc DOCX editor using Liveblocks and Svelte"
+ parentTitle: "Quickstart"
+ description:
+ "Learn how to install a SuperDoc DOCX editor using Liveblocks and Svelte"
+---
+
+Liveblocks is a realtime collaboration infrastructure for building performant
+collaborative experiences. Follow the following steps to start adding
+collaboration to your Svelte application using the APIs from the
+[`@liveblocks/yjs`](/docs/api-reference/liveblocks-yjs) package, and
+[SuperDoc](https://superdoc.dev), a collaborative DOCX editor for the web.
+
+## Quickstart
+
+
+
+ Install Liveblocks, Yjs, and SuperDoc
+
+
+ Every Liveblocks package should use the same version.
+
+ ```bash trackEvent="install_liveblocks"
+ npm install @liveblocks/client @liveblocks/yjs yjs superdoc
+ ```
+
+
+
+
+
+ Initialize the `liveblocks.config.ts` file
+
+
+ We can use this file later to [define types for our application](/docs/api-reference/liveblocks-client#Typing-your-data).
+
+ ```bash
+ npx create-liveblocks-app@latest --init --framework javascript
+ ```
+
+
+
+
+
+
+ Set up your collaborative SuperDoc editor
+
+
+ SuperDoc relies on browser APIs, so we wait for the provider’s first `sync`
+ before mounting the editor, and pass the shared `ydoc` and `provider` to
+ SuperDoc through `modules.collaboration`.
+
+ ```html file="Editor.svelte"
+
+
+
+
+ ```
+
+
+
+
+
+ Next: set up authentication
+
+ By default, Liveblocks is configured to work without an authentication endpoint
+ where everyone automatically has access to rooms. This approach is great for
+ prototyping and marketing pages where setting up your own security isn’t always
+ required. If you want to limit access to a room for certain users, you’ll need
+ to set up an authentication endpoint to enable permissions.
+
+
+
+ Set up authentication
+
+
+
+
+
+
+
+## What to read next
+
+Congratulations! You now have set up the foundation for your collaborative
+SuperDoc DOCX editor inside your Svelte application.
+
+- [@liveblocks/yjs API Reference](/docs/api-reference/liveblocks-yjs)
+- [@liveblocks/client API Reference](/docs/api-reference/liveblocks-client)
+- [SuperDoc website](https://superdoc.dev)
+- [SuperDoc collaboration docs](https://docs.superdoc.dev/editor/collaboration/overview)
diff --git a/docs/pages/get-started/yjs-superdoc-vuejs.mdx b/docs/pages/get-started/yjs-superdoc-vuejs.mdx
new file mode 100644
index 0000000000..9aee151783
--- /dev/null
+++ b/docs/pages/get-started/yjs-superdoc-vuejs.mdx
@@ -0,0 +1,145 @@
+---
+meta:
+ title: "Get started with a SuperDoc DOCX editor using Liveblocks and Vue.js"
+ parentTitle: "Quickstart"
+ description:
+ "Learn how to install a SuperDoc DOCX editor using Liveblocks and Vue.js"
+---
+
+Liveblocks is a realtime collaboration infrastructure for building performant
+collaborative experiences. Follow the following steps to start adding
+collaboration to your Vue.js application using the APIs from the
+[`@liveblocks/yjs`](/docs/api-reference/liveblocks-yjs) package, and
+[SuperDoc](https://superdoc.dev), a collaborative DOCX editor for the web.
+
+## Quickstart
+
+
+
+ Install Liveblocks, Yjs, and SuperDoc
+
+
+ Every Liveblocks package should use the same version.
+
+ ```bash trackEvent="install_liveblocks"
+ npm install @liveblocks/client @liveblocks/yjs yjs superdoc
+ ```
+
+
+
+
+
+ Initialize the `liveblocks.config.ts` file
+
+
+ We can use this file later to [define types for our application](/docs/api-reference/liveblocks-client#Typing-your-data).
+
+ ```bash
+ npx create-liveblocks-app@latest --init --framework javascript
+ ```
+
+
+
+
+
+
+ Set up your collaborative SuperDoc editor
+
+
+ SuperDoc relies on browser APIs, so we wait for the provider’s first `sync`
+ before mounting the editor, and pass the shared `ydoc` and `provider` to
+ SuperDoc through `modules.collaboration`.
+
+ ```html file="Editor.vue"
+
+
+
+
+
+
+ ```
+
+
+
+
+
+ Next: set up authentication
+
+ By default, Liveblocks is configured to work without an authentication endpoint
+ where everyone automatically has access to rooms. This approach is great for
+ prototyping and marketing pages where setting up your own security isn’t always
+ required. If you want to limit access to a room for certain users, you’ll need
+ to set up an authentication endpoint to enable permissions.
+
+
+
+ Set up authentication
+
+
+
+
+
+
+
+## What to read next
+
+Congratulations! You now have set up the foundation for your collaborative
+SuperDoc DOCX editor inside your Vue.js application.
+
+- [@liveblocks/yjs API Reference](/docs/api-reference/liveblocks-yjs)
+- [@liveblocks/client API Reference](/docs/api-reference/liveblocks-client)
+- [SuperDoc website](https://superdoc.dev)
+- [SuperDoc collaboration docs](https://docs.superdoc.dev/editor/collaboration/overview)
diff --git a/docs/routes.json b/docs/routes.json
index 631294ac05..da4bfdfdfb 100644
--- a/docs/routes.json
+++ b/docs/routes.json
@@ -301,6 +301,31 @@
"path": "/get-started/yjs-slate-react",
"hidden": true
},
+ {
+ "title": "Yjs SuperDoc Next.js",
+ "path": "/get-started/yjs-superdoc-nextjs",
+ "hidden": true
+ },
+ {
+ "title": "Yjs SuperDoc React",
+ "path": "/get-started/yjs-superdoc-react",
+ "hidden": true
+ },
+ {
+ "title": "Yjs SuperDoc Svelte",
+ "path": "/get-started/yjs-superdoc-svelte",
+ "hidden": true
+ },
+ {
+ "title": "Yjs SuperDoc Vue.js",
+ "path": "/get-started/yjs-superdoc-vuejs",
+ "hidden": true
+ },
+ {
+ "title": "Yjs SuperDoc JavaScript",
+ "path": "/get-started/yjs-superdoc-javascript",
+ "hidden": true
+ },
{
"title": "Yjs Tiptap Svelte",
"path": "/get-started/yjs-tiptap-svelte",
diff --git a/examples/nextjs-yjs-superdoc/.env.example b/examples/nextjs-yjs-superdoc/.env.example
new file mode 100644
index 0000000000..9c176850c8
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/.env.example
@@ -0,0 +1,2 @@
+# https://liveblocks.io/dashboard/apikeys
+LIVEBLOCKS_SECRET_KEY=
diff --git a/examples/nextjs-yjs-superdoc/.gitignore b/examples/nextjs-yjs-superdoc/.gitignore
new file mode 100644
index 0000000000..3a68e0cfc9
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/.gitignore
@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+.env
+.env.*
+!.env.example
+*.tsbuildinfo
+.vercel
+.next
+out
+next-env.d.ts
+# Turborepo
+.turbo
diff --git a/examples/nextjs-yjs-superdoc/.prettierrc b/examples/nextjs-yjs-superdoc/.prettierrc
new file mode 100644
index 0000000000..2bfd2b43dd
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/.prettierrc
@@ -0,0 +1,12 @@
+{
+ "semi": true,
+ "tabWidth": 2,
+ "useTabs": false,
+ "singleQuote": false,
+ "jsxSingleQuote": false,
+ "arrowParens": "always",
+ "bracketSpacing": true,
+ "bracketSameLine": false,
+ "trailingComma": "es5",
+ "proseWrap": "always"
+}
diff --git a/examples/nextjs-yjs-superdoc/README.md b/examples/nextjs-yjs-superdoc/README.md
new file mode 100644
index 0000000000..4949620314
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/README.md
@@ -0,0 +1,112 @@
+
+
+
+
+
+
+
+# Collaborative DOCX Editor (SuperDoc)
+
+
+
+
+
+
+
+
+This example shows how to build a collaborative DOCX editor with
+[Liveblocks](https://liveblocks.io), [Yjs](https://docs.yjs.dev),
+[SuperDoc](https://superdoc.dev), and [Next.js](https://nextjs.org/).
+
+As users edit the document, changes will be automatically persisted and
+synced—allowing for an editor that updates in realtime across clients. Users
+will also be able to see each other’s cursors in the document.
+
+Read more
+
+
+
+Alternatively, you can set up your project manually:
+
+- Install all dependencies with `npm install`
+- Create an account on [liveblocks.io](https://liveblocks.io/dashboard)
+- Copy your **secret** key from the
+ [dashboard](https://liveblocks.io/dashboard/apikeys)
+- Create an `.env.local` file and add your **secret** key as the
+ `LIVEBLOCKS_SECRET_KEY` environment variable
+- Run `npm run dev` and go to [http://localhost:3000](http://localhost:3000)
+
+Read more
+
+
+
+You can optionally run this example locally using the
+[Liveblocks dev server](https://liveblocks.io/docs/tools/dev-server).
+
+- Install the example as detailed above
+- Run `npx liveblocks dev` to start the server
+- Add `baseUrl: "http://localhost:1153"` option to `LiveblocksProvider` and
+ `new Liveblocks`
+- Replace `secret` in `new Liveblocks` with `"sk_localdev"`
+- Run `npm run dev` and go to [http://localhost:3000](http://localhost:3000)
+
+Read more
+
+
+
+To both deploy on [Vercel](https://vercel.com), and run the example locally, use
+the following command:
+
+```bash
+npx create-liveblocks-app@latest --example nextjs-yjs-superdoc --vercel
+```
+
+This will download the example and ask permission to open your browser, enabling
+you to deploy to Vercel.
+
+Read more
+
+
+
+After forking
+[this example](https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-yjs-superdoc)
+on CodeSandbox, create the `LIVEBLOCKS_SECRET_KEY` environment variable as a
+[secret](https://codesandbox.io/docs/secrets).
+
+ {
+ const searchParams = new URLSearchParams(
+ userIds.map((userId) => ["userIds", userId])
+ );
+ const response = await fetch(`/api/users?${searchParams}`);
+
+ if (!response.ok) {
+ throw new Error("Problem resolving users");
+ }
+
+ const users = await response.json();
+ return users;
+ }}
+ >
+ {children}
+
+ );
+}
diff --git a/examples/nextjs-yjs-superdoc/src/app/Room.tsx b/examples/nextjs-yjs-superdoc/src/app/Room.tsx
new file mode 100644
index 0000000000..b5a21b7ea9
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/src/app/Room.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { ReactNode, useMemo } from "react";
+import { RoomProvider } from "@liveblocks/react/suspense";
+import { useSearchParams } from "next/navigation";
+import { ClientSideSuspense } from "@liveblocks/react";
+import { Loading } from "@/components/Loading";
+
+export function Room({ children }: { children: ReactNode }) {
+ const roomId = useExampleRoomId("liveblocks:examples:nextjs-yjs-superdoc");
+
+ return (
+
+
+ );
+}
+
+/**
+ * This function is used when deploying an example on liveblocks.io.
+ * You can ignore it completely if you run the example locally.
+ */
+function useExampleRoomId(roomId: string) {
+ const params = useSearchParams();
+ const exampleId = params?.get("exampleId");
+
+ const exampleRoomId = useMemo(() => {
+ return exampleId ? `${roomId}-${exampleId}` : roomId;
+ }, [roomId, exampleId]);
+
+ return exampleRoomId;
+}
diff --git a/examples/nextjs-yjs-superdoc/src/app/api/liveblocks-auth/route.ts b/examples/nextjs-yjs-superdoc/src/app/api/liveblocks-auth/route.ts
new file mode 100644
index 0000000000..71ddb37392
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/src/app/api/liveblocks-auth/route.ts
@@ -0,0 +1,34 @@
+import { Liveblocks } from "@liveblocks/node";
+import { getRandomUser } from "@/database";
+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!,
+});
+
+export async function POST(request: NextRequest) {
+ if (!process.env.LIVEBLOCKS_SECRET_KEY) {
+ return new NextResponse("Missing LIVEBLOCKS_SECRET_KEY", { status: 403 });
+ }
+
+ // Get the current user's unique id and info from your database
+ const user = getRandomUser();
+
+ // Create a session for the current user (access token auth)
+ // userInfo is made available in Liveblocks presence hooks, e.g. useSelf
+ 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/examples/nextjs-yjs-superdoc/src/app/api/users/route.ts b/examples/nextjs-yjs-superdoc/src/app/api/users/route.ts
new file mode 100644
index 0000000000..77c2fd40e7
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/src/app/api/users/route.ts
@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getUser } from "@/database";
+
+/**
+ * Get users' info from their ID
+ * For `resolveUsers` in liveblocks.config.ts
+ */
+
+export async function GET(request: NextRequest) {
+ const { searchParams } = new URL(request.url);
+ const userIds = searchParams.getAll("userIds");
+
+ if (!userIds || !Array.isArray(userIds)) {
+ return new NextResponse("Missing or invalid userIds", { status: 400 });
+ }
+
+ return NextResponse.json(
+ userIds.map((userId) => getUser(userId)?.info || null)
+ );
+}
diff --git a/examples/nextjs-yjs-superdoc/src/app/layout.tsx b/examples/nextjs-yjs-superdoc/src/app/layout.tsx
new file mode 100644
index 0000000000..c4801447df
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/src/app/layout.tsx
@@ -0,0 +1,34 @@
+import "../globals.css";
+import { Providers } from "./Providers";
+
+export const metadata = {
+ title: "Liveblocks",
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/examples/nextjs-yjs-superdoc/src/app/page.tsx b/examples/nextjs-yjs-superdoc/src/app/page.tsx
new file mode 100644
index 0000000000..053138bbe1
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/src/app/page.tsx
@@ -0,0 +1,12 @@
+import { Room } from "@/app/Room";
+import { CollaborativeEditor } from "@/components/CollaborativeEditor";
+
+export default function Home() {
+ return (
+
+
+
+
+ );
+}
diff --git a/examples/nextjs-yjs-superdoc/src/components/CollaborativeEditor.module.css b/examples/nextjs-yjs-superdoc/src/components/CollaborativeEditor.module.css
new file mode 100644
index 0000000000..d5d88188db
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/src/components/CollaborativeEditor.module.css
@@ -0,0 +1,29 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ border-radius: 12px;
+ background: #fff;
+ width: 100%;
+ height: 100%;
+ color: #111827;
+ overflow: hidden;
+}
+
+.editorHeader {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.5rem 0.75rem;
+ border-bottom: 1px solid #e5e7eb;
+}
+
+.editorContainer {
+ position: relative;
+ flex-grow: 1;
+ width: 100%;
+ min-height: 0;
+ overflow: auto;
+ background: #f3f4f6;
+}
diff --git a/examples/nextjs-yjs-superdoc/src/components/CollaborativeEditor.tsx b/examples/nextjs-yjs-superdoc/src/components/CollaborativeEditor.tsx
new file mode 100644
index 0000000000..ff4d4416ac
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/src/components/CollaborativeEditor.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useMemo } from "react";
+import { getYjsProviderForRoom } from "@liveblocks/yjs";
+import { useRoom, useSelf } from "@liveblocks/react/suspense";
+import { SuperDocEditor } from "@superdoc-dev/react";
+import { AvatarStack } from "@liveblocks/react-ui";
+import styles from "./CollaborativeEditor.module.css";
+import "@superdoc-dev/react/style.css";
+import "@liveblocks/react-ui/styles.css";
+
+// Collaborative DOCX editor with live cursors and live avatars, powered by SuperDoc
+export function CollaborativeEditor() {
+ /// Set up Yjs
+ const room = useRoom();
+ const provider = getYjsProviderForRoom(room);
+
+ // Get user info
+ const userInfo = useSelf((me) => me.info);
+ const userId = useSelf((me) => me.id);
+
+ // Set up SuperDoc
+ const modules = useMemo(
+ () => ({
+ collaboration: { ydoc: provider.getYDoc(), provider: provider as any },
+ }),
+ [provider]
+ );
+
+ return (
+
+ );
+}
diff --git a/examples/nextjs-yjs-superdoc/src/components/Loading.module.css b/examples/nextjs-yjs-superdoc/src/components/Loading.module.css
new file mode 100644
index 0000000000..3bfeafb157
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/src/components/Loading.module.css
@@ -0,0 +1,14 @@
+.loading {
+ position: absolute;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ place-content: center;
+ place-items: center;
+}
+
+.loading img {
+ width: 64px;
+ height: 64px;
+ opacity: 0.2;
+}
diff --git a/examples/nextjs-yjs-superdoc/src/components/Loading.tsx b/examples/nextjs-yjs-superdoc/src/components/Loading.tsx
new file mode 100644
index 0000000000..600a9e20d9
--- /dev/null
+++ b/examples/nextjs-yjs-superdoc/src/components/Loading.tsx
@@ -0,0 +1,9 @@
+import styles from "./Loading.module.css";
+
+export function Loading() {
+ return (
+
+
+
+
+
+ 
+
+
+
+## Getting started
+
+Run the following command to try this example locally:
+
+```bash
+npx create-liveblocks-app@latest --example nextjs-yjs-superdoc --api-key
+```
+
+This will download the example and ask permission to open your browser, enabling
+you to automatically get your API key from your
+[liveblocks.io](https://liveblocks.io) account.
+
+### Manual setup
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+