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.

Style Binding

Dynamically control element styles and CSS classes based on component state. WildflowerJS provides both data-bind-style for inline styles and data-bind-class for CSS class manipulation.

Style Binding Features:
  • Dynamic inline styles via data-bind-style
  • Conditional CSS classes via data-bind-class
  • Expression-based evaluation
  • Access to state, computed properties, and component scope

Dynamic Inline Styles

Basic Style Binding

Use data-bind-style with a computed property name that returns a style object. The computed property should return an object with CSS properties (camelCase):

<div data-component="style-demo">
    <!-- Basic style binding with computed style object -->
    <div data-bind-style="boxStyle">
        <p>This box uses dynamic colors!</p>
        <p>Background: <span data-bind="bgColorDisplay"></span></p>
        <p>Text: <span data-bind="textColorDisplay"></span></p>
    </div>

    <!-- Controls -->
    <div class="mt-3">
        <button class="btn btn-primary btn-sm me-2" data-action="randomColors">
            Random Colors
        </button>
        <button class="btn btn-secondary btn-sm" data-action="resetColors">
            Reset
        </button>
    </div>
</div>
wildflower.component('style-demo', {
    state: {
        bgColor: '#3498db',
        textColor: '#ffffff'
    },

    computed: {
        boxStyle() {
            return {
                backgroundColor: this.bgColor,
                color: this.textColor,
                padding: '20px',
                borderRadius: '8px',
                textAlign: 'center'
            };
        },
        bgColorDisplay() {
            return this.bgColor;
        },
        textColorDisplay() {
            return this.textColor;
        }
    },

    randomColors() {
        const colors = [
            { bg: '#e74c3c', text: '#ffffff' },
            { bg: '#2ecc71', text: '#ffffff' },
            { bg: '#9b59b6', text: '#ffffff' },
            { bg: '#f39c12', text: '#000000' },
            { bg: '#1abc9c', text: '#ffffff' },
            { bg: '#34495e', text: '#ffffff' }
        ];
        const chosen = colors[Math.floor(Math.random() * colors.length)];
        this.bgColor = chosen.bg;
        this.textColor = chosen.text;
    },

    resetColors() {
        this.bgColor = '#3498db';
        this.textColor = '#ffffff';
    }
});
Live Preview

Dynamic Styles with Calculations

Computed properties can perform calculations to determine styles dynamically:

<div data-component="progress-demo">
    <!-- Progress bar using computed styles -->
    <div style="background: #ecf0f1; border-radius: 10px; overflow: hidden; height: 30px;">
        <div data-bind-style="progressStyle">
            <span data-bind="progressDisplay"></span>
        </div>
    </div>

    <!-- Temperature indicator -->
    <div class="mt-4">
        <p>Temperature: <strong data-bind="temperatureDisplay"></strong></p>
        <div data-bind-style="temperatureStyle"
             style="padding: 10px; border-radius: 8px; text-align: center;">
            <span data-bind="temperatureLabel"></span>
        </div>
    </div>

    <!-- Controls -->
    <div class="mt-3">
        <button class="btn btn-sm btn-primary me-2" data-action="decreaseProgress">-10%</button>
        <button class="btn btn-sm btn-primary me-2" data-action="increaseProgress">+10%</button>
        <button class="btn btn-sm btn-secondary me-2" data-action="decreaseTemp">Cooler</button>
        <button class="btn btn-sm btn-danger" data-action="increaseTemp">Hotter</button>
    </div>
