WildflowerJS Logo WildflowerJS

WildflowerJS Reactive JS, No BS*

A no-build reactive JavaScript framework, rooted in the web platform.
No build step. No dependencies. No lock-in.

<script src="wildflower.min.js"></script> ...and start building.

Back to Basics

The code you write is 100% web standard code. HTML stays HTML. JavaScript stays JavaScript. CSS stays CSS. No JSX, no templating language, no custom syntax to learn. If you know the web platform, you already know how to use this.

WildflowerJS extends the web platform. It doesn't replace it.

Your Development Simplified

Because you develop with 100% web standards, every tool in your existing chain already understands the code: IDE, browser DevTools, linter, formatter, screen reader, SEO crawler. Nothing to install, no custom file types, no sourcemaps. Save the file, refresh, and your change is live.

Just be a web developer.

Batteries Included: One Mental Model

Router, SSR, stores, computed properties, two-way binding, event modifiers, data pools, and TypeScript types, all built in, all speaking the same language. Learn data-bind once and you know binding everywhere: lists, pools, stores, forms. There's no five-library stack to keep in sync.

One script tag. Everything you need.

<div data-component="counter">
  <span data-bind="count"></span>
  <button data-action="increment">
    +1
  </button>
</div>

<script>
wildflower.component('counter', {
  state: { count: 0 },
  increment() { this.count++ }
})
</script>

How It Works

data-bind connects state to the DOM.

data-action connects events to methods.

this.count++ triggers a precise DOM update.

Mutate state. The DOM updates.

Two Reactivity Modes

data-list for automatic reactivity: mutate state, DOM updates. data-pool for explicit control: plain objects, zero proxy overhead, you say what changed.

Same template syntax. Different performance profile. From interactive forms to per-frame particle systems. You choose the right tradeoff for the job.

Try it. Right-click, inspect this demo. Every dot is a real DOM element.

See full demo →

Get Started View Demos
* Build Step

Zero Toolchain

Modern frameworks ask you to install a compiler, a bundler, a package manager, hundreds of fragile transitive dependencies, and a framework-specific file format, before you write a single line of your application.

WildflowerJS was built starting from a single principle: no build step, no tooling. Ever.

WildflowerJS asks you to add a script tag.

There's no CLI scaffolding step, no config files, no .vue/.jsx/.svelte source format. You don't debug through sourcemaps or wait on a build pipeline. Your project has zero dependencies.

Performance isn't a tradeoff. Build steps optimize bundle delivery, not the runtime work that follows it. WildflowerJS writes directly to the DOM, with no virtual DOM or reconciliation pass between state change and update, so it doesn't need a build step to be fast.

The framework is full-featured without the toolchain: router, SSR, stores, computed properties, transitions, pools. You don't need a toolchain to use any of it.

my-app/
  index.html
  app.js
  style.css
  wildflower.min.js

That's the entire project. No package.json.
No node_modules. No config files. Ship it.

Zero Install. Zero Attack Surface.

Every dependency you install is trust extended to a maintainer you've never met, running scripts on your dev machine and in your CI. A typical React + Vite + UI‑lib setup pulls in 300+ transitive packages before you write a feature.

Each one is a potential intrusion vector. NPM worms, OAuth chains compromising deploy platforms, postinstall hijacking: the supply chain is now where production code gets compromised, not the deploy. And signing isn't a backstop: Mini Shai‑Hulud (May 2026) compromised 170+ packages whose malicious versions carried valid SLSA Build Level 3 provenance, because the attestation came from build infrastructure the worm had already taken over.

WildflowerJS users don't have this attack surface, by construction. There is no npm install, no postinstall script, no transitive package graph. The framework is one file you copy or pin by hash.

As of v1.1, the same holds for building the framework itself. WildflowerJS bundles with a vendored rollup and terser pipeline pulled as three SHA‑512‑pinned tarballs: no npm install, no transitive packages, no postinstall scripts in the build path. The entire toolchain is three files you verify by hash.

