§ Templates & Morphing

§ Templates

The render command lets you generate HTML strings from <template> elements with interpolation and control flow:

<template id="user-list">
<ul>
#for user in users
  <li>${user.name} (${user.role})</li>
#end
</ul>
</template>

render #user-list with users: userData
put it into #container.innerHTML

Template lines are output as-is. ${expr} interpolates hyperscript expressions with HTML escaping by default (use ${unescaped expr} for raw output). Lines starting with # are control flow: #for, #if, #else, #end.

#for loops support an #else clause that renders when the collection is empty or null:

<template id="user-list">
<ul>
#for user in users
  <li>${user.name}</li>
#else
  <li>No users found</li>
#end
</ul>
</template>

Named arguments passed via with become local variables in the template. See the render command for full details.

§ Morphing

TODO: morph command, DOM preservation, integration with templates and reactivity