`) — i.e. MDX. But the official MDX toolchain compiles to a JS module at build time. That's heavy, needs a bundler step, and **can't run in the browser** at edit-time. If you're building a CMS, a live preview, or a comment box, you need something that parses MDX-ish content *in the client*, cheaply, without `eval` or a compile step.
**The solution.** `micro-mdx-parser` does one job: it walks the string and pulls every HTML tag, self-closing element, and capitalized component out into structured nodes — parsing their props into real JavaScript values — while leaving the markdown prose untouched as `text` nodes. No compilation. No evaluation. No build step. Just a tree.
**You stay in control of rendering.** Text nodes still contain raw markdown (`**bold**`, `[links](…)`, `# headings`). Pair them with any markdown renderer; map element/component nodes to your own component registry. (See [Rendering the tree](#rendering-the-tree).)
### Why micro-mdx-parser?
| You want… | micro-mdx-parser |
|---|---|
| Parse MDX-ish content **in the browser** | ✅ Pure JS, no bundler/compiler step |
| **JSX props as real values** (`style={{…}}`, `count={2}`, arrow fns) | ✅ via [`oparser`](https://github.com/DavidWells/oparser) |
| **Capitalized tags → components** (`
Watch out!
`
console.log(parse(input))
```
```js
[
// markdown stays raw, as text — note positions
{
type: 'text',
content: '# Welcome\n\nSome **markdown** prose, then a component:\n\n',
position: { start: { index: 0, line: 1, column: 1 }, end: {/*…*/} }
},
// capitalized tag → component, with parsed props + nested children
{
type: 'component',
tagName: 'Callout',
tagValue: '\n Watch out!\n ',
props: { type: 'warning' },
propsRaw: ' type="warning"',
children: [ { type: 'text', content: '\n Watch out!\n', position: {/*…*/} } ],
position: {/*…*/}
},
// lowercase tag → element; self-closing flagged; props coerced
{
type: 'element',
tagName: 'img',
tagValue: '',
props: { src: 'a.jpg', alt: 'pic' },
propsRaw: ' src="a.jpg" alt="pic" ',
children: [],
isSelfClosing: true,
position: {/*…*/}
}
]
```
**The key thing to understand:** the heading and `**markdown**` came back as a plain `text` node — *not* an `` or ``. This parser separates the **component layer** from the **prose layer**; it does not render markdown. That separation is the whole point (see next section).
---
## The mental model
```text
input string
────────────────────────────────────────────────────────────
# Welcome
Some **markdown** prose
→ stays as a `text` node
`
console.log(parse(input))
```
```js
[
// markdown stays raw, as text — note positions
{
type: 'text',
content: '# Welcome\n\nSome **markdown** prose, then a component:\n\n',
position: { start: { index: 0, line: 1, column: 1 }, end: {/*…*/} }
},
// capitalized tag → component, with parsed props + nested children
{
type: 'component',
tagName: 'Callout',
tagValue: '',
props: { src: 'a.jpg', alt: 'pic' },
propsRaw: ' src="a.jpg" alt="pic" ',
children: [],
isSelfClosing: true,
position: {/*…*/}
}
]
```
**The key thing to understand:** the heading and `**markdown**` came back as a plain `text` node — *not* an `