Framework Patterns

Jazz provides framework-specific bindings for React/Expo, Vue, and Svelte. This page is a side-by-side reference — see Reading Data, Writing Data, and Sessions for full details.

API equivalents

Concept	React / Expo	Vue	Svelte
Provider	`<JazzProvider config={config}>`	`<JazzProvider :client="client">`	`<JazzSvelteProvider {client}>`
Query subscription	`useAll(query)`	`useAll(query)`	`new QuerySubscription(query)`
DB access	`useDb()`	`useDb()`	`getDb()`
Session	`useSession()`	`useSession()`	`getSession()`
Client creation	`createJazzClient(config)`	`createJazzClient(config)`	`createJazzClient(config)`

Provider setup

Wrap your app in a provider to make the database available to every component.

App.tsx

export function ProviderExample() {
  return (
    <JazzProvider
      config={{
        appId: "my-app",
      }}
      fallback={<p>Loading...</p>}
    >
      <YourApp />
    </JazzProvider>
  );
}

App.vue

<script setup lang="ts">
import { createJazzClient, JazzProvider } from "jazz-tools/vue";

const client = createJazzClient({
  appId: "my-app",
});
</script>

<template>
  <JazzProvider :client="client">
    <slot />
    <template #fallback>
      <p>Loading...</p>
    </template>
  </JazzProvider>
</template>

App.svelte

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

  const client = createJazzClient({
    appId: "my-app",
  });
</script>

<JazzSvelteProvider {client}>
  {#snippet children({ db })}
    <YourApp />
  {/snippet}
  {#snippet fallback()}
    <p>Loading...</p>
  {/snippet}
</JazzSvelteProvider>

Query subscriptions

Subscribe to query results reactively. See Reading Data for the full API.

App.tsx

export function LiveQueryExample() {
  const todos = useAll(app.todos.where({ done: false }));

  // undefined = not yet connected; [] = connected, no rows; [...] = rows present
  if (todos === undefined) return <p>Loading...</p>;

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

App.vue

<script setup lang="ts">
import { useAll } from "jazz-tools/vue";
import { app } from "../schema.js";

const todos = useAll(app.todos.where({ done: false }));
</script>

<template>
  <li v-for="todo in todos ?? []" :key="todo.id">{{ todo.title }}</li>
</template>

App.svelte

<script lang="ts">
  import { QuerySubscription } from 'jazz-tools/svelte';
  import { app } from '../schema.js';

  const todos = new QuerySubscription(
    app.todos.where({ done: false }),
  );
</script>

{#each todos.current ?? [] as todo}
  <li>{todo.title}</li>
{/each}

The ?? [] guard handles the undefined (not yet connected) case. See Reading Data: The undefined loading state for patterns that depend on this signal.

Accessing the database for writes

Get a handle to the database for inserts, updates, and deletes. See Writing Data for the full API.

export function DbAccessExample() {
  // Must be called at component top level (rules of hooks)
  const db = useDb();

  async function addTodo(title: string) {
    await db.insert(app.todos, { title, done: false });
  }

  void addTodo;
  return null;
}

// Must be called inside setup() or <script setup>
const db = useDb();

async function addTodo(title: string) {
  await db.insert(app.todos, { title, done: false });
}

// Callable anywhere — component, store, or utility module
const db = getDb();

async function addTodo(title: string) {
  await db.insert(app.todos, { title, done: false });
}

Session/user identity

Access the current user's session. See Sessions for details on authentication modes and identity linking.

export function SessionExample() {
  const session = useSession(); // { user_id: string } | null

  void session;
  return null;
}

const session = useSession(); // ShallowRef<{ user_id: string } | null>

const session = getSession(); // { user_id: string } | null