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.

Configurable Component Templates CORE+

Allow parent components to define how child components render their data, enabling flexible and reusable component patterns.

Inversion of Control: Configurable Component Templates let the parent define how data renders while the child provides what data to render. This enables highly reusable components without hardcoding presentation or passing complex render functions. Compare to Vue's Scoped Slots or React's Render Props.

The Concept

Sometimes you want a reusable component where the child provides the data but the parent controls the presentation. Traditional approaches require either:

  • Hardcoding templates inside the child component (inflexible)
  • Passing complex render functions or HTML strings (messy)
  • Using slots, which project content but can't access child data

Configurable Component Templates solve this by letting parents define named templates that children can reference when rendering their data.

Basic Usage: Single Object Binding

The simplest case binds a template to a single object in state using data-with:

  • data-item-template="name" - Parent defines a named template
  • data-use-template="name" - Child references the parent's template
  • data-with="path" - Binds the template to a specific state path
<!-- Parent defines HOW user info should look -->
<div data-component="user-page">

    <!-- Define a named template for user display -->
    <template data-item-template="userBadge">
        <div class="card">
            <div class="card-body d-flex align-items-center">
                <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-3"
                     style="width: 50px; height: 50px; font-weight: bold; font-size: 1.2rem;">
                    <span data-bind="initials"></span>
                </div>
                <div>
                    <h5 class="mb-0"><span data-bind="name"></span></h5>
                    <small class="text-muted"><span data-bind="title"></span></small>
                </div>
            </div>
        </div>
    </template>

    <!-- Child uses the template with its own data -->
    <div data-component="profile-card">
        <div data-use-template="userBadge" data-with="user"></div>
    </div>
</div>
// Parent provides structure and template
wildflower.component('user-page', {
    state: {}
})

// Child provides the data
wildflower.component('profile-card', {
    state: {
        user: {
            name: 'Alice Chen',
            title: 'Engineering Lead',
            initials: 'AC'
        }
    }
})
Live Preview

Reactive Updates

Templates bound with data-with are fully reactive. When the bound data changes, the template automatically updates:

<div data-component="status-display">
    <template data-item-template="statusCard">
        <div class="alert" data-bind-class="healthy ? 'alert-success' : 'alert-danger'">
            <strong data-bind="name"></strong>:
            <span data-bind="healthy ? 'Online' : 'Offline'"></span>
            <small class="float-end">Latency: <span data-bind="latency"></span>ms</small>
        </div>
    </template>

    <div data-component="server-monitor">
        <div data-use-template="statusCard" data-with="server"></div>
        <button class="btn btn-primary btn-sm" data-action="toggleStatus">
            Toggle Status
        </button>
        <button class="btn btn-secondary btn-sm" data-action="randomLatency">
            Update Latency
        </button>
    </div>
</div>
wildflower.component('status-display', {
    state: {}
})

wildflower.component('server-monitor', {
    state: {
        server: {
            name: 'API Gateway',
            healthy: true,
            latency: 42
        }
    },

    toggleStatus() {
        this.server.healthy = !this.server.healthy
    },

    randomLatency() {
        this.server.latency = Math.floor(Math.random() * 200)
    }
})
Live Preview

Actions in Templates

Actions defined in parent templates bind to the child component's methods. This makes sense because the child owns the data context:

<div data-component="product-page">
    <!-- Parent defines template with actions -->
    <template data-item-template="productCard">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title" data-bind="name"></h5>
                <p class="card-text text-muted" data-bind="description"></p>
                <div class="d-flex justify-content-between align-items-center">
                    <span class="h4 mb-0">$<span data-bind="price"></span></span>
                    <!-- Action calls child's method -->
                    <button class="btn btn-primary" data-action="addToCart">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </template>

    <div data-component="product-display">
        <div data-use-template="productCard" data-with="product"></div>
        <div class="alert alert-success mt-3" data-show="addedToCart">
            Added to cart!
        </div>
    </div>
</div>
wildflower.component('product-page', {
    state: {}
})

// Child owns data AND handles actions
wildflower.component('product-display', {
    state: {
        product: {
            name: 'Wireless Headphones',
            description: 'Premium sound quality with noise cancellation',
            price: 149.99
        },
        addedToCart: false
    },

    // Called by button in PARENT's template
    addToCart(event, element, details) {
        // details.item contains the bound data
        console.log('Adding to cart:', details.item.name)
        this.addedToCart = true
        setTimeout(() => {
            this.addedToCart = false
        }, 2000)
    }
})
Live Preview

List Binding

The same pattern works for arrays with data-list. Instead of rendering one object, the template renders for each item in the array:

<!-- Parent component defines HOW items should look -->
<div data-component="user-directory">
    <!-- Define a named template for user cards -->
    <template data-item-template="userCard">
        <div class="card mb-2">
            <div class="card-body d-flex align-items-center">
                <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-3"
                     style="width: 40px; height: 40px; font-weight: bold;">
                    <span data-bind="initials"></span>
                </div>
                <div class="flex-grow-1">
                    <h6 class="mb-0"><span data-bind="name"></span></h6>
                    <small class="text-muted"><span data-bind="role"></span></small>
                </div>
                <button class="btn btn-sm btn-primary" data-action="selectUser">
                    View
                </button>
            </div>
        </div>
    </template>

    <!-- The list uses the template defined above -->
    <div data-list="users">
        <template data-use-template="userCard"></template>
    </div>

    <div class="alert alert-info mt-3" data-show="selectedUser">
        Selected: <strong data-bind="selectedUser"></strong>
    </div>
