# vamp

A minimal frontend pattern designed for AI-assisted development. Not a framework in the npm-install sense — it's a single TypeScript file (`vamp.ts`) you copy into your project. The design trades framework power for LLM legibility: every behavior is explicit, every binding is local, and there's no implicit state (no VDOM, no hooks, no reconciliation).

The core abstraction is a `View<State, Message>` with three methods: a constructor that renders initial HTML, `sync(state)` that pushes state changes to the DOM via explicit bindings, and `destroy()` for cleanup. Application state flows one direction: DOM event → dispatch → `update()` → `view.sync()`.

Key API surface:

- `Binder` — tracks state-to-DOM bindings
- `bindText()`, `bindAttr()`, `bindClass()`, `bindVisible()` — element-level bindings
- `bindChild()`, `bindSlot()`, `bindList()` — composition (static children, conditional mount/unmount, keyed lists)
- `ref()` — unique ID generator preventing selector collisions
- `cls()` / `mountStyle()` — CSS-in-JS with unique class names, no build step
- `sanitize()` — XSS protection for template strings

The whole thing works without a bundler beyond TypeScript compilation. No node_modules, no framework runtime, no build tooling.

The pattern is deliberately repetitive. Views are long flat lists of explicit bindings. The repetition that would bore a human is free for an LLM — generating 50 `bindText` calls costs the same as 5. The trade-off: you lose React's ecosystem (component libraries, DevTools, Next.js) and abstraction power (custom hooks, context). You gain a pattern an LLM can produce correctly on the first try without reasoning about framework internals.

See [[vamp-ai-frontend]] for the full argument about why framework implicitness is the enemy of AI-generated code.

**Repo:** https://github.com/dlants/vamp — very new (3 commits), no stars yet, no release. The value is the pattern, not the library maturity.