diff --git a/examples/tiptap-collab-editing/.eslintrc.js b/examples/tiptap-collab-editing/.eslintrc.js
new file mode 100644
index 00000000000..ced78085f86
--- /dev/null
+++ b/examples/tiptap-collab-editing/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+ extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};
diff --git a/examples/tiptap-collab-editing/.gitignore b/examples/tiptap-collab-editing/.gitignore
new file mode 100644
index 00000000000..3f7bf98da3e
--- /dev/null
+++ b/examples/tiptap-collab-editing/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/examples/tiptap-collab-editing/README.md b/examples/tiptap-collab-editing/README.md
new file mode 100644
index 00000000000..52e1a4f9970
--- /dev/null
+++ b/examples/tiptap-collab-editing/README.md
@@ -0,0 +1,24 @@
+# Real time collaborative editing using tiptap and webrtc
+
+this is an example of using tiptap,yjs and webrtc to do real time collaborative editing across device and browsers
+
+## Relevent files
+
+```
+app
+├── routes
+│ └── editor.tsx // tiptab editor route, open it in different browser to see the changes get sync
+└── utils
+ └── webrtc.client.tsx //init the webrtc, ydoc and collaboration plugin on client
+```
+
+## Preview
+
+Open this example on [CodeSandbox](https://codesandbox.com):
+
+[](https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/tiptap-collab-editing)
+
+## Related Links
+
+- [Collaborative editing – Tiptap Editor](https://tiptap.dev/guide/collaborative-editing#show-other-cursors)
+- [Remix | Module Constraints](https://remix.run/docs/en/v1/guides/constraints#document-guard)
diff --git a/examples/tiptap-collab-editing/app/entry.client.tsx b/examples/tiptap-collab-editing/app/entry.client.tsx
new file mode 100644
index 00000000000..3eec1fd0a02
--- /dev/null
+++ b/examples/tiptap-collab-editing/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { RemixBrowser } from "@remix-run/react";
+import { hydrate } from "react-dom";
+
+hydrate(, document);
diff --git a/examples/tiptap-collab-editing/app/entry.server.tsx b/examples/tiptap-collab-editing/app/entry.server.tsx
new file mode 100644
index 00000000000..5afa18235cc
--- /dev/null
+++ b/examples/tiptap-collab-editing/app/entry.server.tsx
@@ -0,0 +1,21 @@
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+
+export default function handleRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ remixContext: EntryContext
+) {
+ const markup = renderToString(
+
+ );
+
+ responseHeaders.set("Content-Type", "text/html");
+
+ return new Response("" + markup, {
+ status: responseStatusCode,
+ headers: responseHeaders,
+ });
+}
diff --git a/examples/tiptap-collab-editing/app/root.tsx b/examples/tiptap-collab-editing/app/root.tsx
new file mode 100644
index 00000000000..927a0f745df
--- /dev/null
+++ b/examples/tiptap-collab-editing/app/root.tsx
@@ -0,0 +1,32 @@
+import type { MetaFunction } from "@remix-run/node";
+import {
+ Links,
+ LiveReload,
+ Meta,
+ Outlet,
+ Scripts,
+ ScrollRestoration,
+} from "@remix-run/react";
+
+export const meta: MetaFunction = () => ({
+ charset: "utf-8",
+ title: "New Remix App",
+ viewport: "width=device-width,initial-scale=1",
+});
+
+export default function App() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/examples/tiptap-collab-editing/app/routes/editor.tsx b/examples/tiptap-collab-editing/app/routes/editor.tsx
new file mode 100644
index 00000000000..4a7ec8d0880
--- /dev/null
+++ b/examples/tiptap-collab-editing/app/routes/editor.tsx
@@ -0,0 +1,32 @@
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { Collaboration, ydoc, WebrtcProvider } from "~/utils/webrtc.client";
+
+if (typeof document !== "undefined") {
+ //join the room remix example
+ new WebrtcProvider("room-remix-example", ydoc);
+}
+export default () => {
+ let editor;
+ if (typeof document !== "undefined") {
+ editor = useEditor({
+ extensions: [
+ StarterKit.configure({
+ history: false,
+ }),
+ Collaboration.configure({
+ document: ydoc,
+ }),
+ ],
+ });
+ }
+
+ return (
+
+
Open in two browsers and see the editing in sync
+
+ {editor && }
+
+