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 compromises.

Latest release: v1.4.1 · see what's new
<script src="wildflower.min.js"></script> ...and start building.

Back to Basics

With WildflowerJS, you write 100% standard code. HTML stays HTML. JavaScript stays JavaScript. CSS stays CSS. There's no JSX, templating language, or custom syntax to learn. If you know the standards, you already know how to use WildflowerJS.

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. There's nothing to install, and no custom file types or sourcemaps. Save the file, refresh, and your change is live.

Just be a web developer.

Batteries Included: One Mental Model

Router, SSR, queries, stores, computed properties, two-way binding, event modifiers, data pools, and TypeScript types, all built in, all using the same API. Learn data-bind once and you know binding everywhere: in lists, pools, stores, plugins. 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 is for automatic reactivity: mutate state, the DOM updates. data-pool is for explicit control: plain objects, zero proxy overhead, you say what changed.

Both use the same template syntax and differ in performance profile, from interactive forms to per-frame particle systems. You choose the tradeoff that fits 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

No 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, config file, or .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, including router, SSR, stores, computed properties, transitions, and pools.

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. NONE of that.

No Install. No Attack Surface.

Every dependency you install lets a maintainer you have never met run 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.

A WildflowerJS project has none of that surface. There is no npm install, postinstall script, or 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, with no npm install and no transitive packages in the build path. The entire toolchain is three files verified by hash.

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.

No Compromise

WildflowerJS doesn't compromise performance for ease-of-use. Even with no build step, on the js-framework-benchmark, WildflowerJS performs at the level of frontier frameworks, matching the fastest signal-based frameworks across list creation, updates, selection, swaps, and removal. And for per-frame workloads, data pools lead every framework we tested in our Lorenz attractor simulation demo.

The charts here are the overall geomean standings and the operation breakdown from our latest full-field run, plus the sustained frame rate from our per-frame animation sweep. Click any chart to see it full size.

Delivery is fast too, because there's less to deliver. It ships as one file, with no runtime split across chunks and no hydration pass. Lighthouse scores hold their own against compiled frameworks without a single build artifact.

WildflowerJS doesn't trade simplicity of interface for performance of implementation.

Benchmark setup for these charts: js-framework-benchmark operations 1 through 9, 15 samples per cell, all frameworks in a single run; total-duration medians, lower is better. The frame-rate chart runs each framework's fastest variant on the Lorenz attractor for 8 seconds per particle count, fullscreen on a 120 Hz panel; higher is better. Apple M5 Pro, 24 GB RAM, macOS 26.5.2, Google Chrome 150 (stable, headed).

Bar chart of geomean slowdown versus the fastest framework per operation, vanilla JS baseline 1.00: WF-pool 1.054, Vue Vapor 1.056, Solid 1.095, WF 1.120, Svelte 1.165, Vue 1.263. Lower is better.
Geomean slowdown vs fastest per operation. Lower is better.
Grouped bar chart of all nine js-framework-benchmark operations for Solid, Svelte, Vue, Vue Vapor, WF, and WF-pool, with per-operation rankings. WF-pool is fastest on most operations.
All nine operations, side by side. Stars mark the fastest.
Line chart of sustained FPS versus particle count on the Lorenz attractor for Solid, Svelte, Vue, Vue Vapor, WF, and WF-pool. WF-pool holds the highest frame rate at every count, staying above 60 FPS past 4500 particles.
Per-frame animation. Sustained FPS as particle count grows; higher is better.

No 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 alone.

That means Leaflet, DataTables, Chart.js, D3, Three.js, any library that touches the DOM, just works. There are no wrapper packages or framework-specific escape hatches required. Drop in a script tag, it's ready to go.

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 the whole of vanilla JS, with no 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.

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 standard JS 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, Pools, and now Data Queries 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 across all of those entities.

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 makes patterns possible that other frameworks cannot 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.

Live Server Data: Built In, Stays True

