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.
SSR, SSG, routing and deployment tooling—the same runtime code, rendered ahead of time.
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.
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.