Guides: Thorm Fundamentals

Start with nodes

Thorm UIs are built from nodes. A node is a structured description of a DOM element, text, or a higher-level construct like a fragment or route. Everything else layers on top of that.

Node builders

Use node builders to describe DOM structure. These create an IR tree, not HTML strings.

• el(tag, props, children) - generic element
• text(value) - text node
• html(value) - raw HTML injection
• fragment(children) - groups without wrapper
• show(cond, node) - conditional node
• repeat(items, key, tpl) - list rendering
• link(to, props, children) - client nav
• route(table, fallback) - router outlet
• slot(name) + component(tpl, props, slots)

<?php
el('div', [
  cls('card'),
  attrs(['id' => 'hero'])
], [
  text('Hello Thorm'),
  el('span', [cls('badge')], [text('v1')])
]);

Props helpers

Props are just data attached to nodes. Helpers keep them consistent.

• attrs([...]) - HTML attributes
• cls(...) - class name (string or expression)
• style([...]) - style map
• on(event, action) - event handlers

<?php
el('button', [
  cls('btn btn-primary'),
  attrs(['type' => 'button'])
], [text('Save')]);

State + expressions

Atoms hold state. Expressions read atoms and compute values.

• state(initial, meta) - create an atom
• read(atom) - turn atom into an expression
• val(x) - literal expression
• eq / cmp / concat / cond - compose logic

<?php
$count = state(0, ['name' => 'counter']);

el('div', [], [
  text(concat('Count: ', read($count)))
]);

Expression builder

Use thorm() when expressions become too nested or hard to read. It builds the same IR, but in a more declarative, tree-first format.

• Expression builder guide - runtime-safe logic with thorm()
• thorm(code) - build expressions from array trees

Events + actions

Events trigger actions. Actions describe side effects or state changes.

• set / inc / add - atom updates
• http / navigate / redirect - side effects
• task / delay - compose actions
• persist / hydrate - storage-based state

<?php
$count = state(0);

el('button', [
  on('click', inc($count, 1, true))
], [text('Add')]);

Effects + targets

Effects are background reactions tied to lifecycle, timers, visibility, or external events.

• onMount / watch / every / after
• onVisible / onLeftViewport
• onWindow / onDocument / onSelf
• Targets: windowTarget / documentTarget / selectorTarget

<?php
$status = state('idle');

onMount([
  set($status, val('ready'), true)
]);