Registry / serialization / micro-mdx-parser

micro-mdx-parser

library1.1.24jsnpmunverified

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.

serialization web-framework

npm install micro-mdx-parser

github ↗package ↗

INSTALL

IMPORT

SIG · MICRO-MDX-PARSER

micro-mdx-parser

serializationjavascriptv1.1.24

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

parse

✓ import { parse } from 'micro-mdx-parser';

✗ import parse from 'micro-mdx-parser';

The primary parsing function is a named export. While some tools might try a default import, it will likely fail.

parse

✓ const { parse } = require('micro-mdx-parser');

✗ const parse = require('micro-mdx-parser').parse;

CommonJS environments should use destructuring for the named 'parse' export to maintain consistency with ESM.

ParserOutput

✓ import type { ParserOutput } from 'micro-mdx-parser';

For TypeScript users, import the type definition for the JSON output structure.

Demonstrates how to import the `parse` function and use it to convert both Markdown and HTML strings into a JSON Abstract Syntax Tree (AST).

import { parse } from 'micro-mdx-parser'; const markdownContent = `# Hello MDX-like! This is a paragraph with **bold** text and an _italic_ word. <p>HTML can also be parsed.</p> <MyComponent prop="value" /> `; const htmlContent = `<div><h1>Welcome</h1><p>This is <strong>some</strong> HTML.</p></div>`; const parsedMarkdown = parse(markdownContent); const parsedHtml = parse(htmlContent); console.log('Parsed Markdown AST:'); console.log(JSON.stringify(parsedMarkdown, null, 2)); console.log('\nParsed HTML AST:'); console.log(JSON.stringify(parsedHtml, null, 2)); // Example of accessing elements if (parsedMarkdown.length > 0 && parsedMarkdown[0].type === 'element' && parsedMarkdown[0].tagName === 'h1') { console.log('\nFirst element in Markdown is an H1:', parsedMarkdown[0].children[0].content); }

Debug

Known issues

gotchaThe 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.

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.

affects: >=1.0.0

gotchaBeing 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.

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.

affects: >=1.0.0

gotchaThe 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.

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.

affects: >=1.0.0

gotchaWhile 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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: (0 , micro_mdx_parser__WEBPACK_IMPORTED_MODULE_0__.parse) is not a function

Incorrectly attempting to use a default import for `parse` in an environment where it's only exported as a named export.

fix

Change the import statement to use named import syntax: `import { parse } from 'micro-mdx-parser';`

Error: Cannot find module 'micro-mdx-parser'

The package has not been installed or is not resolvable in the current environment.

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.

Property 'content' does not exist on type 'Element' or 'Root' or 'Node'.

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.

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.

Upgrade

Version history

1.1.24latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

3 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/DavidWells/micro-mdx ↗

packagehttps://www.npmjs.com/package/micro-mdx-parser ↗