harn-apps

Build interactive Harn apps

Use this skill with [[harn-language]] for syntax, [[harn-testing]] for deterministic checks, [[harn-providers]] for model access, and [[harn-product-quality]] for proof through the real user path.

Keep the app in Harn

Put application state, event handling, writing result files, reopening unfinished work, recovery, and model-job rules in Harn. Import std/ui as a namespace and use short names such as ui.document, ui.event, and ui.update. The shared renderer turns that typed document into browser controls, canvas operations, and accessibility information.

Do not add app-specific Rust or JavaScript unless a concrete user interaction cannot be represented by the shared contract. Add a reusable std/ui element, event, effect, or host capability when the same gap applies to other apps.

Use module namespaces

import * as ui from "std/ui"
import { UiEvent } from "std/ui/contracts"

const incoming: UiEvent = ui.event(raw.event)
return ui.update(ui.document("Example", revision, elements))

Export short function names from a module and qualify them where they are used. Do not repeat a module name in calls such as ui.ui_event. Keep Ui on public type names because those types also appear in signatures outside the namespace. Use ui.test.run for event-handler tests.

Start the app

1. Read docs/src/stdlib/ui.md and the nearest complete example.
2. Define a named state record and one event handler for typed UI events.
3. Return a UiUpdate with the next document and any host effects.
4. Expose the event handler as a tool whose metadata names its UI resource.
5. Run harn app run path/to/app.harn and open the printed URL.

Start with examples/apps/decision-card.harn for forms and examples/apps/logo-studio.harn for canvas input, model jobs, exact-text composition (std/media/composition), SVG+PNG export, and restart recovery.

Run one reducer in browser and server

Use std/portable.compile plus ui.portable_app_resource when frequent events should update the view without a server round trip. The reducer receives {state, event} and returns {state, update}. Keep its state to plain Harn values.