Project: remcohaszing/remark-mdx-frontmatter

Package: remark-mdx-frontmatter@2.1.1

  1. Dependents: 0
  2. A remark plugin for converting frontmatter metadata into MDX exports
  1. remark 193
  2. unified 182
  3. markdown 145
  4. mdast 90
  5. remark-plugin 68
  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 { readFile } from 'node:fs/promises';

import { compile } from '@mdx-js/mdx';
import remarkFrontmatter from 'remark-frontmatter';
import remarkMdxFrontmatter from 'remark-mdx-frontmatter';

const { contents } = await compile(await readFile('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