The database that syncs.

// Describe your app’s state with CoValues ("collaborative values"), your new cloud-synced building blocks.

import { co, z } from "jazz-tools";

const Message = co.map({
  text: z.string(),
});

const Chat = co.list(Message);

// Connect to sync and storage infrastructure — Jazz Cloud or self-hosted.

<JazzReactProvider
  sync={{ peer: "wss://cloud.jazz.tools" }}
>
  {children}
</JazzReactProvider>

// Create and edit CoValues, and they will be synced and persisted automatically.

const message = Message.create({
  text: “Hello world!”
}, chat.$jazz.owner);

chat.push(message);

// Use CoValues like reactive local state. Get instant UI updates on every edit — across all devices and users. 🎉

import { useCoState } from "jazz-tools/react";

const ChatScreen = ({ id }) => {
  const chat = useCoState(Chat, id);

  return chat.messages.map(msg => (
    <p>{msg.text}</p>
  ));
}