How to Set Up Multiple Documentation Sections Using Separate .mdx Folders ?

[eyallampel1]

Hi Fumadocs developers,

I'm trying to configure my Fumadocs project to have two separate documentation sections, each with its own folder of .mdx files. I would like to have two tabs in the navigation, one for "Documentation" (/docs) and one for another section ("Another", /another), with each tab pulling from separate folders: content/docs for "Documentation" and content/another for "Another".

Here’s what I’ve done so far:

1. Tabs Setup: I added two tabs in layout.config.tsx — "Documentation" and "Another".
2. Separate Layouts: Created a separate layout for the /another path, similar to the one used for /docs.
3. Source File: I tried extending the source.ts file to handle loading content from both docs and another folders. I’ve set up createMDXSource for both:

   import { docs, meta as docsMeta } from '@/.source';
   import { anotherContent, anotherMeta } from '@/content/another/source';
   import { createMDXSource } from 'fumadocs-mdx';
   import { loader } from 'fumadocs-core/source';
   
   const docsSource = createMDXSource(docs, docsMeta);
   const anotherSource = createMDXSource(anotherContent, anotherMeta);
   
   export const source = {
     getPage: (slug, type = 'docs') => {
       if (type === 'another') {
         return anotherSource.getPage(slug);
       }
       return docsSource.getPage(slug);
     },
     generateParams: (type = 'docs') => {
       if (type === 'another') {
         return anotherSource.generateParams();
       }
       return docsSource.generateParams();
     },
     getPages: () => {
       return docsSource.getPages(); // Currently only returns docs pages
     }
   };

Issues:

1. TypeScript Errors: I get the following TypeScript errors:

   • TS2305: Module "./another-source" has no exported member 'meta'.
   • TS2739: Type 'any[]' is missing properties from type 'Root' when passing source.getPages('another') to DocsLayout.
   • TS2554: Expected 0 arguments, but got 1 for getPages('another').

2. Folder Structure: How should I structure and configure my source.ts to support loading .mdx files from both docs and another folders correctly?

3. DocsLayout: What should I adjust in the tree prop passed to DocsLayout to ensure it meets the required Root type (with name and children)?

Any guidance on properly setting up two separate content sources within the same Fumadocs project would be greatly appreciated! Thanks in advance.

[fuma-nama]

Hmm maybe you are looking for https://fumadocs.vercel.app/docs/ui/page-conventions#multiple-page-trees, which is the one our official docs use.

The method you used will create two layouts and two source objects (which may appear to be unnecessary), would like to hear if there's anything the current multi page tree API cannot handle.

Your method also works, but you need to use loader for the source object, it can handle types, you can follow the same instructions to setup another source object. But ideally using multi page tree is adequate

[eyallampel1]

@fuma-nama

Thank you for the detailed response. I've looked through the documentation on your website regarding the multiple page tree feature, and it seems like exactly what I'm looking for. However, I'm having trouble implementing it correctly and would really appreciate some step-by-step guidance.

Here’s what I’ve done so far:

1. Created Two Folders: I created content/docs for the "Documentation" section and content/another for the "Another" section, each with its own .mdx files.

2. Modified layout.config.tsx: I added two tabs in the layout.config.tsx file—one for "Documentation" and one for "Another".

3. Updated source.ts: I tried extending the source.ts file to load content from both the docs and another folders, using the createMDXSource method for each section.

Despite following these steps, I haven't been able to get the desired result. Could you kindly guide me step by step on how to set up a new Fumadocs template to include two separate documentation sections with the multiple page tree feature?

I’d like to have two tabs—one for "Documentation" and one for "Another"—with each pulling content from their respective folders.

Thank you so much for your help!

[fuma-nama]

By default content/docs is the content directory, meaning that content/another will not be scanned. You can move folders into content/docs or set the dir option from source.config file. Note that with defineDocs API, you put the collection options to:

import { defineDocs } from 'fumadocs-mdx/config';
 
export const { docs, meta } = defineDocs({
  docs: {
    dir: '...'
  },
  meta: {
    dir: '...'
  },
});

You can keep the default source.ts file created by create-fumadocs-app, it should works. I assume you added the Tabs to sidebar with <RootToggle />, make sure to configure its options prop.