convex-sveltekit

// +page.server.ts
export const load = async () => {
  const client = new ConvexHttpClient(url)
  return {
    tasks: await client.query(api.tasks.get, {})
  }
}

// +page.svelte
const query = useQuery(
  api.tasks.get, {},
  { initialData: data.tasks }
)
const tasks = $derived(
  query.data ?? data.tasks
)

// +page.ts
export const load = () => ({
  tasks: convexLoad(api.tasks.get, {})
})

// +page.svelte
const tasks = data.tasks
// Already live. That's it.

SSR'd by the load function. Auto-upgraded to real-time WebSocket via SvelteKit's transport hook.

const client = useConvexClient()
let text = $state("")
let pending = $state(false)

async function submit() {
  pending = true
  await client.mutation(
    api.tasks.create, { text }
  )
  text = ""; pending = false
}

<!-- Wire it all up manually -->
<form onsubmit={submit}>
  <input bind:value={text} />
  <button disabled={pending}>Add</button>
</form>

const form = convexForm(
  z.object({ text: z.string() }),
  api.tasks.create
)

<!-- Spread like SvelteKit forms -->
<form {...form}>
  <input {...form.fields.text.as("text")} />
  <button>Add</button>
</form>