# Zero-install playgrounds Every `create-honua-app` starter runs in a browser playground straight from this repository — no clone, no install, no account. Each project is self-contained: it depends on the published `@honua/sdk-js@0.1.4-beta.0` package and serves its own committed fixture, so the green path never depends on a third-party endpoint. Point `VITE_HONUA_ENDPOINT` at an anonymous public service to run the same code against live data. | Starter | Playground | Scaffold locally | | --- | --- | --- | | Vanilla TypeScript (`vanilla-ts`) | [StackBlitz](https://stackblitz.com/github/honua-io/honua-sdk-js/tree/trunk/packages/create-honua-app/templates/vanilla-ts) · [CodeSandbox](https://codesandbox.io/s/github/honua-io/honua-sdk-js/tree/trunk/packages/create-honua-app/templates/vanilla-ts) | `npm create honua-app@latest my-map -- --template vanilla-ts` | | React TypeScript (`react-ts`) | [StackBlitz](https://stackblitz.com/github/honua-io/honua-sdk-js/tree/trunk/packages/create-honua-app/templates/react-ts) · [CodeSandbox](https://codesandbox.io/s/github/honua-io/honua-sdk-js/tree/trunk/packages/create-honua-app/templates/react-ts) | `npm create honua-app@latest my-map -- --template react-ts` | ## Vanilla TypeScript Vite + TypeScript app that connects to an endpoint, explains a bounded query, and mounts the accepted plan on MapLibre. - Project directory: `packages/create-honua-app/templates/vanilla-ts` - Entry file: `src/main.ts` - Data lane: committed fixture (`fixture`) - Pinned SDK: `@honua/sdk-js@0.1.4-beta.0` - StackBlitz: - CodeSandbox: ## React TypeScript Vite + React + TypeScript app that mounts one accepted plan through the SDK kernel on an app-owned MapLibre map. - Project directory: `packages/create-honua-app/templates/react-ts` - Entry file: `src/App.tsx` - Data lane: committed fixture (`fixture`) - Pinned SDK: `@honua/sdk-js@0.1.4-beta.0` - StackBlitz: - CodeSandbox: ## Gallery samples A gallery sample cannot be opened from `examples/` directly: those projects build through the repository's Vite configs, which alias `@honua/sdk-js` onto this repository's own `src/` tree. `scripts/sample-playgrounds.mjs` therefore generates a standalone project — the sample's committed source, a plain Vite config, and a package.json pinned to the published packages — under `playgrounds//` for every sample that qualifies, and derives these links from it. Every other catalog sample carries a machine-readable exclusion category instead of a broken link; run `npm run samples:playgrounds:check` to see the full decision list. A sample whose data comes from a Node fixture server the repository runs beside it gets that origin generated too: its project carries byte-identical copies of the reviewed fixture pack under `fixtures/` and a Vite plugin that answers the sample's audited same-origin routes in `dev`, `preview` and `build` alike — the same move the starters above make. `samples/dist/sample-playgrounds.v1.json` records each playground's `dataOrigin`, so whether a project serves its own committed source or a generated fixture service is published, not inferred. | Sample | Playground | Source | | --- | --- | --- | | Safe Agent Workbench (`ai-spatial-app-builder`) | [StackBlitz](https://stackblitz.com/github/honua-io/honua-sdk-js/tree/trunk/playgrounds/ai-spatial-app-builder) · [CodeSandbox](https://codesandbox.io/s/github/honua-io/honua-sdk-js/tree/trunk/playgrounds/ai-spatial-app-builder) | `examples/ai-spatial-app-builder` → `playgrounds/ai-spatial-app-builder` | | React quickstart (`react-quickstart`) | [StackBlitz](https://stackblitz.com/github/honua-io/honua-sdk-js/tree/trunk/playgrounds/react-quickstart) · [CodeSandbox](https://codesandbox.io/s/github/honua-io/honua-sdk-js/tree/trunk/playgrounds/react-quickstart) | `examples/react-quickstart` → `playgrounds/react-quickstart` | | Interactive sketch editing with terra-draw (`sketch-editing`) | [StackBlitz](https://stackblitz.com/github/honua-io/honua-sdk-js/tree/trunk/playgrounds/sketch-editing) · [CodeSandbox](https://codesandbox.io/s/github/honua-io/honua-sdk-js/tree/trunk/playgrounds/sketch-editing) | `examples/sketch-editing` → `playgrounds/sketch-editing` | | Temporal playback (`temporal-playback`) | [StackBlitz](https://stackblitz.com/github/honua-io/honua-sdk-js/tree/trunk/playgrounds/temporal-playback) · [CodeSandbox](https://codesandbox.io/s/github/honua-io/honua-sdk-js/tree/trunk/playgrounds/temporal-playback) | `examples/temporal-playback` → `playgrounds/temporal-playback` | ## How the links stay honest The starter table is generated from `packages/create-honua-app/templates.manifest.json` and the sample table from `samples/catalog.v2.json`; CI regenerates both and fails on drift (`npm run playgrounds:check`, `npm run samples:playgrounds:check`). Each playground boots the project directory it names, installs its pinned dependencies, and runs `npm run dev` — the same command the project uses locally. A generated sample playground is a copy, not a fork: editing it directly fails the drift check. Change the sample under `examples/` and regenerate with `npm run samples:playgrounds:generate`. Each qualifying sample's own `examples//README.md` carries the same links in a managed `sample-playground:start`/`:end` block written from this one derivation, so the gallery card, this page and the sample's README can never disagree — `npm run samples:playgrounds:check` fails on a link edited, invented or left behind by hand. Those gates are offline, and they resolve `@honua/sdk-js` from this repository's own tree. A weekly scheduled lane (`.github/workflows/sample-playground-live.yml`) answers the other half: it installs a generated playground from the real npm registry, builds it, serves the production build, and drives it headless until the sample's own readiness contract holds — a rendered map, the features the reviewed fixture serves, zero console errors and zero off-origin requests. Run it locally with `HONUA_PLAYGROUND_LIVE_ENABLED=true npm run samples:playgrounds:smoke`.