wildflowerjs
Advanced tools
Lightweight reactive JavaScript framework with no build step and no virtual DOM
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.
<script> tag and start building. No CLI, no compilation, no transpilation.npm install. See PROVENANCE.md.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 test
All modern browsers:
See CONTRIBUTING.md for guidelines.
FAQs
Lightweight reactive JavaScript framework with no build step and no virtual DOM
We found that wildflowerjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 11.5 now recognizes npm staged publish approvals in release metadata, preventing those releases from being mistaken for lower-trust package publishes.
Security News
Federal audit finds NIST lacked a plan to clear the NVD backlog, wasted funds on duplicate work, and delayed use of CISA data.
Research
/Security News
A mini Shai-Hulud campaign compromised Red Hat Cloud Services npm packages to steal developer and CI/CD secrets during installation.