Components

import { useForm } from 'noboil/convex/components'

const form = useForm({
  schema: s.blog,
  onSubmit: async d => {
    await create(d)
    return d
  }
})

import { useFormMutation } from 'noboil/convex/components'
import { pickValues } from 'noboil/convex/zod'

const form = useFormMutation({
  mutation: api.blog.update,
  schema: s.blog,
  values: pickValues(s.blog, post),
  transform: d => ({ ...d, id: post._id }),
  onSuccess: () => toast.success('Saved')
})

import { Form } from 'noboil/convex/components'

<Form
  form={form}
  render={({ Text, Choose, Toggle, File, Submit }) => (
    <>
      <Text name="title" label="Title" />
      <Text name="content" label="Content" multiline />
      <Choose name="category" label="Category" />
      <Toggle name="published" label="Published" />
      <Submit>Create</Submit>
    </>
  )}
/>

<Form
  form={form}
  render={({ Text, Num, Choose, Combobox, MultiSelect, Arr, File, Files, Datepick, Timepick, Colorpick, Rating, Slider, Toggle, Submit, Err }) => (
    <>
      <Text name="title" label="Title" />
      <Text name="bio" label="Bio" multiline />
      <Text name="slug" label="Slug" asyncValidate={checkSlug} asyncDebounceMs={500} />
      <Num name="price" label="Price" min={0} step={0.01} />
      <Choose name="category" label="Category" />
      <Combobox name="country" label="Country" options={countryOptions} />
      <MultiSelect name="tags" label="Tags" />
      <Arr name="keywords" label="Keywords" />
      <File name="avatar" label="Avatar" accept="image/*" />
      <Files name="attachments" label="Attachments" maxFiles={5} />
      <Datepick name="publishedAt" label="Publish Date" />
      <Timepick name="startTime" label="Start Time" />
      <Colorpick name="brandColor" label="Brand Color" />
      <Rating name="priority" label="Priority" max={5} />
      <Slider name="volume" label="Volume" min={0} max={100} step={1} />
      <Toggle name="published" label="Published" />
      <Err name="title" />
      <Submit>Save</Submit>
    </>
  )}
/>

import { AutoSaveIndicator } from 'noboil/convex/components'

const form = useForm({
  schema: s.blog,
  onSubmit: d => update({ id: post._id, ...d }),
  autoSave: { enabled: true, debounceMs: 1000 }
})

<AutoSaveIndicator lastSaved={form.lastSaved} />

const form = useFormMutation({
  mutation: api.blog.update,
  schema: s.blog,
  values: pickValues(s.blog, post),
  transform: d => ({ ...d, id: post._id, expectedUpdatedAt: post.updatedAt }),
  onSuccess: () => toast.success('Saved')
})

<Form form={form} render={({ Text, Submit }) => (
  <>
    <Text name="title" label="Title" />
    <Submit>Save</Submit>
  </>
)} />

import { ConflictDialog } from 'noboil/convex/components'

<ConflictDialog
  open={hasConflict}
  onOverwrite={handleOverwrite}
  onReload={handleReload}
  onCancel={() => setHasConflict(false)}
/>

import { defineSteps } from 'noboil/convex/components'
import { z } from 'zod/v4'

const profileStep = z.object({
  displayName: z.string().min(1),
  bio: z.string().optional(),
})

const orgStep = z.object({
  name: z.string().min(1),
  slug: z.string().min(1),
})

const preferencesStep = z.object({
  theme: z.enum(['light', 'dark', 'system']),
  notifications: z.boolean(),
})

const { StepForm, useStepper } = defineSteps(
  { id: 'profile', label: 'Profile', schema: profileStep },
  { id: 'org', label: 'Organization', schema: orgStep },
  { id: 'preferences', label: 'Preferences', schema: preferencesStep }
)

const OnboardingWizard = () => {
  const stepper = useStepper({
    onSubmit: async d => {
      await upsertProfile({ ...d.profile, ...d.preferences })
      await createOrg({ name: d.org.name, slug: d.org.slug })
    },
    onSuccess: () => router.push('/dashboard')
  })

  return (
    <StepForm stepper={stepper} submitLabel="Complete setup">
      <StepForm.Step id="profile" render={({ Text, File }) => (
        <>
          <Text name="displayName" label="Display name" />
          <Text name="bio" label="Bio" multiline />
          <File name="avatar" label="Avatar" accept="image/*" />
        </>
      )} />
      <StepForm.Step id="org" render={({ Text }) => (
        <>
          <Text name="name" label="Organization name" />
          <Text name="slug" label="URL slug" />
        </>
      )} />
      <StepForm.Step id="preferences" render={({ Choose, Toggle }) => (
        <>
          <Choose name="theme" label="Theme" />
          <Toggle name="notifications" label="Email notifications" />
        </>
      )} />
    </StepForm>
  )
}

<StepForm
  stepper={stepper}
  submitLabel="Complete setup"
  stepIndicatorClassNames={{
    nav: 'gap-3',
    step: 'gap-2',
    button: 'size-9',
    label: 'text-xs tracking-wide',
    separator: 'bg-primary/20'
  }}
