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.
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.