Demos

Three polished widgets, each hosted at demo.grist-widgets.com. Two URL forms exist for every demo:

• Preview (/?url=widget.html?id=<id>) — the playground shell with the emulated Grist table next to the widget. This is what this page embeds, and what you should share when showing the demo to someone outside Grist.
• Try in Grist (/widget.html?id=<id>) — the raw widget bundle, pasteable into a real Grist document's Custom Widget URL field.

The source for every demo lives under apps/playground/src/widgets/. Read the source as the canonical, working example of every recipe in the Cookbook.

Row editor — form-edit

A polished form that edits the selected row. Showcases column mappings (Title / Description / Done / Priority), w.table.update, w.mapBack, actionStatus polling, and error UI via shadcn's Alert. Matches recipe 1 in the Cookbook.

Try in Grist. Paste this URL into a Custom Widget section:

https://demo.grist-widgets.com/widget.html?id=form-edit

Source: apps/playground/src/widgets/form-edit/.

Task board — task-board

A mini Kanban board grouped by Status. Drag a card to update the row; click a card to focus that row in linked sections via w.setCursorPosition. Showcases iterating w.records with resolveMappedColumnId and allowSelectBy: true. Matches recipes 2, 3, and 7 in the Cookbook.

Try in Grist. Paste this URL into a Custom Widget section:

https://demo.grist-widgets.com/widget.html?id=task-board

Source: apps/playground/src/widgets/task-board/.

Attachment gallery — attachment-gallery

Thumbnail grid for every attachment in the selected row. Showcases extractGristAttachmentIdsFromCell and w.fetchAttachmentBlob + URL.createObjectURL lifecycle. Matches recipe 6 in the Cookbook.

Try in Grist. Paste this URL into a Custom Widget section:

https://demo.grist-widgets.com/widget.html?id=attachment-gallery

Source: apps/playground/src/widgets/attachment-gallery/.

Build your own

The playground discovers widgets by glob: any directory under apps/playground/src/widgets/<id>/ that exports WidgetApp, GRIST_OPTIONS, and WIDGET_METADATA is automatically reachable at /?url=widget.html?id=<id> (preview) and /widget.html?id=<id> (raw).

Open a PR with a new widget directory and the demo lands on demo.grist-widgets.com after merge.