---
name: Mdx Front Matter
---

# Mdx Front Matter

> **Front Matter for Markdown and JSX in Markdown**

This runner adds a frontmatter parser to the Webpack/Fuse-Box build pipeline.   Strictly speaking,
this is not necessary in JSX in Markdown files as the same effect can be achieved by including `export`
statements;  however, frontmatter is a user-friendly way of defining meta data for the non-programmer
and (we think) can be a bit easier to review in code editors / online etc as it is separated from the actual 
content.

This parser exports all frontmatter in a `meta` object for the containing application / static site generator

## Usage

Place frontmatter at top of `.mdx` or `.md` file.
```
---
name: My Document Title
---
```

Use in layout files under the `meta` property

```html
<Head>
  <title>Head example {props.meta.name}</title>
</Head>
```
  

## Installation

[`@berun/runner-mdx`](https://www.npmjs.com/package/@berun/runner-eslint) is a common runner that is automatically
included by BeRun presets such as [`@berun/preset-bestatic`](https://www.npmjs.com/package/@berun/preset-bestatic).   If you 
need to install it directly, follow these directions:

```bash
$ npm install --save-dev @berun/runner-mdx-frontmatter
```

```js
// berun.config.ts
export default {
  use: [ '@berun/runner-mdx-frontmatter']
}
```
