Reactive JS, No BS. A no-build, buildless reactive JavaScript framework. Build full reactive apps in plain HTML, CSS, and JavaScript.
A reactive JavaScript framework with no build step, no virtual DOM, just standard HTML, CSS, and JavaScript.
Documentation | Getting Started | Demos
<!DOCTYPE html>
<html>
<head>
<script defer src="https://unpkg.com/wildflowerjs@1/dist/wildflower.min.js"></script>
</head>
<body>
<div data-component="counter">
<h1 data-bind="count"></h1>
<button data-action="increment">+1</button>
</div>
<script>
wildflower.component('counter', {
state: { count: 0 },
increment() {
this.count++;
}
});
</script>
</body>
</html>npm install wildflowerjs<!-- Mini (smallest: CRUD apps, forms, dashboards, no data-pools) -->
<script defer src="https://cdn.jsdelivr.net/npm/wildflowerjs@1/dist/wildflower.mini.min.js"></script>
<!-- Lite (smaller: no plugins, portals, transitions, or modals) -->
<script defer src="https://cdn.jsdelivr.net/npm/wildflowerjs@1/dist/wildflower.lite.min.js"></script>
<!-- Core (most applications) -->
<script defer src="https://cdn.jsdelivr.net/npm/wildflowerjs@1/dist/wildflower.min.js"></script>
<!-- SPA (core + router) -->
<script defer src="https://cdn.jsdelivr.net/npm/wildflowerjs@1/dist/wildflower.spa.min.js"></script>
<!-- Full (core + router + SSR) -->
<script defer src="https://cdn.jsdelivr.net/npm/wildflowerjs@1/dist/wildflower.full.min.js"></script>Pin a specific version with wildflowerjs@1.1.0.
- No build step
- No virtual DOM
- No mashups: 100% standards-compliant HTML, CSS, JS
- Robust and performant as major frameworks
- The ease-of-use of jQuery
Build steps optimize bundle delivery, not the runtime work that follows it. WildflowerJS writes directly to the DOM, with no virtual DOM and no reconciliation pass between a state change and the screen.
WildflowerJS entered the official Krausest js-framework-benchmark with the Chrome 152 run, published September 1, 2026, on the then-current v1.4.0. Both entries measure the framework exactly as it ships from this package, script tag and all.
wildflowerjs-v1.4.0posted a 1.16 weighted geomean slowdown, level with the fastest signal-based compilers, between Solid at 1.13 and Svelte at 1.17. This entry renders throughdata-list, the same fully reactive model every framework on the board benchmarks.wildflowerjs-pool-v1.4.0posted a 1.09, ahead of every major framework, rendering the same markup through entity pools, the per-frame primitive WildflowerJS ships for bulk and high-frequency workloads.
Neither entry carries an issue flag, and all results were run on the benchmark maintainer's hardware.
The official results table, framework selection made with the results page's own picker. Verify against the interactive board.
- Zero Build Step: Drop a
<script>tag and start building. No CLI, no compilation, no transpilation. - Verifiable Supply Chain: Three SHA-512-pinned tarballs in the build path, no transitive deps, no
npm install. See PROVENANCE.md. - No Virtual DOM: Direct DOM manipulation for performance and simplicity.
- Reactive State: Automatic UI updates when state changes, with computed properties and dependency tracking.
- Component System: Declarative components with lifecycle hooks, props, and cross-component communication.
- Store Management: Global reactive stores for shared state across components.
- Data Queries: Point an element at a named server source and the view stays current. Polling, conditional GET, refetch on focus and reconnect, Server-Sent Events, automatic retry with backoff, and optimistic writes with
patch(). - Entity Pools: Pull-based rendering for high-frequency DOM updates at 60fps. Game-ready.
- List Rendering: Efficient array rendering with keyed reconciliation.
- Event Handling: Declarative event binding with modifiers and form handling.
- Form Validation: Declarative per-input validation plus cross-field rules, gating submit through one shared error surface.
- Strict-CSP Ready: Every build runs under a strict Content-Security-Policy with no
unsafe-eval, via a compiled CSP-safe expression evaluator. - Conditional Rendering: Show/hide and insert/remove elements based on state.
- Client-Side Routing: History and hash mode routing with guards and transitions.
- Server-Side Rendering: SSR support with hydration.
- Web Component Bridge: First-class integration with Shoelace, Web Awesome, Nord, Carbon, Fluent UI, and any other standards-compliant web component library.
Components are registered with wildflower.component() and automatically discovered via data-component attributes:
wildflower.component('todo-app', {
state: {
items: [],
newItem: ''
},
computed: {
itemCount() {
return this.items.length;
}
},
addItem() {
if (this.newItem.trim()) {
this.items.push({
text: this.newItem,
done: false
});
this.newItem = '';
}
},
init() {
// Called after component is mounted and bindings are ready
},
destroy() {
// Called when component is removed from DOM
}
});Bind state to the DOM with data-bind:
<span data-bind="username"></span>
<div data-bind="items.length"></div>
<img data-bind-attr="{ src: avatarUrl }">
<div data-bind-style="textStyle"></div>
<div data-bind-class="active ? 'highlight' : ''"></div>Handle events with data-action:
<button data-action="save">Save</button>
<button data-action="click:save">Save</button>
<input data-action="input:search">
<form data-action="submit:handleSubmit">Bind form inputs with data-model:
<input type="text" data-model="username">
<textarea data-model="bio"></textarea>
<select data-model="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
<input type="checkbox" data-model="agreed">Render arrays with data-list:
<ul data-list="items">
<template>
<li>
<span data-bind="text"></span>
<button data-action="removeItem">Remove</button>
</li>
</template>
</ul>Show/hide elements with data-show, insert/remove with data-render:
<div data-show="isLoggedIn">Welcome back!</div>
<div data-render="hasPermission">Admin Panel</div>Share state across components:
wildflower.store('auth', {
state: {
user: null,
token: null
},
login(credentials) {
// ... authenticate
this.user = userData;
this.token = token;
},
logout() {
this.user = null;
this.token = null;
}
});Access stores from components via subscription:
wildflower.component('user-badge', {
subscribe: { auth: ['user'] },
computed: {
displayName() {
return this.stores.auth.user?.name || 'Guest';
}
}
});Or in HTML with the $ accessor:
<span data-bind="$auth.user.name"></span>Render hundreds of DOM elements at 60fps with data-pool:
<div data-component="particles" data-pool-fps="60">
<div data-pool="sprites" data-key="id">
<template>
<div class="sprite" data-bind-style="{ left: x + 'px', top: y + 'px' }">
<span data-bind="label"></span>
</div>
</template>
</div>
</div>wildflower.component('particles', {
state: { nextId: 1 },
init() {
this._pool = this.pool('sprites');
},
spawn() {
this._pool.add({ id: this.nextId++, x: 0, y: 0, label: 'particle' });
},
tick(dt) {
// Called every frame: update positions, remove dead entities
}
});Pools also support an optional entity: { state, computed, methods } block for per-entity defaults, derived values, and bound actions. See entity-model and pool-api.
| Variant | Includes | Use Case |
|---|---|---|
wildflower.mini.min.js |
Core + Stores (no data-pools, plugins, portals, transitions, modals) | Smallest footprint (CRUD, forms, dashboards) |
wildflower.lite.min.js |
Core + Stores + data-pools (no plugins, portals, transitions, modals) | Minimal footprint with high-frequency entity rendering |
wildflower.min.js |
Core framework | Most applications |
wildflower.spa.min.js |
Core + Router | Single-page applications |
wildflower.full.min.js |
Core + Router + SSR | Full-stack applications |
Each variant is available in three formats:
.js: Unminified (debugging).dev.js: Minified with console output preserved.min.js: Production (minified, console stripped)
No virtual DOM means web component libraries work out of the box. Web Awesome, Fluent UI, Nord Health, and others need zero configuration. Libraries with non-standard event names (like Shoelace and IBM Carbon) need a lightweight adapter:
<script src="adapters/shoelace.js"></script>See the Component Libraries guide for details and live examples.
git clone https://github.com/wfjs-admin/WildflowerJS.git
cd wildflowerjs
npm install
npm run test:setup # one-time: installs test browser
npm run build
npm testAll modern browsers:
- Chrome / Edge (latest)
- Firefox (latest)
- Safari (latest)
See CONTRIBUTING.md for guidelines.