Zero dependencies is the absence of a problem the rest of the industry has not properly addressed.

A typical React/Vue project:

  npm install
  ├── hundreds of packages
  ├── from hundreds of maintainers
  ├── postinstall scripts run on install
  └── tens to hundreds of MB of transitive code

WildflowerJS:

  <script src="wildflower.min.js"></script>
  └── 1 file.
      No transitive dependencies.

Zero Lock-in

WildflowerJS works with the DOM, not instead of it. There's no virtual DOM intercepting your code and no compiler rewriting your markup. The render cycle is yours.

That means Leaflet, DataTables, Chart.js, D3, Three.js, any library that touches the DOM, just works. No wrapper packages or framework-specific escape hatches required. Drop in a script tag and use it.

Because your code is standard HTML and JavaScript, you're never locked in. Your skills transfer and your code is more portable. If you outgrow the framework, your knowledge doesn't expire.

This also means your "ecosystem" is all of the world of vanilla JS. Without compromises or hacks.

<!-- Use any library directly -->
<div data-component="map-view">
  <div id="map" style="height: 400px"></div>
</div>
wildflower.component('map-view', {
  state: { lat: 51.505, lng: -0.09 },
  init() {
    // Leaflet works as-is. No wrappers.
    this._map = L.map('map')
      .setView([this.lat, this.lng], 13);
    L.tileLayer('https://{s}.tile.osm.org'
      + '/{z}/{x}/{y}.png').addTo(this._map);
  }
})

Precise Reactivity

When you write this.count++, WildflowerJS updates the single DOM node bound to count. Nothing else is touched. There's no tree diffing or reconciliation pass to figure that out.

This isn't a tradeoff. You get fine-grained updates and a simple mental model. Change a property, the bound element updates. That's the entire reactivity model.

Other frameworks ask you to learn signals, accessors, memos, effects, and subscription lifecycles to achieve what WildflowerJS does with a property assignment.

wildflower.component('dashboard', {
  state: {
    users: 1420,
    status: 'healthy'
  },
  computed: {
    summary() {
      return this.users + ' users, ' + this.status;
    }
  },
  refresh() {
    this.users = 1421;
    // Only the elements bound to 'users'
    // and 'summary' update. Everything
    // else on the page is untouched.
  }
})

One Reactivity Model. Everywhere.

Components, Stores, and Plugins all share the same reactive foundation. State, computed properties, and methods work identically no matter where they live. Learn it once, it works the same way in a UI component, a global store, or a framework plugin.

Other frameworks make you learn a different system for each layer. React components use hooks, but stores need Redux or Zustand, which are completely different APIs. Vue components use reactive data, but Pinia stores have their own patterns. Every layer is a new mental model.

In WildflowerJS, there's one model. A store is a component without a template. A plugin is an entity that extends the framework itself, adding directives, lifecycle hooks, and services. The same this.count++ triggers the same reactivity everywhere.

This unlocks patterns other frameworks can't express. A store can run headless physics simulations with tick(), feeding data into a component that renders it through a pool, all using the same reactive primitives, no glue code required.

// Component: reactive UI
wildflower.component('cart', {
  state: { items: [] },
  computed: {
    total() { return this.items.length; }
  }
})

// Store: global shared state
wildflower.store('user', {
  state: { name: '', role: 'guest' },
  computed: {
    isAdmin() { return this.role === 'admin'; }
  }
})

// Plugin: extends the framework
wildflower.plugin({
  name: 'notifications',
  state: { items: [], unreadCount: 0 },
  computed: {
    hasUnread() { return this.unreadCount > 0; }
  },
  add(msg) { this.items.push(msg); this.unreadCount++; }
})
// Access globally: wildflower.$notifications.add(...)

// Same state. Same computed. Same methods.

Data Pools

Every framework wraps collection items in reactive proxies, whether the item needs it or not. WildflowerJS gives you a choice: data-list for push reactivity (automatic), data-pool for pull reactivity (explicit control, zero proxy overhead).

