# Parse Markdown Frontmatter In MDX, Remark, and Unified

Today I created a small Unified/Remark plugin called [remark-parse-frontmatter] to help easily parse frontmatter in a Markdown or MDX document using either [mdxjs] or [remarkjs] or [unifiedjs].

In case you don't know what is Unified/Remark is, Unified provides an interface for processing content like Markdown, HTML, JSX, etc, in an extremly modular design which allows writing and using plugins easy (but sometimes also feel a bit fragmented).

## What is frontmatter in Markdown?

Frontmatter is the first block in a Markdown document that starts and ends with a line `---`. Frontmatter defines a Markdown document's metadata.

For example, this is the frontmatter of this article you're reading:

```md
---
title: Parse Markdown Frontmatter In MDX, Remark, and Unified
description: >-
  Leverage Unified/Remark plugin ecosystem to easily parse frontmatter in your
  Markdown or MDX documents.
tags: [markdown, javascript, react, plugin]
published time: 2020-12-25
---
```

Markdown frontmatter is supported by Github and most popular code editors which help writing and maintaining them more fun.

## Parse frontmatter with remark-parse-frontmatter

[remark-parse-frontmatter] provides 2 essential features when working with frontmatter:

-   Parses the YAML content of a markdown and turns that into a JavaScript object for usage.

-   Validates the object using [revalidator].

This plugin requires plugin `remark-frontmatter` to be applied first (which reads the text and turns into a syntax tree, not a JSON object, and has no validation).

```js
const processor = remark()
  .use(require("remark-frontmatter"))
  .use(require("remark-parse-frontmatter"))
  .freeze();

const file = processor.processSync(`
---
title: Hello, World!
---
`);

console.log(file.data.frontmatter);
```

⬇️

    {
      title: "Hello, World!"
    }

Remember to first install the plugin:

```bash
yarn add remark-parse-frontmatter
```

Check out [the NPM package][remark npm] and [the plugin's repository][remark-parse-frontmatter] for more details.

<!-- Links -->

[remark-parse-frontmatter]: https://github.com/phuctm97/remark-parse-frontmatter

[remark npm]: https://www.npmjs.com/package/remark-parse-frontmatter

[mdxjs]: https://mdxjs.com

[remarkjs]: https://remark.js.org

[unifiedjs]: https://unifiedjs.com

[revalidator]: https://github.com/flatiron/revalidator