X↓XMarkdown0.2GitHub
OPEN SOURCE · FIRST MVP

Markdown.
With more
to say.

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.

Explore the examples ↗Read the architecture →
NODE + BROWSERMIT LICENSENO AUTHOR SCRIPTS
ONE DOCUMENT. MANY POSSIBILITIES.01 / XM
From source to something useful.
Describe Markdown + data→Validate Bounded schemas→Render HTML · SVG · MathML
SOURCE / x-chart
```x-chart
{
  "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.

Difficult

Layered platform architecture

Full example ↗Download source ↓
Loading measured source…
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.

MEASUREMENTS, WITH CONTEXT

Less repetition.
Honest numbers.

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

82.9%

Fewer source tokens

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

Inspect the complete comparison ↗
5.48×

Extended streaming workload

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

Read the feature benchmark ↗
0.268ms

Plain full-document render

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

Read the parser benchmark ↗

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.

THE MVP PROFILE

What’s in.
What comes next.

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

CapabilityMVP statusImplementationScope
Markdown, tables, strikethroughSupportedReused: markdown-itRaw HTML escaped; image alt text only
Callouts, charts, diagramsSupportedCustom schemas + SVG templatesBar/line; basic graph placement
MathematicsSupportedReused: lazy KaTeXBounded TeX → native MathML
Controls and drawingSupportedCustom interpreter + browser runtimeKnown widgets; no author programs
Vector scenes and SVG importsSupported subsetCustom validation; reused SAX XML parserPaths, gradients, clips, masks, symbols
Incremental previews and cacheSupportedCustom stream coordinator + cacheProvisional patches; final complete parse
Browser parser and ReactSupportedSame native core; lazy adaptersAsync browser API; worker planned
Mermaid, task lists, image policyPlannedFuture adaptersMermaid currently stays source
A DELIBERATE BOUNDARY

A document renderer, with room to grow.

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.

Read exact syntax and limits →
ONE ENGINE, MANY HOSTS

Install it.
Keep your framework.

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.

REACT / NEXT.JS

A component, ready to use.

npm install xmarkdown-renderer

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

<XMarkdown source={source} />
Try the live React integration ↗
NODE / BROWSER / TYPESCRIPT

The same native renderer.

Direct APIs for JavaScript. Shared browser mounting for Vue and Svelte. A Node HTTP bridge for Python, Go, and other languages. Install with npm install xmarkdown-renderer.

Read every installation path ↗

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

BUILD SOMETHING WITH IT

A small API.
A richer document.

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

Get the source ↗
LOCAL DEVELOPMENT
git clone https://github.com/muhammadhaseebiqbal-dev/XMarkdown.git
cd XMarkdown
npm ci
npm test
npm run build
npm run site
PARSER API
import { createParser } from './src/index.js';

const parser = createParser();
const { html, diagnostics } = parser.parse(source);