# Syntax
`mancha` renders HTML by traversing every node in the DOM and applying a series of plugins. Each plugin is only applied if specific conditions are met such as the HTML element tag or attributes match a specific criteria.
## Attributes
- `:data` provides scoped variables to all subnodes, evaluated once at mount time. Use `$computed` for derived values that update automatically (see [Reactivity](./03_reactivity.md#computed-values)). Note: `:data` is re-evaluated when used with `:for` + `:key` and the keyed node is reused.
```html
```
- `:for` clones the node and repeats it. The loop re-renders when the array is mutated (e.g., `push`, `pop`, `splice`, or `items.length = 0` to clear).
- Use `$index` inside the loop to access the current iteration index (0-based).
```html
{{ $index }}: {{ item }}
```
- `:key` (used with `:for`) enables keyed reconciliation, which reuses DOM nodes when items have stable identifiers. This prevents unnecessary DOM recreation and preserves element state during updates. The key should be a unique primitive value (string or number). When used with `:data`, the `:data` expression is re-evaluated when a keyed node is reused with updated loop variables.
```html
{{ user.name }}
{{ label }}
```
- `:text` sets the `textContent` value of a node
```html
```
- `:html` sets the `innerHTML` value of a node
```html
```
- `:show` toggles `$elem.style.display` to `none`
```html
```
- `:if` conditionally renders the element (removes it from the DOM when false). **Note**: `:else` is not currently supported.
```html
Content
```
- `:class` appends rendered text to existing class attribute
```html
...
```
- `:bind` binds (two-way) a variable to the `value` or `checked` property of the element
```html
```
- `:on:{event}` adds an event listener for `event` to the node
```html
```
- `:on:{event}.prevent` calls `event.preventDefault()` in the event handler
```html
```
- `:attr:{name}` sets the corresponding attribute for `name` in the node
```html
```
- `:prop:{name}` sets the corresponding property for (camel-case converted) `name` in the node
```html
```
- `{{ value }}` replaces `value` in text nodes
```html
```
## Evaluation
To avoid violation of Content Security Policy (CSP) that forbids the use of `eval()`, `mancha` evaluates all expressions using a safe expression parser. This means that only simple expressions are allowed, but it supports many modern JavaScript features, including optional chaining, the spread operator, and arrow functions.
**Note**: `mancha` only supports **single-statement** expressions. You cannot use semicolons (`;`) to separate multiple actions. For complex logic, define a function in your script and call it from the template.
For example:
```html