Render user content mdx

[EnhancedJax]

Hi! I plan to implement a feature to render user mdx for my site dynamically, ideally with how fumadocs already renders my static mdx. I understand this sits outside of the functionality of fumadocs, but any guidance on how this can be done, or any pre-existing apis from fumadocs that can be used, would be greatly appreciated!

[fuma-nama]

I think you will be interested on https://fumadocs.vercel.app/docs/headless/custom-source

[EnhancedJax]

I just checked it out. It seems to only support server components, but what I need should be on the client side? If not I'm not sure how this can be done on the server side. The following is my attempt:

"use client";

import { compileMDX, CompileMDXResult } from "@fumadocs/mdx-remote";
import defaultMdxComponents from "fumadocs-ui/mdx";
import { DocsPage } from "fumadocs-ui/page";
import { useEffect, useState } from "react";

export default function TryPage() {
  const [markdown, setMarkdown] = useState(
    "# Hello World\n\nStart typing markdown here..."
  );
  const [compiled, setCompiled] = useState<CompileMDXResult | null>(null);

  useEffect(() => {
    async function compile() {
      const result = await compileMDX({
        source: markdown,
      });
      setCompiled(result);
    }

    compile();
  }, [markdown]);

  return (
    <div className="flex h-[calc(100vh-4rem)]">
      <div className="w-1/2 p-4 border-r">
        <textarea
          className="w-full h-full p-4 font-mono resize-none bg-gray-50 dark:bg-gray-900"
          value={markdown}
          onChange={(e) => setMarkdown(e.target.value)}
        />
      </div>
      <div className="w-1/2 p-4 overflow-auto">
        <DocsPage>
          {compiled && (
            <compiled.body components={{ ...defaultMdxComponents }} />
          )}
        </DocsPage>
      </div>
    </div>
  );
}

Get ./node_modules/image-size/dist/index.js:4:1 Module not found: Can't resolve 'fs'

[fuma-nama]

Hmm you mean the content is from client side? Not sure about your use case, I would recommend the RSC approach if possible (e.g. fetch content from database and render on server-side). If you want to use it on client, consider React Markdown or other stuffs in the Remark ecosystem. And use Code Block (Dynamic) for syntax highlighting, which can lazy load languages

[EnhancedJax]

I see, thanks!