Sync and storage: Jazz Cloud or self-hosted

For sync and storage, you can either use Jazz Cloud for zero-config magic, or run your own sync server.

Using Jazz Cloud

Sign up for a free API key at dashboard.jazz.tools for higher limits or production use, or use your email address as a temporary key to get started quickly.

.env

Replace the API key in the Jazz provider sync server URL with your API key:

export function 
function MyApp({ children }: {
    children: React.ReactNode;
}): React.JSX.Element
MyApp
({ children: React.ReactNodechildren }: { children: React.ReactNodechildren: React.type React.ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<...> | null | undefined
Represents all of the things React can render. Where {@link ReactElement } only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx // Typing children type Props = { children: ReactNode } const Component = ({ children }: Props) => <div>{children}</div> <Component>hello</Component> ```@example```tsx // Typing a custom element type Props = { customElement: ReactNode } const Component = ({ customElement }: Props) => <div>{customElement}</div> <Component customElement={<div>hello</div>} /> ```
ReactNode
}) {
return ( <function JazzReactProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>({ children, guestMode, sync, storage, AccountSchema, defaultProfileName, onLogOut, logOutReplacement, onAnonymousAccountDiscarded, enableSSR, fallback, }: JazzProviderProps<S>): JSX.Element
@categoryContext & Hooks
JazzReactProvider
sync: SyncConfigsync={{ peer: "wss://cloud.jazz.tools/?key=you@example.com"peer: `wss://cloud.jazz.tools/?key=${const apiKey: "you@example.com"
Get a free API Key at dashboard.jazz.tools, or use your email as a temporary key.
@linkhttps://dashboard.jazz.tools
apiKey
}`,
// ... }} > {children: React.ReactNodechildren} </function JazzReactProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>({ children, guestMode, sync, storage, AccountSchema, defaultProfileName, onLogOut, logOutReplacement, onAnonymousAccountDiscarded, enableSSR, fallback, }: JazzProviderProps<S>): JSX.Element
@categoryContext & Hooks
JazzReactProvider
>
); }

Jazz Cloud will

  • sync CoValues in real-time between users and devices
  • safely persist CoValues on redundant storage nodes with additional backups
  • make use of geographically distributed cache nodes for low latency

Free public alpha

  • Jazz Cloud is free during the public alpha, with no strict usage limits
  • We plan to keep a free tier, so you'll always be able to get started with zero setup
  • See Jazz Cloud pricing for more details

Self-hosting your sync server

You can run your own sync server using:

npx jazz-run sync

And then use ws://localhost:4200 as the sync server URL.

You can also run this simple sync server behind a proxy that supports WebSockets, for example to provide TLS. In this case, provide the WebSocket endpoint your proxy exposes as the sync server URL.

Requires at least Node.js v20. See our Troubleshooting Guide for quick fixes.

Command line options:

  • --host / -h - the host to run the sync server on. Defaults to 127.0.0.1.
  • --port / -p - the port to run the sync server on. Defaults to 4200.
  • --in-memory - keep CoValues in-memory only and do sync only, no persistence. Persistence is enabled by default.
  • --db - the path to the file where to store the data (SQLite). Defaults to sync-db/storage.db.

Source code

The implementation of this simple sync server is available open-source on GitHub.