With WildflowerJS SSR, the page arrives with its data already in the HTML. The server (your server, whatever back-end you prefer) renders your data into real HTML, so the first paint is real content, indexable and readable before a line of JavaScript runs. And because the markup is genuine HTML, hydration reads the page's state straight back out of the document. Server-rendered components end up exactly equivalent to client-rendered ones.

v1.3 brings data-query, which does for the rest of the page's life what SSR does for first load. Most frameworks hand you fetch() and leave the rest to you. There's an entire ecosystem of client data libraries that exists to fill that gap. WildflowerJS makes it a declaration instead. Name a source, point an element at it, say how fresh it should stay. Loading and error states, refresh on demand, request racing, and the whole refresh ladder (poll, conditional GET, focus, reconnect, server push) come with it. There is also no query language. Refinement is an ordinary computed property, and filtering happens client-side without a network round trip.

Together, Wildflower's SSR and data-query cover one job at two different times. The server renders the page with real data. Because hydration reads the page itself, there's no flash of empty content, no loading spinner over data the user can already see, and no hydration scripts locking up the main thread. The server's render is the actual UI. When paired with data-query, your SSR becomes the first result of a standing query. The query adopts that markup and keeps it updated from there.

In the example above, the markup is 100% HTML.

<div data-component="product-board">
  <p data-show="$products.isLoading">
    Loading…
  </p>
  <p data-show="$products.error">
    Failed.
    <button data-action="retry">Retry</button>
  </p>

  <span data-bind="$products.count"></span>
  products

  <tbody data-query="products">
    <template>
      <tr>
        <td data-bind="name"></td>
        <td data-bind="stock"></td>
      </tr>
    </template>
  </tbody>
</div>
// The entire data layer:
wildflower.query('products', {
  from: '/api/products',
  key: 'id',
  refresh: ['focus', 'etag:60']
});

// Server-rendered page? Add data-ssr="true"
// and the markup the server sent becomes the
// query's first result. Live from there.

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, which a virtual DOM cannot sustain. No other framework offers this choice.

<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.

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.

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.

Third-Party Library Integration

WildflowerJS works with third-party JavaScript libraries because it has no virtual DOM. Libraries that manipulate the real DOM directly - like Leaflet, FullCalendar, SortableJS, Chart.js, and many others - can be integrated without wrappers, adapters, or special plugins.

Why WildflowerJS integrates well:
  • No Virtual DOM - Libraries can read from and write to the real DOM without conflicts
  • Simple Scanning - Call wildflower.scan() after any library renders new content
  • Data Attributes - Use data-bind-attr to set IDs that libraries need
  • No Framework Lock-in - Use any JavaScript library without "wrapper" packages

The Integration Pattern

Integrating third-party libraries follows a consistent pattern:

  1. Initialize the library - Create the library instance on your DOM element
  2. Scan after rendering - If the library renders content containing WildflowerJS components, call wildflower.scan()
  3. Sync state changes - Use watchers or subscriptions to keep the library in sync with your state
  4. Use data-bind-attr - Set data attributes that the library needs to identify elements

Loading Libraries Securely (Subresource Integrity)

When you pull a library from a CDN, lock it to a known-good hash with Subresource Integrity (SRI). The browser hashes the downloaded file and refuses to run it if the bytes do not match, so a tampered or swapped-out CDN file is blocked instead of executed. This is the runtime equivalent of how WildflowerJS pins its own build tools - rollup and terser are fetched as SHA-512-verified tarballs - so apply the same discipline to the libraries you load at runtime.

<!-- Pin the exact version, then lock the file with its hash -->
<script
  src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"
  integrity="sha512-..."
  crossorigin="anonymous"></script>

Generate the hash from the exact file you intend to ship:

curl -s https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js \
  | openssl dgst -sha512 -binary | openssl base64 -A
