Sugar Templates

Appearance

Content Directives ​

Content directives replace the element contents with a single value.

Directives ​

  • s:text - Escaped output.
  • s:html - Raw HTML output.

Examples ​

s:text ​

Output escaped text from a value.

html
<div s:text="$userName"></div>
html
<div s:text="$userName ?? 'Guest'"></div>

s:html ​

Output raw HTML from a trusted value.

WARNING

Only use s:html with trusted content.

html
<div s:html="$article->renderedContent"></div>
html
<div s:html="$snippet"></div>

s:raw is a pass-through directive (not a content replacement directive), but it is commonly used with content directives when you need literal inner markup.

s:raw ​

Use s:raw when you need verbatim inner content. Sugar skips parsing directives and special tags inside the node body.

s:raw is supported on attribute-bearing template nodes (elements, fragments, and components).

html
<code s:raw>
    <s-template s:if="$debug">literal</s-template>
    {{ untouched_token }}
</code>

Notes:

  • s:raw applies to children, not to the outer node itself.
  • The s:raw attribute is not rendered in final HTML.

No Wrapper Output ​

Add s:nowrap to render content without the surrounding element:

html
<div s:text="$headline" s:nowrap></div>