</div>
wildflower.component('progress-demo', {
    state: {
        progress: 45,
        temperature: 20
    },

    computed: {
        progressDisplay() {
            return this.progress + '%';
        },

        temperatureDisplay() {
            return this.temperature + '°C';
        },

        progressStyle() {
            // Calculate color based on progress
            const hue = (this.progress / 100) * 120; // 0=red, 120=green
            return {
                width: this.progress + '%',
                height: '100%',
                backgroundColor: `hsl(${hue}, 70%, 50%)`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
                fontWeight: 'bold',
                transition: 'all 0.3s ease'
            };
        },

        temperatureStyle() {
            const temp = this.temperature;
            let bg, text;

            if (temp < 10) {
                bg = '#3498db'; text = '#fff'; // Cold - blue
            } else if (temp < 25) {
                bg = '#2ecc71'; text = '#fff'; // Comfortable - green
            } else if (temp < 35) {
                bg = '#f39c12'; text = '#000'; // Warm - orange
            } else {
                bg = '#e74c3c'; text = '#fff'; // Hot - red
            }

            return {
                backgroundColor: bg,
                color: text,
                transition: 'all 0.3s ease'
            };
        },

        temperatureLabel() {
            const temp = this.temperature;
            if (temp < 10) return 'Cold!';
            if (temp < 25) return 'Comfortable';
            if (temp < 35) return 'Warm';
            return 'Hot!';
        }
    },

    increaseProgress() {
        this.progress = Math.min(100, this.progress + 10);
    },

    decreaseProgress() {
        this.progress = Math.max(0, this.progress - 10);
    },

    increaseTemp() {
        this.temperature = Math.min(50, this.temperature + 5);
    },

    decreaseTemp() {
        this.temperature = Math.max(-10, this.temperature - 5);
    }
});
Live Preview

Dynamic CSS Classes

Object Class Binding

The most concise way to toggle classes is with object syntax, an object where keys are class names and values are boolean expressions:

<div data-component="object-class-demo">
    <!-- Single conditional class -->
    <div class="box" data-bind-class="{ active: isActive }">
        <span data-bind="isActive ? 'Active' : 'Inactive'"></span>
    </div>

    <!-- Multiple conditional classes -->
    <div class="alert" data-bind-class="{ error: hasError, warning: hasWarning, success: isSuccess }">
        Status indicator
    </div>

    <!-- Expression-based conditions -->
    <div class="item" data-bind-class="{ selected: id === selectedId, highlighted: priority === 'high' }">
        Item <span data-bind="id"></span>
    </div>

    <div class="mt-3">
        <button class="btn btn-primary btn-sm me-2" data-action="toggleActive">Toggle Active</button>
        <button class="btn btn-secondary btn-sm me-2" data-action="cycleErrors">Cycle Errors</button>
        <button class="btn btn-info btn-sm" data-action="toggleSelection">Toggle Selection</button>
    </div>
