Getting Started
Installation
npm i @docukit/docsync-react1. Client
// client.ts
import { createDocSyncClient } from "@docukit/docsync-react/client";
import { DocNodeBinding } from "@docukit/docsync-react/docnode";
import { IndexedDBProvider } from "@docukit/docsync-react/indexeddb";
// Refer to the DocNode documentation for more information
// on how to define a DocConfig
import { yourDocConfigs } from "./shared.ts";
import { fetchAuthToken, fetchIdentity } from "./utils.ts";
export const { useDoc, usePresence, client } = createDocSyncClient({
docBinding: DocNodeBinding([...yourDocConfigs]),
server: {
url: "http://localhost:8080",
auth: {
getToken: async () => await fetchAuthToken(),
},
},
local: {
provider: IndexedDBProvider,
getIdentity: async () => await fetchIdentity(),
},
});2. Server
// server.ts
import { DocSyncServer } from "@docukit/docsync-react/server";
import { DocNodeBinding } from "@docukit/docsync-react/docnode";
import { PostgresProvider } from "@docukit/docsync-react/postgres";
// Refer to the DocNode documentation for more information
// on how to define a DocConfig
import { yourDocConfigs } from "./shared.ts";
// this will start the server on port 8080
const server = new DocSyncServer({
docBinding: DocNodeBinding([...yourDocConfigs]),
port: 8080,
provider: PostgresProvider,
authenticate: async ({ token }) => ({ userId: token }),
});3. Client Usage
// App.tsx
import { useDoc } from "./client";
const App = () => {
const { doc } = useDoc({ type: "notes" });
return <div>{doc.root.state.title.get()}</div>;
};