xcookbook · components

XButton — variant × color

Inputs

XSelect

Choices

Wave 2 — layout + feedback

Wave 2.5 — XApi (renderless data)

Wave 3 — overlays + navigation

XForm — the form engine

XForm — entity mode

XSpinner

Wave 4 — data components

Wave 5 batch 1 — toast · stat · details · divider · guard · expose · avatar

Name

Ada Lovelace

Email

ada@example.com

⧉

Cookbook

/x/cookbook

Wave 5 batch 2 — icon · mask · date · multi-select · attribute

{}

Wave 5 batch 3 — the editor cluster (lazy chunks, SSR shells)

export function greet(name: string) {
  // a comment
  return `Hello ${name}`
}

Wave 5 batch 4 — XUpload (useXUploader)

The default transport POSTs the live /api/v1/files/upload route and resolves the inserted file row — this demo injects a ticking fake (no server needed).

Wave 5 batch 4b — media (XImage · XVideo · XEmbed · XFile)

A file-entity row's id derives the download link (/api/v1/files/:id/download) — same bridge on XImage :file (a row or a row id → src).

Wave 5 batch 4 stretch — XCropper (cropperjs v2)

SSR paints the plain image (no CLS); cropperjs mounts into its own chunk. The v-model is the crop box in natural image px — the file row's cropX/cropY/cropWidth/cropHeight columns, spoken bare. @crop fires on commit; Save PATCHes the file row through useXDatabase('file') — the database is injected here (no DB), answering the patched row back.

Save crop

crop box: —

Wave 5 batch 5 — showcase chrome + css-as-data

This paragraph is styled by an XCss block — css-as-data rendered into a live style tag.

…and this one by XStyle — style-as-data on the element itself.

XChallenge — one control, four guards (slide · pin · code · hold)

The v-model is the resolved boolean — set it false to rearm. pass/fail report verdicts; a pin without expected hands the entry to the parent via @code. The code type's verifier is injected here (no backend) — the default posts the live 2FA endpoint.

XColorMode — the dark-mode toggle

One control over useXColorMode(): light / dark / system, persisted in the x-color-mode cookie so the server renders <html class="dark"> in the initial payload (no flash). The baked theme's .dark { --x-* } scope and Tailwind's dark: variant both ride the one class; system follows the OS live.

XChart · KPI stats · XFacets · XShare — the Lane G batch

XChart lazy-chunks Chart.js behind an SSR shell; the palette and text/grid colours read off the live --x-* tokens at mount (authored dataset colours win). The SAME config object becomes an email-embeddable image via quickChartUrlOf. XStat's chart prop is the KPI sparkline; XFacets rides the facets crud op (here an injected fetcher) and speaks XWhere; XShare is the native sheet with a clipboard + toast fallback.

the same config as a QuickChart image URL: https://quickchart.io/chart?c=%7B%22type%22%3A%22line%22%2C%22data%22%3A%7B%22labels%22%3A%5B%22Jan%22%2C%22Feb%22%2C%22Mar%22%2C%22Apr%22%2C%22May%22%2C%22Jun%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22Signups%22%2C%22data%22%3A%5B12%2C19%2C14%2C27%2C32%2C41%5D%7D%2C%7B%22label%22%3A%22Churn%22%2C%22data%22%3A%5B3%2C5%2C2%2C6%2C4%2C5%5D%7D%5D%7D%7D&w=600&h=300&bkg=white

{
  "selection": {
    "status": [
      "active"
    ]
  },
  "where": {}
}

XGraphic — the konva graphic editor

Canva/Polotno posture: pages of elements on a Konva stage — drag with smart guides, transform, marquee/multi-select, align, z-order, undo/redo, inline text editing, page presets — exporting to PNG, multi-page PDF, webm video and the document JSON (which IS the v-model).

Reference — every registered component

Generated from the baked kitchen manifest (the same nodes the Studio and the form layer read) — 75 components. Props marked “model” are the v-model; “content” props take a string or an XBlock tree.