diff --git a/package.json b/package.json
index eb07953..fbc690a 100644
--- a/package.json
+++ b/package.json
@@ -90,8 +90,8 @@
     "daisyui": "5.5.5",
     "dotenv": "^17.2.3",
     "effect": "^3.19.6",
-    "fast-diff": "^1.3.0",
     "katex": "^0.16.25",
+    "loro-codemirror": "^0.3.3",
     "loro-crdt": "^1.10.0",
     "svelte": "^5.44.0",
     "tiptap-markdown": "^0.9.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bf2bbfc..b9b6e78 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -131,12 +131,12 @@ importers:
       effect:
         specifier: ^3.19.6
         version: 3.19.6
-      fast-diff:
-        specifier: ^1.3.0
-        version: 1.3.0
       katex:
         specifier: ^0.16.25
         version: 0.16.25
+      loro-codemirror:
+        specifier: ^0.3.3
+        version: 0.3.3(@codemirror/state@6.5.2)(@codemirror/view@6.38.8)(loro-crdt@1.10.0)
       loro-crdt:
         specifier: ^1.10.0
         version: 1.10.0
@@ -2161,9 +2161,6 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-diff@1.3.0:
-    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
-
   fast-glob@3.3.3:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
@@ -2495,6 +2492,13 @@ packages:
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
+  loro-codemirror@0.3.3:
+    resolution: {integrity: sha512-C6qAUmDjMTyoXVeDxKWixvr/TSTo/jXFrvgGW+wn6RAHeIzNFovBDLQNi/Sary4Ahx8DaYADTCm9eCaRAjvWtw==}
+    peerDependencies:
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.7.0
+      loro-crdt: ^1.8.2
+
   loro-crdt@1.10.0:
     resolution: {integrity: sha512-Fms27q9IaDANUe5OACQL6qLMhJasMXzjRkyK+NAIiPQXGBK2VAp6C7pAr9fzuKbL71YyDgA4Pv69RGwiScWSPg==}
 
@@ -5418,8 +5422,6 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
-  fast-diff@1.3.0: {}
-
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -5710,6 +5712,12 @@ snapshots:
 
   longest-streak@3.1.0: {}
 
+  loro-codemirror@0.3.3(@codemirror/state@6.5.2)(@codemirror/view@6.38.8)(loro-crdt@1.10.0):
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.8
+      loro-crdt: 1.10.0
+
   loro-crdt@1.10.0: {}
 
   magic-string@0.30.21:
diff --git a/src/lib/components/codemirror/Codemirror.svelte b/src/lib/components/codemirror/Codemirror.svelte
index 5a19106..407a717 100644
--- a/src/lib/components/codemirror/Codemirror.svelte
+++ b/src/lib/components/codemirror/Codemirror.svelte
@@ -1,30 +1,23 @@
 <script lang="ts">
   import { browser } from "$app/environment";
-  import type { Extension, Text } from "@codemirror/state";
+  import type { Extension } from "@codemirror/state";
   import { EditorView } from "@codemirror/view";
   import { onMount, onDestroy } from "svelte";
   import type { ClassValue } from "svelte/elements";
 
   interface Props {
-    doc: string | Text;
     extensions: Extension | undefined;
     class?: ClassValue;
     editorView: EditorView;
   }
 
