Obsidian

Fumapress renders your vault with its wikilinks, embeds, callouts, block IDs and comments.

For a working project, see examples/obsidian.

SetupCopy Anchor Link

npm i fumadocs-obsidian

@import "fumadocs-obsidian/css/preset.css";

import { obsidian } from "fumadocs-obsidian";
import obsidianPlugin from "fumadocs-obsidian/press";

const vault = obsidian({
  dir: "public/vault",
  url: (file) => `/vault/${file}`,
});

const plugin = obsidianPlugin({ vault }); 

export default createPress(vault.dynamicSource()).plugins(plugin);

Content UpdatesCopy Anchor Link

Fumapress reads your vault once. To see changes, use hot reload on the dev server, and refresh the content on a deployed site.

Hot ReloadCopy Anchor Link

The dev server doesn't watch the vault by default. Add the Vite plugin, then connect your vault:

import { localContentPlugin } from "fumadocs-obsidian/dev/vite"; 

export default defineConfig({
  plugins: [
    press(),
    localContentPlugin(), 
    tailwindcss(),
  ],
});

Refreshing ContentCopy Anchor Link

The source is read once, so new content doesn't appear on its own. Choose when to read it again:

createPress(source, {
  alwaysRevalidate: true, 
});

Reading on every request works for low traffic. On a busier site, call the webhook when your content changes.

ComponentsCopy Anchor Link

Pass the Fumadocs UI defaults along with your own components, since components replaces the defaults:

import defaultMdxComponents from "fumadocs-ui/mdx";

obsidianPlugin({
  vault,
  components: {
    ...defaultMdxComponents,
    img: (props) => <img {...props} className="rounded-xl" />,
  },
});

OptionsCopy Anchor Link

For schemas and remark or rehype plugins, like Mermaid and math, see the Fumadocs Obsidian integration.