Signal Directives
WebUI provides two types of signals for inserting dynamic values into your templates: escaped signals and raw signals.
Escaped Signals: {{}}
The double curly braces syntax ({{}}) inserts a value from the state object with HTML escaping applied:
<p>Hello, {{user.name}}!</p>This ensures that any special HTML characters in the value are properly escaped, preventing XSS attacks.
Example
State:
{
"user": {
"name": "John <script>alert('XSS')</script>"
}
}Output:
<p>Hello, John <script>alert('XSS')</script>!</p>Raw Signals: {{{}}}
The triple curly braces syntax ({{{}}}
<div>{{{rawHtmlContent}}}</div>Warning: Only use raw signals with trusted content, as unescaped HTML can lead to security vulnerabilities.
Example
State:
{
"rawHtmlContent": "<strong>Bold Text</strong> and <em>Emphasized Text</em>"
}Output:
<div><strong>Bold Text</strong> and <em>Emphasized Text</em></div>Accessing Nested Properties
You can access nested properties using dot notation:
<span>{{user.address.city}}, {{user.address.country}}</span>Special Values
WebUI provides special values for arrays:
array.length- Returns the number of items in the array
Example:
<p>There are {{items.length}} items in the list.</p>Body Signals
WebUI automatically injects two special signals around <body> content:
body_start- injected immediately after the<body>opening tagbody_end- injected immediately before the</body>closing tag
These enable handlers to inject content at the start and end of the document body (e.g., hydration scripts, analytics tags).
Example
Template:
<body>
<app-shell></app-shell>
</body>Output (with handler-injected content):
<body>
<!-- handler can insert content here via body_start -->
<app-shell></app-shell>
<!-- handler can insert content here via body_end -->
</body>