XMarkdown adds charts, diagrams and interactive controls to plain Markdown

An independent developer has released XMarkdown, an open-source Markdown renderer that keeps familiar prose syntax and adds optional blocks for charts, diagrams, equations, interactive controls and validated SVG. According to a dev.to post by the project's author, the motivation came from watching AI tools generate HTML artifacts for reports and asking how much of that output a library could produce instead of the model.

Describing content instead of rendering it

The core idea is a division of labor: the author, human or AI, supplies data and labels, and the renderer supplies geometry, axes and labels. A bar chart is specified as a small JSON block containing a type, a title, a text description and the data rows — no SVG coordinates or repeated attributes. The author argues this targets a real cost: a model generating HTML spends output tokens describing rendering details a library already knows how to produce.

Standard prose runs through markdown-it, so headings, emphasis, lists, quotes, links, code fences, tables and strikethrough behave as usual. The extensions are opt-in blocks:

• Charts: SVG bar and line charts with validation, up to 256 data rows
• Diagrams: directed graphs with automatic node placement, up to 32 nodes and 128 edges
• Mathematics: inline and display TeX compiled by KaTeX into MathML
• Controls: sliders, numbers, toggles and selects wired to bounded expressions that compute outputs
• Drawing: pointer-based SVG strokes with undo and clear, under stroke and point limits
• SVG scenes and imports: a validated static scene format covering paths, groups, gradients, masks, clipping, patterns and symbols, plus an x-svg block for importing existing static SVG
• Streaming: provisional previews during partial updates, with a full Markdown parse at completion

One engine, several runtimes

The implementation is shared JavaScript: the Node entry, the browser API and a React component all use the same core. The project's live site runs the actual engine — saved examples render through Node, while edits in the playground render through the browser entry. Server-side code in other languages can reach the renderer through a Node/HTTP bridge; the author notes that native Python, Go or Rust parsers have not shipped.

Distribution is via npm as xmarkdown-renderer, version 0.2.1, with TypeScript declarations included. The supported setup is Node.js 22+ and React 18+, with recipes for Next.js and Vue and further adapters planned.

Reported token savings

The author reports two measurements from the MVP. One complete demo document consumed 208 source tokens versus 1,219 for an equivalent compact HTML/SVG version. An extended streaming workload showed a 5.48x improvement compared with repeatedly rendering growing prefixes of a document. The author also states that model generation experiments and user studies are still to come, so these are early self-reported figures rather than independently verified benchmarks.

Scope and tradeoffs

The MVP has deliberate limits. Raw HTML is escaped, and images currently display only their alt text. Diagram edge routing is described as basic, and imported SVG is a static subset without linked resource fetching. The author is explicit about the format's cost as well: someone has to learn the schemas, and the host application has to load a renderer. The benefit is that those schemas and rendering rules are reused across every document.

Why it matters

AI-generated reports increasingly ship as HTML artifacts, which pushes rendering work onto the model's token budget and onto streaming latency. A declarative layer like XMarkdown inverts that split: the model describes the data, and the library draws it. If the reported token ratios hold up in real workloads, that is a direct cost and speed argument for AI-assisted documentation, and the streaming approach fits chat interfaces where documents arrive incrementally. The security posture is notable too — escaping raw HTML, whitelisting SVG elements and attributes, and bounding expression evaluation are exactly the kinds of constraints that matter when document input came from a language model. The project is young and its claims unverified, but the direction — compact, validated, renderer-assisted documents — is a credible answer to a problem every AI reporting tool currently faces.