Project: remcohaszing/remark-mdx-frontmatter

Package: remark-mdx-frontmatter@2.0.3

  1. Dependents: 0
  2. A remark plugin for converting frontmatter metadata into MDX exports
  1. remark 205
  2. unified 179
  3. markdown 151
  4. mdast 88
  5. remark-plugin 75
  6. mdx 36
  7. frontmatter 7
  8. yaml 7
  9. toml 4


github actions npm prettier codecov

A remark plugin for converting frontmatter metadata into MDX exports


This package depends on the AST output by remark-frontmatter

npm install remark-frontmatter remark-mdx-frontmatter


This remark plugin takes frontmatter content, and outputs it as JavaScript exports. Both YAML and TOML frontmatter data are supported.

For example, given a file named example.mdx with the following contents:

hello: frontmatter

Rest of document

The following script:

import { readFileSync } from 'fs';

import remarkFrontmatter from 'remark-frontmatter';
import { remarkMdxFrontmatter } from 'remark-mdx-frontmatter';
import { compileSync } from 'xdm';

const { contents } = compileSync(readFileSync('example.mdx'), {
  jsx: true,
  remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],

Roughly yields:

export const hello = 'frontmatter';

export default function MDXContent() {
  return <p>Rest of document</p>;



By default, every frontmatter object key is turned into a JavaScript export. If name is specified, the YAML content is exported as one single export using this name. This is useful if you wish to use top-level frontmatter nodes other than objects, or if the frontmatter content contains keys which aren’t valid JavaScript identifiers.


A mapping A mapping of node types to parsers. Each key represents a frontmatter node type. The value is a function that accepts the frontmatter data as a string, and returns the parsed data. By default yaml nodes will be parsed using yaml and toml nodes using toml.


MIT @ Remco Haszing