Installation and Setup

Add Jazz to your application in minutes. This setup covers standard front-end set up, and gives an overview of experimental SSR approaches.

Integrating Jazz with your existing app is straightforward. You'll define data schemas that describe your application's structure, then wrap your app with a provider that handles sync and storage. The whole process takes just three steps:

1. Install dependencies
2. Write your schema
3. Wrap your app in a provider

Looking for complete examples? Check out our example applications for chat apps, collaborative editors, and more.

#Install dependencies

First, install the required packages:

#Write your schema

Define your data schema using CoValues from jazz-tools.

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

export const TodoItem = co.map({
  title: z.string(),
  completed: z.boolean(),
});

export const AccountRoot = co.map({
  todos: co.list(TodoItem),
});

export const MyAppAccount = co.account({
  root: AccountRoot,
  profile: co.profile(),
});

See CoValues for more information on how to define your schema.

#Standard Setup

Wrap your application with a provider to connect to the Jazz network and define your data schema:

This setup handles:

• Connection to the Jazz sync server
• Schema registration for type-safe data handling
• Local storage configuration

With this in place, you're ready to start using Jazz hooks in your components. Learn how to access and update your data.

#SSR Integration

Jazz's default behaviour is to wait until the user's account is loaded before rendering the provider's children. This can be problematic on the server, where no account is available.

We can solve this by asking Jazz to render the children using an a read-only account that can be used without credentials, known as an 'agent'.

Agents can access any data which is available to the public.

#Enabling Provider rendering on the server

In order to tell Jazz to allow children to be loaded even in an account-less context, we can set the enableSSR setting on the provider.

Since the provider is running without an authenticated user, all the useCoState and useAccount hooks will return null.

#Load data with an agent

In order to actually load and render data, you need to tell Jazz how to do this without an account. We can use the loadAs option in our .load call, combined with an agent, generated using createSSRJazzAgent.

Take a look at our Next.js example to see a complete example of how to use SSR with Jazz.

#Further Reading

• Schemas - Learn about defining your data model
• Provider Configuration - Learn about other configuration options for Providers
• Authentication - Set up user authentication
• Sync and Storage - Learn about data persistence