Every card below is written in HTML and mounted by Slim.
This page stays close to the DOM on purpose. The point is to show that Slim can feel natural for
hand-authored pages while still keeping the Xuda datasource, expression, and program model under the hood.
Core directives
State, text, visibility, classes, and references.
Core directive
xu-store
xu-store is the fastest way to seed local dynamic fields without predeclaring a full field
set. It is ideal for small pages, docs demos, and embedded blocks that need a little state.
This preview writes a local title and launch count into the current datasource.
These are the output-oriented directives. Use xu-text when you want plain text,
xu-html when you explicitly want HTML, and xu-content as the general content setter.
The visual difference between the plain line and the rich line is the whole point here.
Live Preview
HTML snippet
<p xu-text="Plain output from xu-text"></p>
<div xu-html="<strong>Rich output from xu-html</strong>"></div>
<span xu-content="General output from xu-content"></span>
Visibility
xu-show and xu-render
Both are conditional, but they behave differently. xu-show hides without unmounting, while
xu-render actually removes the node when the condition is false.
Toggle the switch and compare the two blocks.
Live Preview
This note uses xu-show, so it stays mounted and only hides.
This note uses xu-render, so it disappears from the live DOM when false.
xu-ref registers a stable runtime handle for other Xuda logic. It is less about immediate
visuals and more about giving workflows, scripts, or orchestration logic a named target.
This is intentionally a reference-oriented example rather than a flashy visual one.
Live Preview
HTML snippet
<input class="site-input"
xu-ref="search_field"
placeholder="This input is registered as a ref" />
Iteration and expressions
Repeat nodes and compute attributes from state.
Iteration
xu-for, xu-for-key, xu-for-val
xu-for repeats a node over an array or object. xu-for-key and
xu-for-val let you rename the iterator fields so the expressions stay readable.
The whole list is backed by a single stored array.
Expressions let you drive normal attributes, output directives, and computed labels from datasource
fields. This is the part of Slim that reveals it is still a Xuda runtime, not only decorated HTML.
The placeholder, title, and status line all come from expressions.
When you need parity with Studio docs or more explicit workflow structure, use the raw
xu-on:<event> form directly.
The button below uses the full workflow payload instead of shorthand.
Live Preview
Workflow count 0
HTML snippet
<button xu-on:click='[{"handler":"custom","props":{},"workflow":[{"id":"evt-1","data":{"action":"update","name":{"value":"@flow_count: @flow_count + 1"},"enabled":true},"props":{}}]}]'>
Fire workflow
</button>
Event family
xu-change, xu-focus, xu-blur, xu-init
Slim includes shorthand attributes for the common event family too. This keeps hand-authored controls
readable without forcing you into the full workflow payload every time.
Focus, blur, and change are visible here; xu-init belongs to the same authoring family.
Attributes, styles, scripts, external resources, and viewport-aware rendering.
Advanced directive
xu-attrs
xu-attrs is useful when your authoring or generation layer wants to attach several runtime
attributes together in one place.
This badge is carrying a title and data attribute that were injected together.
Live Preview
Attributes injected together
HTML snippet
<span xu-attrs='{"data-tone":"signal","aria-label":"Signal badge","title":"Injected with xu-attrs"}'>
Attributes injected together
</span>
Advanced directives
xu-style and xu-style-global
Use xu-style when the CSS should stay scoped to a subtree, and xu-style-global
when you intentionally want the rule to escape and affect matching nodes anywhere on the page.
The top swatch is scoped. The lower pill gets its typography from a global rule.
xu-script runs when the element becomes visible. In Slim mode the runtime passes the target
element in as el, which makes small mounted behaviors easy to express.
This preview edits itself after the runtime mounts it.
Live Preview
Waiting for xu-script
HTML snippet
<div xu-script="el.textContent = 'xu-script ran after mount';">
Waiting for xu-script
</div>
Advanced directive
xu-cdn
xu-cdn lets the runtime load a resource on demand. This site uses a same-site asset so the
demo stays deterministic and easy to test.
The message is populated only after the resource loads and a follow-up script reads it.
xu-viewport defers heavier rendering until the subtree actually enters the viewport. That
makes it a useful tool for long docs pages or expensive blocks lower in a screen.
This card is intentionally lower on the page so you can meet it by scrolling.
Live Preview
This content is rendered through the viewport-aware path. On a long page it can wait until the user
actually reaches it.
xu-teleport moves its children into another target container. It is useful when logic wants
to stay local but the rendered UI belongs somewhere else.
The pill is authored below, but it renders into the dock above it.
Live Preview
Teleport target
Teleported by xu-teleport
HTML snippet
<div id="teleport-target-html"></div>
<xu-teleport to="#teleport-target-html">
<div class="teleported-pill">Teleported by xu-teleport</div>
</xu-teleport>
Structural tag
xu-single-view
xu-single-view is the normal single-screen root for form-like programs. It is structural
rather than decorative, which is why the whole page already uses it.
This card is here so the special-tag story stays complete and explicit.
Live Preview
Reference: the root of this page is already a xu-single-view node, which is
exactly why the content feels like a normal single-screen application.
xu-multi-view is the multi-record structural root. It becomes most interesting when the
datasource is row-driven and you want the runtime to step through many records.
Because it depends on row-oriented data feeds, this card is intentionally explanatory.
Live Preview
Reference: use xu-multi-view when the current datasource is meant to drive
repeated screen content across multiple rows rather than a single record.
HTML snippet
<xu-multi-view>
<!-- row-driven children -->
</xu-multi-view>
