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.