Counter
The smallest complete PulsePoint component: state, an updater-function setter, a conditional and a bound attribute.
Source
<div pp-component="counter_demo">
<p>Count: {count}</p>
<p hidden="{count < 10}">That's double digits! 🎉</p>
<button onclick="setCount(count + 1)">+1</button>
<button onclick="setCount((c) => c - 1)">-1</button>
<button onclick="setCount(0)" disabled="{count === 0}">Reset</button>
<script>
const [count, setCount] = pp.state(0);
</script>
</div>Live result
Count: {count}
That's double digits! 🎉
What to notice
{count}interpolates into text;disabled="{count === 0}"binds an attribute — same braces, always quoted.setCount(count + 1)uses the current value;setCount((c) => c - 1)uses the updater form.- The "double digits" line is a
hidden="{cond}"conditional — the element stays in the DOM, visibility is reactive. - No mounting call, no build step: the server printed this markup and the runtime found it.
Next: the Todo List adds keyed lists and forms.