---
title: "Write Documentation Pages"
description: "Add documentation pages and their navigation entries in `content/nav.config.ts`."
url: https://beacon-arodoni.vercel.app/create-content
---

# Write Documentation Pages

In Beacon, each documentation page needs a content file and a navigation entry in `content/nav.config.ts`. The navigation entry determines the order of the page in the navigation menu.

## Pages

Beacon uses [MDX](https://mdxjs.com/) for documentation pages. MDX is Markdown with embedded JSX components.

In the `<my-project>` folder where you installed Beacon, add the
document files under `content/docs/` with the `.mdx` extension.

`<my-project>` is the name of the project you specified and Beacon created in the [Install](https://beacon-arodoni.vercel.app/install) step.

See [CommonMark Help](https://commonmark.org/help/) for the official, standardized Markdown syntax.

### Frontmatter

Each new documentation page needs a frontmatter block with a title and description:

```md
---
title: A title for the page
description: A short, specific summary of what this page covers.
---
```

## Navigation

When you add or move a page, add or update its entry in the `items` array of a group in `content/nav.config.ts`, such as **Get Started**. For example:

```ts
{ title: "My Page", href: "/my-page" }
```

`content/nav.config.ts` exports a list of groups, each with a title and an ordered list of items.

For example: 

```ts
export const nav: NavGroup[] = [
  {
    title: "Get Started",
    href: "/",
    items: [
      { title: "Introduction", href: "/" },
      { title: "Quickstart", href: "/quickstart" },
    ],
  },
  {
    title: "Release Notes", href: "/release-notes",
    items: [],
  },
];
```

To nest a page under another page in the sidebar, add it to the parent item's `children` array:

```ts
{
  title: "My Page",
  href: "/my-page",
  children: [{ title: "My Child Page", href: "/my-child-page" }],
}
```

## Page preview

Run the local development server to preview your changes as you edit your pages.

1. **Start the development server**

   ```bash
   npm run dev
   ```

2. **View the content pages**

   View the new pages at
   [http://localhost:3000](http://localhost:3000).

   The development server does not write the site to the `out/` directory.

   Changes to `content/nav.config.ts` reload automatically. To see changes to
   `.mdx` files, refresh the browser.

3. **Stop the development server**

   Press `Ctrl+C` to stop the development server.