> ## Documentation Index
> Fetch the complete documentation index at: https://cubed3-feat-druid-driver-streaming.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML

> Build fully custom layouts using HTML templates with Handlebars and JavaScript.

HTML charts let you render any layout that Vega-Lite cannot produce — custom scorecards, branded cards, rich tables, or any structure built with HTML, CSS, and JavaScript. Query results are available inside the template via [Handlebars](https://handlebarsjs.com/) expressions.

## Variant

### HTML template

A free-form HTML document with Handlebars expressions. Write any markup and bind query result data directly in the template.

## Template structure

Query results are available in the template context under `result`.

**Access the first row** with `result._first`:

```html theme={null}
<div class="scorecard">
  <h2>{{result._first.order_items.status}}</h2>
  <p>{{result._first.order_items.count}} orders</p>
</div>
```

**Iterate over all rows** with `{{#each result.data}}`:

```html theme={null}
<ul>
  {{#each result.data}}
    <li>{{this.order_items.status}}: {{this.order_items.count}}</li>
  {{/each}}
</ul>
```

## Using JavaScript

Standard `<script>` tags are supported, enabling the use of charting libraries (D3, Chart.js, etc.) or any JavaScript that manipulates the rendered DOM.

```html theme={null}
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const labels = [{{#each result.data}}"{{this.order_items.status}}"{{#unless @last}},{{/unless}}{{/each}}];
  const data = [{{#each result.data}}{{this.order_items.count}}{{#unless @last}},{{/unless}}{{/each}}];
  new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: { labels, datasets: [{ data }] }
  });
</script>
```