</div>
wildflower.component('user-directory', {
    state: {
        users: [
            { name: 'Alice Chen', role: 'Engineering Lead', initials: 'AC' },
            { name: 'Bob Smith', role: 'Product Designer', initials: 'BS' },
            { name: 'Carol Davis', role: 'Frontend Developer', initials: 'CD' }
        ],
        selectedUser: ''
    },

    selectUser(event, element, details) {
        // details.item contains the list item data
        this.selectedUser = details.item.name
    }
})
Live Preview
Note: Inside data-list, you don't need data-with. The list automatically provides each item's data context.

Fallback Templates

If a parent template isn't found, you can provide fallback content in two ways:

Inline Fallback

Put fallback content directly inside the data-use-template element:

<!-- Parent does NOT define "fancyCard" template -->
<div data-component="no-template-parent">
    <div data-component="card-display">
        <!-- "fancyCard" won't be found, so fallback is used -->
        <div data-use-template="fancyCard" data-with="item">
            <!-- Inline fallback content -->
            <div class="card">
                <div class="card-body">
                    <p class="mb-0">Default: <strong data-bind="name"></strong></p>
                </div>
            </div>
        </div>
    </div>
</div>
wildflower.component('no-template-parent', {
    state: {}
})

wildflower.component('card-display', {
    state: {
        item: { name: 'Using Fallback Template' }
    }
})
Live Preview

Sibling Fallback (for lists)

Use a separate data-template-fallback element:

<div data-list="items">
    <template data-use-template="customCard"></template>
    <template data-template-fallback="customCard">
        <!-- Fallback template -->
        <div class="default-item">
            <span data-bind="name"></span>
        </div>
    </template>
</div>
Priority: Inline fallback takes precedence over sibling fallback if both are present.

Full Example: Task Manager

Here's a complete example combining lists, actions, computed properties, and configurable templates:

<div data-component="task-manager">
    <!-- Parent defines the template with actions -->
    <template data-item-template="taskRow">
        <div class="d-flex align-items-center p-2 border-bottom">
            <input type="checkbox" class="form-check-input me-2"
                   data-model="done">
            <span class="flex-grow-1"
                  data-bind-class="done ? 'text-decoration-line-through text-muted' : ''"
                  data-bind="title"></span>
            <!-- This action calls task-list's method, NOT task-manager's -->
            <button class="btn btn-sm btn-danger" data-action="removeTask">
                Remove
            </button>
        </div>
    </template>

    <!-- Child component uses the template -->
    <div data-component="task-list">
        <div class="mb-2 d-flex gap-2">
            <input type="text" class="form-control" data-model="newTask"
                   placeholder="Add task...">
            <button class="btn btn-primary" data-action="addTask">Add</button>
        </div>
        <div data-list="tasks">
            <template data-use-template="taskRow"></template>
        </div>
        <div class="mt-2 text-muted small">
            <span data-bind="completedCount"></span> of
            <span data-bind="totalCount"></span> completed
        </div>
    </div>
</div>
// Parent just provides structure and template
wildflower.component('task-manager', {
    state: {}
})

// Child owns the data AND handles the actions
wildflower.component('task-list', {
    state: {
        tasks: [
            { title: 'Learn configurable templates', done: false },
            { title: 'Build something cool', done: false },
            { title: 'Read the docs', done: true }
        ],
        newTask: ''
    },

    computed: {
        totalCount() {
            return this.tasks.length
        },
        completedCount() {
            return this.tasks.filter(t => t.done).length
        }
    },

    addTask() {
        const title = this.newTask.trim()
        if (title) {
            this.tasks.push({ title, done: false })
            this.newTask = ''
        }
    },

    // This method is called by the button in the PARENT's template
    removeTask(event, element, details) {
        // Use details.index from the framework's action context
        this.tasks.splice(details.index, 1)
    }
})
Live Preview

Use Cases

Themeable Components

Create list components that can be styled differently in different parts of your app without changing the component itself.

Design System Libraries

Build component libraries where consumers can customize rendering while the library handles data management.

Admin Dashboards

Let different dashboard views render the same data with different layouts (cards, tables, lists).

Content Management

Display selected items (current post, active user, etc.) using parent-defined presentation.

Best Practices

Do:
  • Use descriptive template names (e.g., userCard, productTile)
  • Provide fallback templates for reusable components
  • Keep action handlers in the child component that owns the data
  • Document which templates your components expect/provide
Avoid:
  • Generic names like item or template that could collide
  • Deeply nested template lookups (keep hierarchies shallow)
  • Putting complex logic in templates (keep templates presentational)

Reference

Attribute Location Description
data-item-template="name" Parent component Defines a named template that descendant components can use
data-use-template="name" Child component References an ancestor's template for rendering
data-with="path" With data-use-template Binds template to a specific state path (for single objects outside lists)
data-use-template="name@component" Child component References a specific ancestor's template (skips closer ones)
data-template-fallback="name" Sibling of data-use-template Fallback template if the named template isn't found
data-wf-used-template="name" Rendered items SSR marker indicating which template was used (auto-generated)

JavaScript API

Method Description
wildflower.rescanItemTemplates(element) Re-scan a component for newly added templates. Returns array of new template names.

Events

Event Detail Description
itemTemplateReady { templateName, component } Fired when a new template is registered via rescanItemTemplates()
Prefix support: All attributes also support the data-wf- prefix. For example: 
<template data-wf-item-template="userCard">...</template>
<template data-wf-use-template="userCard"></template>
<div data-wf-use-template="userCard" data-wf-with="user"></div>
Lifecycle & Cleanup: Templates registered during component initialization are automatically cleaned up when the component is destroyed. No manual unregistration is required.
Previous Props
Next Advanced Configurable Templates