Template Syntax

STX uses an intuitive template syntax that extends HTML with additional features. This guide covers all the template syntax features available in STX.

Basic Syntax

Text Interpolation

Use double curly braces for text interpolation:

<div>&#123;&#123; message &#125;&#125;</div>

Attributes

Bind attributes using the : shorthand:

<button :disabled="isLoading">Submit</button>

Raw HTML

Use {{{ }}} for raw HTML interpolation (use with caution):

<div>&#123;&#123;&#123; rawHtml &#125;&#125;&#125;</div>

Directives

Conditional Rendering

<div @if="condition">Shown if true</div>
<div @else-if="otherCondition">Alternative</div>
<div @else>Fallback</div>

List Rendering

<ul>
  <li @each="item in items" :key="item.id">
    &#123;&#123; item.name &#125;&#125;
  </li>
</ul>

Event Handling

<button @click="handleClick">Click me</button>
<form @submit.prevent="handleSubmit">...</form>

Two-way Binding

<input @model="searchText">

Advanced Features

Dynamic Components

<component :is="componentName"></component>

Slots

<template #default>Default content</template>
<template #named>Named slot content</template>

Custom Directives

<div @custom-directive="value"></div>

Best Practices

1. Always use key attributes with @each directives
2. Prefer @if over @show for conditional rendering
3. Use computed properties for complex template expressions
4. Keep template expressions simple and readable

TypeScript Support

STX templates fully support TypeScript, providing type checking for:

• Component props
• Event handlers
• Template expressions
• Directive arguments

Related Topics

• Component API
• Directives Guide
• TypeScript Integration