`) — 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.\n\n**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.\n\n**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).)\n\n### Why micro-mdx-parser?\n\n| You want… | micro-mdx-parser |\n|---|---|\n| Parse MDX-ish content **in the browser** | ✅ Pure JS, no bundler/compiler step |\n| **JSX props as real values** (`style={{…}}`, `count={2}`, arrow fns) | ✅ via [`oparser`](https://github.com/DavidWells/oparser) |\n| **Capitalized tags → components** (`\n Watch out!\n \n\n![\"pic\"](\"a.jpg\")
`\n\nconsole.log(parse(input))\n```\n\n```js\n[\n // markdown stays raw, as text — note positions\n {\n type: 'text',\n content: '# Welcome\\n\\nSome **markdown** prose, then a component:\\n\\n',\n position: { start: { index: 0, line: 1, column: 1 }, end: {/*…*/} }\n },\n // capitalized tag → component, with parsed props + nested children\n {\n type: 'component',\n tagName: 'Callout',\n tagValue: '\\n Watch out!\\n ',\n props: { type: 'warning' },\n propsRaw: ' type=\"warning\"',\n children: [ { type: 'text', content: '\\n Watch out!\\n', position: {/*…*/} } ],\n position: {/*…*/}\n },\n // lowercase tag → element; self-closing flagged; props coerced\n {\n type: 'element',\n tagName: 'img',\n tagValue: '',\n props: { src: 'a.jpg', alt: 'pic' },\n propsRaw: ' src=\"a.jpg\" alt=\"pic\" ',\n children: [],\n isSelfClosing: true,\n position: {/*…*/}\n }\n]\n```\n\n**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).\n\n---\n\n## The mental model\n\n```text\ninput string\n────────────────────────────────────────────────────────────\n# Welcome\n\nSome **markdown** prose\n → stays as a `text` node\n\n
`\n\nconsole.log(parse(input))\n```\n\n```js\n[\n // markdown stays raw, as text — note positions\n {\n type: 'text',\n content: '# Welcome\\n\\nSome **markdown** prose, then a component:\\n\\n',\n position: { start: { index: 0, line: 1, column: 1 }, end: {/*…*/} }\n },\n // capitalized tag → component, with parsed props + nested children\n {\n type: 'component',\n tagName: 'Callout',\n tagValue: '',\n props: { src: 'a.jpg', alt: 'pic' },\n propsRaw: ' src=\"a.jpg\" alt=\"pic\" ',\n children: [],\n isSelfClosing: true,\n position: {/*…*/}\n }\n]\n```\n\n**The key thing to understand:** the heading and `**markdown**` came back as a plain `text` node — *not* an `