# Runtime directives in Xuda Slim

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:

```html
<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`