Pools render plain objects with the same template syntax as lists. Mutate the object, call markDirty(), and only that item updates. Full CRUD, selection, bulk operations, all faster than the push-reactive path.

And because pools use pull-based rendering, they scale to simulations, games, particle systems, and data visualizations at native frame rate. Use cases that would choke a virtual DOM. No other framework has anything like this.

<div data-component="user-table">
  <tbody data-pool="users" data-key="id">
    <template>
      <tr>
        <td data-bind="name"></td>
        <td data-bind="status"
            data-bind-class="status === 'active'
              ? 'badge success'
              : 'badge inactive'"></td>
      </tr>
    </template>
  </tbody>
</div>
wildflower.component('user-table', {
  pools: { users: {} },

  init() {
    // Populate: plain objects, no proxies
    data.forEach(u => this.pools.users.add(u));
  },

  // Optional: add tick() and the same pool
  // renders every frame. Same template, same
  // data, different rendering frequency.
  // That's the only difference between a
  // display table and a particle system.
})

Built for AI-Assisted Development

Because WildflowerJS is standard HTML and JavaScript, AI code assistants already know how to write it. There's no custom syntax to hallucinate or compiler quirks to work around. The code an AI generates runs exactly as written, with no build step between generation and execution.

We go further. WildflowerJS ships an AI-optimized reference page with patterns, anti-patterns, and examples designed for code generation context windows. Our llms.txt file follows the llms.txt convention for machine-readable documentation.

And for structured app generation, our Universal App Manifest lets you describe an entire application as a JSON schema (components, state, computed properties, methods, templates) and have an AI generate the working code from the manifest, mediated through framework-specific idiom files.

You: "Build me a todo app with
WildflowerJS"

AI reads llms.txt or ai-assistant.html
     ↓
Generates standard HTML + JS
     ↓
<div data-component="todo-app">
  <input data-model="newItem">
  <button data-action="addItem">
    Add
  </button>
  <ul data-list="items">
    <template>
      <li data-bind="text"></li>
    </template>
  </ul>
</div>
     ↓
Open in your browser. It works, and you can read and understand the code.

Basic Stores

Learn how WildflowerJS stores provide global state management using the same unified entity model as components, plugins, and pool entities.

Understanding Stores: To work effectively with stores, it helps to understand WildflowerJS's unified entity model. Stores, components, plugins, and pool entities all share the same foundational architecture. They're all reactive entities with state, computed properties, methods, and lifecycle hooks. The key difference is that stores exist without DOM elements, making them ideal for global application state.

The Unified Entity Model

In WildflowerJS, stores and components are remarkably similar. Both support:

Component 
wildflower.component('counter', {
    state: { count: 0 },

    computed: {
        doubled() {
            return this.count * 2
        }
    },

    increment() {
        this.count++
    },

    init() {
        // Lifecycle hook
    }
})
Store 
wildflower.store('counter', {
    state: { count: 0 },

    computed: {
        doubled() {
            return this.count * 2
        }
    },

    increment() {
        this.count++
    },

    init() {
        // Lifecycle hook
    }
})

The only differences are:

  • Registration method: wildflower.component() vs wildflower.store()
  • DOM binding: Components bind to DOM elements; stores don't
  • Scope: Components are local to their DOM; stores are global singletons
Why This Matters: Once you understand component patterns (state, computed, methods, lifecycle), you already know how to write stores. The same mental model applies throughout the framework.

Creating Stores

Use wildflower.store() to create global state stores that integrate seamlessly with components:

