Hyperkit

1. Purpose

Hyperkit is the toolkit for building a Hyperapp in code. You author each page once as Hono JSX, and Hyperkit renders it as the HTML a human sees and, by content negotiation, the Markdown an agent reads, with the exact structure and hyperapp:* metadata the spec requires. One source, both representations, no drift: Dynamic Context Rendering in practice.

It is portable: Hyperkit depends only on Hono and an HTML→Markdown converter, not on any AGX infrastructure. Identity (Hyperauth) and storage (Hyperfile) are separate, optional concerns a Hyperapp adds on top.

2. Entry points

@agx-computer/hyperkit ships three entry points:

3. One source, both representations

The components render conformant HTML, and the middleware produces the conformant Markdown. A single JSX page is both the human page and the agent contract, and the two cannot drift.

import { Hono } from "hono"
import { Hyperapp, Page, Directory, Action, Field } from "@agx-computer/hyperkit/ui"
import { hyperappMarkdown } from "@agx-computer/hyperkit/markdown"

const App = ({ children }) => (
  <Hyperapp name="Slides" origin="https://slides.example.com">{children}</Hyperapp>
)

const app = new Hono()
app.use("*", hyperappMarkdown()) // HTML for browsers, Markdown for `Accept: text/markdown`

// The root MUST be a Directory Page (spec §5.1): links only, no inline Actions.
app.get("/", (c) =>
  c.html(
    <App>
      <Directory title="Slides" description="Create slide decks." pages={[{ href: "/create", label: "Create" }]} />
    </App>,
  ),
)

app.get("/create", (c) =>
  c.html(
    <App>
      <Page title="Create" description="Create a slide deck from markdown.">
        <h2>Actions</h2>
        <Action name="Create a deck" target="/create" submit="Create deck">
          <Field name="markdown" type="textarea" label="markdown" required />
        </Action>
      </Page>
    </App>,
  ),
)

4. /ui components

5. /markdown: the agent view

hyperappMarkdown() negotiates on Accept and converts the rendered HTML to the spec's Markdown, preserving the structures a generic HTML→Markdown converter would drop:

6. Where it sits

Hyperkit implements the Hyperapp specification. The spec is the normative contract, and Hyperkit is one portable way to satisfy it. The AGX-platform build mechanics (wiring auth, Embedded View URLs, the Hyperform host contract) live in the AGX Authoring Conventions. See hyperapps/apps/slides for a full worker.