Hypermedia-first web framework built on HTMX + Vite + Fastify.
Create server-driven applications using pages, fragments, layouts, and forms — without SPA complexity. Write HiperKit primitives; the framework compiles them to HTMX.
- TypeScript 85%
- JavaScript 10%
- HTML 3.1%
- CSS 1.9%
HiperKit
status: active CI license: MIT
HiperKit
Hypermedia-first web framework built on HTMX + Vite + Fastify.
Create server-driven applications using pages, fragments, layouts, and forms — without SPA complexity. Write HiperKit primitives; the framework compiles them to HTMX.
git clone https://codeberg.org/andeerc/hiperkit
cd hiperkit
pnpm install
pnpm build
pnpm test
pnpm --filter example-basic dev
Open http://localhost:3000 or http://localhost:3000/orders.
Philosophy
- HTML is the interface. The server is the source of truth.
- HiperKit API, not HTMX API. Templates use
<Action>,<Form>,<Fragment>— neverhx-*. - Convention over magic. Predictable. Gradual. You can leave the framework without rewriting everything.
- Server-driven. JSON is optional. Fragments are primitives. Forms are first-class citizens.
Quick overview
<!-- app/pages/orders/index.hiper.html -->
<Layout title="Orders">
<Action get="/orders/new" target="#modal" variant="primary">
New order
</Action>
<Fragment id="orders-table" get="/orders/table" trigger="load" />
<ModalTarget id="modal" />
</Layout>
<!-- app/pages/orders/table.hiper.html -->
<table>
<tbody>
{{#each orders}}
<tr><td>{{ customer }}</td><td>{{ total }}</td></tr>
{{/each}}
</tbody>
</table>
// app/routes/orders.ts
export default route('/orders', {
async page(ctx) { return page('orders/index') },
async table(ctx) { return fragment('orders/table', { orders }) },
async new(ctx) { return fragment('orders/form', { values: {}, errors: {} }) },
async create(ctx) {
const result = OrderSchema.safeParse(await ctx.form())
if (!result.success) return formError('orders/form', { values: body, errors })
return fragment('orders/table', { orders })
.retarget('#orders-table')
.trigger('modal:close')
.toast('Order created')
},
})
Packages
| Package | Role | Tests |
|---|---|---|
@hiperkit/core |
Types, config, response builders | 14 |
@hiperkit/server |
page(), fragment(), formError(), stream(), template engine, typed contracts |
107 |
@hiperkit/vite |
Vite plugin, manifest, virtual modules, config loading | 12 |
@hiperkit/client |
setupHiper() — HTMX setup, toasts, modals, focus management |
10 |
@hiperkit/adapter-fastify |
Fastify plugin, route registration, HTMX headers, SSE, production mode | 14 |
@hiperkit/language-server |
LSP — completions, diagnostics, go-to-definition, hover | 36 |
create-hiperkit |
CLI scaffold with --template basic|crud |
15 |
vscode-hiperkit |
VS Code extension — grammar, snippets, LSP client | — |
208 tests across 7 tested packages.
Status
Phases 1-7 complete. Foundation working. Features:
- Monorepo with 7 packages + VS Code extension
- Template engine with
.hiper.html, primitives, components, slots, conditionals, loops - CRUD example with Zod validation, HTMX fragments, modals, toasts
- Vite plugin with real
hiper.config.tsloading and.hiper.htmldiscovery - Production build:
vite build→ manifest → adapter serves hashed assets - Language server: completions (tags, attrs, mustache props), diagnostics (unknown components, missing views, unknown props), go-to-definition (components, views), hover
- VS Code extension: TextMate grammar with proper scopes, snippets, LSP client
create-hiperkitscaffold with basic and CRUD templates- Generated
AGENTS.md+ AI agent guide so coding agents follow HiperKit patterns - SSE real-time support via
<Stream>primitive +stream()helper - Live orders dashboard: typed fragments, SSE broadcast between tabs, metrics, workflow actions, modal validation, and toasts
See docs/roadmap.md for upcoming phases.
License
MIT