Skip to content

View on a desktop screen for a better experience.

Comark

graph-comark

Author figures as ::graph-* blocks in plain Markdown; Comark parses the file and these graphs draw the frames — no MDX compile step.

Landing and live pair: /comark. Full catalog demo: comark-graphs-demo.

Install

Copy the graphs first — all.json already includes the adapter. If the graphs are already in the repo, adding graph-comark alone is enough.

Command

Wire

Parse on the server and pass the document, not the raw string, so the Comark parser stays out of the client bundle. The graphs are "use client" because they animate, and they arrive as client references.

Server

Subset

Author

Put YAML props on a ::graph-* block — they match the React API. Nest figures in ::row{cols=2}. Every docs page has a Comark tab with a copy-paste block.

Markdown

Coerce

{value=0.86} arrives as "0.86". Arrays and objects in the YAML fence stay typed. coerceProps turns listed numeric props into numbers, maps class to className, and strips a leading colon from Vue-style keys. adapters.ts is the per-tag list — it tracks the catalog's number props.

Stream

Auto-close completes a dangling ::graph-table, so a half-written tag does not swallow the rest of the page. YAML is all-or-nothing: a timeline grows an event at a time. A prefix that cuts mid-key can throw. Hold the last good tree. Missing required props render an empty frame instead of crashing. Graphs remount when data changes so once: true motion does not leave new rows at opacity 0.

Hosts

GitHub, Linear, and a README still get the fenced ASCII from the MDX tab — they do not run Comark. Comark is the renderer; the demo repo is the full catalog in one file.