TemplateDashboard

A TemplateDashboard lays out its charts, tables, markdowns and inputs with HTML you write, instead of the rows/items grid.

Use it when the arrangement itself carries meaning: a KPI banner above an asymmetric split, a narrative report with charts between paragraphs, a diagram with figures pinned to it, or a brand template you already have in HTML. Most dashboards should stay on the grid.

Mark each place an item goes with data-visivo-item="<name>". The element's contents are replaced by the chart, table, markdown or input with that name, and the item fills the element — so the template's CSS decides every size. Give each slot element a height: a chart needs a measurable box, and a slot without one falls back to 396px, the grid's medium row.

Example

dashboards:
  - name: Quarterly Review
    template: |
      <style>
        .banner { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .kpi { height: 160px; }
        .wide { height: 420px; }
      </style>
      <section class="banner">
        <div class="kpi" data-visivo-item="revenue-kpi"></div>
        <div class="kpi" data-visivo-item="margin-kpi"></div>
      </section>
      <article>
        <p>Revenue held through the quarter.</p>
        <div class="wide" data-visivo-item="revenue-by-month"></div>
      </article>

The HTML lives in the YAML. It travels with the config everywhere the project goes — dist, a deploy, a cloud runner working from a checkout — so a dashboard cannot arrive somewhere its layout did not.

What the HTML may contain

Templates are HTML and CSS only, checked when the project compiles. Scripts, event handler attributes (onclick, ...), <iframe>, <form>, <link>, @import and javascript: URLs are rejected, as is any tag or attribute outside a fixed allowlist of document, table, text and SVG drawing elements. Links and images may use http(s), relative URLs, or (for images) data:image/....

The template renders inside its own shadow root: its CSS styles only the template, and the rest of the page's CSS does not reach into it. Inherited properties such as font-family and color do flow from a slot element into the item it holds.

Template dashboards are edited as files, not in the visivo serve canvas.

Attributes

Field	Type	Default	Description
path	string	None	A unique path to this object
name	string	None	The unique name of the dashboard across the entire project
file_path	string	None	The path to the file that contains the object definition.
level	Any of: integer, string	None	The importance level of the dashboard (either an index number or level title)
tags	array	None	A list of tags associated with the dashboard
description	string	None	A description of the dashboard's purpose and contents
type	string	template	The type of dashboard (always 'template')
template	string	None	The dashboard's HTML. Mark where items go with data-visivo-item="<name>".