Alpine.js x-bound: Binding element dimensions

by rameel

HTML

<div x-data="{ w: null, h: null, size: 48, text: 'edit me' }" x-format>
  <input type="range" &value="size" />
  <input &value="text" />

  <p>
    Width:  {{ w }}px
    Height: {{ h }}px
  </p>

  <div &clientwidth="w" &clientheight="h">
    <span style="font-size: {{ size }}px">{{ text }}</span>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-bound@1/alpinegear-bound.min.js" defer></script>
<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>

CSS

[x-data] {
  input {
    display: block;
  }

  div {
    display: inline-block;
  }
}