-  let {
-    doc,
-    extensions = [],
-    editorView = $bindable(),
-    ...props
-  }: Props = $props();
+  let { extensions = [], editorView = $bindable(), ...props }: Props = $props();
 
   let editorElement: HTMLElement;
 
   onMount(() => {
     // Initialize CodeMirror
     editorView = new EditorView({
-      doc,
       parent: editorElement,
       extensions: extensions,
     });
diff --git a/src/lib/components/codemirror/Editor.svelte b/src/lib/components/codemirror/Editor.svelte
index 5f007bd..056e71c 100644
--- a/src/lib/components/codemirror/Editor.svelte
+++ b/src/lib/components/codemirror/Editor.svelte
@@ -14,6 +14,7 @@
     ListOrdered,
     Strikethrough,
   } from "@lucide/svelte";
+  import { LoroExtensions } from "loro-codemirror";
   import Codemirror from "./Codemirror.svelte";
   import {
     coreExtensions,
@@ -30,15 +31,19 @@
   } from "./Editor.ts";
   import Toolbar from "./Toolbar.svelte";
   import { wikilinksExtension } from "$lib/editor/wikilinks.ts";
-  import type { NoteOrFolder } from "$lib/schema.ts";
+  import type { NoteOrFolder, User } from "$lib/schema.ts";
+  import { LoroNoteManager } from "$lib/loro.ts";
+  import { EphemeralStore, UndoManager } from "loro-crdt";
+  import type { Extension } from "@codemirror/state";
+  import { onDestroy } from "svelte";
 
   interface Props {
-    content: string;
-    onchange: (newContent: string) => void;
+    manager: LoroNoteManager | undefined;
     notesList?: NoteOrFolder[];
+    user: User | undefined;
   }
 
-  let { content, onchange, notesList = [] }: Props = $props();
+  let { manager, notesList = [], user }: Props = $props();
 
   // svelte-ignore non_reactive_update
   let editorView: EditorView;
@@ -98,37 +103,35 @@
     },
   });
 
-  const extensions = [
+  let loroExtensions: Extension;
+  if (manager !== undefined && user !== undefined) {
+    const ephemeral = new EphemeralStore();
+    const undoManager = new UndoManager(manager.doc, {});
+
+    onDestroy(() => {
+      ephemeral.destroy();
+    });
+
+    loroExtensions = LoroExtensions(
+      manager.doc,
+      {
+        ephemeral,
+        user: { name: user.username, colorClassName: "bg-primary" },
+      },
+      undoManager,
+      LoroNoteManager.getTextFromDoc,
+    );
+  } else {
+    loroExtensions = [];
+  }
+
+  const extensions: Extension[] = [
     coreExtensions,
     wikilinksExtension(notesList),
-    // Update listener
-    EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        const newContent = update.state.doc.toString();
-        console.debug(
-          "[Prosemark] Content updated. Preview:",
-          newContent.slice(0, 50),
-        );
-        onchange(newContent);
-      }
-    }),
+    loroExtensions,
     editorTheme,
   ];
 
