Conditions - TemplateX Documentation

Toggle Browser Markup#

TemplateX if tags become Svelte conditionals when the condition reads browser-side state:

php

<script>  let open = false;  function toggle() {    open = ! open;  }</script><button type="button" onclick="{{ toggle }}">Toggle</button>{{ if open }}  <p>The panel is open.</p>{{ else }}  <p>The panel is closed.</p>{{ /if }}

{{ if open }} runs in the browser because open comes from the <script> block.

Add Else Branches#

Use else if, elseif, and else for multiple states:

php

{{ if activeTab === 0 }}  <p>First tab</p>{{ else if activeTab === 1 }}  <p>Second tab</p>{{ else }}  <p>Another tab</p>{{ /if }}

This compiles to Svelte's native {#if}, {:else if}, and {:else} syntax.

Use Native Svelte Conditions#

Native Svelte conditions are supported directly:

php

<script>  let open = false;</script>{#if open}  <p>Open</p>{:else}  <p>Closed</p>{/if}

Use this shape when the rest of the view is already written in Svelte syntax.

Keep Server Conditions On The Server#

Server-owned conditions stay server-rendered:

php

{{ if title }}  <h1>{{ title }}</h1>{{ /if }}

In that example, title comes from WordPress, so TemplateX compiles the condition to PHP.