Examples
17 real widgets you can preview live and start a new project from, via the template or the CLI.
Every example below is a real, working widget — not a snippet. Each one is
type-checked on every pnpm typecheck:examples run, previewable live in the
playground against a real Grist document, and directly startable from either
the template or the CLI.
Preview one live
Click any example's name to open it in the playground, against a real Grist document (no setup needed — the playground brings its own).
| Example | Description | Use |
|---|---|---|
| Attachment gallery | Thumbnail grid of every attachment in the selected row. Showcases extractGristAttachmentIdsFromCell + useGrist().fetchAttachmentBlob. | attachment-gallery |
| Bulk mark done | Bulk table.update with an array of row patches. | bulk-mark-done |
| Declared columns | Shows GRIST_OPTIONS column declarations and mappedRecord after the user maps columns. | declared-columns |
| Row editor | Edit the selected row in a polished form. Showcases column mappings, write status, and error UI. | form-edit |
| hello-world | hello-world | |
| Mark done | Single-row write via table.update. | mark-done |
| Reads demo | listTables, fetchTableRows, fetchRow, fetchSelectedRecord. | reads-demo |
| REST fetch | fetchWithAuth against the Grist REST API. | rest-fetch |
| Safe parse | safeParseGristTableData with per-cell issues. | safe-parse |
| Schema migration | applyActions with gristAddVisibleColumnAction, gristRenameColumnAction, and gristRemoveColumnAction. | schema-migration |
| Schema preview | useGristSchema with replicaRowMode schema+samples for LLM context. | schema-preview |
| Slice hooks | useGristStatus, useGristSelection, useGristWrites, useGristTheme in separate child components. | slice-hooks |
| Spreadsheet grid | Selected Grist section rendered as a fully-synced, editable spreadsheet via react-datasheet-grid, plus a schema toolbar and replica-document export. | spreadsheet-grid |
| Task board | Mini Kanban board grouped by Status. Drag a card to update Status; click to focus the row in linked sections. | task-board |
| Theme | Read w.theme from the host document. | theme-demo |
| Widget options | Persist UI state with setWidgetOption / widgetOptions. | widget-options |
| Table writes | create, update, upsert, destroy via w.table. | writes-demo |
Start a new project from one
Copy the template, then swap the placeholder for a real example:
npx create-grist-widget use form-edituse swaps src/App.tsx (and any example-specific files) in place — it
only ever touches src/**, and requires a clean git working tree first, so
the swap is always a single reviewable diff. See
Getting started for the full
template flow.
Where to go next
- Cookbook — the same recipes, with the surrounding "why" explained.
- Cheat sheet — one-page API reference for daily use.
- SDK guide — add the SDK to your own Vite or Next.js project.