Where Vibe is heading, and how it got here.
Vibe's real-world proving ground—a browser game pushing the framework daily. Battleborn Brawlers started life in SvelteKit + Tailwind and now runs 100% on Vibe & Stylecheat. Building it has grown Vibe's feature set to roughly 4× what it was at the start of the project.
DevTools for inspecting state and bindings, a VS Code extension and testing utilities.
A shared pool of ready-made Vibe components. Every component is a standalone HTML file, so there's nothing to package or install—browse the pool, preview a component live, and drop it into your app by URL. Compiled Vibe inlines pool components at build time, so production pages never pay the cost of a network request.
In event handlers inside a component, this.X now resolves by what
you declared: keys registered in component({...}) are component
state, every other name is the native element — so the whole DOM API works in
handlers (this.closest(...), this.focus(),
this.nextElementSibling) with no list of blessed properties to
maintain. Resolution happens when the handler fires, so runtime and compiled
pages behave identically. One migration note: assigning an undeclared
this.X in a handler now lands on the element instead of silently
creating state — declare the key to make it reactive.
Vibe's first major release. Every binding, conditional and iteration now auto-tracks the state it reads, so a write updates exactly its subscribers—no tree walk, no virtual DOM, cost proportional to what changed. The authoring model is byte-for-byte unchanged. The runtime consolidates into one namespace, and the compiler moves into its own optional package—installing Vibe now delivers the runtime it is, ~500KB instead of 17MB.
One flag compiles the same pages/ tree into a single-page app:
client-side routing from the file tree, per-route lazy-loaded fragments, and a
composed shell. When every page shares the same layout component, the compiler
hoists it automatically—chrome, state, timers and sockets persist across
navigations—and each navigation commits in a single paint: the outgoing page
stays fully styled until the incoming one is ready. The router underneath is a
standalone module you can also use by hand—Vibe itself stays unopinionated
about routing until this flag needs one. Read
Routing and
SPA / MPA.
Compiled output reaches full parity with runtime 2.0—every e2e suite runs in both modes. The website gets its interactive Try & learn lessons.
The initial draft of Vibe tooling: prettier-plugin-vibe formats Vibe markup, and vite-plugin-vibe brings surgical Hot Module Refresh—not reload—to development: edits patch the running page in place.
The component story settles into its four main parts: internal components, external components fetched by URL, internally compiled components, and component isolation of state. State cleans up on unmount, and objects & arrays pass as props inside iterations.
The component behind Vibe's performance boost and instant initial page loads: compiled pages pre-render their initial state for zero-FOUC. Self-contained components and the compiler test suite land alongside it.
An optional build step arrives—asset handling, component inlining, iteration optimization—developed in Rust for speed. The same runtime code compiles untouched; the compiler introduction covers it. Components can be fetched from any URL.
The wall was recursive iteration: nested <!-- each --> blocks—iterations inside iterations, conditionals woven between—demand a fully recursive renderer, and every attempt at one had stalled. Pair-programming with AI finally cracked the model, and what had blocked Vibe for years fell in days. The runtime has rendered arbitrarily deep trees ever since.
Making Vibe a reality was down-prioritized and procrastinated for two years: the first version proved the concept, but the actual implementation would take loads of time and be extremely hard to get right.
The basics take shape: @[...] template syntax bound to a single global state object, with the runtime updating only the DOM nodes a state change actually touches—no re-renders, no diffing. The first proof of concept ran a handful of simple form elements and buttons.
A proxy-based reactive runtime proof of concept: plain HTML made reactive, no build step. Initially called k-lang, later soulbound.
After over 20 years in the industry—working with everything from jQuery and Knockout to Angular, Vue, React and more recently Svelte—a thought takes hold: it might be possible to build a truly reactive frontend framework by combining the browser's native MutationObserver API with the "new" JavaScript Proxy API.