data-html

Set innerHTML from an expression (Alpine’s x-html).

Syntax

data-html="$markup"

part
key	forbidden
value	required

Render a markup string

live markup

<div data-signals="{ markup: '<b>bold</b> and <i>italic</i>' }">
<input data-bind:markup style="width:100%">
<p data-html="$markup"></p>
</div>

Build markup from data

Any expression that yields a string works, so a list can be rendered from an array.

list from an array

addremove last

<div data-signals="{ items: ['bread', 'milk'] }">
  <div class="row"><button data-on:click="$items = [...$items, 'item ' + ($items.length + 1)]">add</button><button data-on:click="$items = $items.slice(0, -1)">remove last</button></div>
  <ul data-html="$items.map(i => '<li>' + i + '</li>').join('')"></ul>
</div>

Notes

Nothing is sanitised: only use it with markup you trust. <script> elements inserted this way do not run. null and undefined render as an empty string. Directives inside the inserted markup mount like any other markup, but with precompiled expressions (precompile: true in the Astro or Vite integration) their expressions must also appear as real attributes somewhere in your source, or they will not be in the compiled table. For server-rendered fragments prefer @get, whose HTML responses are morphed rather than replaced, so state inside survives.

Register

import { html } from 'sigmx/plugins'

Registering html adds 120 bytes brotli (137 gzip, 259 minified) on top of the core. See bundle sizes.