create-grist-widget 0.3.26 → 0.3.28

package/template/.github/workflows/deploy.yml

@@ -21,12 +21,16 @@ name: Deploy widget to GitHub Pages
 #   - push to dev                    -> dev channel: mutable /<repo>/dev/
 #     with version.json + a self-reload snippet, for live review inside Grist.
 #
-# All logic lives in scripts/deploy.mjs (node builtins only).
+# All logic lives in the `grist-widget-deploy` command of create-grist-widget,
+# a devDependency (node builtins only), so deploy fixes arrive as dependency
+# updates.
 #
 # Two jobs, so no dependency code ever runs next to a write token. `build`
 # installs and builds (Vite and its plugins are third-party code) with a
 # read-only token, and hands dist/ over as an artifact. `publish` holds
-# `contents: write` but installs nothing: it only runs scripts/deploy.mjs.
+# `contents: write`: it installs with --ignore-scripts, so no dependency code
+# runs, and then runs grist-widget-deploy alone, at the version the lockfile
+# pins.
 #
 # One-time setup this workflow can't do for you: enable Pages (Settings ->
 # Pages -> Source: Deploy from a branch -> gh-pages -> / (root); this workflow
@@ -53,7 +57,7 @@ on:
 # Nothing at workflow level: each job states what it needs.
 permissions: {}
 
-# Serialize deploys onto the single shared gh-pages branch. deploy.mjs
+# Serialize deploys onto the single shared gh-pages branch. grist-widget-deploy
 # additionally rebases-and-retries on push, so interleaving runs never clobber.
 concurrency:
   group: pages-gh-pages
@@ -130,7 +134,7 @@ jobs:
           REF: ${{ github.ref }}
           FORCE: ${{ github.event.inputs.force == 'true' && '--force' || '' }}
         run: |
