Static Demo

Use this shape for GitHub Pages demos or offline examples that should not assume a server.

Recipe docsRecipes

Required Packages

@macavitymadcap/hyper-dank-ui for panels, inputs, outputs, buttons, notices, and compact data displays.
@macavitymadcap/hyper-dank-automation for static-site smoke checks and local preview scripts.

import { Button, InputGroup, LabelledOutput, Panel } from "@macavitymadcap/hyper-dank-ui";

export function DemoForm() {
  return (
    <Panel labelledBy="demo-heading">
      <h2 id="demo-heading">Static demo</h2>
      <InputGroup type="number" name="miles" label="Miles" min={0} step={0.1} placeholder="1.2" />
      <LabelledOutput label="Average speed" value={3.8} />
      <Button type="button" name="action" value="local-add">Add</Button>
    </Panel>
  );
}

App-Owned Responsibilities

The app owns browser state, local persistence, calculation logic, demo copy, routing, and hosting target. Avoid server-only helpers in the demo runtime.

Verification

Use storage tests for browser state, a static artifact smoke test, a mobile browser pass, and an accessibility check for the published route.

References

UI, Automation, Pace demo, and Storybook.