Technical docs for Xuda Slim and Xuda CLI

Directives are how Slim turns plain markup or runtime nodes into a reactive Xuda surface.

State and output

• xu-store Seed local state quickly.
• xu-bind Connect an input to a field.
• xu-text Render plain text.
• xu-html Render HTML intentionally.
• xu-content Generic content setter.

Expressions

Use xu-exp:* when an attribute or value should be computed from a field expression.

Examples:

• xu-exp:xu-content
• xu-exp:placeholder
• xu-exp:class
• xu-exp:title
• xu-exp:xu-show
• xu-exp:xu-render

Expressions read field values with the @field_name syntax.

Events and workflows

• xu-click Good for simple click-driven updates.
• xu-on:* Use for richer workflow payloads or event wiring.

Example:

<button
  xu-on:click='[
    {
      "handler": "custom",
      "workflow": [
        {
          "data": {
            "action": "update",
            "name": { "value": "@count_v: @count_v + 1" },
            "enabled": true
          }
        }
      ]
    }
  ]'
>
  Increment
</button>

Iteration and conditional rendering

• xu-for Repeat a node for every item in a list.
• xu-for-key Name the iteration index or key.
• xu-for-val Name the current item.
• xu-show Hide the node while keeping it mounted.
• xu-render Remove the node when the condition is false.

Practical rule

Use the smallest directive that matches the need.

• simple output: xu-text or xu-content
• simple click updates: xu-click
• full workflow logic: xu-on:*
• computed attrs: xu-exp:*
• structural behavior: xu-for, xu-render, xu-show