-          PLAN=$(node scripts/deploy.mjs plan \
+          PLAN=$(node_modules/.bin/grist-widget-deploy plan \
             --site site --repo "$REPO_NAME" \
             --event "$EVENT_NAME" \
             --ref "$REF" \
@@ -179,16 +183,26 @@ jobs:
       REF: ${{ github.ref }}
     steps:
       # Credentials stay persisted here: the first-release reset below pushes
-      # with them. Nothing in this job installs or runs dependency code.
+      # with them. No dependency code runs in this job (see the install step).
       - name: Checkout
         uses: actions/checkout@v7
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v6
+
       - name: Setup Node
         uses: actions/setup-node@v7
         with:
           node-version: 22
           package-manager-cache: false
 
+      # Only for grist-widget-deploy, at the version (and integrity hash) the
+      # lockfile pins. --ignore-scripts: no dependency's install script runs,
+      # and the steps below call the bin directly, never through `pnpm
+      # exec`/`pnpm run`, whose dependency check may reinstall with scripts.
+      - name: Install the deploy command
+        run: pnpm install --ignore-scripts
+
       - name: Clone gh-pages into ./site
         env:
           GH_TOKEN: ${{ github.token }}
@@ -219,7 +233,7 @@ jobs:
           SHA="$(git rev-parse --short HEAD)"
           VERSION_ARG=""
           [ -n "$VERSION" ] && VERSION_ARG="--version $VERSION"
-          node scripts/deploy.mjs place \
+          node_modules/.bin/grist-widget-deploy place \
             --site site --repo "$REPO_NAME" \
             --channel "$CONTEXT" $VERSION_ARG \
             --dist dist \
@@ -237,13 +251,13 @@ jobs:
           if [ "$CONTEXT" = "release" ]; then
             UPDATE_VERSIONS="--update-versions"
           fi
-          node scripts/deploy.mjs finalize \
+          node_modules/.bin/grist-widget-deploy finalize \
             --site site --repo "$REPO_NAME" $UPDATE_VERSIONS --push \
             --commit-message "deploy: ${CONTEXT} @ ${SHA_FULL}"
 
       - name: Reset repo to a clean first-release state
         if: needs.build.outputs.context == 'release' && needs.build.outputs.firstRelease == 'true'
-        run: node scripts/deploy.mjs reset-branches --repo "$REPO_NAME"
+        run: node_modules/.bin/grist-widget-deploy reset-branches --repo "$REPO_NAME"
 
   cleanup:
     # When the `dev` branch is deleted, remove /dev/ so the dev URL retires
@@ -253,15 +267,22 @@ jobs:
     permissions:
       contents: write
     steps:
-      - name: Checkout (default branch — for scripts/deploy.mjs)
+      - name: Checkout (default branch — for its pinned grist-widget-deploy)
         uses: actions/checkout@v7
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v6
+
       - name: Setup Node
         uses: actions/setup-node@v7
         with:
           node-version: 22
           package-manager-cache: false
 
+      # As in `publish`: no dependency scripts run, and the bin is called directly.
+      - name: Install the deploy command
+        run: pnpm install --ignore-scripts
+
       - name: Clone gh-pages into ./site (skip if it does not exist)
         id: clone
         env:
@@ -283,7 +304,7 @@ jobs:
         env:
           DELETED_REF: ${{ github.event.ref }}
         run: |
-          node scripts/deploy.mjs remove --site site
-          node scripts/deploy.mjs finalize \
+          node_modules/.bin/grist-widget-deploy remove --site site
+          node_modules/.bin/grist-widget-deploy finalize \
             --site site --push \
             --commit-message "cleanup: retire dev URL for ${DELETED_REF}"

package/template/AGENTS.md

@@ -11,21 +11,42 @@
 
 ## The widget contract
 
-`src/App.tsx` is the whole widget — one file, three exports:
+The widget lives in `src/app/`. Its entry point, `src/app/App.tsx`, has three exports:
 
 ```tsx
 export const GRIST_OPTIONS: UseGristOptions = { requiredAccess: "read table" }
 export const WIDGET_METADATA = { title: "...", description: "..." } as const
-export function App() {
+export default function App() {
   const w = useGrist()
   // ...
 }
 ```
 
+`GRIST_OPTIONS` may live in a file of its own, as long as `App.tsx` re-exports it: the
+template's `src/main.tsx` imports both from `./app/App`.
+
 `src/main.tsx` is one call, `mountGristWidget({ App, options: GRIST_OPTIONS, dev })` from
 `grist-widget-sdk/app`: inside Grist it renders `<App />` in `GristWidgetProvider` and
 `GristBoundary`, with the SDK's alerts and Grist's light/dark theme. Access level, column
-mapping, and rendering all live in `src/App.tsx` — that's the one file to edit.
+mapping, and rendering all live in `src/app/App.tsx` — that's the file to edit.
+
+### What is the template's, what is the widget's
+
+- **The template's:** `src/main.tsx`, `src/components/theme-provider.tsx`,
+  `src/lib/utils.ts`, `src/vite-env.d.ts`, the workflows and Dependabot config,
+  `vite.config.ts`, `tsconfig.json`, `eslint.config.js`, the Prettier config,
+  `components.json`, `CLAUDE.md` and this file.
+  Leave them as they are: `pnpm exec create-grist-widget upgrade` rewrites them to the
+  template of the `create-grist-widget` version the widget depends on
+  (<https://gristwidgets.com/docs/cli/upgrading>), and a local edit would be lost.
+- **The widget's:** everything else. `src/app/` holds its code and tests, the smoke test
+  included: put every new component, hook, helper and asset there. `src/components/ui/`
+  holds the shadcn primitives, where `shadcn add` writes (next to any other registry
+  folder it installs), and `src/index.css` the theme. `tsconfig.app.json` and
+  `tsconfig.node.json` keep the widget's own paths and types (their compiler settings come
+  from `grist-widget-sdk`). `README.md`, `index.html`, `public/` and
+  `pnpm-workspace.yaml` are the widget's too, and so is `package.json`, apart from the
+  scripts and dependency versions the template sets.
 
 ## Operating contract
 
@@ -37,7 +58,7 @@ mapping, and rendering all live in `src/App.tsx` — that's the one file to edit
    real Grist, so a fake local preview would teach the wrong lesson. Trust `pnpm test`
    (headless, real assertions) for local feedback, and the `dev`-branch loop below for real
    behavior — don't build or suggest a seeded `pnpm dev` preview.
-3. **Widget changes get a test.** `src/App.test.tsx` uses `renderWithGrist` + `presets` from
+3. **Widget changes get a test.** `src/app/App.test.tsx` uses `renderWithGrist` + `presets` from
    `grist-widget-sdk/emulator/testing` — no browser or real Grist doc needed. Run `pnpm test`.
 4. **Always develop on `dev`, release by merging to `main`.** Commit and push to `dev` for
    every change — it auto-deploys a live preview at `.../dev/` that self-reloads inside an
@@ -58,17 +79,19 @@ mapping, and rendering all live in `src/App.tsx` — that's the one file to edit
 | Format | `pnpm format` |
 | Type-check | `pnpm typecheck` |
 | Preview a production build | `pnpm preview` |
+| Bring the template's files up to date (on `dev`, after updating create-grist-widget) | `pnpm exec create-grist-widget upgrade` |
 
 ## Path map
 
 | Concept | Path |
 | --- | --- |
-| The widget | `src/App.tsx` |
-| Widget test (the pattern to copy for new tests) | `src/App.test.tsx` |
+| The widget (everything in it is the widget's own) | `src/app/` |
+| Its entry point (GRIST_OPTIONS, WIDGET_METADATA, App) | `src/app/App.tsx` |
+| Widget test (the pattern to copy for new tests) | `src/app/App.test.tsx` |
+| Smoke test (one smokeTestWidget call; CI runs it on SDK updates) | `src/app/App.smoke.test.tsx` |
 | Grist wiring (mountGristWidget, inside vs. outside Grist) | `src/main.tsx` |
 | ui primitives | `src/components/ui/` |
-| Deploy workflow | `.github/workflows/deploy.yml` |
-| Deploy script (version guard, channel logic) | `scripts/deploy.mjs` |
+| Deploy workflow (runs grist-widget-deploy from the create-grist-widget devDependency: version guard, channel logic) | `.github/workflows/deploy.yml` |
 | Pull request checks (lint, test, build) | `.github/workflows/ci.yml` |
 | Dependency update PRs (weekly, against the dev branch) | `.github/dependabot.yml` |
 | Full walkthrough (dev loop, deploying, embedding) | `README.md` |
@@ -95,10 +118,12 @@ Full detail, including the two live URLs (`/latest/` and `/v<version>/`): `READM
   template works (see above); `pnpm test` is the trusted local loop, real Grist via `/dev/`
   is the trusted real one
 - Merging `dev` into `main` without bumping `package.json`'s `version` first
+- Adding widget code outside `src/app/`, or editing the template's files to change the
+  widget (see the widget contract above)
 - Adding `minimumReleaseAgeExclude` entries to `pnpm-workspace.yaml` to get an install or a
-  check green, or deleting the one pnpm wrote for `grist-widget-sdk` on release day (see
+  check green, or deleting the ones pnpm wrote for `grist-widget-sdk` and `create-grist-widget` on release day (see
   `README.md`): pnpm's 24 h age check protects the widget's supply chain
 - Merging a Dependabot pull request whose `ci.yml` checks are red, or retargeting one at
-  `main`: updates go through `dev` like any other change. Template-file updates (this
-  pipeline, the build config) are applied by hand —
+  `main`: updates go through `dev` like any other change, template-file updates
+  (`pnpm exec create-grist-widget upgrade`) included —
   <https://gristwidgets.com/docs/cli/upgrading>

package/template/README.md

@@ -12,12 +12,14 @@ Opened outside a Grist iframe, the page is never a live preview of the widget it
 
 When actually embedded, the widget shows connection state only when something is wrong: until Grist is connected, or if the connection is lost or fails, `GristBoundary` replaces the widget with a connecting / unavailable / error screen (the error one with a retry button); once the widget is showing, the SDK's alerts report what needs attention (column mapping, access level, a failed write…) above it. Nothing is drawn over the widget while all is well. Pass your own `Alerts` component to `mountGristWidget()` to render them differently, or `Alerts: null` for none.
 
-`src/App.tsx` uses `useGrist<TaskRow, TaskMapped>()` for the selected row (`w.record`, `w.mode`) and remounts the UI with `key={rowKey}` when the row changes — same pattern as `widgets/create-email-draft`. It ships with two mapped columns (`title`, `done`) and an editable form that saves back via `w.table.update(...)`/`w.mapBack(...)` — the smallest real starting point, not a placeholder. See `src/grist-types.example.ts` for typing patterns.
+The widget lives in `src/app/`: `App.tsx`, and any components, hooks, helpers or assets it needs. `src/components/ui/` (shadcn primitives) and `src/index.css` (the theme) are yours too. `src/main.tsx`, the workflows and the Vite and ESLint config are the template's (`AGENTS.md` lists them): leave them as they are: `pnpm exec create-grist-widget upgrade`, run on `dev`, rewrites them when `create-grist-widget` is updated ([Upgrading a widget](https://gristwidgets.com/docs/cli/upgrading)).
+
+`src/app/App.tsx` uses `useGrist<TaskRow, TaskMapped>()` for the selected row (`w.record`, `w.mode`) and remounts the UI with `key={rowKey}` when the row changes. It ships with two mapped columns (`title`, `done`) and an editable form that saves back via `w.table.update(...)`/`w.mapBack(...)` — the smallest real starting point, not a placeholder. See `src/app/grist-types.example.ts` for typing patterns.
 
 - **ESLint** blocks direct `grist` global usage in `src/` — use the SDK only.
-- Edit `GRIST_OPTIONS.columns` in `App.tsx` to change the required columns (or remove the array entirely to read raw, unmapped records instead); `mountGristWidget()` gates the widget on `canRender` whenever columns are declared, so it renders once they're mapped.
+- Edit `GRIST_OPTIONS.columns` in `src/app/App.tsx` to change the required columns (or remove the array entirely to read raw, unmapped records instead); `mountGristWidget()` gates the widget on `canRender` whenever columns are declared, so it renders once they're mapped.
 
-Run `pnpm test` — see `src/App.test.tsx` for the pattern (`renderWithGrist` + `presets` from `grist-widget-sdk/emulator/testing`, no browser or real Grist doc needed). Full guide: [Testing](https://gristwidgets.com/docs/emulator/testing).
+Run `pnpm test`. `src/app/App.smoke.test.tsx` is the smoke test, one `smokeTestWidget()` call that checks the widget renders inside an emulated Grist with every declared column mapped, and that CI runs on every pull request; see `src/app/App.test.tsx` for the pattern (`renderWithGrist` + `presets` from `grist-widget-sdk/emulator/testing`, no browser or real Grist doc needed). Full guide: [Testing](https://gristwidgets.com/docs/emulator/testing).
 
 **Monorepo dev:** this template resolves `grist-widget-sdk` from `packages/core/dist` (like the other widgets), not from SDK source. After changing the SDK, run `pnpm prebuild` or `pnpm --filter grist-widget-sdk build` before `pnpm dev`.
 
@@ -43,11 +45,12 @@ pnpm, even under `npm create`, unless it was run with `--no-install` or
 without pnpm installed. Versions are pinned with their integrity hashes, CI
 installs exactly that, and Dependabot updates it. A `package-lock.json` isn't
 used: the workflows install with pnpm. pnpm 11 won't install a version
-published less than 24 hours ago. So a widget scaffolded on the day of an SDK
-release also gets one `minimumReleaseAgeExclude` entry in
-`pnpm-workspace.yaml`, for that SDK version only, written by pnpm itself.
-Keep it: without it, every install (yours and CI's) rejects the lockfile
-until the version is a day old. After that the entry is harmless.
+published less than 24 hours ago. So a widget scaffolded on the day of a
+release also gets `minimumReleaseAgeExclude` entries in `pnpm-workspace.yaml`,
+written by pnpm itself, for the `grist-widget-sdk` and `create-grist-widget`
+versions it was made with, and nothing else. Keep them: without them, every
+install (yours and CI's) rejects the lockfile until the version is a day old.
+After that the entries are harmless.
 
 ### Live preview
 
@@ -68,8 +71,10 @@ directory, same as `scripts/smoke/create-widget.sh` does.
 
 ## Deployment
 
-A bundled GitHub Actions workflow (`.github/workflows/deploy.yml` +
-`scripts/deploy.mjs`) publishes this widget to **your own** GitHub Pages.
+A bundled GitHub Actions workflow (`.github/workflows/deploy.yml`, which runs
+the `grist-widget-deploy` command of the `create-grist-widget` devDependency)
+publishes this widget to **your own** GitHub Pages. Fixes to the deploy logic
+arrive as updates of that devDependency.
 
 ### The workflow: always develop on `dev`, release by merging to `main`
 
@@ -132,9 +137,10 @@ dependencies (`grist-widget-sdk` included) and the workflows' GitHub Actions,
 and `.github/workflows/ci.yml` lints, tests and builds every pull request.
 Merge a green one into `dev`, check `/dev/` inside Grist, then release it
 like any change (bump the version, merge `dev` into `main`). Changes to the
-template's own files (this pipeline, the build config) don't reach an
-existing widget that way: see
-[Upgrading a widget](https://gristwidgets.com/docs/cli/upgrading).
+template's own files (this pipeline, the build config) arrive with
+`create-grist-widget`'s updates: after merging one, run
+`pnpm exec create-grist-widget upgrade` on `dev` (see
+[Upgrading a widget](https://gristwidgets.com/docs/cli/upgrading)).
 
 **One-time setup** (the workflow can't do this part for you):
 

package/template/package.json

@@ -17,7 +17,7 @@
     "@tailwindcss/vite": "^4.3.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "grist-widget-sdk": "^0.3.26",
+    "grist-widget-sdk": "^0.3.27",
     "lucide-react": "^1.61.0",
     "radix-ui": "^1.8.1",
     "react": "^19.3.1",
@@ -35,6 +35,7 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.2",
+    "create-grist-widget": "^0.3.28",
     "eslint": "^10.13.0",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.7",

package/template/src/app/App.smoke.test.tsx

@@ -0,0 +1,20 @@
+/**
+ * Smoke test: the widget renders inside an emulated Grist, mounted as
+ * `main.tsx` mounts it, with every column `GRIST_OPTIONS` declares mapped.
+ *
+ * It only reads `GRIST_OPTIONS`, so it stays valid as the widget changes,
+ * and it improves with each SDK release. `.github/workflows/ci.yml` runs it
+ * on every pull request, Dependabot's `grist-widget-sdk` updates included:
+ * an SDK release that breaks this widget turns that PR red before the merge.
+ *
+ * It is the widget's own file: a widget using a browser API jsdom lacks
+ * (WebGL, say) stubs it here, with `vi.mock`. Widget-specific assertions go
+ * in their own tests (see `App.test.tsx`).
+ */
+import { it } from "vitest"
+import { smokeTestWidget } from "grist-widget-sdk/emulator/testing"
+
+import App, { GRIST_OPTIONS } from "./App"
+
+it("renders inside Grist with every declared column mapped", () =>
+  smokeTestWidget({ App, options: GRIST_OPTIONS }))

package/template/src/main.tsx

@@ -1,7 +1,7 @@
 import { mountGristWidget } from "grist-widget-sdk/app"
 
 import "./index.css"
-import App, { GRIST_OPTIONS } from "./App.tsx"
+import App, { GRIST_OPTIONS } from "./app/App.tsx"
 
 // Inside Grist: the widget, behind the SDK's connection screens and alerts,
 // in Grist's light/dark theme. Opened anywhere else (`pnpm dev`, a deployed

package/template/vite.config.ts

@@ -28,7 +28,7 @@ export default defineConfig({
     environment: "jsdom",
     // Most examples/<id>/ don't ship their own WidgetApp.test.tsx yet (it's
     // optional, per docs/planning/2026-08-execution-plan.md §3) --
-    // overlayExampleSrc correctly deletes the template's own App.test.tsx
+    // overlayExampleSrc correctly deletes the template's own app/App.test.tsx
     // when swapping in one that has none (it would otherwise assert against
     // content that's no longer there), so `create --example <id>` / `use
     // <id>` routinely leave a project with zero test files. Without this,

package/vendor/compose-example.mjs

@@ -29,6 +29,7 @@
 import {
   cpSync,
   existsSync,
+  mkdirSync,
   readFileSync,
   readdirSync,
   rmSync,
@@ -92,18 +93,20 @@ export function createComposer({ templateDir, examplesDir, uiDir, manifestPath }
     }
     const manifestEntry = loadManifestEntry(exampleId)
     const srcDir = join(destDir, "src")
+    const appDir = join(srcDir, "app")
 
-    // Clear whatever the previous overlay (if any) left behind, except the
-    // template's own fixed structure (components/ui, lib, index.css, etc.) —
-    // only remove files this function itself may have added, so a stale
-    // sibling from a *different* previous example doesn't linger.
-    for (const entry of readdirSync(srcDir, { withFileTypes: true })) {
-      if (entry.name === "App.tsx" || entry.name === "App.test.tsx") continue
-      if (["components", "lib", "assets", "index.css", "vite-env.d.ts", "main.tsx"].includes(entry.name)) {
-        continue
-      }
-      rmSync(join(srcDir, entry.name), { recursive: true, force: true })
-    }
+    // src/app/ is the widget's own folder (see the template's AGENTS.md), so
+    // the example replaces it whole: nothing from the previous widget lingers,
+    // its test included, which would assert against content no longer there.
+    // The template's files around it (main.tsx, components/ui, lib,
+    // index.css) stay as they are.
+    rmSync(appDir, { recursive: true, force: true })
+    mkdirSync(appDir, { recursive: true })
+
+    // The template's smoke test comes back with any example: it only reads
+    // GRIST_OPTIONS, so a widget started from an example is smoke-tested too.
+    const smokeTest = join(templateDir, "src/app/App.smoke.test.tsx")
+    if (existsSync(smokeTest)) cpSync(smokeTest, join(appDir, "App.smoke.test.tsx"))
 
     // The host contract's only mismatch: examples export `WidgetApp` (no
     // default export), the template's main.tsx does a default-only import.
@@ -111,23 +114,18 @@ export function createComposer({ templateDir, examplesDir, uiDir, manifestPath }
     // stays untouched under examples/) — same idiom as deploy.mjs's
     // identityEdits.
     const widgetAppSrc = readFileSync(join(exampleDir, "WidgetApp.tsx"), "utf8")
-    writeFileSync(join(srcDir, "App.tsx"), `${widgetAppSrc}\nexport default WidgetApp\n`)
+    writeFileSync(join(appDir, "App.tsx"), `${widgetAppSrc}\nexport default WidgetApp\n`)
 
     const testPath = join(exampleDir, "WidgetApp.test.tsx")
-    const destTestPath = join(srcDir, "App.test.tsx")
     if (existsSync(testPath)) {
-      writeFileSync(destTestPath, readFileSync(testPath, "utf8"))
-    } else if (existsSync(destTestPath)) {
-      // The template's own test (or a previous example's) asserts against
-      // content that's no longer there once App.tsx is someone else's widget.
-      rmSync(destTestPath)
+      writeFileSync(join(appDir, "App.test.tsx"), readFileSync(testPath, "utf8"))
     }
 
     // Every other file living alongside WidgetApp.tsx (e.g. spreadsheet-grid's 5
     // sibling components) travels with it, verbatim.
     for (const entry of readdirSync(exampleDir, { withFileTypes: true })) {
       if (entry.name === "WidgetApp.tsx" || entry.name === "WidgetApp.test.tsx") continue
-      cpSync(join(exampleDir, entry.name), join(srcDir, entry.name), { recursive: true })
+      cpSync(join(exampleDir, entry.name), join(appDir, entry.name), { recursive: true })
     }
 
     // `@/components/ui/*` the template doesn't already vendor (per the
@@ -175,11 +173,14 @@ export function createComposer({ templateDir, examplesDir, uiDir, manifestPath }
    * `workspace:^` (meaningless outside the pnpm workspace) — a `file:`
    * reference to either `packages/core` (workspace source, already built), a
    * packed tarball, or (for the CLI's `create`) a real published semver range.
+   * `cliDependency` does the same for the template's `create-grist-widget`
+   * devDependency (its deploy bin); without one, the devDependency is dropped,
+   * since a composed example is only typechecked, built and tested here.
    *
    * For composing *many* examples against one shared `pnpm install`, use
    * {@link overlayExampleSrc} directly instead (see its own doc comment).
    */
-  function composeExample({ exampleId, destDir, sdkDependency }) {
+  function composeExample({ exampleId, destDir, sdkDependency, cliDependency }) {
     rmSync(destDir, { recursive: true, force: true })
     cpSync(templateDir, destDir, {
       recursive: true,
@@ -192,6 +193,8 @@ export function createComposer({ templateDir, examplesDir, uiDir, manifestPath }
     const pkg = JSON.parse(readFileSync(pkgPath, "utf8"))
     pkg.name = exampleId
     pkg.dependencies["grist-widget-sdk"] = sdkDependency
+    if (cliDependency) pkg.devDependencies["create-grist-widget"] = cliDependency
+    else delete pkg.devDependencies["create-grist-widget"]
     Object.assign(pkg.dependencies, EXTRA_DEPENDENCIES[exampleId] ?? {})
     writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`)