021: Live playground

A single-page playground where users write PK templates in the browser and see the rendered output immediately. The rendering happens entirely client-side. The build compiles the Piko runtime to WebAssembly, the page loads it once, and the runtime renders whatever the user types.

What this demonstrates

  • A PKC component that embeds a code editor and a preview pane.
  • A WebAssembly build of the Piko template compiler, served alongside the site.
  • A sandboxed iframe so the rendered output is isolated from the surrounding page (the component itself uses Shadow DOM to encapsulate its own editor UI and styles).
  • A secondary HTTP server that serves WASM artefacts with the correct MIME type and permissive CORS; the cross-origin CSP that permits the WASM/CDN sources is configured on the main Piko server via WithCSP.

Project structure

src/
  cmd/
    generator/main.go            Per-project generator entry point (runs the Piko code generator during the build).
    main/main.go                 Bootstrap; also serves WASM artefacts on a second port.
  components/
    pp-playground.pkc            The playground component: editor + WASM runtime + preview.
  pages/
    index.pk                     Hosts the playground component.

<repo root>/bin/wasm/            Pre-built WASM artefacts produced by `make build-wasm`; located by findWASMDir() walking up from the working directory.

How to run this example

From the Piko repository root:

cd examples/scenarios/021_live_playground/src/
go mod tidy
# Build the WASM artefacts: run `make build-wasm` from the Piko repository root.
air

See also