Viewer and web component

The format

The `<three-md>` web component

<three-md> is the canonical, framework-agnostic renderer for the 3md format. It is a custom element, so it works the same in plain HTML, React, Vue, Svelte, and Angular. Parsing is delegated to the shared @corvidlabs/threemd data layer (the same parser pinned by the conformance suite); the element owns only the visual: a 3D stack of planes you scrub, drag, and step through along the document's Z axis.

You do not have to install anything to try it. The hosted editor and viewer lives at corvidlabs.xyz/3md/ (paste any .3md and share a link).

Embedding

Load the self-contained module and use the tag. Pass inline source as the element's text content, or point src at a file:

<script type="module" src="https://corvidlabs.xyz/3md/assets/three-md.js"></script>

<!-- inline source -->
<three-md>---
3md: 1.0
axis: time
title: My week
---
@plane z=0 label="Monday"
# Monday
- [ ] Standup
</three-md>

<!-- or load a file -->
<three-md src="/plan.3md"></three-md>

The published package is @corvidlabs/three-md-element; see parsers and packages for install details. The bundle ships the parser inside it, so there is no other dependency.

View modes

The renderer offers a small set of strong views. The active mode defaults to one chosen from the document's axis, and you can override it with the mode attribute (or the view: frontmatter key).

Mode	What it shows
`stack`	A 3D deck of planes fanned along Z. Drag to orbit, WASD or arrows to move, scroll to zoom, slider scrubs Z. The default for `time` and `depth`.
`play`	A flipbook for animations: play, pause, and loop. The default for `frame`.
`single`	A scrollable single-card reader; arrows or the slider change plane.
`present`	Slides: arrows or space advance. The default for `slide` axes.
`blend`	A 3D voxel object built by blending the stacked grids together. Drag to orbit, scroll to zoom.
`map`	A flat x/y board; tap a tile to read it, tap empty space or Esc to return. The default for `space`.
`layers`	Aligned overlays with depth and opacity; the slider brings a layer to the front. The default for `layer`.
`elevator`	Floors stacked vertically; the slider rides the floors.

Retired mode names are still accepted and mapped to current modes: parallax maps to stack, scene maps to map, and deck maps to present.

Key attributes

Attribute	Description
`src`	URL of a `.3md` file to fetch and render.
`mode`	Override the render mode (one of the values above).
`autoplay`	Start auto-advancing as soon as content loads. `mode="play"` also auto-runs.

Inline text content between the tags is used as the source when there is no src.

Properties, methods, and events

The element exposes a small JavaScript API:

document - the parsed document, or null before content loads.
error, errorLine, errorCode - details from the most recent failed load.
currentIndex - the index of the focused plane; mode - the active mode.
voxelizable - whether the document can render cleanly in blend mode.
goTo(index), setSource(text), play(), pause(), toggleFullscreen().
The planechange event fires when the focused plane changes; event.detail is { index, z, label, plane }.

Theming

The component uses Shadow DOM for style isolation. Theme it with CSS custom properties such as --three-md-accent, --three-md-bg, --three-md-surface, --three-md-text, --three-md-height, and --three-md-plane-width, or target internals with ::part() (for example stage, scene, plane, controls, scrubber).

Quickstart - the fastest path to a rendered document.
The format - the view, legend, and billboard frontmatter keys the viewer honors.