// Create a comprehensive counter store with advanced features
wildflower.store('counter', {
    state: {
        count: 0,
        step: 1,
        autoIncrement: false,
        incrementInterval: null
    },

    computed: {
        doubleCount() {
            return this.count * 2
        },

        isPositive() {
            return this.count > 0
        },

        isNegative() {
            return this.count < 0
        },

        magnitude() {
            return Math.abs(this.count)
        },

        status() {
            if (this.count === 0) return 'zero'
            if (this.count > 0) return 'positive'
            return 'negative'
        },

        progressPercentage() {
            // Calculate percentage for values -100 to +100
            return Math.max(0, Math.min(100, ((this.count + 100) / 200) * 100))
        }
    },

    // Methods (unified paradigm - at top level, not in actions block)
    increment() {
        this.count += this.step
    },

    decrement() {
        this.count -= this.step
    },

    reset() {
        this.count = 0
    },

    setStep(newStep) {
        const validStep = Math.max(1, Math.min(50, parseInt(newStep) || 1))
        this.step = validStep
    },

    setCount(newCount) {
        this.count = parseInt(newCount) || 0
    },

    toggleAutoIncrement() {
        this.autoIncrement = !this.autoIncrement

        if (this.autoIncrement) {
            this.incrementInterval = setInterval(() => {
                this.increment()
            }, 1000)
        } else {
            if (this.incrementInterval) {
                clearInterval(this.incrementInterval)
                this.incrementInterval = null
            }
        }
    },

    // Store lifecycle
    destroy() {
        if (this.incrementInterval) {
            clearInterval(this.incrementInterval)
        }
    }
})
<div data-component="counter-display">
    <p class="text-muted">Demonstrates global state management with WildflowerJS stores.</p>

    <div class="row">
        <div class="col-md-6">
            <!-- Counter Display -->
            <div class="card mb-3">
                <div class="card-body text-center">
                    <h1 data-bind="$counter.count"
                        data-bind-class="$counter.status === 'positive' ? 'text-success' : $counter.status === 'negative' ? 'text-danger' : 'text-secondary'">0</h1>

                    <div class="row text-center mt-3">
                        <div class="col-4">
                            <small class="text-muted">Double</small>
                            <div data-bind="$counter.doubleCount" class="fw-bold"></div>
                        </div>
                        <div class="col-4">
                            <small class="text-muted">Step</small>
                            <div data-bind="$counter.step" class="fw-bold"></div>
                        </div>
                        <div class="col-4">
                            <small class="text-muted">Magnitude</small>
                            <div data-bind="$counter.magnitude" class="fw-bold"></div>
                        </div>
                    </div>

                    <!-- Progress Bar -->
                    <div class="mt-3">
                        <small class="text-muted">Range: -100 to +100</small>
                        <div class="progress mt-1" style="height: 12px;">
                            <div class="progress-bar"
                                 data-bind-class="counterProgressColorClass"
                                 data-bind-style="{ width: $counter.progressPercentage + '%' }">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Control Buttons -->
            <div class="d-grid gap-2">
                    <button data-action="increment" class="btn btn-success">
                        + <span data-bind="$counter.step"></span>
                    </button>
                    <button data-action="decrement" class="btn btn-danger">
                        - <span data-bind="$counter.step"></span>
                    </button>

                    <button data-action="reset" class="btn btn-secondary">Reset to 0</button>
                    <button data-action="toggleAutoIncrement"
                            data-bind-class="$counter.autoIncrement ? 'btn btn-warning' : 'btn btn-outline-primary'">
                        <span data-bind="$counter.autoIncrement ? 'Stop Auto' : 'Start Auto'"></span>
                    </button>
            </div>
        </div>

        <div class="col-md-6">
            <!-- Configuration -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0">Configuration</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Step Size (1-50):</label>
                        <input type="number" data-model="localStep" data-action="input:updateStep"
                               class="form-control" min="1" max="50" placeholder="Enter step size">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Set Count Directly:</label>
                        <input type="number" data-model="directCount" class="form-control mb-2"
                               placeholder="Enter count value">
                        <button data-action="setDirectCount" class="btn btn-primary">Set</button>
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <span>Auto-increment:</span>
                        <span data-bind="$counter.autoIncrement ? '🟢 ON' : '⚪ OFF'"
                              data-bind-class="$counter.autoIncrement ? 'text-success' : 'text-muted'"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
