Templates

Dynamic HTML — `x-html`

x-html renders an HTML string, directives and widgets included, and renders it again when the string changes. Here the string is built from an array: each entry becomes a live <cnc-panel>. Render only trusted HTML.

x-html

<div x-data="{
  pool: ['Build is green', 'Cache warmed up', 'Coffee acquired', 'Reactor humming', 'Mail from Odin'],
  msgs: ['Build is green']
}">
  <div class="flex gap-2 mb-4">
    <cnc-button size="sm" color="primary"
      @press="msgs = msgs.concat(pool[Math.floor(Math.random() * pool.length)])">Add panel</cnc-button>
    <cnc-button size="sm" kind="soft" color="danger"
      @press="msgs = msgs.slice(0, -1)">Remove panel</cnc-button>
    <span class="">panels: <b x-text="msgs.length"></b></span>
  </div>
  <div class="space-y-3" x-html="msgs.map(m => '<cnc-panel>' + m + '</cnc-panel>').join('')"></div>
</div>

Result

panels: 1

Build is green

Dynamic HTML — x-html

Dynamic HTML — `x-html`