Reactive State

The core of PulsePoint is binding data to your HTML. When state changes, the view updates automatically.

View Live Demo
counter.html 
<h1>Count is: {count}</h1>

<!-- Event Listeners -->
<button
    onclick="setCount(count + 1)"
    class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700">
    Increment
</button>

<button
    onclick="setCount(count - 1)"
    class="px-3 py-1 bg-gray-600 text-white rounded hover:bg-gray-700">
    Decrement
</button>

<script>
    // Initialize State: [value, setter]
    const [count, setCount] = pp.state(0);
</script>

1. State

pp.state(0) returns the current value and a setter function.

2. Interpolation

Use {count} to display the variable. It updates instantly when changed.

3. Events

Standard HTML events like onclick can call the setter directly.

Portals Next: Todo List