Rendering to HTML

The problem: a render tree still isn't something a browser can show

Lesson 3's render tree is renderer-agnostic on purpose, it's plain Markdoc.Tag objects and strings, not HTML markup. Something still has to walk that tree and produce an actual output format. Markdoc.renderers.html is that something, for HTML specifically; Lesson 16 uses Markdoc.renderers.react on the exact same kind of tree to produce React elements instead.

The code, piece by piece

const ast = Markdoc.parse(source);
const renderTree = Markdoc.transform(ast, {});
const html = Markdoc.renderers.html(renderTree);

The three-stage pipeline from Lessons 2-3, closed out with the render step. Markdoc.renderers.html returns a plain string, there's no intermediate DOM or virtual-DOM step, just template-style string concatenation over the render tree.

const handBuiltTree = new Markdoc.Tag("article", {}, [
  new Markdoc.Tag("h1", {}, ["Built without parsing anything"]),
  ...
]);
Markdoc.renderers.html(handBuiltTree);

This is the proof that the renderer only cares about the render tree's shape, not its origin. new Markdoc.Tag(name, attributes, children) is the exact same object type transform() produces internally, you rarely construct one by hand in real usage (custom tag transform functions do, see Lesson 9), but doing it explicitly here makes clear that "render tree" is just a plain, inspectable JS data structure, not a black box tied to parsing.