# prefix the result with "sha512-" for the integrity attribute
For SRI to work:
  • Pin the version. The URL must point at an exact version (sortablejs@1.15.2), never @latest or an unversioned path. The hash is tied to specific bytes, so an auto-updating URL fails on every release. That failure assures an unexpected change never runs.
  • Add crossorigin="anonymous". SRI on a cross-origin script requires CORS; without it the browser will not run the script even when the hash matches.
  • Hash the file you actually load. Minified vs unminified, or a different version, yields a different hash. jsDelivr and unpkg also expose a copy-paste SRI hash in their UIs, or use srihash.org.

WildflowerJS itself can be pinned the same way when loaded from a CDN: generate the hash for the exact wildflower.min.js version you reference.

Dynamic Action Binding with rebindActions()

When a component renders content via innerHTML that includes data-action attributes, those actions need to be bound to the component. Use this.rebindActions() after updating the DOM:

// After dynamically adding content with data-action attributes
this.element.querySelector('.container').innerHTML = `
    <button data-action="handleClick">Click Me</button>
    <button data-action="handleSubmit">Submit</button>
`;

// Bind the new action handlers
this.rebindActions();
Note: rebindActions() is safe to call multiple times - already-bound elements are skipped. This is the recommended pattern for dynamic content rendering within components.

Example: SortableJS

SortableJS enables drag-and-drop reordering of lists. Use data-list for declarative rendering and initialize SortableJS in init(). When the user drags, read the new order from the DOM and update your state array.

