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
Requires at least Node.js v20.

Write your schema

See the schema docs for more information.

// src/lib/schema.ts
import { Account, Profile, coField } from "jazz-tools";

export class MyProfile extends Profile {
  name = coField.string;
  counter = coField.number; // This will be publically visible
}

export class MyAccount extends Account {
  profile = coField.ref(MyProfile);

  // ...
}

Set up the Provider in your root layout

<!-- src/routes/+layout.svelte -->

<script lang="ts">
  import { JazzSvelteProvider } from 'jazz-tools/svelte';

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

<JazzSvelteProvider {sync} {AccountSchema}>
  <App />
</JazzSvelteProvider>

Use Jazz hooks in your components

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import { useCoState, useAccount } from 'jazz-tools/svelte';
  import { MyProfile } from './schema';

  const { me } = useAccount();

  const profile = $derived(useCoState(MyProfile, me._refs.profile.id));

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

<button on:click={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⌝
FAQs
Sync and storage