Template HTML
Edit a template as HTML, bring HTML from elsewhere, and the data attributes that mark fields, blocks and elements.
Any HTML is a template
Any HTML and CSS is a template: inline styles, any structure, remote images and fonts. A save only takes out what could run, such as scripts, embedded pages, forms, event handlers and javascript: links, and says what it took out.
Edit the HTML
- Code, next to Design in the top bar, shows the template as HTML beside a live preview; what you type is saved as you go.
- Copy HTML in the ⋯ menu copies the whole template: edit it anywhere, with another tool too, and paste it back in Code.
- HTML on a selected element edits that element alone.
- The dashboard assistant and MCP clients read and write the same HTML.
Attributes
The editor arranges what it recognises, and the agent fills what is marked with the data-* attributes below. Names use lowercase letters, digits and underscores, start with a letter, max 40 characters.
| Attribute | Use |
|---|---|
data-slot, data-type | A field, unique in its block; text (default), markdown, number, money, date, enum, url (on an <a>: fills its link), rows. |
data-row, data-field | Inside rows: the first data-row repeats per item, others are examples; data-field holds each value. |
data-if | An optional part. |
data-layout | A block, as a direct child of the body; data-min, data-max, data-position (first, last). |
data-required, data-default, data-hint | Required value, fallback value, the agent's instruction. |
data-max-chars, data-max-words, data-min, data-max | Text length; number bounds; list size. |
data-options, data-currency, data-format | Choices (pipe-separated); ISO 4217 code; integer, decimal, percent or short, medium, long. |
data-sample | Example number, amount or date; false hides a data-if part. |
data-frame | An element of a page or block: text (default), image, shape, table, columns (with data-columns 2 or 3 containers), spacer, rule. Only columns nest. |
data-canvas | Not in an email. A fixed page, on a block or on the body without blocks. Its elements are placed by left, top, width, height, z-index in their inline style (px for slides, mm for A4), next to any other CSS. |
data-width, data-align, data-text-align, data-size | Flowing pages: full, two-thirds, half, third; left, center, right; text s to xxl. |
| Image and shape | One data-URL <img> with data-fit (cover, contain); data-shape (rect, ellipse, triangle, line), data-color (accent, ink, muted, paper, soft, none) or inline hex background-color; spacer data-height (s, m, l). |
| Box styles | data-bg on text, table, columns (accent, ink, muted, paper, soft); data-border (thin, medium, thick) and data-border-color (accent, ink, muted, rule); data-radius (0, sm, md, full). |
| Image to choose | An <img> without src, such as a starter's <img class="logo" alt="" hidden>: chosen on the page in the editor; nothing prints until then. |
| Header and footer | <meta name="botchi-header"> or botchi-footer in the head: content is the line ({page} and {pages} become the page number and count), data-align is left, center or right. Not in an email. |
Rule — Scripts, iframes, forms, event handlers and javascript: links are taken out at every save. Fields fill element content only (a link field fills its address), never other attributes or CSS.