Launch Week II Day 3: Open Source MDX Engine

Day 2 of Launch Week 2 brings open-sourcing Mintlify's MDX Engine 🚀.

It exposes two APIs:

- getCompiledMdx - This function takes in your MDX content and converts it into an object that the MDXComponent can understand to render properly. This works on the server side of Next.js.

- MDXComponent - This component takes in the object returned by the `getCompiledMdx` function and renders HTML.

Why it matters

At Mintlify, we believe that focusing on the developer experience is essential for creating exceptional documentation.

We've discovered that members of our community are interested in using our engine for their own projects.

You can now integrate our package to access Mintlify-flavored markdown and code syntax highlighting. If you're developing a new blog in 2024, consider giving our engine a try 🚂.

We welcome contributions to the project— our team is committed to actively maintaining a roadmap and is open to your suggestions. We're excited to see all the projects that will utilize our engine!

Getting started

You can directly access the NPM package here to kickstart using the MDX Engine.

Installation

# using npm
npm i @mintlify/mdx

# using yarn
yarn add @mintlify/mdx

Using the Engine

1. Call the `getCompiledMdx` function inside `getStaticProps` and return the `mdxSource` object.

export const getStaticProps = (async () => {
  const mdxSource = await getCompiledMdx({
    source: '## Markdown H2',
  });

  return {
    props: {
      mdxSource,
    },
  };
}) satisfies GetStaticProps<{
  mdxSource: MDXRemoteSerializeResult;
}>;

1. Pass the `mdxSource` object as props inside the `MDXComponent`.

export default function Page({ mdxSource }: InferGetStaticPropsType<typeof getStaticProps>) {
  return <MDXComponent {...mdxSource} />;
}

Full Example

import { getCompiledMdx, MDXComponent } from '@mintlify/mdx';
import type { MDXRemoteSerializeResult } from '@mintlify/mdx';
import type { InferGetStaticPropsType, GetStaticProps } from 'next';
import React from 'react';

export const getStaticProps = (async () => {
  const mdxSource = await getCompiledMdx({
    source: '## Markdown H2',
  });

  return {
    props: {
      mdxSource,
    },
  };
}) satisfies GetStaticProps<{
  mdxSource: MDXRemoteSerializeResult;
}>;

export default function Page({ mdxSource }: InferGetStaticPropsType<typeof getStaticProps>) {
  return <MDXComponent {...mdxSource} />;
}

That's a wrap for Day 3 of Launch Week! Follow our Twitter or join the community to stay tuned for the rest of this week's launches 😊