HTML

<div data-component="hello-world">
    <h2 data-bind="message"></h2>
    <button data-action="changeMessage">Next Message</button>
</div>

JavaScript

const messages = [
    'Hello, WildflowerJS!',
    'Welcome to reactive programming!',
    'No build step required!',
    'Direct DOM manipulation!',
    'Simple and powerful!'
];

wildflower.component('hello-world', {
    state: {
        message: messages[0]
    },
    changeMessage() {
        const nextIndex = (messages.indexOf(this.message) + 1) % messages.length;
        this.message = messages[nextIndex];
    }
});