Fumadocs
Integrations

Obsidian

Render your Obsidian vaults in Fumadocs.

Experimental

Might have bugs or breaking changes, use it at your own risk.

Setup

npm i fumadocs-obsidian

You can copy your vault folder to the project (e.g. root directory):

Introduction.md
Folder/Hello World.md
package.json

Create a script to generate docs & assets:

scripts/generate.ts
import { fromVault } from 'fumadocs-obsidian';

await fromVault({
  dir: 'Obsidian Vault',
  out: {
    // you can specify the locations of `/public` & `/content/docs` folder
  },
});

Run the script to generate docs:

bun scripts/generate.ts

Finally, include necessary MDX components:

mdx-components.tsx
import defaultMdxComponents from 'fumadocs-ui/mdx';
import * as ObsidianComponents from 'fumadocs-obsidian/ui';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultMdxComponents,
    ...ObsidianComponents,
    ...components,
  };
}

How is this guide?

Last updated on

On this page