>
  ...
</StepForm>

import { EditorsSection } from 'noboil/convex/components'

<EditorsSection
  editorsList={editors}
  members={orgMembers}
  onAdd={userId => addEditor({ id: doc._id, userId })}
  onRemove={userId => removeEditor({ id: doc._id, userId })}
  contentClassName="rounded-md border"
  emptyClassName="text-muted-foreground italic"
  headerClassName="pb-2 font-medium"
  itemClassName="px-2 py-1"
  triggerClassName="w-48"
/>

import { PermissionGuard } from 'noboil/convex/components'

<PermissionGuard canAccess={isOwner || isEditor}>
  <EditForm post={post} />
</PermissionGuard>

<PermissionGuard
  canAccess={isOwner}
  fallback={<p className="text-muted-foreground text-sm">Only owners can change this setting.</p>}
>
  <DangerZone />
</PermissionGuard>

import { ErrorBoundary } from 'noboil/convex/components'

<ErrorBoundary>
  <BlogEditor />
</ErrorBoundary>

<ErrorBoundary
  fallback={({ error, reset }) => (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )}
>
  <BlogEditor />
</ErrorBoundary>

import { OrgAvatar } from 'noboil/convex/components'

<OrgAvatar name="Acme Corp" imageUrl={org.logoUrl} size="md" />

import { RoleBadge } from 'noboil/convex/components'

<RoleBadge role={member.role} />
<RoleBadge role="admin" className="ml-2" />

import { OfflineIndicator } from 'noboil/convex/components'

<OfflineIndicator />

const { StepForm, useStepper } = defineSteps(...)

const stepper = useStepper({
  onSubmit: async d => { ... },
  onSuccess: () => router.push('/done')
})

const { step, next, prev, isFirst, isLast, setStep } = stepper

import { useList } from 'noboil/convex/react'

const { items, loadMore, isLoading, hasMore } = useList(api.blog.list, {
  where: { published: true }
})

import { useLog } from 'noboil/convex/react'

const log = useLog(api.vote, { parent: pollId })

log.data           // Row[]
log.hasMore
await log.loadMore(20)
await log.append({ payload: { optionIdx: 0, voter: 'me' } })
await log.appendBulk([{ optionIdx: 0, voter: 'a' }])
await log.update(rowId, { optionIdx: 1 })
await log.rm(rowId)
await log.purge()       // soft-delete all rows for this parent (when softDelete: true)
await log.restore()     // bring them back

import { useKv } from 'noboil/convex/react'

const banner = useKv(api.siteConfig, 'banner')

banner.data           // Row | null | undefined
await banner.update({ active: true, message: 'hi' })
await banner.update(payload, { expectedUpdatedAt })   // conflict-checked
await banner.remove()
await banner.restore()

import { useQuota } from 'noboil/convex/react'

const quota = useQuota(api.pollVoteQuota, pollId)

quota.state              // { allowed, remaining, retryAfter? } (reactive via `check`)
const result = await quota.consume()      // atomic check + record
const after = await quota.record()        // record only

import { useInfiniteList } from 'noboil/convex/react'

const { data, sentinelRef, isLoading } = useInfiniteList(api.blog.list, { pageSize: 20 })

return (
  <ul>
    {data.map(i => <li key={i._id}>{i.title}</li>)}
    <li ref={sentinelRef} />
    {isLoading && <li>Loading...</li>}
  </ul>
)

import { useBulkSelection } from 'noboil/convex/react'

const { selectedIds, toggleOne, toggleAll, clear, isSelected } = useBulkSelection(items)

<input type="checkbox" checked={isSelected(item._id)} onChange={() => toggleOne(item._id)} />
<input type="checkbox" checked={selectedIds.size === items.length} onChange={() => toggleAll()} />
<button onClick={clear}>Clear</button>

import { useBulkMutate } from 'noboil/convex/react'

const { execute, progress, isPending } = useBulkMutate({
  mutation: api.blog.rm,
  onSuccess: () => { clear(); toast.success('Deleted') },
  onError: e => toast.error(e.message)
})

<button
  disabled={isPending || selectedIds.size === 0}
  onClick={() => execute([...selectedIds].map(id => ({ id })))}
>
  {isPending ? `Deleting ${progress.done}/${progress.total}...` : 'Delete selected'}
</button>

import { useSearch } from 'noboil/convex/react'

const { query, setQuery, debouncedQuery } = useSearch({ debounceMs: 300 })

const results = useQuery(api.blog.search, { q: debouncedQuery })

<input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search..." />

import { useSoftDelete } from 'noboil/convex/react'

const { softDelete, isDeleting } = useSoftDelete({
  deleteMutation: api.blog.rm,
  restoreMutation: api.blog.restore,
  undoMs: 5000,
  onDeleted: () => router.push('/blog')
})

<button disabled={isDeleting} onClick={() => softDelete({ id: post._id })}>
  Delete
</button>