Most TemplateX views should stay server-rendered. Reach for interactivity only around the part of the page that needs to change after the visitor clicks, types, hovers, or waits for browser-loaded data.
Enable TemplateX Framework in TemplateX > Settings > Development before using these examples.
Smallest Example#
Start with one value and one button:
<script> let count = 0;</script><button type="button" onclick="{{ count += 1 }}">Add</button><p>{{ count }}</p>count lives in the browser. Clicking the button updates it without asking WordPress for a new page.
What Happens#
TemplateX compiles the interactive part into a generated Svelte island.
The first HTML still comes from WordPress, so the page can render before JavaScript finishes loading.
Normal TemplateX values, loops, partials, forms, menus, and query loops still render on the server.
Next#
Read State and Events next.
After that, add Form Bindings, Conditions, or Native Svelte Syntax when the UI needs them.