Using x-html to bind HTML

x-html sets the innerHTML property of an element to the result of a given expression.

Version

Alpine 3.9

x-html

html000

<div> is binding to HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ content: '<h1>Hello World</h1>' }">
    <div x-html="content" />
  </body>
</html>

Line 9

<body x-data="{ content: '<h1>Hello World</h1>' }">
  <div x-html="content" />
</body>

x-data : define content variable with HTML included
x-html : use x-html instead of x-text

Conclusion

x-html can be simulated by x-effect, but x-html is more intuitive

Reference

Alpine, x-html