Svelte Installation and Setup

Jazz can be used with Svelte or in a SvelteKit app.

To add some Jazz to your Svelte app, you can use the following steps:

Install Jazz dependencies

pnpm install jazz-tools

Write your schema

See the schema docs for more information.

// src/lib/schema.ts
import { co, z } from "jazz-tools"

export const MyProfile = co.profile({
	name: z.string(),
	counter: z.number()
});

export const root = co.map({});

export const UserAccount = co.account({
	root,
	profile: MyProfile
});

Set up the Provider in your root layout

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { JazzSvelteProvider } from "jazz-tools/svelte";

  let { children } = $props();

  // Example configuration for authentication and peer connection
  let sync = { peer: "wss://cloud.jazz.tools/?key=you@example.com" };
</script>

<JazzSvelteProvider {sync} AccountSchema={MyAccount}>
  {@render children?.()}
</JazzSvelteProvider>

Use Jazz hooks in your components

<!-- src/routes/+page.svelte -->
<script lang="ts">
	import { CoState, AccountCoState } from "jazz-tools/svelte";
	import { MyProfile, UserAccount } from "$lib/schema";

	const me = new AccountCoState(UserAccount);
	const profile = new CoState(MyProfile, me.current?._refs.profile?.id);

  function increment() {
    if (!profile.current) return;
    profile.current.counter = profile.current.counter + 1;
  }
</script>

<button onclick={increment}>
  Count: {profile.current?.counter}
</button>

For a complete example of Jazz with Svelte, check out our file sharing example which demonstrates, Passkey authentication, file uploads and access control.

GitHubDocs issue?⌝DiscordJoin Discord⌝
Troubleshooting
Sync and storage