{"id":16435,"library":"micro-mdx-parser","title":"Micro MDX Parser","description":"micro-mdx-parser is a lightweight JavaScript parser engineered to efficiently convert Markdown or HTML content into a structured JSON representation. This package is specifically designed for scenarios requiring client-side parsing and component rendering within CMS-like applications, where a full MDX toolchain might be considered excessive. It is built as a fork of the `himalaya` parser, incorporating specific 'MDX-like' adjustments to better align with modern component-based content rendering needs. Currently stable at version 1.1.24, its release cadence is typically infrequent, characteristic of a mature, specialized utility library. Key differentiators include its minimal footprint, versatile compatibility across both browser and server environments, and its focus on generating a parseable JSON AST for programmatic content manipulation, rather than direct HTML output.","status":"active","version":"1.1.24","language":"javascript","source_language":"en","source_url":"https://github.com/DavidWells/micro-mdx","tags":["javascript","mdx"],"install":[{"cmd":"npm install micro-mdx-parser","lang":"bash","label":"npm"},{"cmd":"yarn add micro-mdx-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add micro-mdx-parser","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary parsing function is a named export. While some tools might try a default import, it will likely fail.","wrong":"import parse from 'micro-mdx-parser';","symbol":"parse","correct":"import { parse } from 'micro-mdx-parser';"},{"note":"CommonJS environments should use destructuring for the named 'parse' export to maintain consistency with ESM.","wrong":"const parse = require('micro-mdx-parser').parse;","symbol":"parse","correct":"const { parse } = require('micro-mdx-parser');"},{"note":"For TypeScript users, import the type definition for the JSON output structure.","symbol":"ParserOutput","correct":"import type { ParserOutput } from 'micro-mdx-parser';"}],"quickstart":{"code":"import { parse } from 'micro-mdx-parser';\n\nconst markdownContent = `# Hello MDX-like!\n\nThis is a paragraph with **bold** text and an _italic_ word.\n\n<p>HTML can also be parsed.</p>\n\n<MyComponent prop=\"value\" />\n`;\n\nconst htmlContent = `<div><h1>Welcome</h1><p>This is <strong>some</strong> HTML.</p></div>`;\n\nconst parsedMarkdown = parse(markdownContent);\nconst parsedHtml = parse(htmlContent);\n\nconsole.log('Parsed Markdown AST:');\nconsole.log(JSON.stringify(parsedMarkdown, null, 2));\n\nconsole.log('\\nParsed HTML AST:');\nconsole.log(JSON.stringify(parsedHtml, null, 2));\n\n// Example of accessing elements\nif (parsedMarkdown.length > 0 && parsedMarkdown[0].type === 'element' && parsedMarkdown[0].tagName === 'h1') {\n  console.log('\\nFirst element in Markdown is an H1:', parsedMarkdown[0].children[0].content);\n}\n","lang":"javascript","description":"Demonstrates how to import the `parse` function and use it to convert both Markdown and HTML strings into a JSON Abstract Syntax Tree (AST)."},"warnings":[{"fix":"For full MDX compilation with JavaScript evaluation, consider `MDX` (official package) or other robust MDX solutions. Use `micro-mdx-parser` when only a structural JSON representation of Markdown/HTML (including basic component tags) is needed.","message":"The package is 'MDX-like', meaning it processes some MDX-specific syntax like components (e.g., `<MyComponent />`), but it is not a full MDX compiler. It does not evaluate JavaScript expressions within Markdown or handle complex MDX features like imports or JSX in Markdown beyond basic component tags. Developers expecting a full MDX runtime will find it lacking.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Thoroughly test parsing results with diverse HTML/Markdown inputs if migrating from `himalaya` or relying on specific parsing behaviors. Consult the source code if unexpected parsing results occur.","message":"Being a fork of `himalaya`, `micro-mdx-parser` might exhibit subtle differences in parsing HTML compared to the original `himalaya` library, especially around edge cases or malformed HTML. While the core parsing logic is similar, the 'MDX-like' tweaks could introduce divergences.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure input Markdown/HTML is as well-formed as possible. Implement input validation or pre-processing steps before feeding content to the parser, especially for user-generated content.","message":"The parser is designed to be 'tiny' and lightweight, which might mean it does not include extensive error handling or recovery mechanisms for highly malformed input. Invalid or unexpected syntax might lead to truncated output or unhandled errors rather than detailed diagnostics.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Verify compatibility with target browser environments using modern bundlers (e.g., Webpack, Rollup, Vite) which can transpile or polyfill as needed. Test thoroughly in target browsers.","message":"While the package supports both browser and server environments, browser-specific build tooling or polyfills might be required for older browser targets, as the underlying `himalaya` library might use modern JavaScript features.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Change the import statement to use named import syntax: `import { parse } from 'micro-mdx-parser';`","cause":"Incorrectly attempting to use a default import for `parse` in an environment where it's only exported as a named export.","error":"TypeError: (0 , micro_mdx_parser__WEBPACK_IMPORTED_MODULE_0__.parse) is not a function"},{"fix":"Ensure the package is installed via `npm install micro-mdx-parser` or `yarn add micro-mdx-parser`, and that your module resolution paths are correctly configured.","cause":"The package has not been installed or is not resolvable in the current environment.","error":"Error: Cannot find module 'micro-mdx-parser'"},{"fix":"Access text content through child nodes of type 'text'. For example, `element.children[0].content` if the first child is a text node, or iterate through children to find text nodes.","cause":"Attempting to access `content` directly on an element node (e.g., `h1`, `p`), which typically contains children nodes, not raw text content directly on the element itself. Text content is usually within child 'text' nodes.","error":"Property 'content' does not exist on type 'Element' or 'Root' or 'Node'."}],"ecosystem":"npm"}