Drop an MDX file. Any size.
safe · secure · no server · works offline · fast
…or just start typing at the cursor.
safe · secure · no server · works offline · fast
…or just start typing at the cursor.
OmniViewer opens an MDX file right in your browser. Drop an
.mdx file and you immediately get a rendered
preview plus a small toolkit built around one question no
other online viewer answers: will every component in this
document actually resolve? There is no upload and no server
— the text is read directly by your browser, and the parsing runs in
a background Web Worker so the page never freezes.
import, an export in this same file, an intrinsic HTML element, or nowhere. It also lists every import binding the document never uses, your exports, the frontmatter, and the plain HTML elements in play. Click a row to isolate it.import/export statements, JSX elements and fenced code blocks are reproduced byte‑for‑byte, because reflowing any of them would change what the file compiles to. Copy or download the result.
By some distance the most common MDX build failure is
Expected component ‘X’ to be defined: you likely forgot to
import, pass, or provide it. It is easy to hit because MDX turns a
capitalised tag into a variable reference, and nothing checks that
the variable exists until the compiled module is rendered — typically
in the middle of a build of hundreds of pages. The
Components tab lists those tags up front. A component can
still legitimately arrive from an MDXProvider at render time,
which no single file can see, so the tab reports “not imported or
defined here” rather than claiming the file is broken — but that
list is exactly where you look first when a build fails.
The real MDX compiler builds three whole‑document trees (mdast, hast, estree) and wants roughly ten to twenty times the source size in memory, so rendering is bounded here: the preview, formatter and contents tabs work on a generous prefix and tell you when they capped. The component audit does not. Auditing needs only a few hundred bytes of carried state — the open code fence, the JSX stack, a half‑parsed attribute — so it streams the file in 4 MB blocks and reads every byte at any size. If you want the full story, with the resumable scanner in real code, read how to audit a 20 GB MDX file.
MDX was created by John Otander, Tim Neutkens, Guillermo Rauch and Brent Jackson, and released in 2018 to stop documentation sites having to choose between prose that is easy to write and pages that can show a live demo. MDX 2 (2022) rebuilt the compiler on micromark and made JSX and curly‑brace expressions first‑class syntax rather than passed‑through HTML. It is the document format behind Docusaurus, Next.js, Astro, Storybook and Gatsby.
A tiny example of MDX:
import Callout from './Callout' # Release notes <Callout type="warning">Publishing is not reversible.</Callout>
For the format itself from the ground up — a complete annotated file, the four layers inside one, what MDX compiles to and the mistakes everybody makes with braces, comments and blank lines — read what an MDX file is, and how it differs from Markdown.
| Aspect | MDX | Markdown | HTML | AsciiDoc |
|---|---|---|---|---|
| Components | Yes, real JSX | No | Web components only | Macros |
| Needs a build step | Yes | No | No | Yes |
| Can run code | Yes, at render time | No | Via <script> | No |
| Learning curve | Markdown plus JSX | Minimal | Moderate | Moderate |
| Typical use | Docs sites & blogs | READMEs & notes | The web | Technical manuals |
| First released | 2018 | 2004 | 1993 | 2002 |
OmniViewer opens every file format; MDX is one of the formats with dedicated tooling, powered by the same viewing engine as fastjsonviewer.com and hugecsv.com.
No. OmniViewer is a static page with no server-side processing: your .mdx file is read directly by your browser, and every tab — preview, components, formatted, contents and stats — runs locally in a Web Worker. The file never leaves your computer.
No, and it deliberately cannot. Your components live in your repository, not in the file you dropped, and running unknown code from a dropped file would be unsafe. Instead each component is drawn as a labelled placeholder card showing its tag, the props it was passed and its children rendered as Markdown — so you see the shape of the finished page. Intrinsic HTML in your JSX is rendered for real, but every attribute except href, src, alt and title is dropped and URLs are scheme-checked, so nothing in the file can execute.
Yes — that is what the Components tab is for. It lists every component tag in the document and resolves each one against your imports and your exports. A tag that matches neither is flagged unresolved, which is the MDX error "Expected component X to be defined: you likely forgot to import, pass, or provide it". One caveat it states plainly: a component can also be supplied at render time by an MDXProvider, which is invisible from inside a single file, so an unresolved tag means it must come from a provider — not that it is definitely broken.
The raw and hex views are windowed — they read only the bytes needed to paint the screen — so they open files of effectively unlimited size, up to 20 GB and beyond. The component audit and stats are streamed in 4 MB blocks and cover every byte of the file at any size, showing progress as they go. Only the preview, formatter and contents tabs work on a bounded prefix, because rendering a document means holding its structure in memory, and they tell you when they capped.
MDX is Markdown that can import and render components. It adds two things ordinary Markdown does not have: ES module syntax (import and export statements at the start of a line) and JSX, including curly-brace expressions. Everything else is Markdown, and Markdown inside a JSX element is still parsed as Markdown. It was released in 2018 and rewritten as MDX 2 in 2022.
Yes. YAML frontmatter at the top of the file is parsed and shown as a header card in the preview and a table in the audit. Nested components render as nested cards, with their Markdown children dedented and rendered. Fenced code blocks are treated as code everywhere, including inside a JSX element — so an import statement or a component tag in a code sample is never mistaken for real MDX syntax.
Not as a one-click export. The Formatted tab tidies the MDX source while keeping the imports and JSX intact, because those are what make it MDX. If you want the prose alone, the Preview tab shows the document with components rendered as placeholders, and the raw and hex views give you the exact bytes to work from.