Getting started - mdx-butler

Installation

pnpm i mdx-butler mdx-bundler esbuild

Framework Guides

Next.js

Remix

Bundling

The easiest way to get all bundled documents within a folder is to call the docs function.

docs, MDXBundlerService or any other exports from the mdx-butler root entrypoint should only be imported in a server or build context.

Options and dependencies can be passed to docs or MDXBundlerService.create.

import { docs } from 'mdx-butler';

// ...

return docs({
  fields: {
    title: {
      required: true,
    },
  },
});

Automatically generates a FrontmatterProcessor, according to the given fields.

Sometimes properties depend on each other or need to be calculated.

In these cases, fields can be resolved in the order that they were defined in.

`Component`

Create a component by using the Component exported from mdx-butler/client.

Using getComponent, exported by mdx-bundler is another valid option.

import { Component } from 'mdx-butler/client';

// ...

const doc = docs.find((x) => path === x.path);

if (!doc) return <div>not found</div>;

return (
  <div>
    <h1>{doc.frontmatter.title}</h1>
    <Component
      doc={doc}
      /* other props like global components */
    />
  </div>
);

Start editing MDX documents inside /docs or the configured