wildflower.component('counter-display', {
    state: {
        localStep: 1,
        directCount: ''
    },

    // Declarative store subscription - enables this.stores.counter
    subscribe: {
        counter: ['count', 'step']
    },

    // Initialize local state from store (this.stores is available)
    init() {
        this.localStep = this.stores.counter.step
    },

    // React to store changes with centralized logic
    onStoreUpdate(storeName, path, newValue, oldValue) {
        if (storeName === 'counter' && path === 'step') {
            this.localStep = newValue
        }
    },

    // Actions use this.stores shorthand
    increment() {
        this.stores.counter.increment()
    },

    decrement() {
        this.stores.counter.decrement()
    },

    reset() {
        this.stores.counter.reset()
    },

    toggleAutoIncrement() {
        this.stores.counter.toggleAutoIncrement()
    },

    updateStep() {
        this.stores.counter.setStep(this.localStep)
    },

    setDirectCount() {
        if (this.directCount !== '') {
            this.stores.counter.setCount(this.directCount)
            this.directCount = '' // Clear input after setting
        }
    },

    computed: {
        counterProgressColorClass() {
            const status = this.stores.counter.status
            if (status === 'positive') return 'bg-success'
            if (status === 'negative') return 'bg-danger'
            return 'bg-secondary'
        }
    }
})
Live Preview

Store Architecture

Stores are implemented as virtual components that integrate with the framework's reactivity system:

Virtual Component Design:
  • Stores exist in the component system without DOM elements
  • Protected from garbage collection via isVirtual: true flag
  • Full component capabilities: state, computed, actions, lifecycle (init, destroy, tick)
  • Automatic dependency tracking between stores and components
  • tick(dt) enables headless animation: the store drives updates each frame via requestAnimationFrame
  • destroy() provides lifecycle cleanup for releasing resources, clearing intervals, etc.

Declarative Store Subscriptions (subscribe)

The recommended way to connect components to stores is using the declarative subscribe block. This enables automatic store injection via this.stores and triggers onStoreUpdate() when subscribed paths change:

wildflower.component('dashboard-widget', {
    state: {
        userName: '',
        cartCount: 0
    },

    // Declare which stores and paths to subscribe to
    subscribe: {
        user: ['profile', 'preferences'],  // Subscribe to user.profile and user.preferences
        cart: ['items']                     // Subscribe to cart.items
    },

    init() {
        // this.stores is auto-injected based on subscribe block
        this.userName = this.stores.user.profile?.name || 'Guest'
        this.cartCount = this.stores.cart.items?.length || 0
    },

    // Called when ANY subscribed path changes
    onStoreUpdate(storeName, path, newValue, oldValue) {
        if (storeName === 'user' && path === 'profile') {
            this.userName = newValue?.name || 'Guest'
        } else if (storeName === 'cart' && path === 'items') {
            this.cartCount = newValue?.length || 0
        }
    },

    // Use this.stores throughout your component
    updatePreferences(prefs) {
        this.stores.user.updatePreferences(prefs)
    },

    addToCart(item) {
        this.stores.cart.addItem(item)
    }
})
Benefits of Declarative Subscriptions:
  • this.stores shorthand - No more wildflower.getStore() calls
  • onStoreUpdate() hook - Centralized handling of store changes
  • Automatic cleanup - Subscriptions are removed when component is destroyed
  • Clear dependencies - Easy to see which stores a component uses

The this.stores Shorthand

When you declare a subscribe block, the framework automatically injects store references into this.stores. This is available in init(), all methods, and computed properties:

