---
name: loam-html
description: Create or edit compact, viewport-based Loami HTML notes, reports, dashboards and interactive explainers with a single import, themes and offline export. Use when the user asks for Loami or a shareable interactive HTML document; not for unrelated application development.
---

# Loami HTML

Read the current authoring reference at https://loami.dev/llms.txt before choosing APIs. If unavailable, preserve an existing document's pinned import and inspect its runtime; do not invent components.

Create a complete `.html` file with a title, language, charset, viewport, and one versioned runtime import:

```html
<script defer src="https://loami.dev/v0.1.3/loami.js"></script>
```

Use ordinary semantic HTML inside `main`. The runtime provides compact Geist typography and Jev-style charcoal, white and blue themes, native element styles and custom elements. The first release supports `loam-chart`, `loam-table`, `loam-range`, `loam-tabs`, `loam-anatomy` and the `loam-figure` theme bridge. JSON data lives in a separate `script type="application/json" id="data"`; reference it with `data-source="data"`. Share one source across charts and tables. Use finite numeric values. Escape user content as text and escape `<` as `\u003c` in serialized JSON embedded in HTML.

Default to dark and compact. Generated documents should follow the same density as the Loami application: body text 14px/1.5, short paragraphs, modest headings, hairline separators, and minimal panel padding. Start with the current report or explainer preset from the reference/MCP. Use `<body class="loam-document">`, a main heading inside `header.loam-document-heading`, and `<loam-tabs class="loam-pages">` with labelled sections. Keep the main finding and evidence together in a `div.loam-grid`; put raw data, methods, and supporting detail in other tabs. Desktop documents should fit the viewport where practical; longer panels scroll and phones flow naturally. Preserve every piece of content rather than clipping or shrinking it excessively. Avoid long, spacious article stacks, oversized hero headings, padded cards, or repeating the same data as a full-width chart and full-width table one after the other. Use a short `p.loam-lead` after the title. Paginate tables. Check the actual rendered length at 1280×720 and 390px wide.

Default to dark. Use language classes such as `language-html`, `language-css`, `language-javascript`, `language-json` or `language-bash` on code inside pre for bundled syntax highlighting and a copy toolbar. Call `Loami.enhanceCodeBlocks()` after inserting dynamic code. The existing `Loam` JavaScript alias and `loam-*` elements remain compatible.

Choose `data-theme="light"`, `dark`, `sepia`, `forest` or `auto` on `html`. Theme with `--loam-*` CSS variables rather than rewriting components. Check both modes and retain readable contrast. A `select` with `data-loam-theme` switches themes. Include a button with `data-loam-action="export"` for offline export.

For interactive values use `loam-range name="factor"` and `loam-bind="factor"`; a chart's `multiplier="factor"` uses that same state. Use ordinary JavaScript for richer behavior and initialize on `DOMContentLoaded` (or run immediately when the document is already ready). Loami exports markup and source scripts, not attached event listeners. Avoid duplicating initialization.

For existing interactive Anatomy figures, use `<loam-anatomy figure="watch"></loam-anatomy>`. Supported names: `watch`, `message-queue`, `lru-cache`. Loami loads the official MIT bundle only when used and includes it in offline exports. Theme changes and reopening exports reset the model. Do not substitute a placeholder for an available figure. For new custom Anatomy requests, use the separately installed Anatomy skill by Ryan, https://skills.wheresryan.sh/anatomy . Ask for framework-free SVG/HTML, then place the figure inside `loam-figure`. Preserve its own model, depth ordering, controls, accessible description and reduced motion behavior. Compile TypeScript to browser JavaScript before embedding. Loami supplies document structure and shared `--anatomy-*` colors; it does not generate Anatomy figures, bundle third-party modules or run React. Do not install Anatomy without a user request to install it.

Before delivering, open the file in a browser, exercise each interaction, check narrow screens and both themes, export it, then reopen the exported HTML with network disabled. External fonts, images, modules, stylesheets and data are not bundled by the exporter; inline or bundle them if full offline portability is required. State any remaining dependency. Keep sample data labelled and do not add invented adoption claims.

Optional remote MCP: https://loami.dev/mcp (Streamable HTTP). Tools return documentation, component metadata and example source. They do not publish documents or execute code. Claude Code setup: `claude mcp add --transport http loami https://loami.dev/mcp`.