problem with integrating an MDX editor with preview

[AaronClaes]

The problem I am currently having is that I am building a docs website that will be maintained by non-technical people as well.
I was looking into integrating a markdown editor (for example MDX Editor) so it is not required to run a dev server to edit the docs.

When the changes are saved, they will be synced to the GitHub repo and start a new build of the application.
I currently struggle with integrating a way to preview the markdown written in the editor, because Fumadocs takes the markdown from the files and I do not see a way to create an export myself (like getPage from the loader does).

Is there a way to create my own <MDX /> component from a markdown string, like the one coming from the page?

const page = getPage(params.slug);
const MDX = page.data.exports.default; // create this somehow from a markdown string

<DocsPage toc={page.data.exports.toc}>
        <DocsBody>
          <h1>{page.data.title}</h1>
          <MDX />
        </DocsBody>
</DocsPage>

Is this possible with the way Fumadocs works? Any ideas & suggestions are welcome

Thanks a lot!

[fuma-nama]

To use Fumadocs MDX for this, you can’t access the raw content. The design of Fumadocs is indeed capable to handle custom content sources, but Fumadocs MDX doesn’t provide the raw content of files in consideration of memory usage. We do this because MDX files must be compiled statically to be optimised by Next.js and able to use Webpack loaders to load images. The presence of raw content isn’t necessary. Hence, the page doesn’t provide its raw content to support custom MDX compilers in server components.

I wonder what do you mean by create an export, if you want to render the markdown to a react component, libraries like next-mdx-remote could do it for you. The only problem left would be the page tree, which you can generate with a bit of code (or even hardcode it).

[AaronClaes]

next-mdx-remote is what I was looking for, thanks a lot!