Reference

Browser code and live queries

For your agentCopy this and give it to the AI you're building with.

Run `cubek skill`, read all of it and follow it exactly (no CLI: download https://cubek.dev/SKILL.md verbatim with curl; don't summarize it); when you write browser code or live queries, follow its "Browser code and live queries" section.
Run `cubek check` after every edit until it is clean.

Pages render on the server. Interactivity: prefer Preact (bun add preact, 7 KB gz) as a *.hydrate.tsx component (below) or in client/ (TS/TSX, npm, bundled at deploy). React (cubek/client/react) adds 65 KB gz: only for React libraries. A server file declares a mount point; a page renders it:

// src/mounts.ts
export const search = mount<{ q: string }>("search")
// page: <Mount at={search} props={{ q }} live={[await live(notesQuery, { q })]}><p>…</p></Mount>

// src/queries.ts: live, re-runs on change
export const notesQuery = query(async (c, args: { q: string }) => {
  const userId = await currentUserId(c)   // anyone may subscribe: check it
  if (userId === null) throw new Error("signed out")
  return await db.notes.find({ where: { authorId: userId, title: { contains: args.q } }, limit: 50 })
})

// client/search.tsx
/** @jsxImportSource preact */
import { render } from "preact"
import { onMount } from "cubek/client"
import { useQuery } from "cubek/client/preact"
import { notesQuery, search } from "cubek/server"   // typed from the server
function Search(props: { q: string }) {
  const notes = useQuery(notesQuery, { q: props.q }) ?? []
  return <ul>{notes.map((n) => <li key={n.id}>{n.title}</li>)}</ul>
}
onMount(search, (el, props) => render(<Search {...props} />, el))

Props are plain data; queries only read (writes: POST routes, fetch or forms). No props or args, what re-runs a query, refresh, single-page apps: frontend.md.

Preact hydration (no mount point): a *.hydrate.tsx file in src/ (cubek-ts, hooks from "cubek/client/preact"); pages render it, the browser hydrates it.

// src/components/counter.hydrate.tsx
import type { JSX } from "cubek"
import { useState } from "cubek/client/preact"
export function Counter(props: { start: number }): JSX.Element {
  const [n, setN] = useState(props.start)
  return <button onClick={() => setN(n + 1)}>{n}</button>
}
// a page: import { Counter } from "../components/counter.hydrate"  →  <Counter start={0} />