Skip to content
JamdeskUtilities
Free · Open source · Client-side

MDX Viewer

Preview rendered MDX output

See this on a real docs site

Jamdesk renders your MDX as beautiful documentation. Learn more

How to Preview MDX

Paste MDX content into the editor and the viewer renders a live preview alongside it. The preview updates as you type, showing how your headings, paragraphs, lists, code blocks, and other Markdown elements will look. JSX components are rendered as labeled stubs showing the component name and props, so you can verify your content structure without needing the actual component implementations. The viewer is useful for checking content layout, verifying frontmatter, and catching formatting issues before committing.

What the preview shows

The MDX Viewer parses your content into an abstract syntax tree (AST) and renders each node: headings with proper hierarchy (h1–h6), paragraphs, ordered and unordered lists, code blocks with syntax highlighting, blockquotes, links, images, bold, italic, and inline code. YAML frontmatter is displayed in a separate metadata box above the rendered content.

How JSX components render

Since the viewer runs without your component library, JSX components are rendered as labeled placeholder stubs. Block components (like <Callout> with children) show a bordered container with the component name and its props. Self-closing components (like <ApiEndpoint />) render as inline badges. This lets you verify content structure and prop values without needing actual component implementations.

Using the viewer for documentation review

The viewer is useful for reviewing documentation pull requests, verifying frontmatter metadata, and checking that heading hierarchy is correct before publishing. Combined with the MDX Formatter, you can clean up and preview content in one workflow — format, then switch to the viewer to see the result.

Frequently Asked Questions

Does the viewer render my custom components?
Custom JSX components are rendered as labeled placeholder stubs that show the component name and its props. This lets you verify content structure without needing the actual component code.
Does the preview update in real time?
Yes. The preview updates as you type with a short debounce to keep the editor responsive. Changes appear in the preview panel within a fraction of a second.
Can I preview MDX with frontmatter?
Yes. The viewer parses frontmatter and displays it separately from the rendered content, so you can verify both your metadata and your content in one view.
Is the MDX Viewer free and open source?
Yes. The MDX Viewer is free and open source under the Apache 2.0 license. The full source code is on GitHub at github.com/jamdesk/utilities, and there are no ads, accounts, or usage limits.

About this tool

The MDX Viewer is free and open source, and runs entirely in your browser. Your input is never uploaded, stored, or logged — you can verify this by opening the network tab in your browser developer tools while the tool runs. The full source code is on GitHub under the Apache 2.0 license, so you can read the code, file issues, or fork the project. There are no ads, no accounts, and no usage limits. Built and maintained by Jamdesk.

Related Tools

⚡

MDX Formatter

Format and beautify MDX files

✓

MDX Validator

Check MDX for syntax errors

↓

MDX to Markdown

Strip JSX, get clean Markdown

🔄

Markdown to HTML

Convert Markdown to clean HTML

📋

YAML Validator

Validate YAML syntax and find errors

⇄

JSON ↔ YAML

Convert between JSON and YAML

📊

Markdown Table Generator

Convert CSV or TSV to Markdown tables