-
+ {NAVIGATION_ITEMS.map((item) => (
+
-
+ {todos.map((r) => (
+
-
+ {listRecords.map((r) => (
+
PowerSync Yjs CRDT Document Collaboration Demo
++ Edit text below and it will sync in to other users who have this page URL open in their browser. Conflicts are + automatically resolved using CRDTs. Powered by{' '} + + Yjs + {' '} + and{' '} + + Tiptap + + . +
+
+ {editor &&
+
+ {items.map((item, index) => (
+
+ {item.type === 'divider' ? : }
+
+ ))}
+
+ );
+}
diff --git a/demos/powersync-supabase-yjs-text-collab-demo/src/components/widgets/MenuBar.scss b/demos/powersync-supabase-yjs-text-collab-demo/src/components/widgets/MenuBar.scss
new file mode 100644
index 00000000..9f0833d8
--- /dev/null
+++ b/demos/powersync-supabase-yjs-text-collab-demo/src/components/widgets/MenuBar.scss
@@ -0,0 +1,7 @@
+.divider {
+ background-color: rgba(#fff, 0.25);
+ height: 1.25rem;
+ margin-left: 0.5rem;
+ margin-right: 0.75rem;
+ width: 1px;
+}
diff --git a/demos/powersync-supabase-yjs-text-collab-demo/src/components/widgets/MenuItem.jsx b/demos/powersync-supabase-yjs-text-collab-demo/src/components/widgets/MenuItem.jsx
new file mode 100644
index 00000000..ec22d3a7
--- /dev/null
+++ b/demos/powersync-supabase-yjs-text-collab-demo/src/components/widgets/MenuItem.jsx
@@ -0,0 +1,14 @@
+import './MenuItem.scss';
+
+import React from 'react';
+import remixiconUrl from 'remixicon/fonts/remixicon.symbol.svg';
+
+export default function MenuItem({ icon, title, action, isActive = null }) {
+ return (
+
+ );
+}
diff --git a/demos/powersync-supabase-yjs-text-collab-demo/src/components/widgets/MenuItem.scss b/demos/powersync-supabase-yjs-text-collab-demo/src/components/widgets/MenuItem.scss
new file mode 100644
index 00000000..c2e2e184
--- /dev/null
+++ b/demos/powersync-supabase-yjs-text-collab-demo/src/components/widgets/MenuItem.scss
@@ -0,0 +1,22 @@
+.menu-item {
+ background-color: transparent;
+ border: none;
+ border-radius: 0.4rem;
+ color: #fff;
+ cursor: pointer;
+ height: 1.75rem;
+ margin-right: 0.25rem;
+ padding: 0.25rem;
+ width: 1.75rem;
+
+ svg {
+ fill: currentColor;
+ height: 100%;
+ width: 100%;
+ }
+
+ &:hover,
+ &.is-active {
+ background-color: #303030;
+ }
+}
diff --git a/demos/powersync-supabase-yjs-text-collab-demo/src/library/binary-utils.js b/demos/powersync-supabase-yjs-text-collab-demo/src/library/binary-utils.js
new file mode 100644
index 00000000..9d84cb15
--- /dev/null
+++ b/demos/powersync-supabase-yjs-text-collab-demo/src/library/binary-utils.js
@@ -0,0 +1,33 @@
+export function b64ToUint8Array(base64) {
+ const asCharCode = (c) => c.charCodeAt(0);
+ return Uint8Array.from(atob(base64), asCharCode);
+}
+
+export function Uint8ArrayTob64(uint8array) {
+ const output = [];
+ for (let i = 0, { length } = uint8array; i < length; i++) output.push(String.fromCharCode(uint8array[i]));
+ return btoa(output.join(''));
+}
+
+export function Uint8ArrayToHex(uint8array) {
+ return '\\x' + uint8array.reduce((s, n) => s + n.toString(16).padStart(2, '0'), '');
+}
+
+export function b64ToHex(str) {
+ const raw = atob(str);
+ let result = '\\x';
+ for (let i = 0; i < raw.length; i++) {
+ const hex = raw.charCodeAt(i).toString(16);
+ result += hex.length === 2 ? hex : '0' + hex;
+ }
+ return result;
+}
+
+export function hexToUint8Array(hexString) {
+ return Uint8Array.from(
+ hexString
+ .replace('\\x', '')
+ .match(/.{1,2}/g)
+ .map((byte) => parseInt(byte, 16))
+ );
+}
diff --git a/demos/powersync-supabase-yjs-text-collab-demo/src/library/powersync/AppSchema.ts b/demos/powersync-supabase-yjs-text-collab-demo/src/library/powersync/AppSchema.ts
new file mode 100644
index 00000000..7c7db76f
--- /dev/null
+++ b/demos/powersync-supabase-yjs-text-collab-demo/src/library/powersync/AppSchema.ts
@@ -0,0 +1,20 @@
+import { Column, ColumnType, Index, IndexedColumn, Schema, Table } from '@journeyapps/powersync-sdk-web';
+
+export const AppSchema = new Schema([
+ new Table({
+ name: 'documents',
+ columns: [
+ new Column({ name: 'title', type: ColumnType.TEXT }),
+ new Column({ name: 'created_at', type: ColumnType.TEXT })
+ ]
+ }),
+ new Table({
+ name: 'document_updates',
+ columns: [
+ new Column({ name: 'created_at', type: ColumnType.TEXT }),
+ new Column({ name: 'document_id', type: ColumnType.TEXT }),
+ new Column({ name: 'update_b64', type: ColumnType.TEXT })
+ ],
+ indexes: [new Index({ name: 'by_document', columns: [new IndexedColumn({ name: 'document_id' })] })]
+ })
+]);
diff --git a/demos/powersync-supabase-yjs-text-collab-demo/src/library/powersync/PowerSyncYjsProvider.ts b/demos/powersync-supabase-yjs-text-collab-demo/src/library/powersync/PowerSyncYjsProvider.ts
new file mode 100644
index 00000000..d7297bb9
--- /dev/null
+++ b/demos/powersync-supabase-yjs-text-collab-demo/src/library/powersync/PowerSyncYjsProvider.ts
@@ -0,0 +1,107 @@
+import * as Y from 'yjs';
+
+import { b64ToUint8Array, Uint8ArrayTob64 } from '@/library/binary-utils';
+import { v4 as uuidv4 } from 'uuid';
+import { AbstractPowerSyncDatabase } from '@journeyapps/powersync-sdk-web';
+import { ObservableV2 } from 'lib0/observable';
+
+export interface PowerSyncYjsEvents {
+ /**
+ * Triggered when document contents have been loaded from the database the first time.
+ *
+ * The document data may not have been synced from the PowerSync service at this point.
+ */
+ synced: () => void;
+}
+
+/**
+ * Configure bidirectional sync for a Yjs document with a PowerSync database.
+ *
+ * Updates are stored in the `document_updates` table in the database.
+ *
+ * @param ydoc
+ * @param db
+ * @param documentId
+ */
+export class PowerSyncYjsProvider extends ObservableV2