Gathering detailed insights and metrics for mdast-util-mdx-jsx
mdast extension to parse and serialize MDX JSX
Installations
npm install mdast-util-mdx-jsxDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
23.1.0
NPM Version
11.0.0
Score
97.3
Supply Chain
99.5
Quality
83.5
Maintenance
100
Vulnerability
100
License
Releases
25
Contributors
14
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
211,648,897
Last Day
590,161
Last Week
3,703,629
Last Month
15,027,541
Last Year
126,169,052
GitHub Statistics
MIT License
25 Stars
122 Commits
6 Forks
8 Watchers
1 Branches
14 Contributors
Updated on Jan 13, 2025
Bundle Size
45.99 kB
Minified
17.22 kB
Minified + Gzipped
Sponsor this package
Maintainers
2
Package Meta Information
Latest Version
3.2.0
Package Id
mdast-util-mdx-jsx@3.2.0
Unpacked Size
55.45 kB
Size
13.31 kB
File Count
8
NPM Version
11.0.0
Node Version
23.1.0
Published on
Jan 13, 2025
Total Downloads
Cumulative downloads
Total Downloads
211,648,897
Last Day
-3.6%
590,161
Compared to previous day
Last Week
3.6%
3,703,629
Compared to previous week
Last Month
44.8%
15,027,541
Compared to previous month
Last Year
148.3%
126,169,052
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
12
mdast-util-mdx-jsx
mdast extensions to parse and serialize MDX JSX (<a />).
Contents
- What is this?
- When to use this
- Install
- Use
- API
- HTML
- Syntax
- Syntax tree
- Types
- Compatibility
- Related
- Contribute
- License
What is this?
This package contains two extensions that add support for MDX JSX syntax in
markdown to mdast.
These extensions plug into
mdast-util-from-markdown (to support parsing
JSX in markdown into a syntax tree) and
mdast-util-to-markdown (to support serializing
JSX in syntax trees to markdown).
JSX is an XML-like syntax extension to ECMAScript (JavaScript), which MDX brings to markdown. For more info on MDX, see What is MDX?
When to use this
You can use these extensions when you are working with
mdast-util-from-markdown and mdast-util-to-markdown already.
When working with mdast-util-from-markdown, you must combine this package
with micromark-extension-mdx-jsx.
When you are working with syntax trees and want all of MDX, use
mdast-util-mdx instead.
All these packages are used in remark-mdx, which
focusses on making it easier to transform content by abstracting these
internals away.
Install
This package is ESM only. In Node.js (version 16+), install with npm:
1npm install mdast-util-mdx-jsx
In Deno with esm.sh:
1import {mdxJsxFromMarkdown, mdxJsxToMarkdown} from 'https://esm.sh/mdast-util-mdx-jsx@3'
In browsers with esm.sh:
1<script type="module"> 2 import {mdxJsxFromMarkdown, mdxJsxToMarkdown} from 'https://esm.sh/mdast-util-mdx-jsx@3?bundle' 3</script>
Use
Say our document example.mdx contains:
1<Box> 2 - a list 3</Box> 4 5<MyComponent {...props} /> 6 7<abbr title="Hypertext Markup Language">HTML</abbr> is a lovely language.
…and our module example.js looks as follows:
1import fs from 'node:fs/promises' 2import * as acorn from 'acorn' 3import {mdxJsx} from 'micromark-extension-mdx-jsx' 4import {fromMarkdown} from 'mdast-util-from-markdown' 5import {mdxJsxFromMarkdown, mdxJsxToMarkdown} from 'mdast-util-mdx-jsx' 6import {toMarkdown} from 'mdast-util-to-markdown' 7 8const doc = await fs.readFile('example.mdx') 9 10const tree = fromMarkdown(doc, { 11 extensions: [mdxJsx({acorn, addResult: true})], 12 mdastExtensions: [mdxJsxFromMarkdown()] 13}) 14 15console.log(tree) 16 17const out = toMarkdown(tree, {extensions: [mdxJsxToMarkdown()]}) 18 19console.log(out)
…now running node example.js yields (positional info removed for brevity):
1{ 2 type: 'root', 3 children: [ 4 { 5 type: 'mdxJsxFlowElement', 6 name: 'Box', 7 attributes: [], 8 children: [ 9 { 10 type: 'list', 11 ordered: false, 12 start: null, 13 spread: false, 14 children: [ 15 { 16 type: 'listItem', 17 spread: false, 18 checked: null, 19 children: [ 20 {type: 'paragraph', children: [{type: 'text', value: 'a list'}]} 21 ] 22 } 23 ] 24 } 25 ] 26 }, 27 { 28 type: 'mdxJsxFlowElement', 29 name: 'MyComponent', 30 attributes: [ 31 { 32 type: 'mdxJsxExpressionAttribute', 33 value: '...props', 34 data: { 35 estree: { 36 type: 'Program', 37 body: [ 38 { 39 type: 'ExpressionStatement', 40 expression: { 41 type: 'ObjectExpression', 42 properties: [ 43 { 44 type: 'SpreadElement', 45 argument: {type: 'Identifier', name: 'props'} 46 } 47 ] 48 } 49 } 50 ], 51 sourceType: 'module' 52 } 53 } 54 } 55 ], 56 children: [] 57 }, 58 { 59 type: 'paragraph', 60 children: [ 61 { 62 type: 'mdxJsxTextElement', 63 name: 'abbr', 64 attributes: [ 65 { 66 type: 'mdxJsxAttribute', 67 name: 'title', 68 value: 'Hypertext Markup Language' 69 } 70 ], 71 children: [{type: 'text', value: 'HTML'}] 72 }, 73 {type: 'text', value: ' is a lovely language.'} 74 ] 75 } 76 ] 77}
1<Box> 2 * a list 3</Box> 4 5<MyComponent {...props} /> 6 7<abbr title="Hypertext Markup Language">HTML</abbr> is a lovely language.
API
This package exports the identifiers
mdxJsxFromMarkdown and
mdxJsxToMarkdown.
There is no default export.
mdxJsxFromMarkdown()
Create an extension for
mdast-util-from-markdown
to enable MDX JSX.
Returns
Extension for mdast-util-from-markdown to enable MDX JSX
(FromMarkdownExtension).
When using the micromark syntax extension with
addResult, nodes will have a data.estree field set to an ESTree
Program node.
mdxJsxToMarkdown(options?)
Create an extension for
mdast-util-to-markdown
to enable MDX JSX.
This extension configures mdast-util-to-markdown with
options.fences: true and
options.resourceLink: true too, do not
overwrite them!
Parameters
options(ToMarkdownOptions) — configuration
Returns
Extension for mdast-util-to-markdown to enable MDX JSX
(FromMarkdownExtension).
MdxJsxAttribute
MDX JSX attribute with a key (TypeScript type).
Type
1import type {Literal} from 'mdast' 2 3interface MdxJsxAttribute extends Literal { 4 type: 'mdxJsxAttribute' 5 name: string 6 value?: MdxJsxAttributeValueExpression | string | null | undefined 7}
MdxJsxAttributeValueExpression
MDX JSX attribute value set to an expression (TypeScript type).
Type
1import type {Program} from 'estree-jsx' 2import type {Literal} from 'mdast' 3 4interface MdxJsxAttributeValueExpression extends Literal { 5 type: 'mdxJsxAttributeValueExpression' 6 data?: {estree?: Program | null | undefined} & Literal['data'] 7}
MdxJsxExpressionAttribute
MDX JSX attribute as an expression (TypeScript type).
Type
1import type {Program} from 'estree-jsx' 2import type {Literal} from 'mdast' 3 4interface MdxJsxExpressionAttribute extends Literal { 5 type: 'mdxJsxExpressionAttribute' 6 data?: {estree?: Program | null | undefined} & Literal['data'] 7}
MdxJsxFlowElement
MDX JSX element node, occurring in flow (block) (TypeScript type).
Type
1import type {BlockContent, DefinitionContent, Parent} from 'mdast' 2 3export interface MdxJsxFlowElement extends Parent { 4 type: 'mdxJsxFlowElement' 5 name: string | null 6 attributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute> 7 children: Array<BlockContent | DefinitionContent> 8}
MdxJsxFlowElementHast
Same as MdxJsxFlowElement, but registered with
@types/hast (TypeScript type).
Type
1import type {ElementContent, Parent} from 'hast' 2 3export interface MdxJsxFlowElementHast extends Parent { 4 type: 'mdxJsxFlowElement' 5 name: string | null 6 attributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute> 7 children: Array<ElementContent> 8}
MdxJsxTextElement
MDX JSX element node, occurring in text (phrasing) (TypeScript type).
Type
1import type {Parent, PhrasingContent} from 'mdast' 2 3export interface MdxJsxTextElement extends Parent { 4 type: 'mdxJsxTextElement' 5 name: string | null 6 attributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute> 7 children: Array<PhrasingContent> 8}
MdxJsxTextElementHast
Same as MdxJsxTextElement, but registered with
@types/hast (TypeScript type).
Type
1import type {ElementContent, Parent} from 'hast' 2 3export interface MdxJsxTextElementHast extends Parent { 4 type: 'mdxJsxTextElement' 5 name: string | null 6 attributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute> 7 children: Array<ElementContent> 8}
ToMarkdownOptions
Configuration (TypeScript type).
Fields
quote('"'or"'", default:'"') — preferred quote to use around attribute valuesquoteSmart(boolean, default:false) — use the other quote if that results in less bytestightSelfClosing(boolean, default:false) — do not use an extra space when closing self-closing elements:<img/>instead of<img />printWidth(number, default:Infinity) — try and wrap syntax at this width. When set to a finite number (say,80), the formatter will print attributes on separate lines when a tag doesn’t fit on one line. The normal behavior is to print attributes with spaces between them instead of line endings
HTML
MDX JSX has no representation in HTML.
Though, when you are dealing with MDX, you will likely go through hast.
You can enable passing MDX JSX through to hast by configuring
mdast-util-to-hast with
passThrough: ['mdxJsxFlowElement', 'mdxJsxTextElement'].
Syntax
See Syntax in micromark-extension-mdx-jsx.
Syntax tree
The following interfaces are added to mdast by this utility.
Nodes
MdxJsxFlowElement
1interface MdxJsxFlowElement <: Parent { 2 type: 'mdxJsxFlowElement' 3} 4 5MdxJsxFlowElement includes MdxJsxElement
MdxJsxFlowElement (Parent) represents JSX in flow (block). It can be used where flow content is expected. It includes the mixin MdxJsxElement.
For example, the following markdown:
1<w x="y"> 2 z 3</w>
Yields:
1{ 2 type: 'mdxJsxFlowElement', 3 name: 'w', 4 attributes: [{type: 'mdxJsxAttribute', name: 'x', value: 'y'}], 5 children: [{type: 'paragraph', children: [{type: 'text', value: 'z'}]}] 6}
MdxJsxTextElement
1interface MdxJsxTextElement <: Parent { 2 type: 'mdxJsxTextElement' 3} 4 5MdxJsxTextElement includes MdxJsxElement
MdxJsxTextElement (Parent) represents JSX in text (span, inline). It can be used where phrasing content is expected. It includes the mixin MdxJsxElement.
For example, the following markdown:
1a <b c>d</b> e.
Yields:
1{ 2 type: 'mdxJsxTextElement', 3 name: 'b', 4 attributes: [{type: 'mdxJsxAttribute', name: 'c', value: null}], 5 children: [{type: 'text', value: 'd'}] 6}
Mixin
MdxJsxElement
1interface mixin MdxJsxElement { 2 name: string? 3 attributes: [MdxJsxExpressionAttribute | MdxJsxAttribute] 4} 5 6interface MdxJsxExpressionAttribute <: Literal { 7 type: 'mdxJsxExpressionAttribute' 8} 9 10interface MdxJsxAttribute <: Node { 11 type: 'mdxJsxAttribute' 12 name: string 13 value: MdxJsxAttributeValueExpression | string? 14} 15 16interface MdxJsxAttributeValueExpression <: Literal { 17 type: 'mdxJsxAttributeValueExpression' 18}
MdxJsxElement represents a JSX element.
The name field can be present and represents an identifier.
Without name, the element represents a fragment, in which case no attributes
must be present.
The attributes field represents information associated with the node.
The value of the attributes field is a list of MdxJsxExpressionAttribute
and MdxJsxAttribute nodes.
MdxJsxExpressionAttribute represents an expression (typically in a programming language) that when evaluated results in multiple attributes.
MdxJsxAttribute represents a single attribute.
The name field must be present.
The value field can be present, in which case it is either a string (a static
value) or an expression (typically in a programming language) that when
evaluated results in an attribute value.
Content model
FlowContent (MDX JSX)
1type MdxJsxFlowContent = MdxJsxFlowElement | FlowContent
PhrasingContent (MDX JSX)
1type MdxJsxPhrasingContent = MdxJsxTextElement | PhrasingContent
Types
This package is fully typed with TypeScript.
It exports the additional types MdxJsxAttribute,
MdxJsxAttributeValueExpression,
MdxJsxExpressionAttribute,
MdxJsxFlowElement,
MdxJsxFlowElementHast,
MdxJsxTextElement,
MdxJsxTextElementHast, and
ToMarkdownOptions.
It also registers the node types with @types/mdast and @types/hast.
If you’re working with the syntax tree, make sure to import this utility
somewhere in your types, as that registers the new node types in the tree.
1/** 2 * @import {} from 'mdast-util-mdx-jsx' 3 * @import {Root} from 'mdast' 4 */ 5 6import {visit} from 'unist-util-visit' 7 8/** @type {Root} */ 9const tree = getMdastNodeSomeHow() 10 11visit(tree, function (node) { 12 // `node` can now be one of the JSX nodes. 13})
Compatibility
Projects maintained by the unified collective are compatible with maintained versions of Node.js.
When we cut a new major release, we drop support for unmaintained versions of
Node.
This means we try to keep the current release line, mdast-util-mdx-jsx@3,
compatible with Node.js 16.
This utility works with mdast-util-from-markdown version 2+ and
mdast-util-to-markdown version 2+.
Related
micromark/micromark-extension-mdx-jsx— support MDX JSX in micromarksyntax-tree/mdast-util-mdx— support MDX in mdastremarkjs/remark-mdx— support MDX in remark
Contribute
See contributing.md in syntax-tree/.github for
ways to get started.
See support.md for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
License
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: license:0
- Info: FSF or OSI recognized license: MIT License: license:0
Reason
0 existing vulnerabilities detected
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/syntax-tree/.github/security.md:1
- Info: Found linked content: github.com/syntax-tree/.github/security.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/syntax-tree/.github/security.md:1
- Info: Found text in security policy: github.com/syntax-tree/.github/security.md:1
Reason
4 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 3
Reason
Found 3/30 approved changesets -- score normalized to 1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/bb.yml:1
- Warn: no topLevel permission defined: .github/workflows/main.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/bb.yml:5: update your workflow using https://app.stepsecurity.io/secureworkflow/syntax-tree/mdast-util-mdx-jsx/bb.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:6: update your workflow using https://app.stepsecurity.io/secureworkflow/syntax-tree/mdast-util-mdx-jsx/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:7: update your workflow using https://app.stepsecurity.io/secureworkflow/syntax-tree/mdast-util-mdx-jsx/main.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/syntax-tree/mdast-util-mdx-jsx/main.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/main.yml:11
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 3 are checked with a SAST tool
Score
4.4
/10
Last Scanned on 2025-02-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More