Alpine.js x-format: Dynamic elements

by rameel

HTML

<div x-data="{ show: false, message: 'Hello, World!' }">
  <input x-model="message" />
  <label>
    <input type="checkbox" x-model="show" />
    Show message
  </label>
  <template x-if="show">
    <p x-format>{{ message }}</p>
  </template>
</div>

<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-format@1/alpinegear-format.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>