Moss Html

---
name: moss-html
description: Author self-contained moss-html blocks for HTML previews, embedded HTML, interactive prototypes, and behavior demos in Moss notes.
---

# Moss HTML

Use `moss-html` when the artifact needs browser behavior or high-fidelity UI rendering: clickable controls, tabs, filters, menus, forms, animated states, realistic spacing/styling, or a small prototype that demonstrates how an interaction should work. Do not use HTML for plain prose, tables, simple diagrams, static screenshots, or rough spatial thinking; use semantic markdown, charts, callouts, Canvas, or images for those instead. For rough wireframes, flows, and spatial diagrams, use the Canvas node with the canonical `moss-canvas` fence.

Embed HTML directly in the note:

~~~markdown
```moss-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="moss-html-version" content="v1">
<style>
  * { box-sizing: border-box; }
  html { background: rgb(253 250 246); }
  body {
    width: 1200px;
    min-height: 900px;
    margin: 0;
    padding: 40px;
    background: rgb(253 250 246);
    color: rgb(72 67 60);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
</style>
</head>
<body>
  <!-- HTML preview or prototype content -->
</body>
</html>
```
~~~

Rules:

- Use a plain `moss-html` fence line; do not add dimensions to the fence.
- Keep HTML self-contained in the fence. Inline CSS, JS, and images; workspace asset paths inside the fence do not resolve, and remote fonts, scripts, images, or other network assets are not reliable.
- The iframe sandbox allows scripts, forms, modals, and popups, but not same-origin access. Do not rely on `localStorage`, `sessionStorage`, cookies, same-origin fetches, parent/window APIs, or Moss internals.
- Define intrinsic size on `body` or `html` with `width` and `height` or `min-height`; Moss uses that footprint for the static PNG preview, defaulting to 1200x900 if omitted.
- Note view shows a static screenshot first, then a live iframe after activation. Design a meaningful initial state without depending on JS or network.
- Fullscreen mode exists, but the design should still read clearly within the note-view max height.
- Multiple HTML previews should be separate fences. Prefer several small focused blocks over one oversized all-in-one preview.
- Scripts, forms, dialogs, popups, and CSS-only interactions can be used.
- Initialize script behavior with `DOMContentLoaded`.
- If a control looks interactive (checkbox, toggle, tab, filter, menu, button), make it work with native controls and minimal script. Do not draw inert controls with plain `div`s.
- Keep `<meta name="moss-html-version" content="v1">` as the canonical Moss document marker. Moss may auto-wrap fragments and canonicalize the shell/head metadata on save; you own visible body content and any extra CSS/JS.
- If the HTML contains literal triple backticks, wrap the fence with four or more backticks.
- Use Moss visual language: warm page background, Moss green accents, subtle borders/shadows, no emojis.