Use this lab when you want to feel the runtime through markup.
The examples here are ideal for authors who think in HTML first and want to learn Xuda Slim without jumping immediately into generated runtime trees.
Xuda Slim
HTML-style examples
HTML authoring
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.
The deeper implementation docs live on xuda.io/technical-docs.
The technical docs site explains the directives, runtime tags, and authoring modes in a crawler-friendly format and also publishes raw markdown for AI tooling.
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.
Live Preview
Stored title
Slim HTML Card
Launch count
HTML snippet
<div xu-store="{'local_title':'Slim HTML Card','launch_count':2}">
<h4 xu-exp:xu-content="@local_title"></h4>
<p xu-exp:xu-content="'Launch count: ' + @launch_count"></p>
</div>
Core directive
xu-bind
xu-bind connects a native input directly to a datasource field. In Slim mode it works with
plain HTML controls, so the authoring stays familiar.
Type into the input and watch the heading stay in sync.
Live Preview
Bound by xu-bind
HTML snippet
<div xu-store="{'headline':'Bound by xu-bind'}">
<input class="site-input" xu-bind="headline" />
<h4 xu-exp:xu-content="@headline"></h4>
</div>
Content setters
xu-text, xu-html, xu-content
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.
HTML snippet
<div xu-store="{'open':'Y'}">
<div xu-exp:xu-show="@open === 'Y'">Kept mounted</div>
<div xu-exp:xu-render="@open === 'Y'">Added and removed</div>
</div>
Core directive
xu-class
xu-class is how you let state affect classes. It becomes especially readable when paired
with an expression that returns the full class string.
This example flips the chip styling without replacing the underlying node.
Live Preview
Live
HTML snippet
<span xu-exp:xu-class="@live === 'Y' ? 'chip is-on' : 'chip is-off'" xu-exp:xu-content="@live === 'Y' ? 'Live' : 'Paused'"></span>
Reference directive
xu-ref
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.
Live Preview
Label
Ready
HTML snippet
<div xu-for="@steps" xu-for-key="stepIndex" xu-for-val="step"> <span xu-exp:xu-content="(@stepIndex + 1) + '. ' + @step.label"></span> </div>
Expressions
xu-exp:*
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.
Live Preview
Mode
HTML snippet
<input xu-exp:placeholder="'The page is in ' + @mode + ' mode'" xu-exp:title="'Computed title: ' + @mode" /> <p xu-exp:xu-content="'Mode: ' + @mode"></p>
Events and workflows
Use shorthand when authoring by hand, and raw workflows when you need them.
Shorthand event
xu-click
xu-click is the cleanest path for small page interactions. It reads well in hand-authored
HTML and still lands in the same Xuda update system.
This is the shorthand most people reach for first.
Live Preview
Count 0
HTML snippet
<button xu-click="{'@count': @count + 1}">Increment</button>
Raw event payload
xu-on:click
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.
Live Preview
Event status
HTML snippet
<input
xu-focus="{'@event_status':'focused'}"
xu-blur="{'@event_status':'blurred'}"
xu-change="{'@event_status':'changed'}"
xu-init="{'@event_status':'ready'}" />
Advanced runtime helpers
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.
For a literal payload, pass a plain object string. Use xu-exp: only when the object itself is computed.
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.
Live Preview
Scoped by xu-style
Global style
HTML snippet
<div xu-style=".scoped-swatch { background: linear-gradient(...); }">...</div>
<div xu-style-global=".global-demo-pill { letter-spacing: .35em; }">...</div>
Advanced directive
xu-script
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.
For a fixed resource manifest, use a plain object string. Reach for xu-exp: when the manifest is computed.
Live Preview
Waiting for xu-cdn
HTML snippet
<div xu-cdn='{"demo":{"src":"../assets/cdn-demo.js","type":"js"}}'
xu-script="el.textContent = window.XUDA_SLIM_CDN_DEMO?.label || 'CDN asset missing';">
Waiting for xu-cdn
</div>
Advanced directive
xu-viewport
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.
HTML snippet
<section xu-viewport="true"> <div class="callout">Viewport-rendered content</div> </section>
Reference-only
xu-ui-plugin
xu-ui-plugin is part of the public Slim surface, but it only becomes meaningful when your
app includes a compatible plugin runtime and manifest.
This microsite stays deliberately plugin-free, so this card is descriptive rather than interactive.
Live Preview
Reference card: use
xu-ui-plugin when the page is allowed to pull in a real
Xuda UI plugin. The site itself does not depend on one.
HTML snippet
<div xu-ui-plugin='{"@xuda.io/example-plugin":{"enabled":true}}'></div>
Special tags
Panels, teleports, and structural Xuda nodes.
Special tag
xu-panel
xu-panel embeds another Xuda program as a child surface. This is how you compose a page out
of small programs without abandoning the runtime model.
The embedded panel below is another template-backed program on this same page.
Live Preview
HTML snippet
<div xu-exp:xu-render="@show_panel === 'Y'"> <xu-panel program="child_panel_demo"></xu-panel> </div>
Special tag
xu-teleport
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.
HTML snippet
<template id="page_demo">
<xu-single-view>
<main>...page content...</main>
</xu-single-view>
</template>
Structural tag
xu-multi-view
xu-multi-view is the multi-record structural root. This showcase keeps your panel-ref
document shape, but swaps the child datasource from a DB table to an inline array variable.
This HTML page stays single-boot by default. Click the button below to mount the nested array-backed child program on demand.
Live Preview
The nested demo has not mounted yet.
HTML snippet
<xu-panel program="site_multi_view_items"></xu-panel> <!-- child program --> <xu-multi-view> <div xu-exp:xu-text="@BK_Name"></div> </xu-multi-view>