Example Vanilla App

main.ts

import { co, z } from 'jazz-tools';
import { JazzBrowserContextManager } from 'jazz-tools/browser';

await new JazzBrowserContextManager().createContext({
  sync: {
    peer: 'wss://cloud.jazz.tools?key=minimal-vanilla-example',
    when: 'always',
  },
});

const ToDo = co.map({ title: z.string(), completed: z.boolean() });
const ToDoList = co.list(ToDo);

const listId = new URLSearchParams(window.location.search).get('id');

if (!listId) {
  const newList = ToDoList.create([{ title: 'Learn Jazz', completed: false }]);
  window.location.search = `?id=${newList.$jazz.id}`;
  throw new Error('Redirecting...');
}

const app = document.querySelector('#app')!;
const heading = Object.assign(document.createElement('h1'), {
  innerText: `Viewing ${listId}`,
});
const listContainer = document.createElement('div');
const input = Object.assign(document.createElement('input'), {
  placeholder: 'New task',
});
const btn = Object.assign(document.createElement('button'), {
  innerText: 'Add',
  onclick: () =>
    activeList?.$jazz.push({ title: input.value, completed: false }),
});

app.append(heading, listContainer, input, btn);

let activeList: co.loaded<typeof ToDoList> | undefined;

// @ts-expect-error In a real app, you can use the returned function to tear down the subscription
const unsubscribe = ToDoList.subscribe(
  listId,
  { resolve: { $each: true } },
  (data) => {
    activeList = data;

    listContainer.replaceChildren(
      ...data.map((todo) => {
        const label = document.createElement('label');
        const box = Object.assign(document.createElement('input'), {
          type: 'checkbox',
          checked: todo.completed,
          onclick: () => todo.$jazz.set('completed', box.checked),
        });
        label.append(box, todo.title);
        return label;
      })
    );
  }
);