wildflower.component('user-profile', {
    subscribe: {
        auth: ['user', 'token'],
        cart: ['items']
    },

    computed: {
        // For simple display, prefer $ in HTML instead:
        // data-bind="$auth.user.name", data-bind="$auth.isAuthenticated"
        // Use this.stores when you need JS transformation:
        currentUser() {
            return this.stores.auth.user
        },

        isLoggedIn() {
            return this.stores.auth.isAuthenticated
        },

        cartItemCount() {
            return this.stores.cart.totalItems
        }
    },

    // Use this.stores in methods
    logout() {
        this.stores.auth.logout()
    },

    addToCart(product) {
        this.stores.cart.addItem(product)
    }
})
Important: this.stores is ONLY available in components that declare a subscribe block. Without subscribe, use wildflower.getStore('name') instead: 
// Without subscribe: use getStore() (auto-reactive in computed)
wildflower.component('simple-widget', {
    computed: {
        revenue() { return wildflower.getStore('metrics').revenue; }
    }
});

// With subscribe: this.stores available
wildflower.component('reactive-widget', {
    subscribe: { metrics: ['revenue'] },
    computed: {
        revenue() { return this.stores.metrics.revenue; }
    }
});

The onStoreUpdate() Hook

The onStoreUpdate() lifecycle hook is called whenever a subscribed store path changes. It receives full context about the change:

wildflower.component('notification-badge', {
    state: { count: 0 },

    subscribe: {
        notifications: ['unread']
    },

    // Called when notifications.unread changes
    onStoreUpdate(storeName, path, newValue, oldValue) {
        // storeName: 'notifications'
        // path: 'unread'
        // newValue: the new array/value
        // oldValue: the previous array/value

        if (storeName === 'notifications' && path === 'unread') {
            this.count = newValue?.length || 0

            // Play sound if new notifications added
            if (newValue?.length > (oldValue?.length || 0)) {
                this.playNotificationSound()
            }
        }
    },

    playNotificationSound() {
        // ...
    }
})

Accessing Store Data

There are multiple ways to access store data. The subscribe + this.stores pattern is recommended for most use cases:

Method Use Case Auto-cleanup
subscribe + this.stores Recommended for JS - Clean, declarative, with change notifications Yes
$storeName.path Recommended for HTML - Direct store binding in templates N/A
wildflower.getStore() One-off access, outside components, or without subscriptions N/A
external() Legacy: prefer $entityName.path in HTML N/A

Using wildflower.getStore()

For components that don't need subscriptions, or for accessing stores outside of components:

wildflower.component('simple-display', {
    computed: {
        // Still works - automatically reactive in computed properties
        currentUser() {
            return wildflower.getStore('auth').user
        }
    },

    // In methods, getStore() is useful for one-off access
    logout() {
        wildflower.getStore('auth').logout()
    }
})
Automatic Dependency Tracking: When a component's computed property reads store data via getStore() or this.stores, the framework automatically:
  • Detects which store properties are accessed
  • Registers the component as a dependent of that store
  • Re-evaluates the computed property when store data changes

Using $entityName.path in HTML

For direct binding to any entity (store, component, or plugin) in HTML templates, use the $ accessor:

<!-- Bind directly to store state -->
<span data-bind="$user.name"></span>

<!-- Use in conditionals -->
<div data-show="$auth.isLoggedIn">
    Welcome back!
</div>

<!-- Store-backed lists -->
<div data-list="$cart.items" data-key="id">
    <template>
        <div data-bind="name"></div>
    </template>
</div>

<!-- Nested paths -->
<span data-bind="$auth.user.address.city"></span>

<!-- In expressions -->
<div data-show="$cart.items.length > 0">Cart is not empty</div>
Universal Accessor: $entityName.path works for stores, components, and plugins. It's the universal way to access any entity's state or computed properties in HTML templates. Computed properties resolve automatically (no computed: prefix needed).
Continue Learning: For advanced store patterns including store-to-store communication, persistence, lifecycle management, and the complete API reference, see Advanced Store Patterns.
Previous Pool Performance
Next Advanced Store Patterns
Related patterns: Theme Toggle (Store), Store-Mediated Siblings