<style>
.task-list { list-style: none; margin: 0; padding: 0; }
.task-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 4px; background: #888; color: #fff; border-radius: 6px; cursor: grab; }
.task-item .drag-handle { color: #ccc; user-select: none; }
.task-item .task-text { flex: 1; }
.task-item .remove-btn { margin-left: auto; flex-shrink: 0; }
</style>

<div data-component="integration-tasks">
    <h5>Drag to Reorder</h5>
    <ul class="task-list" data-list="tasks" data-key="id">
        <template>
            <li class="task-item" data-bind-attr="({ 'data-task-id': id })">
                <span class="drag-handle">&#8942;&#8942;</span>
                <span class="task-text" data-bind="text"></span>
                <button class="btn btn-sm btn-danger remove-btn" data-action="removeTask">&times;</button>
            </li>
        </template>
    </ul>
</div>
wildflower.component('integration-tasks', {
    state: {
        tasks: [
            { id: 1, text: 'Book flights' },
            { id: 2, text: 'Reserve hotel' },
            { id: 3, text: 'Pack bags' },
            { id: 4, text: 'Get travel insurance' },
            { id: 5, text: 'Print boarding passes' }
        ]
    },

    init() {
        const self = this;
        const list = this.element.querySelector('.task-list');

        // Load SortableJS dynamically if not already available
        if (window.Sortable) {
            this.initSortable(list);
        } else {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js';
            script.onload = function() { self.initSortable(list); };
            document.head.appendChild(script);
        }
    },

    initSortable(list) {
        new Sortable(list, {
            animation: 150,
            handle: '.drag-handle',
            ghostClass: 'sortable-ghost',
            onEnd: () => {
                const items = list.querySelectorAll('[data-task-id]');
                const newOrder = Array.from(items).map(
                    el => parseInt(el.dataset.taskId)
                );
                this.tasks = newOrder.map(id =>
                    this.tasks.find(t => t.id === id)
                );
            }
        });
    },

    removeTask(event, element) {
        const id = parseInt(
            element.closest('[data-task-id]').dataset.taskId
        );
        this.tasks = this.tasks.filter(
            t => t.id !== id
        );
    }
});
Live Preview
Key Pattern: Use data-list with data-key for declarative rendering. In the SortableJS onEnd callback, read the reordered data-task-id attributes from the DOM and rebuild the state array to match. WildflowerJS reconciles the rest.

SortableJS with data-list (Cross-List Drag-and-Drop)

For kanban-style interfaces where items move between multiple lists, you can use SortableJS directly with data-list. WildflowerJS automatically detects when SortableJS moves elements between lists and reconciles the DOM correctly.

How it works: SortableJS physically moves the DOM element; your onEnd handler updates both state arrays. Each list then reconciles against its own array: the source list removes the row it was tracking (wherever SortableJS left that element, even mid-drag into another column), and the target list renders its own row for the item. One item in state, one row in the DOM. 
<div data-component="kanban-board">
    <div style="display:flex; gap:12px;">
        <div style="flex:1;">
            <h6>To Do</h6>
            <div class="card card-body card-list" data-list="todoCards" data-key="id"
                style="min-height:80px;">
                <template>
                    <div data-bind-attr="({ 'data-card-id': id })"
                        style="padding:8px 12px; margin-bottom:4px; background:#888; color:#fff; border-radius:4px; cursor:grab;">
                        <span data-bind="title"></span>
                    </div>
                </template>
            </div>
        </div>

        <div style="flex:1;">
            <h6>In Progress</h6>
            <div class="card card-body card-list" data-list="inProgressCards" data-key="id"
                style="min-height:80px;">
                <template>
                    <div data-bind-attr="({ 'data-card-id': id })"
                        style="padding:8px 12px; margin-bottom:4px; background:#888; color:#fff; border-radius:4px; cursor:grab;">
                        <span data-bind="title"></span>
                    </div>
                </template>
            </div>
        </div>

        <div style="flex:1;">
            <h6>Done</h6>
            <div class="card card-body card-list" data-list="doneCards" data-key="id"
                style="min-height:80px;">
                <template>
                    <div data-bind-attr="({ 'data-card-id': id })"
                        style="padding:8px 12px; margin-bottom:4px; background:#888; color:#fff; border-radius:4px; cursor:grab;">
                        <span data-bind="title"></span>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>
wildflower.component('kanban-board', {
    state: {
        todoCards: [
            { id: 1, title: 'Design mockups' },
            { id: 2, title: 'Write specs' }
        ],
        inProgressCards: [
            { id: 3, title: 'Build API' }
        ],
        doneCards: [
            { id: 4, title: 'Setup project' }
        ]
    },

    init() {
        const self = this;

        function setup() {
            self.element.querySelectorAll('.card-list').forEach(
                function(list) {
                    new Sortable(list, {
                        group: 'kanban-cards',
                        animation: 150,
                        ghostClass: 'sortable-ghost',
                        onEnd: function(evt) {
                            const cardId = parseInt(
                                evt.item.dataset.cardId
                            );
                            const fromList = evt.from.dataset.list;
                            const toList = evt.to.dataset.list;

                            if (fromList !== toList) {
                                self.moveCard(
                                    cardId, fromList,
                                    toList, evt.newIndex
                                );
                            }
                        }
                    });
                }
            );
        }

        if (window.Sortable) {
            setup();
        } else {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js';
            script.onload = setup;
            document.head.appendChild(script);
        }
    },

    moveCard(cardId, fromName, toName, newIndex) {
        const fromList = this[fromName];
        const card = fromList.find(c => c.id === cardId);
        const newFrom = fromList.filter(c => c.id !== cardId);
        const newTo = [...this[toName]];
        newTo.splice(newIndex, 0, card);

        this[fromName] = newFrom;
        this[toName] = newTo;
    }
});
Live Preview
Important: The data-bind-attr="({ 'data-card-id': id })" on each card is essential. It sets a data-card-id attribute that we read in onEnd to identify which card was moved.
Why this works: Unlike other reactive frameworks that require you to manually revert SortableJS's DOM changes (removing evt.item before updating state), WildflowerJS's list reconciler tracks its rows by element reference, so it cleans up a row SortableJS relocated and renders the item fresh in its new list. Update the state arrays and the DOM converges.

Example: Leaflet Maps

Leaflet is a popular mapping library. It manages its own DOM for markers and popups, but you can embed WildflowerJS components inside popups.

Setup

<!-- Include Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- Map container -->
<div data-component="map-demo">
    <div id="my-map" style="height: 400px;"></div>
</div>

JavaScript

// Popup component - will be initialized inside Leaflet popups
wildflower.component('location-popup', {
    state: {
        location: null
    },

    init() {
        // Get location ID from data attribute
        const locationId = parseInt(this.element.dataset.locationId);
        const store = wildflower.getStore('locations');
        this.location = store.getLocation(locationId);
    },

    remove() {
        const store = wildflower.getStore('locations');
        store.map.closePopup();
        store.removeLocation(this.location.id);
    }
});

// Main map component
wildflower.component('map-demo', {
    state: {
        map: null,
        markers: {}
    },

    init() {
        this.initMap();
        this.syncMarkers();
    },

    initMap() {
        this.map = L.map('my-map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(this.map);

        // Click to add locations
        this.map.on('click', (e) => {
            this.addLocation(e.latlng.lat, e.latlng.lng);
        });
    },

    syncMarkers() {
        const store = wildflower.getStore('locations');

        store.locations.forEach(loc => {
            const marker = L.marker([loc.lat, loc.lng]).addTo(this.map);

            // Popup contains a WildflowerJS component
            const popupHtml = `
                <div data-component="location-popup" data-location-id="${loc.id}">
                    <h4 data-bind="location.name"></h4>
                    <button data-action="remove">Remove</button>
                </div>
            `;

            marker.bindPopup(popupHtml);

            // KEY: Scan popup content when it opens
            marker.on('popupopen', () => {
                wildflower.scan('.leaflet-popup-content');
            });

            this.markers[loc.id] = marker;
        });
    }
});
Key Pattern: The marker.on('popupopen', () => wildflower.scan('.leaflet-popup-content')) initializes the WildflowerJS component inside the Leaflet popup after Leaflet renders it to the DOM.

Example: FullCalendar

FullCalendar is a full-featured calendar component. State changes in WildflowerJS can drive calendar events.

wildflower.component('calendar-demo', {
    state: {
        calendar: null,
        events: [
            { id: '1', title: 'Meeting', date: '2025-03-15' },
            { id: '2', title: 'Conference', date: '2025-03-18' }
        ]
    },

    init() {
        this.initCalendar();

        // State changes → calendar. subscribe() is the imperative form and
        // returns an unsubscribe function; keep it for destroy(). A top-level
        // watch: { events() {...} } block works here too. What does NOT work
        // is assigning this.watch inside init(): watchers are registered
        // before init() runs, so the assignment is silently ignored.
        this._unsubscribe = this.subscribe('events', () => this.syncCalendar());
    },

    destroy() {
        if (this._unsubscribe) this._unsubscribe();
        if (this.calendar) this.calendar.destroy();
    },

    initCalendar() {
        this.calendar = new FullCalendar.Calendar(
            document.getElementById('calendar'),
            {
                initialView: 'dayGridMonth',
                events: this.events,
                editable: true,

                // Drag event updates state
                eventDrop: (info) => {
                    this.updateEventDate(info.event.id, info.event.startStr);
                },

                // Click event triggers action
                eventClick: (info) => {
                    this.selectEvent(info.event.id);
                }
            }
        );

        this.calendar.render();
    },

    syncCalendar() {
        if (!this.calendar) return;

        // Remove all events and re-add from state
        this.calendar.removeAllEvents();
        this.events.forEach(evt => {
            this.calendar.addEvent(evt);
        });
    },

    updateEventDate(id, newDate) {
        this.events = this.events.map(e =>
            e.id === id ? { ...e, date: newDate } : e
        );
    },

    addEvent(title, date) {
        const newEvent = {
            id: String(Date.now()),
            title,
            date
        };
        this.events = [...this.events, newEvent];
    }
});

Example: Chart.js

Chart.js renders charts to a canvas element. When your data changes, update the chart.

wildflower.component('chart-demo', {
    state: {
        chart: null,
        data: [12, 19, 3, 5, 2, 3]
    },

    init() {
        this.initChart();
    },

    initChart() {
        const ctx = this.element.querySelector('#myChart').getContext('2d');

        this.chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                datasets: [{
                    label: 'Sales',
                    data: this.data,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            }
        });
    },

    updateData(newData) {
        this.data = newData;

        // Update chart directly
        this.chart.data.datasets[0].data = newData;
        this.chart.update();
    },

    destroy() {
        if (this.chart) {
            this.chart.destroy();
        }
    }
});

Example: Markdown Rendering with marked + DOMPurify

Rendering user-authored or CMS-sourced markdown (an article body, a comment, release notes) is two separate jobs done well by two separate small libraries, glued together by data-bind-html: marked turns markdown text into an HTML string, and DOMPurify strips anything dangerous out of that string before it reaches the DOM. Neither library knows the other exists, and neither needs to: WildflowerJS ships no markdown machinery of its own, and none is needed.

marked does not sanitize its output. Markdown source can carry raw HTML through unchanged, including <script> tags and onerror handlers, so treat every parsed result as untrusted, the same as any other HTML from outside your own code. Configure wildflower.setHtmlSanitizer() once at startup and every data-bind-html in the app, markdown or otherwise, is covered. 
<script
  src="https://cdn.jsdelivr.net/npm/marked@18.0.10/lib/marked.umd.min.js"
  integrity="sha512-LMWYVSAqnvUxsWSlfBMOr2NvYD/Vk8RiPl8popAHcnIEw9W2F1FoX3frqrBYwr/6lxfrh5xp2qpJwPupmuJxyg=="
  crossorigin="anonymous"></script>
<script
  src="https://cdn.jsdelivr.net/npm/dompurify@3.4.14/dist/purify.min.js"
  integrity="sha512-+G1tsz5n01KTeX7oUT/Lm5P2B+n9RUogC98t4E8MseH9YUac2D2uPaNSbsYDOOSZr2YQ1BfeCxk8KXZXvhctEA=="
  crossorigin="anonymous"></script>

Wire the sanitizer once, before any markdown-bearing component renders (right beside your store and component registrations is the natural spot):

wildflower.setHtmlSanitizer(html => DOMPurify.sanitize(html));

Parse markdown in a computed property, and bind it with data-bind-html. A computed caches until the source field changes, so an article body is parsed once per edit, not once per unrelated render:

<div data-component="article-body">
    <textarea class="md-source" data-model="source" rows="6"></textarea>
    <div class="rendered-article" data-bind-html="bodyHtml"></div>
</div>
// This live preview loads both libraries dynamically so the example
// runs standalone; in your own app, load them from <head> as shown
// above and call setHtmlSanitizer once at startup instead.
function loadScript(src) {
    return new Promise((resolve, reject) => {
        const s = document.createElement('script');
        s.src = src;
        s.onload = resolve;
        s.onerror = reject;
        document.head.appendChild(s);
    });
}

Promise.all([
    loadScript('https://cdn.jsdelivr.net/npm/marked@18.0.10/lib/marked.umd.min.js'),
    loadScript('https://cdn.jsdelivr.net/npm/dompurify@3.4.14/dist/purify.min.js')
]).then(() => {
    wildflower.setHtmlSanitizer(html => DOMPurify.sanitize(html));

    wildflower.component('article-body', {
        state: {
            source: '# Try it\n\nEdit the markdown above. **Bold**, ' +
                    '_italic_, and [links](https://wildflowerjs.com) all work.\n\n' +
                    'Also try pasting a bare, unwrapped script tag on its own ' +
                    'line: it is removed completely, with no trace, not even ' +
                    'as visible text. Wrap the same tag in backticks instead ' +
                    'and it survives as inert code-span text, since backtick ' +
                    'text is escaped before it ever reaches the sanitizer.'
        },
        computed: {
            bodyHtml() {
                return marked.parse(this.source);
            }
        }
    });

    wildflower.scan();
});
Live Preview
Synchronous parsing keeps this simple. marked.parse() returns a plain string, so it drops straight into a computed property with no async ceremony. data-bind-html routes every write through whatever sanitizer setHtmlSanitizer configured, so DOMPurify runs on the parsed markdown the same way it would run on HTML from any other untrusted source, before a single byte reaches innerHTML. Neither library needs to know WildflowerJS exists.

The two ways of trying to smuggle a script tag through the demo above behave differently, and the difference matters for what a real article or comment field actually sees. A bare <script> on its own line is, by the CommonMark spec, a raw HTML block: marked passes it through unescaped, so DOMPurify receives a genuine <script> element and removes it wholesale, tag and content together, with nothing left behind. The same text wrapped in backticks is an inline code span instead, a different parse rule entirely: marked escapes it to plain text before DOMPurify ever runs, so it survives as visible, inert code. Real user input, an attacker pasting a script tag into a comment box, arrives as the first, fully-stripped case. The escaped-text case only shows up when an author writes markdown about a script tag, exactly as this paragraph just did.

Using Stores for Shared State

When multiple components need to interact with a third-party library, use a store for centralized state:

// Centralized store for map state
wildflower.store('mapData', {
    state: {
        locations: [],
        map: null,
        nextId: 1
    },

    addLocation(lat, lng) {
        const location = {
            id: this.nextId++,
            lat,
            lng,
            name: `Location ${this.nextId - 1}`
        };
        this.locations = [...this.locations, location];
    },

    removeLocation(id) {
        this.locations = this.locations.filter(l => l.id !== id);
    },

    getLocation(id) {
        return this.locations.find(l => l.id === id);
    }
});

// Any component can access the store
wildflower.component('location-popup', {
    remove() {
        const store = wildflower.getStore('mapData');
        store.removeLocation(this.locationId);
    }
});
Benefit: Using stores eliminates fragile parent lookups like wildflower.getComponents('parent')[0]. Any component can access the store directly via wildflower.getStore('storeName').

Common Patterns Summary

Scenario Pattern
Component renders innerHTML with data-action this.rebindActions() after innerHTML update
Library renders content with WF components library.on('render', () => wildflower.scan(container))
Library needs element IDs after manipulation data-bind-attr="{ 'data-id': id }"
State change should update library Use watch or store.subscribe()
Multiple components share library state Use a store: wildflower.store()
Library creates/destroys DOM elements Scan after creation, no action needed on destruction

Libraries Known to Work Well

These libraries have been tested and work well with WildflowerJS:

  • SortableJS - Drag-and-drop sorting
  • Leaflet - Interactive maps
  • FullCalendar - Calendar components
  • Chart.js - Charts and graphs
  • Swiper - Touch sliders
  • Tippy.js - Tooltips and popovers
  • Flatpickr - Date pickers
  • Quill / TinyMCE - Rich text editors
  • Prism.js / Highlight.js - Code syntax highlighting
  • marked + DOMPurify - Markdown rendering, sanitized
General Rule: If a library works with vanilla JavaScript by manipulating the DOM directly, it will work with WildflowerJS, with no wrapper packages needed.

Troubleshooting

Components Not Initializing

If components inside library-rendered content aren't working:

  • Ensure you're calling wildflower.scan() after the library renders
  • Check the selector passed to scan - it should contain the new components
  • Verify the content actually has data-component attributes

State Not Syncing

If library state and WildflowerJS state get out of sync:

  • Use watchers or store subscriptions to react to state changes
  • Call the library's update/refresh method when state changes
  • Consider if the library should be the source of truth for certain data

Memory Leaks

To prevent memory leaks:

  • Destroy library instances in your component's destroy() method
  • Remove event listeners you've added
  • Clear any references stored in state
Previous Configuration
Next Web Component Libraries