Basics · Composition

Snippets

A sumi component is one .sumi file, and that file becomes one component. Reusing a whole component across files — mounting a child with <Header /> — needs a second file, which this single-file editor cannot hold; the components docs cover that. Within one file, the tool for reusing markup is the snippet.

{snippet name()}…{/snippet} declares a fragment of template, and {render name()} renders it. The fragment is defined once and can be rendered from several places, so repeated markup lives in one spot.

The list below repeats the same tag block before each item.

Your turn

Factor the repetition into a snippet. Declare it once, above the <div>:

{snippet tag()}<div class="tag">— todo —</div>{/snippet}

Then replace each <div class="tag">— todo —</div> in the list with {render tag()}. Press Run; the output is unchanged, but the markup is defined once. Solve shows the finished version; Reset restores the start.