Jazz

# Jazz

## Documentation

### Getting started

#### Introduction

# Learn some <span className="sr-only">Jazz</span> <JazzLogo className="h-[41px] -ml-0.5 -mt-[3px] inline" />

**Jazz is a new kind of database** that's **distributed** across your frontend, containers, serverless functions and its own storage cloud.

It syncs structured data, files and LLM streams instantly, and looks like local reactive JSON state.

It also provides auth, orgs & teams, real-time multiplayer, edit histories, permissions, E2E encryption and offline-support out of the box.

---

## Quickstart

**Want to learn the basics?** Check out our [quickstart guide](/docs/getting-started/quickstart) for a step-by-step guide to building a simple app with Jazz.

**Just want to get started?** You can use [`create-jazz-app`](/docs/tools/create-jazz-app) to create a new Jazz project from one of our starter templates or example apps:

<CodeGroup>
  ```sh
    npx create-jazz-app@latest --api-key [email protected]
  ```
</CodeGroup>

<Alert variant="info" className="mt-4 flex gap-2 items-center">
 Requires at least Node.js v20.
 See our [Troubleshooting Guide](https://jazz.tools/docs/troubleshooting) for quick fixes.
</Alert>

{/* <ContentByFramework framework="react">
Or you can follow this [React step-by-step guide](/docs/react/guide) where we walk you through building an issue tracker app.

</ContentByFramework> */}

## How it works

1. **Define your data** with CoValues schemas
2. **Connect to storage infrastructure** (Jazz Cloud or self-hosted)
3. **Create and edit CoValues** like normal objects
4. **Get automatic sync and persistence** across all devices and users

Your UI updates instantly on every change, everywhere. It's like having reactive local state that happens to be shared with the world.

## Ready to see Jazz in action?

Have a look at our [example apps](/examples) for inspiration and to see what's possible with Jazz. From real-time chat and collaborative editors to file sharing and social features — these are just the beginning of what you can build.

## Core concepts

Learn how to structure your data using [collaborative values](/docs/schemas/covalues) — the building blocks that make Jazz apps work.

## Sync and storage

Sync and persist your data by setting up [sync and storage infrastructure](/docs/sync-and-storage) using Jazz Cloud, or host it yourself.

## Going deeper

Get better results with AI by [importing the Jazz docs](/docs/ai-tools) into your context window.

If you have any questions or need assistance, please don't hesitate to reach out to us on [Discord](https://discord.gg/utDMjHYg42). We'd love to help you get started.



#### Quickstart

# Get started with <span className="sr-only">Jazz</span> <JazzLogo className="h-[41px] -ml-0.5 -mt-[3px] inline" /> in 10 minutes
This quickstart guide will take you from an empty project to a working app with a simple data model and components to create and display your data.

<ContentByFramework framework="react">
  ## Create your React App
  
  We'll be using Next.js and TypeScript with `pnpm` for this guide, but Jazz works great with vanilla React too.

  You can accept the defaults for all the questions, or customise the project as you like.

  <TabbedCodeGroup id="create-react-app" default="pnpm" savedPreferenceKey="package-manager">
  <TabbedCodeGroupItem label="npm">
  ```sh
  npx create-next-app@latest --typescript jazzfest
  cd jazzfest
  ```
  </TabbedCodeGroupItem>
  <TabbedCodeGroupItem label="pnpm">
  ```sh
  pnpx create-next-app@latest --typescript jazzfest
  cd jazzfest
  ```
  </TabbedCodeGroupItem>
  </TabbedCodeGroup>

</ContentByFramework>
<ContentByFramework framework="svelte">
  ## Create your Svelte App