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:
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:
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.
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 CoState
and AccountCoState
instances 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
.
Because subscription hooks can't run on the server, you need to use the .load()
static method to load data on the server.
Take a look at our SvelteKit example to see a complete example of how to use SSR with Jazz.
For a complete example of Jazz with Svelte, check out our file sharing example which demonstrates Passkey authentication, file uploads and access control.
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