CLI reference
`npm create grist-widget` — what it scaffolds, and how the bundled GitHub Pages deploy pipeline works.
npm create grist-widget
npm create grist-widget my-widget
cd my-widget
pnpm install
pnpm devThe template is embedded directly in the CLI — nothing is fetched from GitHub at scaffold time. It's the same starting point as grist-widget-template (what the quickstart's "Copy this starter repo" path gives you), so both paths converge on identical code.
What you get
index.htmlwith thegrist-plugin-api.jsscript tag wired in.src/main.tsxmounting the React root.src/App.tsxshowing the provider + boundary +useGrist()pattern, with placeholder UI you can immediately replace.- Tailwind preconfigured for theme-aware widgets (light / dark / system).
- A
vitestsetup that importsrenderWithGristfromgrist-widget-sdk/emulator/testing. - Prettier + ESLint with project-wide rules.
After scaffolding, the first edit is typically src/App.tsx — replace the
placeholder with the widget you want. The
Cookbook has ten ready-to-paste recipes for
common shapes.
The bundled deploy pipeline
Every scaffolded repo ships its own .github/workflows/deploy.yml, two
channels from one workflow:
- Push to
main→ the release channel: an immutable/<repo>/v<version>/plus a mutable/<repo>/latest/(and the same build at the repo's Pages root). Re-pushingmainwithout bumpingpackage.json's version is a no-op — it only rebuilds when a newv<version>doesn't exist yet. - Push to
dev→ the dev channel: a mutable/<repo>/dev/, for live review inside Grist as you iterate.
If you scaffolded via "Use this template"
with Include all branches checked, GitHub Pages is already pointed at
the copied gh-pages branch — nothing else to configure. Scaffolding a
fresh, non-template repo yourself needs two one-time steps instead:
- Settings → Pages → Source: Deploy from a branch →
gh-pages→/(the workflow creates thegh-pagesbranch itself, but Pages has to be pointed at it once — left onmain, you'd see a blank page with a 404 for/src/main.tsxeven though the workflow reports success). - Settings → Actions → General → Workflow permissions → Read and write permissions.
Hand-rolled (no template)
If you want the bare minimum instead of the CLI:
mkdir my-widget && cd my-widget
pnpm init
pnpm add react react-dom grist-widget-sdk
pnpm add -D typescript @types/react @types/react-dom vite @vitejs/plugin-reactThen create index.html (with the plugin-api script tag), src/main.tsx
(React root), and src/App.tsx (your widget) — see the
Cheat sheet for the smallest possible code,
or the Cookbook for ten ready-to-paste
recipes. The template path saves about ten minutes of boilerplate and one
or two configuration gotchas, but the SDK works fine without it.