# HTML authoring in Xuda Slim

HTML authoring is the most direct way to learn Slim.

Instead of introducing a custom compiler first, you write regular HTML and add Xuda directives that bind fields, compute output, toggle visibility, run actions, or iterate over data.

## Why teams choose HTML authoring

- the DOM stays visually readable
- designers and frontend developers can inspect the output directly
- examples and docs remain close to what the browser renders
- small reactive surfaces are easy to prototype

## Mental model

Think of Slim HTML as:

- normal HTML for structure
- datasource fields for state
- `@field_name` expressions for reads
- Xuda directives for wiring behavior

Minimal example:

```html
<div xu-store="{'headline':'Hello Xuda'}">
  <input xu-bind="headline" />
  <h1 xu-exp:xu-content="@headline"></h1>
</div>
```

## Common HTML directives

- `xu-store`
  Seed a small local data shape directly on the node.
- `xu-bind`
  Bind input state to a field.
- `xu-text`, `xu-html`, `xu-content`
  Push output into the DOM.
- `xu-exp:*`
  Compute attributes or values from expressions.
- `xu-click`
  Handle a simple click update quickly.
- `xu-on:*`
  Attach full workflow payloads.
- `xu-for`
  Repeat nodes from a collection.
- `xu-show` and `xu-render`
  Hide vs remove nodes conditionally.

## When HTML authoring is the better fit

Use it for:

- docs pages
- microsites
- product landing pages
- embedded widgets
- hand-authored prototypes

Move to CLI source files when:

- the app grows into multiple routed features
- persistence logic needs a clearer home
- multiple unit types such as `get_data`, `set_data`, and `batch` should live outside the page
- the team wants a stronger project structure