Text Interpolation
Render dynamic data directly into the DOM using curly brace syntax {}.
Expression Essentials
PulsePoint supports any valid JavaScript expression inside curly braces. This includes math operations, native object methods (like Date), and variable access.
dashboard.html
<div>
<h1>Hello, {username}!</h1>
<!-- Native JS methods work natively -->
<p>Date: {new Date().toLocaleDateString()}</p>
<!-- Math operations -->
<p>Score: {Math.floor(score * 1.5)}</p>
</div>
<script type="text/pp">
const [username, setUsername] = pp.state("Alice");
const [score, setScore] = pp.state(100);
</script>String Formatting
You can concatenate strings or use string methods directly within the template to format your output.
user-badge.html
<div>
<p>Employee: {lastName.toUpperCase()}, {firstName}</p>
<!-- Chaining methods -->
<p>Initials: {firstName.charAt(0) + lastName.charAt(0)}</p>
<!-- Dynamic length calculation -->
<small>ID Length: {(firstName + lastName).length}</small>
</div>
<script type="text/pp">
const [firstName, setFirstName] = pp.state("John");
const [lastName, setLastName] = pp.state("Doe");
</script>Conditional Logic
Use ternary operators and short-circuit evaluation to conditionally render text based on state.
Tip: Keep logic simple inside templates. For complex logic, consider creating a computed variable in your script.
status.html
<div>
<!-- Ternary Operator -->
<p>Status: {isActive ? 'Online' : 'Offline'}</p>
<!-- Short-circuit (renders nothing if count is 0) -->
<p>{messageCount > 0 && 'You have new messages!'}</p>
</div>
<script type="text/pp">
const [isActive, setIsActive] = pp.state(true);
const [messageCount, setMsgCount] = pp.state(5);
</script>