XMarkdown 发布：在 Markdown 中支持图表、控件与经校验的 SVG

Write the idea. Describe the visual. Let the renderer do the rest.

Charts, diagrams, equations, live controls, and complex SVG — in the Markdown you already know.

{
 "type": "bar",
 "title": "Less markup.",
 "data": [ … ]
}

Visual meaning, without coordinates.

SOURCE TOKENS / EXACT DEMO

1,219

HTML / SVG

208

XMarkdown

82.9% fewer source tokensOne measured fixture. Shared-component HTML: 20.3% fewer.

FAMILIAR MARKDOWNDECLARATIVE GRAPHICSBOUNDED INTERACTIONCHECKED SVG IMPORTS

THE EXAMPLE LIBRARY

Small syntax. Real possibilities.

Explore 18 working examples, from plain prose to reusable vector scenes. Inspect both source representations, or edit XMarkdown and render your own.

Render changes →Reset

NATIVE XMARKDOWN RENDERER

Examples are pre-rendered. Edited documents use native XMarkdown locally in the browser.

A larger original SVG scene: three layers, seven service cards, three storage endpoints, branching connectors, reusable symbols, pattern grid, gradients, a mask, and clipping. It is rendered by the same validated XMarkdown SVG processor.

All examples are also available as side-by-side source documentation. The scene above renders without JavaScript.

Abstraction and shared rendering reduce markup. Streaming avoids parsing the whole growing document repeatedly. Neither makes every parse faster.

208 XMarkdown tokens versus 1,219 compact HTML/SVG tokens for the original demo. Savings versus shared-component HTML: 20.3%.

Local parse + render comparison against repeated prefixes. Cached extended render: 0.075 ms; empty cache: 0.652 ms.

XMarkdown versus 0.259 ms for bare markdown-it on the same 6,320-character prose fixture. Added capabilities have a cost.

Local synthetic workloads, named o200k_base encoding. Shared runtime code and author instructions are excluded from source counts. AI generation time, billed usage, browser layout, and reader performance have not been measured. No universal 50× parsing claim.

Original Markdown conventions, trusted processors where they help, and custom schemas for the new capabilities.

Imported SVG follows a static profile. Scripts, event handlers, external assets, CSS stylesheets, filters, animation, and foreignObject are rejected. Arbitrary applications still belong in HTML and JavaScript.

This showcase uses our actual parser and renderer. Static fixtures use the Node entry. Your edits use the same core in the browser, with optional processors loaded on demand.

npm install github:muhammadhaseebiqbal-dev/XMarkdown#v0.2.0

import { XMarkdown } from 'xmarkdown/react'; import 'xmarkdown/styles.css';

<XMarkdown source={source} />

Try the live React integration ↗NODE / BROWSER / TYPESCRIPTThe same native renderer.

Direct APIs for JavaScript. Shared browser mounting for Vue and Svelte. A Node HTTP bridge for Python, Go, and other languages. The npm registry release is still pending.

No replacement HTML renderer. No native-language port claims.

Clone the repository, install dependencies, and run the demo. Install the MVP from GitHub. Node, browser, React, and TypeScript exports share the same renderer.