Directives overview

Directives are attributes that tell Sercrod what to do. They are written with a special prefix, typically a leading asterisk or event marker, for example *let, *for, *input, or @click.

This page lists the main directives and groups them by purpose. Detailed rules and examples are on the dedicated pages:

Data and interpolation

These directives define or print values inside a host. They work together with the host data object and interpolation markers like %name%.

*let - define local variables in the current scope. Used to introduce small values without changing the host data.
*print - print the result of an expression into the element (usually as text content).
data="..." - attribute (not a directive) that initializes the host data object, typically with a small JSON fragment such as {"name":"Sercrod"}.
Interpolation - inline placeholders like %field% are replaced with data.field when the host renders.

Conditions and loops

These directives control which elements appear in the DOM and how often they are repeated.

*if - render the element only when the expression is truthy.
*elseif - alternative branch that is checked when the previous *if or *elseif was not taken.
*else - final fallback branch when no previous condition was matched.
*for - simple loop over a list or object. The usual form is:
```
*for="item of items"
```
where items is an array (or similar iterable) from the current data or scope. The loop body is cloned once per item.

Events and input

These directives connect DOM events and form controls to the host data.

@event - event handlers, written as attributes such as @click, @change, @submit. The value is an expression evaluated in the host scope, for example:
```
<button @click="count++">+1</button>
```
*input - bind a form control to a data field. When the user edits the control, the corresponding field is updated and the host can re-render. Example:
```
<input *input="name" placeholder="Type your name...">
```

More details and patterns are described in Events and input.

Lifecycle and data roundtrip

Lifecycle helpers save and restore data, or talk to servers. They are designed for small, explicit integrations rather than large client-side frameworks.

*save - save a value (often the host data or part of it) to a backing store, such as localStorage, under a given key.
*load - load a value from a backing store into the host data when the element is processed.
*fetch - perform a fetch() request, parse the response (typically JSON), and merge or assign it into host data.
*post - send data to a server endpoint (usually as JSON) and optionally handle the response.

For concrete patterns and field mapping rules, see Lifecycle helpers.

Structure and templates

Some directives control how pieces of HTML are inserted, unwrapped, or reused, especially in static site generation or template-heavy setups.

*include / *partial / *template (where used) - helpers for including external fragments or template parts into the current host.
*unwrap - remove the host element but keep its children in place, often used to avoid extra wrapper tags in the final HTML.
*strip (where used) - drop the element and its children from the rendered output.
*static (where used) - mark sections that can be treated as static for performance or SSR.

Some of these are mainly used in build pipelines or SSR and may not be needed in small, purely client-side examples.

Summary

At a high level:

Data - *let, *print, interpolation.
Flow - *if, *elseif, *else, *for.
Events and input - @event, *input.
Lifecycle - *save, *load, *fetch, *post.
Structure - *include, *partial, *template, *unwrap, and related helpers.

When you need precise behavior or edge cases, use the dedicated directive reference pages linked above.