Things are easy when data syncs anywhere, instantly.

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

// Describe your app with cloud-synced CoValues ("collaborative values")
const Message = co.map({
  text: z.string(),
});

const Chat = co.list(Message);

// Use our global auto-scaling
// Jazz Cloud or self-host
const peer =
  "wss://cloud.jazz.tools/?key=...";

function App() {
  return (
    <JazzReactProvider sync={{ peer }}>
      ...
    </JazzReactProvider>
  );
}

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

function MessageList({ id }) {
  // Load & sync CoValues
  // Rerenders on local & remote edits!
  const chat = useCoState(Chat, id, {
    // Granular load of nested CoValues
    resolve: { $each: true }
  });

  return chat.$isLoaded ? <div>
    {chat.map(msg => (   // Looks like
      <p>{msg.text}</p>  // plain JSON
    ))}
    <TextInput onSubmit={(text) => {
      // Create and edit data anywhere!
      // Locally stored & synced
      chat.$jazz.push(Message.create(
        { text }, chat.$jazz.owner
      ));
    }} />
  </div> : <div>Loading...</div>;
}