Skip to content
Syndra

Getting started

Quickstart

Build a collaborative to-do list that syncs across tabs in under five minutes.

On this page

In this guide you’ll build a to-do list where every change appears instantly in every open tab and keeps working when you go offline.

  1. Create the client

    Point the client at the project you created during installation.

    src/syndra.ts
    import { createClient } from "@syndra/client"

export const syndra = createClient({
  project: import.meta.env.SYNDRA_PROJECT,
  publicKey: import.meta.env.SYNDRA_PUBLIC_KEY,
})

  2. Define a document

    Documents are typed JSON trees. Give yours a schema and a default value.

    src/todos.ts
    import { syndra } from "./syndra"

type Todo = { id: string; text: string; done: boolean }

export const todos = syndra.doc<{ items: Todo[] }>("lists/groceries", {
  initial: { items: [] },
})

  3. Subscribe and render

    subscribe fires immediately with the local state, then again on every change local or remote.

    src/main.ts
    import { todos } from "./todos"

todos.subscribe(({ items }) => {
  list.replaceChildren(...items.map(renderItem))
})

  4. Make changes

    Mutate the draft inside update. Syndra records the change as a set of operations and syncs them.

    ts
    function addTodo(text: string) {
  todos.update((draft) => {
    draft.items.push({ id: crypto.randomUUID(), text, done: false })
  })
}

  5. Open a second tab

    Run your dev server and open the app in two windows. Add an item in one it appears in the other before you can blink. 🎉

Next steps