Vanilla HTML + JS
PulsePoint is designed to work without build tools. Start with a quick overview or dive straight into the code below.
Quick Start Video
Ep. 01
Fundamentals
Zero Build Step: The Basics
Learn how to declare state, handle events, and hydrate your app in 4 minutes.
04:12
1. The Single File Approach
The fastest way to prototype. Import the engine, initialize it, and declare your state directly inside the DOM using the text/pp script block.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PulsePoint App</title>
<!-- 1. Import PulsePoint -->
<script type="module">
import { PP } from "https://cdn.tsnc.tech/pp-reactive-v1.js";
// 2. Initialize
window.pp = new PP();
// 3. Handle Hydration (Prevents FOUC)
document.addEventListener("pp:hydrated", () => {
document.body.style.opacity = "1";
});
</script>
</head>
<!-- Hidden by default until hydrated -->
<body style="opacity: 0">
<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>
<!-- PulsePoint Logic Block -->
<script type="text/pp">
// Initialize State: [value, setter]
const [count, setCount] = pp.state(0);
</script>
</body>
</html>2. Separation of Concerns
For production applications, it is best practice to move your logic into a separate JavaScript module. PulsePoint automatically handles the binding between your logic file and the mustache templates in your HTML.
index.html
The View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PulsePoint App</title>
<!-- 1. Load Logic -->
<script type="module" src="./logic.js"></script>
</head>
<body style="opacity: 0">
<!-- 2. Reactive Bindings -->
<h1>Count is: {count}</h1>
<div class="flex gap-2">
<button
onclick="setCount(count + 1)"
class="btn-primary">
Increment
</button>
<button
onclick="setCount(count - 1)"
class="btn-secondary">
Decrement
</button>
</div>
</body>
</html>
logic.js
The Logic
import { PP } from "https://cdn.tsnc.tech/pp-reactive-v1.js";
// 1. Initialize
const pp = new PP();
// 2. Define State
// PulsePoint automatically exposes these to the template
const [count, setCount] = pp.state(0);
// 3. Hydrate
document.addEventListener("pp:hydrated", () => {
document.body.style.opacity = "1";
});