Conditional Rendering

Control what the user sees using JavaScript logic. PulsePoint supports ternary operators, short-circuit evaluation, and native DOM visibility toggling.

Inline Logic (Ternary & &&)

Use the ternary operator ? : for "if/else" logic, and the logical AND && for "if" logic.

status-card.html

<div>
  <button onclick="setOnline(!isOnline)">Toggle Status</button>
  
  <!-- Ternary (If / Else) -->
  <p>Status: {isOnline ? 'Connected' : 'Disconnected'}</p>

  <!-- Short-Circuit (If True) -->
  <p>
    {isOnline && 'System is fully operational.'}
  </p>
</div>

<script type="text/pp">
  const [isOnline, setOnline] = pp.state(true);
</script>

Toggling Visibility

To show or hide entire HTML elements, bind the native hidden attribute.

Logic Check: The hidden attribute works in reverse.
Set it to true to hide the element. Set it to false (or null) to show it.

spoiler.html

<div>
  <button onclick="setShow(!showContent)">
    {showContent ? 'Hide Details' : 'Show Details'}
  </button>

  <!-- Element is hidden when showContent is FALSE -->
  <div hidden="{!showContent}" class="p-4 border mt-2">
    <h4>Secret Content</h4>
    <p>This content exists in the DOM but is toggled via CSS.</p>
  </div>
</div>

<script type="text/pp">
  const [showContent, setShow] = pp.state(false);
</script>

Multiple Conditions (Switch Logic)

For multiple states (like tabs or user roles), avoid nested ternaries. Instead, use simple equality checks inside the hidden attribute.

dashboard-tabs.html

<div>
  <div class="tabs mb-4">
    <button onclick="setTab('profile')">Profile</button>
    <button onclick="setTab('settings')">Settings</button>
  </div>

  <!-- Profile Panel: Hidden if tab is NOT profile -->
  <div hidden="{activeTab !== 'profile'}">
    <h2>User Profile</h2>
    <p>Welcome back, user.</p>
  </div>

  <!-- Settings Panel: Hidden if tab is NOT settings -->
  <div hidden="{activeTab !== 'settings'}">
    <h2>System Settings</h2>
    <p>Adjust your preferences here.</p>
  </div>
</div>

<script type="text/pp">
  const [activeTab, setTab] = pp.state("profile");
</script>

Two-Way Data Binding Next: Components

Documentation