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.