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. Give your app context

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.

#Give your app context

Jazz depends on having context to know who's reading and writing data.

If you're using vanilla JS, you'll need to manually create a Jazz context and return the API methods necessary for getting the current user, logging the current user out, and accessing the authentication storage.

#Using your App

You can start using your app by passing a sync parameter and a custom account schema to the createVanillaJazzApp factory.

import { MyAccount } from './schema';
import { createVanillaJazzApp } from './jazz';
import { apiKey } from './apiKey'
const { me, logOut, authSecretStorage } = await createVanillaJazzApp({
    sync: {
        peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
        when: 'always'
    },
    AccountSchema: MyAccount,
})

See Authentication States for more details on how the when property affects synchronisation based on authentication state.

You can find out more about how to load and subscribe to data here.

#Further Reading

• Schemas - Learn about defining your data model

• Authentication - Set up user authentication
• Sync and Storage - Learn about data persistence