> ## Documentation Index
> Fetch the complete documentation index at: https://developers.zite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cookbook

> Task-oriented recipes for common things you'll build on Zite — copy-paste-ready code you or an agent can drop straight into an app.

Each recipe's code drops into an app's `src/api/` (backend) and `src/` (frontend) — browse them below by area.

<Tip>
  Building with an agent? Point it at a recipe URL (e.g. `/recipes/dashboards-sql`) — the code drops in unmodified.
</Tip>

## Data & backend

<CardGroup cols={2}>
  <Card title="Dashboards & reports" icon="chart-column" href="/recipes/dashboards-sql">
    Compute stats, charts, and reports with `zite.sql()`.
  </Card>

  <Card title="Scheduled jobs & digests" icon="clock" href="/recipes/scheduled-jobs">
    Run workflows on a cadence — digests, reminders, rebuilds.
  </Card>

  <Card title="React to inbound webhooks" icon="webhook" href="/recipes/inbound-webhooks">
    Handle events POSTed by external services.
  </Card>

  <Card title="Roles & permissions" icon="shield" href="/recipes/roles-permissions">
    Add role-based and row-level access to your data.
  </Card>

  <Card title="Import spreadsheets" icon="sheet" href="/recipes/import-spreadsheets">
    Load .xlsx/.csv rows into a table with `bulkCreate`.
  </Card>
</CardGroup>

## Integrations & features

<CardGroup cols={2}>
  <Card title="Accept payments (Stripe)" icon="credit-card" href="/recipes/stripe-payments">
    One-off payments and subscriptions with Stripe.
  </Card>

  <Card title="Generate PDFs" icon="file-text" href="/recipes/generate-pdfs">
    Render invoices, receipts, and certificates to PDF.
  </Card>

  <Card title="AI image generation" icon="image" href="/recipes/image-generation">
    Generate photos and illustrations for your UI.
  </Card>

  <Card title="Maps & address picker" icon="map-pin" href="/recipes/maps">
    Google Maps, markers, and geocoding.
  </Card>
</CardGroup>

## UI patterns

<CardGroup cols={2}>
  <Card title="Kanban board" icon="columns-3" href="/recipes/kanban-board">
    A drag-and-drop board with @dnd-kit.
  </Card>

  <Card title="Rich text" icon="type" href="/recipes/rich-text">
    A markdown-backed rich text editor.
  </Card>

  <Card title="Barcode & QR scanning" icon="scan-line" href="/recipes/barcode-scanning">
    Scan codes with the camera.
  </Card>

  <Card title="Make it installable (PWA)" icon="smartphone" href="/recipes/pwa">
    Add an install prompt and PWA behavior.
  </Card>
</CardGroup>