Svelte Installation

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 jazz-svelte

Write your schema

See the schema docs for more information.

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

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

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

  // ...
}

Set up the Provider in your root layout

<!-- src/routes/+layout.svelte -->
 <script lang="ts" module>
  // Register the Account schema so `useAccount` returns our custom `MyAppAccount`
  declare module 'jazz-svelte' {
    interface Register {
      Account: MyAccount;
    }
  }
</script>

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

  // Example configuration for authentication and peer connection
  let auth = null; // Replace with your auth implementation
  let peer = "wss://your-peer-endpoint";
  let AccountSchema = MyAccount;
</script>

<JazzProvider {auth} {peer} {AccountSchema}>
  <App />
</JazzProvider>

Use Jazz hooks in your components

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import { useCoState, useAccount } from 'jazz-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.