Quick Start

Build your first reactive application in 5 minutes. Three examples show you everything you need to get started.

Your First Application

Create a complete HTML file with this reactive counter:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/gh/quellabs/wakapac@main/wakapac.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>Count: {{count}}</h1>
        <button data-pac-bind="click: increment">+1</button>
        <button data-pac-bind="click: decrement">-1</button>
    </div>

    <script>
        wakaPAC('#app', {
            count: 0,
            increment() { this.count++; },
            decrement() { this.count--; }
        });
    </script>
</body>
</html>

Two-Way Data Binding

Type in the input and watch the heading update automatically:

<div id="app">
    <h2>Hello {{name}}!</h2>
    <input data-pac-bind="value: name" placeholder="Enter your name">
</div>

<script>
    wakaPAC('#app', {
        name: 'World'
    });
</script>

Working with Lists

Build a simple todo list with add and remove functionality:

<div id="app">
    <input data-pac-bind="value: newTodo" placeholder="Add a todo">
    <button data-pac-bind="click: addTodo">Add</button>

    <ul data-pac-bind="foreach: todos" data-pac-item="todo">
        <li>
            {{todo}}
            <button data-pac-bind="click: removeTodo">×</button>
        </li>
    </ul>
</div>

<script>
    wakaPAC('#app', {
        newTodo: '',
        todos: ['Learn WakaPAC', 'Build an app'],

        addTodo() {
            if (this.newTodo.trim()) {
                this.todos.push(this.newTodo);
                this.newTodo = '';
            }
        },

        removeTodo(event, item) {
            const index = this.todos.indexOf(item.todo);
            this.todos.splice(index, 1);
        }
    });
</script>