whatisgithub

What is mdxg?

vercel-labs/mdxg — explained in plain English

Analysis updated 2026-05-18

316TypeScriptAudience · developerComplexity · 3/5Setup · moderate

In one sentence

A specification for how apps should present long markdown documents, with navigation, search, and page splitting.

Mindmap

mindmap
  root((repo))
    What it does
      Markdown display spec
      Splits into pages
      Adds navigation
    Tech stack
      TypeScript
      VS Code extension
    Use cases
      Build doc platforms
      Improve markdown viewers
      Add search and outline
    Audience
      Tool builders
      Developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Split a long markdown file into navigable virtual pages at H1 and H2 headings

USE CASE 2

Add a page outline and full document search to a markdown viewer

USE CASE 3

Build a documentation platform or AI interface with a polished markdown reading experience

What is it built with?

TypeScriptVS Code Extension

How does it compare?

vercel-labs/mdxgjason-uxui/gray-ui-csmtimwitzdam/gitsave
Stars316319309
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderateeasymoderate
Complexity3/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

It is a specification plus a reference VS Code extension, not a drop-in library for your own app.

So what is it?

MDXG (Markdown Experience Guidelines) is a specification, not a tool or syntax extension, that defines how apps should present and navigate markdown documents. The problem it addresses is that markdown files, whether 50 lines or 3,000 lines long, are almost always shown as a single flat scrollable page with no structure or navigation aids, even though markdown is the most common document format in software and AI output alike. The spec works at the presentation layer, meaning it doesn't change your actual markdown files at all, it just defines how apps should display them. The key idea is splitting a document at its H1 and H2 headings into virtual pages, giving readers navigation between those pages, a page outline for subheadings, search across the whole document, syntax highlighting with copy buttons on code blocks, and the ability to toggle between a rendered view and an editable source view. Implementations can surface these features through sidebars, keyboard shortcuts, swipe gestures, or whatever fits their platform. You would use this specification if you're building a tool that renders markdown, a text editor plugin, a documentation platform, a note-taking app, or an AI interface, and you want to give users a polished, navigable reading experience without reinventing the wheel. The repo includes a reference implementation as a VS Code extension and a shared TypeScript parser library that handles document splitting and heading extraction.

Copy-paste prompts

Prompt 1
Explain how MDXG splits a markdown document into virtual pages
Prompt 2
Help me implement the MDXG spec in my own documentation tool using the reference parser
Prompt 3
Show me how the VS Code extension reference implementation renders MDXG navigation
Prompt 4
Walk me through adding a rendered versus source toggle following the MDXG spec

Frequently asked questions

What is mdxg?

A specification for how apps should present long markdown documents, with navigation, search, and page splitting.

What language is mdxg written in?

Mainly TypeScript. The stack also includes TypeScript, VS Code Extension.

How hard is mdxg to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is mdxg for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.