# 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.

## Related

- [Document templates](/en/docs/templates)