> Development branch documentation · commit 327c05c78d2f528e4f4a679fcc7a77d9aa161f48
> Package versions: @zenfg/webgpu 0.1.0, @zenfg/snapshot 0.1.0, @zenfg/inspector 0.1.0, zenfg 0.1.0, zenfg-snapshot 0.1.0
> Source: https://github.com/uinosoft/zenfg/blob/327c05c78d2f528e4f4a679fcc7a77d9aa161f48/packages/webgpu/examples/README.md

# TypeScript recipes

These complete recipes import only supported ZenFG package entrypoints and are
type-checked in CI. GPU devices, canvas contexts, pipelines, native resources,
and external renderer adapters are explicit function parameters so the files
can be copied into an application without test-only mocks. Each file keeps its
FrameGraph declarations in a `record*` function and provides a small execution
wrapper, allowing hosts such as the ZenFG Examples to compile the exact same
recording with diagnostics enabled.

The topic-named file is each recipe's reading entry; recipes do not introduce
`main.ts` or a browser runtime. Begin each file with a short English block comment
containing `Source:`, `Demonstrates:`, `Flow:`, and `Read next:`. Explain caller-owned
inputs and graph execution, and point to related code without duplicating it.
Examples adapters explicitly register this same file with `entrySourceId` and
place browser setup, capture helpers and shaders after the recipe.

| Recipe | Demonstrates |
| --- | --- |
| [`minimal-frame.ts`](/zenfg/docs/examples/webgpu/minimal-frame.md) | Runtime/recording lifecycle, surface import, presentation root |
| [`transient-to-present.ts`](/zenfg/docs/examples/webgpu/transient-to-present.md) | Derived transient usage, typed access token, native pass callbacks |
| [`imported-resource.ts`](/zenfg/docs/examples/webgpu/imported-resource.md) | Caller-owned buffer import and graph-visible uniform access |
| [`persistent-state.ts`](/zenfg/docs/examples/webgpu/persistent-state.md) | Defined/undefined imported contents and a cross-frame state root |
| [`external-submission.ts`](/zenfg/docs/examples/webgpu/external-submission.md) | Opaque caller-owned submission boundary followed by native work |
| [`snapshot-export.ts`](/zenfg/docs/examples/webgpu/snapshot-export.md) | Matching compilation, timing, and pool reports encoded as Snapshot 1.2 |
| [`gpu-timing.ts`](/zenfg/docs/examples/webgpu/gpu-timing.md) | Opt-in asynchronous timestamp readback and unavailable results |
| [`compute-output.ts`](/zenfg/docs/examples/webgpu/compute-output.md) | Compute storage output retained through an output root |

Imported Resource intentionally exposes its single-pass uniform for teaching
imports, access tokens, and input validation. Complex workloads can choose to
bind private parameters internally instead; see
[Choosing resource declaration granularity](/zenfg/docs/concepts.md#choosing-resource-declaration-granularity).

Create one `FrameGraph` for each `GPUDevice`, invoke a recipe after acquiring
the inputs shown by its exported function, and call `graph.destroy()` when that
device-bound renderer stack is released.