hipst

Hipst

Tiny Bun‑first full‑stack framework — build UI (SSR/CSR) and APIs with one type‑safe DSL.

Navigate

• Getting Started: docs/getting-started.md
• CLI: docs/cli.md
• SSR/CSR: docs/ssr-csr.md
• FE‑only Build: docs/fe-build.md
• API: docs/api.md
• UI DSL: docs/ui.md
• Migration: docs/migration.md

Why hipst?

• Minimal, Bun‑native. Zero config, instant startup.
• One DSL for everything. Compose UI and API as components.
• SSR by default, CSR auto‑mounted. Opt‑in CSR‑only when needed.
• Type‑safe styles (csstype) and stateful, reactive UI primitives.
• Tiny client: auto‑generated assets and optional API client helpers.

Requirements

• Bun 1.2+
• TypeScript 5.9+

Quick start

# Install deps
bun install

# Run an example (SSR + CSR assets)
hipst serve examples/counter.app.ts --port 3000

# Build (SSR HTML + CSR assets): emits index.html + app.mjs (+ app.css) and supporting bundles
hipst build examples/counter.app.ts --out dist/counter-fe

# Build (CSR-only HTML): emits index.html and supporting bundles
hipst build examples/counter.app.ts --client --out dist/counter-fe-client

Usage

Create main.ts:

import { server, api, html, ui } from "hipst";

const App = html()
.title("Hello Hipst")
.meta("description", "Minimal example")
(
  ui("div").padding(24)(
    ui("h1")("Hello Hipst"),
    ui("button")
      .state("count", 0)
      .onClick(({ state }) => { state.count++; })
      (({ state }) => `Clicked ${state.count} times`)
  )
);

const Api = api("/api")
.get(({ res }) => res("Hello Hipst"))

server()
.route(Api)
.route(App)
.listen(3000, () => console.log("server is running on *:3000"))

Serve locally:

hipst serve app.ts

Build static assets (SSR HTML + CSR assets):

hipst build app.ts --out dist/app

More

• Explore: https://deepwiki.com/official-mito11/hipst
• Scripts: see package.json for runnable examples (e.g., example:counter, example:static).