-  // Update content if it changes externally (from Loro)
-  $effect(() => {
-    if (content !== editorView.state.doc.toString()) {
-      console.debug("[Prosemark] External content update");
-      editorView.dispatch({
-        changes: {
-          from: 0,
-          to: editorView.state.doc.length,
-          insert: content,
-        },
-      });
-    }
-  });
-
   const tools = [
     [
       {
@@ -196,10 +199,5 @@
 <div class="flex h-full flex-col">
   <Toolbar {tools} />
 
-  <Codemirror
-    bind:editorView
-    doc={content}
-    {extensions}
-    class="flex-1 overflow-y-auto"
-  />
+  <Codemirror bind:editorView {extensions} class="flex-1 overflow-y-auto" />
 </div>
diff --git a/src/lib/crypto.ts b/src/lib/crypto.ts
index 6cf6fbd..8f6b639 100644
--- a/src/lib/crypto.ts
+++ b/src/lib/crypto.ts
@@ -110,22 +110,28 @@ export async function decryptKey(
   return new Uint8Array(decrypted).toBase64();
 }
 
-export async function encryptData(
-  data: Uint8Array<ArrayBuffer>,
-  noteKey: string,
-): Promise<Uint8Array> {
-  const keyBuffer = Uint8Array.fromBase64(noteKey);
-  const key = await crypto.subtle.importKey(
+async function getCryptoKeyFromBase64(base64Key: string): Promise<CryptoKey> {
+  const keyBuffer = Uint8Array.fromBase64(base64Key);
+  return crypto.subtle.importKey(
     "raw",
     keyBuffer,
     {
       name: "AES-GCM",
     },
     false,
-    ["encrypt"],
+    ["encrypt", "decrypt"],
   );
+}
+
+const IV_LENGTH = 12; // AES-GCM standard IV length
 
-  const iv = crypto.getRandomValues(new Uint8Array(12));
+export async function encryptData(
+  data: Uint8Array<ArrayBuffer>,
+  noteKey: string,
+): Promise<Uint8Array> {
+  const key = await getCryptoKeyFromBase64(noteKey);
+
+  const iv = crypto.getRandomValues(new Uint8Array(IV_LENGTH));
   const encrypted = await crypto.subtle.encrypt(
     {
       name: "AES-GCM",
@@ -147,20 +153,11 @@ export async function decryptData(
   encrypted: Uint8Array,
   noteKey: string,
 ): Promise<Uint8Array> {
-  const keyBuffer = Uint8Array.fromBase64(noteKey);
-  const key = await crypto.subtle.importKey(
-    "raw",
-    keyBuffer,
-    {
-      name: "AES-GCM",
-    },
-    false,
-    ["decrypt"],
-  );
+  const key = await getCryptoKeyFromBase64(noteKey);
 
   // Extract IV from first 12 bytes
-  const iv = encrypted.slice(0, 12);
-  const data = encrypted.slice(12);
+  const iv = encrypted.slice(0, IV_LENGTH);
+  const data = encrypted.slice(IV_LENGTH);
 
   const decrypted = await crypto.subtle.decrypt(
     {
diff --git a/src/lib/loro.ts b/src/lib/loro.ts
index 61e3e26..35f44d5 100644
--- a/src/lib/loro.ts
+++ b/src/lib/loro.ts
@@ -1,9 +1,9 @@
 import { decryptData, encryptData } from "$lib/crypto";
 import { syncSchemaJson } from "$lib/remote/notes.schemas.ts";
 import { sync } from "$lib/remote/sync.remote.ts";
-import { Chunk, Effect, Fiber, Function, PubSub, Schema, Stream } from "effect";
-import diff from "fast-diff";
-import { LoroDoc, LoroText, type Frontiers } from "loro-crdt";
+import { Schema } from "effect";
+import { LoroDoc, LoroText } from "loro-crdt";
+import { unawaited } from "./unawaited.ts";
 
 export type Doc = LoroDoc<{
   content: LoroText;
@@ -12,111 +12,83 @@ export type Doc = LoroDoc<{
 export class LoroNoteManager {
   #noteId: string;
   #noteKey: string;
-  #doc: Doc;
+  doc: Doc;
   #text: LoroText;
   #onUpdate: (snapshot: string) => void | Promise<void>;
   #eventSource: EventSource | null = null;
   #isSyncing = false;
 
-  #outgoingHub: PubSub.PubSub<Uint8Array>;
-  #persistenceHub: PubSub.PubSub<null>;
-
-  #persistenceFiber: Fiber.RuntimeFiber<void, void>;
-  #outgoingFiber: Fiber.RuntimeFiber<void, void> | null = null;
-  #incomingFiber: Fiber.RuntimeFiber<void, void> | null = null;
+  static getTextFromDoc(this: void, doc: LoroDoc): LoroText {
+    return doc.getText("content");
+  }
 
-  constructor(
+  /** @private */
+  private constructor(
     noteId: string,
     noteKey: string,
-    onUpdate?: (snapshot: string) => void | Promise<void>,
+    onUpdate: (snapshot: string) => Promise<void>,
   ) {
+    console.log("LoroNoteManager created for note:", noteId);
+
     this.#noteId = noteId;
     this.#noteKey = noteKey;
-    this.#doc = new LoroDoc();
-    this.#text = this.#doc.getText("content");
-    this.#onUpdate = onUpdate ?? Function.constVoid;
-
-    // Initialize frontiers
-    this.#lastFrontiers = this.#doc.frontiers();
-
-    // 1. Init Hubs
-    this.#outgoingHub = Effect.runSync(PubSub.unbounded<Uint8Array>());
-    this.#persistenceHub = Effect.runSync(PubSub.unbounded<null>());
-
-    // 2. Persistence Loop (Debounced Snapshot)
-    const persistenceStream = Stream.fromPubSub(this.#persistenceHub).pipe(
-      Stream.debounce("500 millis"),
-      Stream.runForEach(() =>
-        Effect.promise(async () => {
-          const snapshot = await this.getEncryptedSnapshot();
-          await this.#onUpdate(snapshot);
-        }),
-      ),
-    );
-    this.#persistenceFiber = Effect.runFork(persistenceStream);
+    this.doc = new LoroDoc();
+    this.#text = LoroNoteManager.getTextFromDoc(this.doc);
+    this.#onUpdate = onUpdate;
 
     // Subscribe to changes
-    this.#doc.subscribe((event) => {
-      // Notify content listeners
-      const content = this.getContent();
-      this.#contentListeners.forEach((listener) => {
-        listener(content);
-      });
+    this.doc.subscribeLocalUpdates((update) => {
+      console.debug(
+        "Loro document changed. Preview:",
+        this.#text.toString().slice(0, 20),
+      );
 
-      // Publish persistence signal
-      Effect.runSync(this.#persistenceHub.publish(null));
+      // Persist changes
+      unawaited(this.#persist());
 
-      // Publish local ops for sync
-      if (event.by === "local") {
-        const frontiers = this.#doc.frontiers();
-        try {
-          const update = this.#doc.export({
-            mode: "shallow-snapshot",
-            frontiers: this.#lastFrontiers,
-          });
-          this.#lastFrontiers = frontiers;
-          if (update.length > 0) {
-            Effect.runSync(this.#outgoingHub.publish(update));
-          }
-        } catch (e) {
-          console.error("Error exporting update", e);
-        }
+      // Send local changes immediately
+      if (this.#isSyncing) {
+        unawaited(this.#sendUpdate(update));
       }
     });
   }
 
-  destroy() {
-    this.stopSync();
-    Effect.runFork(Fiber.interrupt(this.#persistenceFiber));
-  }
-
-  #contentListeners: ((content: string) => void)[] = [];
-
   /**
-   * Subscribe to content changes
+   * Initialize the manager with an encrypted snapshot
    */
-  subscribeToContent(listener: (content: string) => void) {
-    this.#contentListeners.push(listener);
-    // Return unsubscribe function
-    return () => {
-      this.#contentListeners = this.#contentListeners.filter(
-        (l) => l !== listener,
-      );
-    };
+  static async create(
+    this: void,
+    noteId: string,
+    noteKey: string,
+    onUpdate: (snapshot: string) => Promise<void>,
+    encryptedSnapshot: string | null,
+  ): Promise<LoroNoteManager> {
+    const manager = new LoroNoteManager(noteId, noteKey, onUpdate);
+
+    if (encryptedSnapshot) {
+      const encryptedBytes = Uint8Array.fromBase64(encryptedSnapshot);
+      const decrypted = await decryptData(encryptedBytes, manager.#noteKey);
+      manager.doc.import(decrypted);
+    }
+    return manager;
+  }
+
+  async #persist() {
+    const snapshot = await this.getEncryptedSnapshot();
+    await this.#onUpdate(snapshot);
   }
 
   /**
-   * Initialize the manager with an encrypted snapshot
+   * Stop real-time sync
    */
-  async init(encryptedSnapshot?: string) {
-    if (encryptedSnapshot) {
-      await this.loadEncryptedSnapshot(encryptedSnapshot);
-      this.#lastFrontiers = this.#doc.frontiers();
+  stopSync() {
+    if (this.#eventSource) {
+      this.#eventSource.close();
+      this.#eventSource = null;
     }
+    this.#isSyncing = false;
   }
 
-  #lastFrontiers: Frontiers;
-
   /**
    * Start real-time sync
    */
@@ -126,151 +98,45 @@ export class LoroNoteManager {
 
     this.#eventSource = new EventSource(`/api/sync/${this.#noteId}`);
 
-    // 3. Incoming Loop (Remote -> Loro)
-    const incomingStream = Stream.async<Uint8Array>((emit) => {
-      if (this.#eventSource) {
-        this.#eventSource.onmessage = (event: MessageEvent<string>): void => {
-          try {
-            const data = Schema.decodeSync(syncSchemaJson)(event.data);
-
-            for (const update of data.updates) {
-              const updateBytes = Uint8Array.fromBase64(update);
-              void emit(Effect.succeed(Chunk.make(updateBytes)));
-            }
-          } catch (error) {
-            console.error("Failed to process sync message:", error);
-          }
-        };
-
-        this.#eventSource.onerror = (error) => {
-          console.error("SSE connection error:", error);
-          this.#eventSource?.close();
-          this.#isSyncing = false;
-        };
+    this.#eventSource.onmessage = (event: MessageEvent<string>): void => {
+      try {
+        const data = Schema.decodeSync(syncSchemaJson)(event.data);
+        const updateBytes = Uint8Array.fromBase64(data.update);
+        this.doc.import(updateBytes);
+      } catch (error) {
+        console.error("Failed to process sync message:", error);
       }
-    }).pipe(
-      Stream.runForEach((update) =>
-        Effect.sync(() => {
-          this.#doc.import(update);
-        }),
-      ),
-    );
-    this.#incomingFiber = Effect.runFork(incomingStream);
-
-    // 4. Outgoing Loop (Local -> Network)
-    const outgoingStream = Stream.fromPubSub(this.#outgoingHub).pipe(
-      Stream.groupedWithin(100, "500 millis"),
-      Stream.runForEach((chunk) =>
-        Effect.promise(async () => {
-          if (Chunk.isEmpty(chunk)) return;
-          await this.#sendUpdates(Chunk.toReadonlyArray(chunk));
-        }),
-      ),
-    );
-    this.#outgoingFiber = Effect.runFork(outgoingStream);
-  }
+    };
 
-  /**
-   * Stop real-time sync
-   */
-  stopSync() {
-    if (this.#eventSource) {
-      this.#eventSource.close();
-      this.#eventSource = null;
-    }
-    if (this.#incomingFiber) {
-      Effect.runFork(Fiber.interrupt(this.#incomingFiber));
-      this.#incomingFiber = null;
-    }
-    if (this.#outgoingFiber) {
-      Effect.runFork(Fiber.interrupt(this.#outgoingFiber));
-      this.#outgoingFiber = null;
-    }
-    this.#isSyncing = false;
+    this.#eventSource.onerror = (error) => {
+      console.error("SSE connection error:", error);
+      this.#eventSource?.close();
+      this.#isSyncing = false;
+    };
   }
 
   /**
    * Send update to server
    */
-  async #sendUpdates(updates: readonly Uint8Array[]) {
+  async #sendUpdate(update: Uint8Array) {
     try {
       await sync({
         noteId: this.#noteId,
-        updates: updates.map((u) => u.toBase64()),
+        update: update.toBase64(),
       });
     } catch (error) {
       console.error("Failed to send update:", error);
     }
   }
 
-  /**
-   * Get current text content
-   */
-  getContent(): string {
-    return this.#text.toString();
-  }
-
-  /**
-   * Update text content using diffs
-   */
-  updateContent(newContent: string) {
-    const currentContent = this.#text.toString();
-    if (currentContent === newContent) return;
-
-    console.debug("[Loro] Updating content with diff...");
-
-    // Calculate diff
-    const diffs = diff(currentContent, newContent);
-
-    let index = 0;
-    for (const [type, text] of diffs) {
-      switch (type) {
-        // DELETE
-        case -1: {
-          this.#text.delete(index, text.length);
-          break;
-        }
-
-        // EQUAL
-        case 0: {
-          index += text.length;
-          break;
-        }
-
-        // INSERT
-        case 1: {
-          this.#text.insert(index, text);
-          index += text.length;
-          break;
-        }
-      }
-    }
-
-    this.#doc.commit();
-  }
-
   /**
    * Get encrypted snapshot for storage
    */
   async getEncryptedSnapshot(): Promise<string> {
-    const snapshot = this.#doc.export({
+    const snapshot = this.doc.export({
       mode: "snapshot",
     }) as Uint8Array<ArrayBuffer>;
     const encrypted = await encryptData(snapshot, this.#noteKey);
     return encrypted.toBase64();
   }
-
-  /**
-   * Load from encrypted snapshot
-   */
-  async loadEncryptedSnapshot(encryptedSnapshot: string) {
-    try {
-      const encryptedBytes = Uint8Array.fromBase64(encryptedSnapshot);
-      const decrypted = await decryptData(encryptedBytes, this.#noteKey);
-      this.#doc.import(decrypted);
-    } catch (error) {
-      console.error("Failed to load encrypted snapshot:", error);
-      throw error;
-    }
-  }
 }
diff --git a/src/lib/remote/notes.schemas.ts b/src/lib/remote/notes.schemas.ts
index 696c247..2c1b4ff 100644
--- a/src/lib/remote/notes.schemas.ts
+++ b/src/lib/remote/notes.schemas.ts
@@ -30,7 +30,7 @@ export const reorderNotesSchema = ReorderNotesSchema.pipe(
 
 export const SyncSchema = Schema.Struct({
   noteId: Schema.String,
-  updates: Schema.Array(Schema.String),
+  update: Schema.String,
 });
 export const syncSchemaJson = Schema.parseJson(SyncSchema);
 export const syncSchema = SyncSchema.pipe(Schema.standardSchemaV1);
diff --git a/src/lib/remote/sync.remote.ts b/src/lib/remote/sync.remote.ts
index 77d0a78..a3d1d26 100644
--- a/src/lib/remote/sync.remote.ts
+++ b/src/lib/remote/sync.remote.ts
@@ -7,7 +7,7 @@ import { eq } from "drizzle-orm";
 import { Schema } from "effect";
 import { syncSchema, syncSchemaJson } from "./notes.schemas.ts";
 
-export const sync = command(syncSchema, async ({ noteId, updates }) => {
+export const sync = command(syncSchema, async ({ noteId, update }) => {
   const { locals } = getRequestEvent();
   const user = locals.user;
 
@@ -21,11 +21,11 @@ export const sync = command(syncSchema, async ({ noteId, updates }) => {
 
     if (!note || note.ownerId !== user.id) error(404, "Not found");
 
-    console.debug("Syncing", noteId);
+    console.log("Syncing", noteId);
 
     // Broadcast update to all connected clients
     // The update is expected to be a base64 string of the binary update
-    broadcast(noteId, Schema.encodeSync(syncSchemaJson)({ noteId, updates }));
+    broadcast(noteId, Schema.encodeSync(syncSchemaJson)({ noteId, update }));
   } catch (err) {
     console.error("Sync update error:", err);
     error(500, "Failed to process update");
diff --git a/src/lib/server/real-time.ts b/src/lib/server/real-time.ts
index 1e06f31..19c191f 100644
--- a/src/lib/server/real-time.ts
+++ b/src/lib/server/real-time.ts
@@ -11,7 +11,7 @@ export function addClient(
   }
   clients.get(noteId)!.add(controller);
 
-  console.debug(
+  console.log(
     `Client added to note ${noteId}. Total clients: ${clients.get(noteId)?.size}`,
   );
 }
@@ -26,7 +26,7 @@ export function removeClient(
     if (set.size === 0) {
       clients.delete(noteId);
     }
-    console.debug(`Client removed from note ${noteId}. Remaining: ${set.size}`);
+    console.log(`Client removed from note ${noteId}. Remaining: ${set.size}`);
   }
 }
 
diff --git a/src/routes/api/sync/[noteId]/+server.ts b/src/routes/api/sync/[noteId]/+server.ts
index 1d70aeb..152ca3f 100644
--- a/src/routes/api/sync/[noteId]/+server.ts
+++ b/src/routes/api/sync/[noteId]/+server.ts
@@ -1,12 +1,12 @@
-import { syncSchemaJson } from "$lib/remote/notes.schemas.ts";
 import { db } from "$lib/server/db";
 import { notes } from "$lib/server/db/schema";
 import { addClient, removeClient } from "$lib/server/real-time";
 import { json } from "@sveltejs/kit";
 import { eq } from "drizzle-orm";
-import { Schema } from "effect";
 
 export const GET = async ({ params, locals }) => {
+  console.log("SSE connection request for note:", params.noteId);
+
   if (!locals.user) {
     return json({ error: "Unauthorized" }, { status: 401 });
   }
@@ -34,11 +34,7 @@ export const GET = async ({ params, locals }) => {
       addClient(noteId, controller);
       // Send initial connection message
       const encoder = new TextEncoder();
-      c.enqueue(
-        encoder.encode(
-          `event: connected\ndata: ${Schema.encodeSync(syncSchemaJson)({ noteId, updates: [] })}\n\n`,
-        ),
-      );
+      c.enqueue(encoder.encode(`event: connected\n`));
     },
     cancel() {
       removeClient(noteId, controller);
diff --git a/src/routes/notes/[id]/+page.svelte b/src/routes/notes/[id]/+page.svelte
index e1b8539..1c270e0 100644
--- a/src/routes/notes/[id]/+page.svelte
+++ b/src/routes/notes/[id]/+page.svelte
@@ -1,3 +1,7 @@
+<script lang="ts" module>
+  const loroManagers = new SvelteMap<string, LoroNoteManager>();
+</script>
+
 <script lang="ts">
   import { dev } from "$app/environment";
   import { page } from "$app/state";
@@ -7,6 +11,7 @@
   import { unawaited } from "$lib/unawaited.ts";
   import { decryptKey } from "$lib/crypto";
   import { FilePlus, Folder } from "@lucide/svelte";
+  import { SvelteMap } from "svelte/reactivity";
 
   const { data } = $props();
 
@@ -14,7 +19,9 @@
   let id = $derived(page.params.id);
   const userPrivateKey = data.user?.privateKeyEncrypted;
 
-  let loroManager = $state<LoroNoteManager>();
+  let loroManager = $derived(
+    id !== undefined ? loroManagers.get(id) : undefined,
+  );
   // TODO: Use codemirror-server-render to SSR the editor
   let editorContent = $state("");
 
@@ -45,43 +52,27 @@
 
           if (key) {
             console.debug("[Page] Loading Loro manager for note:", id);
-            try {
-              // TODO: Cache again?
-              const manager = new LoroNoteManager(id, key, async (snapshot) => {
+
+            const manager = await LoroNoteManager.create(
+              id,
+              key,
+              async (snapshot) => {
                 await updateNote({ noteId: id, loroSnapshot: snapshot });
-              });
-
-              if (note.loroSnapshot) {
-                await manager.init(note.loroSnapshot);
-              }
-
-              if (signal.aborted as boolean) {
-                manager.destroy();
-                return;
-              }
-
-              manager.startSync();
-              loroManager = manager;
-
-              // Sync content from server
-              editorContent = manager.getContent();
-
-              // Subscribe to content changes
-              unsubscribeContent = manager.subscribeToContent((content) => {
-                console.debug(
-                  "[Page] Content update received. Preview:",
-                  content.slice(0, 20),
-                );
-                editorContent = content;
-              });
+              },
+              note.loroSnapshot,
+            );
+
+            if (signal.aborted as boolean) {
+              manager.stopSync();
               return;
-            } catch (error) {
-              console.error("Failed to load note:", error);
             }
-          }
-        }
 
-        if (!note || note.isFolder) {
+            manager.startSync();
+            loroManagers.set(id, manager);
+
+            return;
+          }
+        } else if (!note || note.isFolder) {
           console.debug("[Page] No valid note selected or is folder");
         }
         editorContent = "";
@@ -91,8 +82,7 @@
     return () => {
       console.debug("[Page] Cleaning up previous subscription");
       abortController.abort();
-      loroManager?.destroy();
-      loroManager = undefined;
+      loroManager?.stopSync();
       unsubscribeContent?.();
     };
   });
@@ -100,14 +90,7 @@
 
 <div class="relative h-full flex-1 overflow-hidden">
   {#if !(note?.isFolder ?? true)}
-    <Editor
-      content={editorContent}
-      {notesList}
-      onchange={(newContent: string) => {
-        // Hook in Loro
-        loroManager?.updateContent(newContent);
-      }}
-    />
+    <Editor manager={loroManager} {notesList} user={data.user} />
   {:else if note?.isFolder}
     <div class="flex h-full items-center justify-center text-slate-400">
       <div class="text-center">