</div>
wildflower.component('object-class-demo', {
    state: {
        isActive: true,
        hasError: false,
        hasWarning: true,
        isSuccess: false,
        id: 1,
        selectedId: 1,
        priority: 'high'
    },

    toggleActive() {
        this.isActive = !this.isActive;
    },

    cycleErrors() {
        if (this.hasError) {
            this.hasError = false;
            this.isSuccess = true;
            this.hasWarning = false;
        } else if (this.isSuccess) {
            this.isSuccess = false;
            this.hasWarning = true;
        } else {
            this.hasWarning = false;
            this.hasError = true;
        }
    },

    toggleSelection() {
        this.selectedId = this.selectedId === 1 ? 99 : 1;
    }
});
.box {
    padding: 20px; text-align: center;
    border: 2px solid #bdc3c7; background: #ecf0f1;
    margin-bottom: 1rem; transition: all 0.3s ease;
}
.box.active {
    border-color: #3498db; background: #e8f4fc;
    box-shadow: 0 0 10px rgba(52,152,219,0.3);
}
.alert {
    padding: 15px; border-radius: 8px; margin-bottom: 1rem;
    background: #f8f9fa; border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}
.alert.error { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.alert.warning { background: #fff3cd; border-color: #ffc107; color: #856404; }
.alert.success { background: #d4edda; border-color: #c3e6cb; color: #155724; }
.item {
    padding: 10px; border: 1px solid #dee2e6;
    border-radius: 4px; transition: all 0.3s ease;
}
.item.selected { background: #e8f4fc; border-color: #3498db; color: #1a5276; }
.item.highlighted { font-weight: bold; }
Live Preview
Object syntax works everywhere: You can use { className: condition } on standalone elements, inside data-list templates, and inside conditional blocks (data-show, data-render). Static classes on the element (via the class attribute) are always preserved.

Expression Class Binding

Use data-bind-class with a JavaScript expression that returns a string of class names:

<div data-component="class-demo">
    <!-- Conditional class with ternary -->
    <div data-bind-class="isActive ? 'box active' : 'box'"
         style="padding: 20px; margin-bottom: 1rem; text-align: center;">
        <p>Status: <span data-bind="isActive ? 'Active' : 'Inactive'"></span></p>
    </div>

    <!-- Multiple conditional classes -->
    <div data-bind-class="'alert ' + (status === 'success' ? 'alert-success' : status === 'error' ? 'alert-danger' : 'alert-info')">
        <strong>Status:</strong> <span data-bind="status"></span>
    </div>

    <!-- Size classes -->
    <button data-bind-class="buttonClass">
        Button (<span data-bind="size"></span>)
    </button>

    <!-- Controls -->
    <div class="mt-3">
        <button class="btn btn-primary btn-sm me-2" data-action="toggleActive">
            Toggle Active
        </button>
        <button class="btn btn-secondary btn-sm me-2" data-action="cycleStatus">
            Cycle Status
        </button>
        <button class="btn btn-info btn-sm" data-action="cycleSize">
            Cycle Size
        </button>
    </div>
</div>
wildflower.component('class-demo', {
    state: {
        isActive: false,
        status: 'info',
        size: 'normal'
    },

    computed: {
        buttonClass() {
            const sizeClasses = {
                'small': 'btn btn-primary btn-sm',
                'normal': 'btn btn-primary',
                'large': 'btn btn-primary btn-lg'
            };
            return sizeClasses[this.size] || 'btn btn-primary';
        }
    },

    toggleActive() {
        this.isActive = !this.isActive;
    },

    cycleStatus() {
        const statuses = ['info', 'success', 'error'];
        const currentIndex = statuses.indexOf(this.status);
        this.status = statuses[(currentIndex + 1) % statuses.length];
    },

    cycleSize() {
        const sizes = ['small', 'normal', 'large'];
        const currentIndex = sizes.indexOf(this.size);
        this.size = sizes[(currentIndex + 1) % sizes.length];
    }
});
.box {
    border: 2px solid #bdc3c7;
    background-color: #ecf0f1;
    transition: all 0.3s ease;
}

.box.active {
    border-color: #3498db;
    background-color: #e8f4fc;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
}

.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.alert-info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}
Live Preview

Class Binding with Computed Properties

Use computed properties for complex class logic:

<div data-component="card-demo">
    <!-- Card with multiple computed class conditions -->
    <div data-bind-class="cardClasses"
         style="padding: 20px; border-radius: 8px; margin-bottom: 1rem;">
        <h5 data-bind="title"></h5>
        <p data-bind="description"></p>
        <div>
            <span class="badge" data-bind-class="priorityBadgeClass">
                <span data-bind="priority"></span> priority
            </span>
            <span class="badge ms-2" data-bind-class="statusBadgeClass">
                <span data-bind="status"></span>
            </span>
        </div>
    </div>

    <!-- Controls -->
    <div class="mt-3">
        <select class="form-select form-select-sm d-inline-block w-auto me-2" data-model="priority">
            <option value="low">Low Priority</option>
            <option value="medium">Medium Priority</option>
            <option value="high">High Priority</option>
        </select>
        <select class="form-select form-select-sm d-inline-block w-auto me-2" data-model="status">
            <option value="pending">Pending</option>
            <option value="in-progress">In Progress</option>
            <option value="completed">Completed</option>
        </select>
        <div class="form-check form-check-inline">
            <input type="checkbox" class="form-check-input" data-model="featured" id="featured">
            <label class="form-check-label" for="featured">Featured</label>
        </div>
    </div>
</div>
wildflower.component('card-demo', {
    state: {
        title: 'Task Card Example',
        description: 'This card demonstrates computed class bindings.',
        priority: 'medium',
        status: 'pending',
        featured: false
    },

    computed: {
        cardClasses() {
            const classes = ['card'];

            // Priority-based border color
            if (this.priority === 'high') {
                classes.push('border-danger');
            } else if (this.priority === 'medium') {
                classes.push('border-warning');
            } else {
                classes.push('border-info');
            }

            // Status-based background with matching dark text
            if (this.status === 'completed') {
                classes.push('bg-success-subtle text-success-emphasis');
            } else if (this.status === 'in-progress') {
                classes.push('bg-warning-subtle text-warning-emphasis');
            }

            // Featured highlight - use ring glow that's visible in both light/dark themes
            if (this.featured) {
                classes.push('featured-glow');
            }

            return classes.join(' ');
        },

        priorityBadgeClass() {
            const colors = {
                'low': 'bg-info',
                'medium': 'bg-warning text-dark',
                'high': 'bg-danger'
            };
            return colors[this.priority] || 'bg-secondary';
        },

        statusBadgeClass() {
            const colors = {
                'pending': 'bg-secondary',
                'in-progress': 'bg-primary',
                'completed': 'bg-success'
            };
            return colors[this.status] || 'bg-secondary';
        }
    }
});
Live Preview

Style Binding Syntax Reference

Binding Type Syntax Description
data-bind-style (recommended) data-bind-style="styleObject" Reference computed property that returns style object
data-bind-style (inline) data-bind-style="{ color: textColor }" Inline object expression (simple cases only)
data-bind-class (object) data-bind-class="{ active: isActive }" Object with class names as keys, booleans as values
data-bind-class (expression) data-bind-class="isActive ? 'active' : ''" Expression returning class string
data-bind-class (computed) data-bind-class="cardClasses" Computed property name (prefix optional)

How Expression Resolution Works

Understanding how WildflowerJS resolves values in different binding types helps you write cleaner, more predictable code.

data-bind (Text Binding)

data-bind resolves values automatically. State and computed properties are both accessible by name:

  • data-bind="count" - Looks up state.count
  • data-bind="total" - Looks up computed property total (or state if no computed exists)
  • data-bind="props.label" - Looks up props.label

When a computed property and state property share the same name, computed takes precedence. The computed: prefix can be used for clarity but is never required.

data-bind-style (Style Binding)

data-bind-style uses a merged context for expression evaluation. Before evaluating your expression, the framework creates a single object containing:

  1. All state properties
  2. All evaluated computed property values
  3. List item data (when inside a data-list)

This means you can reference any state or computed property directly by name:

<!-- Both work - no prefix needed -->
<div data-bind-style="myStyleObject">  <!-- works for state OR computed -->
<div data-bind-style="{ color: textColor }">  <!-- textColor from state OR computed -->

data-bind-class (Class Binding)

data-bind-class supports three approaches:

  • Object syntax { className: condition }: toggles each class based on its boolean value
  • Expressions evaluate against the merged context (like style bindings)
  • computed: prefix explicitly references a computed property
<!-- Object syntax - toggle classes by boolean -->
<div data-bind-class="{ active: isActive, highlighted: priority === 'high' }">

<!-- Expression - merged context, no prefix needed -->
<div data-bind-class="isActive ? 'active' : ''">

<!-- Computed reference - no prefix needed -->
<div data-bind-class="cardClasses">

Quick Reference

Binding State Access Computed Access Resolution
data-bind propertyName propertyName or computed:propertyName Auto-resolved (computed wins)
data-bind-style propertyName propertyName Merged context
data-bind-class propertyName propertyName or computed:propertyName Both supported
Consistent resolution: All binding types resolve computed properties automatically; the computed: prefix is always optional. When a computed property and state property share the same name, computed takes precedence. The prefix can still be useful for readability, making it clear that a value is derived rather than stored.
Recommended Pattern: Always use computed properties for style bindings rather than inline object expressions. Computed properties are:
  • More reliable - avoid parsing issues with complex expressions
  • More maintainable - keep logic in JavaScript, not HTML
  • More performant - cached and only recalculated when dependencies change

Best Practices

Recommendations:
  • Use computed properties for complex style/class logic - keeps templates clean
  • Prefer classes over inline styles when possible - better for performance and maintainability
  • Use CSS transitions for smooth visual changes when styles update
  • Keep style objects simple - complex calculations should be in computed properties
  • Use camelCase for CSS properties in style objects (backgroundColor, not background-color)

Performance Tip

When binding complex style objects, use computed properties to avoid re-evaluating the expression on every render cycle:

// Good - computed property caches the result
computed: {
    boxStyle() {
        return {
            backgroundColor: this.color,
            transform: `scale(${this.scale})`,
            opacity: this.isVisible ? 1 : 0
        };
    }
}

// In template: data-bind-style="boxStyle"
Note: Both data-bind-style and data-bind-class also support the data-wf- prefix (e.g., data-wf-bind-style) for compatibility with third-party libraries.
Previous Content Binding
Next Attribute Bindings
Related patterns: Carousel (Images), Split Pane