Let's now look at the content of the page. We can see some charts, which also can be made with XForms. For example:

<div class="chart">
  <svg width="430" height="290" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="#f8f9fa" />
    <line x1="10" y1="10" x2="10" y2="260" stroke="#333" />
    <line x1="10" y1="260" x2="420" y2="260" stroke="#333" />
    <g fill="#4a90e2">
      <xf:repeat ref="instance('chart')/bars/entry" id="bar">
        <rect x="{-20 + position() * 40}" y="{10 + (100 - .) * 2.5}" width="30" height="{. * 2.5}" />
      </xf:repeat>
    </g>
    <g font-size="10" fill="#000" text-anchor="middle">
      <xf:repeat ref="instance('chart')/bars/entry" id="bar">
        <text x="{-5 + position() * 40}" y="275">
          <xf:output value="."/>
        </text>
      </xf:repeat>
    </g>
  </svg>
</div>

Again, this code works as intended, but what if we could use this instead:

<chart type="bar" data="instance('chart')/bars/entry" />

Once again, the appeal of this syntax is its simplicity. What makes it even more appealing is that the chart appears multiple times on this page alone, and this concise syntax will not create a mess when repeated.