A small document
A paragraph with strong and emphasized text, a link and inline code.
First item
Second item
HTML
Each node type describes its own HTML once. The editable surface and the delivered page are both derived from that description, so they cannot drift apart.
Semantics
One description, two outputs
HtmlSemantics describes a node without its children. The children belong to the UI runtime, so there is no second view tree to diff.
scala
val paragraph: HtmlSemantics[ParagraphNode] = new HtmlSemantics[ParagraphNode]:
val nodeType: NodeType[ParagraphNode] = ParagraphNode
def shapeOf(node: ParagraphNode, profile: RenderProfile): HtmlShape =
HtmlShape.Element("p")
Output
Content without editor metadata
renderToHtml renders a Document once, without a session. RenderProfile.Content leaves every editor attribute out by construction; RenderProfile.Editor adds node IDs for the editable surface.
HTML, live
Rendered with RenderProfile.Content on every commit.
20 words · 21 nodes
<article><h2><span>A small document</span></h2><p><span>A paragraph with </span><span><strong>strong</strong></span><span> and </span><span><em>emphasized</em></span><span> text, a </span><a href="https://anjunar.com"><span>link</span></a><span> and </span><span><code>inline code</code></span><span>.</span></p><ol><li><p><span>First item</span></p></li><li><p><span>Second item</span></p></li></ol></article>
scala
DocumentView.renderToHtml(document, TableSupport.views, RenderProfile.Content)
Anchors for hydration
The real output also contains the UI runtime's group anchors, such as <!--ui:KeyedChildren:start-->. They are invisible, carry no meaning and let the browser claim the markup; the inspector above leaves them out.
Rules
Semantic and narrow
The HTML says what is meant, and only a short list of attributes may appear in it.
Decisions
article for the root, strong and em instead of b and i.
Every text run is wrapped in a span, so server text nodes never merge and hydration can map positions.
Allowed attributes: id, lang, dir, href, title, alt, src, width, height and data-ember-*.
onclick or style are errors, not attributes: event handlers and CSS never enter a document.