Dexie Cloud is entering Rich-Text Editing ecosystem

Hey everyone,

We’ve got some exciting news to share about what’s cooking in the Dexie Cloud lab. If you’ve ever used Google Docs, you know how cool it is to collaborate in real-time on a document. Now, we’re bringing that same vibe to Dexie Cloud.

Our focus right now is on integrating Dexie.js and Dexie Cloud to fit into the ecosystem of rich-text editors like ProseMirror and Tiptap by integrating it with the CRDT library Y.js. What does this mean? Simply put, you’ll soon be able to build apps where multiple users can edit the same document simultaneously, see each other’s cursors, and do it all in real-time.

We’ve already made good headway on this. Dexie.js now has beta support for storing Y.js documents on properties in their persisted objects, which means your Y.Doc instances can be seamlessly stored the way you are used to store any other type such as Blobs or strings, with Dexie.js. This feature is available now in an alpha version for those who want to take it for a spin.

import Dexie from 'dexie'; // npm i dexie@next
import * as Y from 'yjs'; // npm i yjs

const db = new Dexie('articleDB', { Y }); // Y.js is provided to Dexie here!

db.version(1).stores({
  articles: 'id, title, content:Y, *tags', // let content property contain Y.Doc
});

Dexie will create Y.Doc instances under the hood, so you only need to consume and edit them using a DexieYProvider. But react users will instead use a react hook for this (not yet released). Here’s an example on how to render a TipTap editor in a react component:

import { useDocument } from 'dexie-react-hooks';
import { useEditor, EditorContent } from "@tiptap/react";
import Collaboration from "@tiptap/extension-collaboration";

function TiptapEditor ({doc}) {
  // Load content
  useDocument(doc);
  // Open Tiptap rich-text editor:
  const editor = useEditor({
    extensions: [
      Collaboration.configure({
        document: doc,
      })
    ],
  });

  return <EditorContent editor={editor} />;
}

// A parent component that loads the article:
function MyContentEditor({articleId}) {
  // Load article
  const articles = useLiveQuery(
    () => db.articles.where({id: articleId}).toArray()
   );

  // Wait until loaded
  if (!articles) return null;

  // Check if article with given ID existed in DB:
  const [article] = articles;
  if (!article) return (
    <div>
      Article with id {articleId} doesn't exist
    </div>
  );
  
  // Render the editor
  return <TiptapEditor doc={article.content} />;
}

Dexie Cloud

Next up, we’re rolling this out to Dexie Cloud. Once done, any app using Dexie Cloud for sync will get the full power of rich-text editing and the Y.js ecosystem baked right in, with awareness of cursors etc. We’re on track to have this ready by October 2024.

We’re pretty pumped about what this means for the Dexie ecosystem and can’t wait to see what you all build with it. As always, we’ll keep you posted as we get closer to the finish line.

Stay tuned!

Dexie Cloud is entering Rich-Text Editing ecosystem was originally published in Dexie.js on Medium, where people are continuing the conversation by highlighting and responding to this story.