Obsidian

Render an Obsidian vault directly with Fumapress.

The @fumapress/obsidian package connects the runtime source from fumadocs-obsidian to Fumapress. Vault notes are compiled in memory without generating intermediate MDX files, and the renderer stays on the server.

Supported Obsidian syntax includes wikilinks and embeds, callouts, block IDs, and comments.

Installation

Install the integration:

npm i @fumapress/obsidian

Import its Tailwind source after the Fumadocs UI styles:

src/app.css
@import "@fumapress/obsidian/css/preset.css";

Configuration

For a runnable project, see examples/obsidian.

Create the vault source once, pass its dynamic source to Fumapress, and register obsidianPlugin() with the same source:

press.config.tsx
import { obsidian, obsidianPlugin } from "@fumapress/obsidian";
import { defineConfig } from "fumapress";

const vault = obsidian({
  dir: "public/vault",
  // Map attachments to URLs served from the public directory.
  url: (file) => `/vault/${file}`,
});

export default defineConfig({
  content: vault.dynamicSource(),
}).plugins(obsidianPlugin(vault));

page.data.load() compiles a note at most once per vault snapshot. Media files are mapped to URLs and are not read into memory. Ambiguous wikilinks resolve like Obsidian: notes take precedence over attachments, then the shortest path wins.

Development Watching

The Fumapress plugin registers the vault with Vite in development. Add its Vite companion to receive file changes and reload the page:

waku.config.ts
import { obsidianVitePlugin } from "@fumapress/obsidian/vite";
import tailwindcss from "@tailwindcss/vite";
import press from "fumapress/vite";
import { defineConfig } from "waku/config";

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

Because wikilinks and aliases can create cross-file dependencies, a vault change invalidates the source snapshot. Only changed files are read from disk again.

Set watch: false when another process owns invalidation:

obsidianPlugin(vault, { watch: false });

Rendering

The plugin supplies Fumadocs MDX components, Obsidian callout components, and relative-link resolution. Add or replace components through components:

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

The same compiled representation supplies the page body, table of contents, structured search data, and plain text for LLM exports.

Prop

Type

Vault Schema

The source accepts Standard Schema validators for frontmatter and meta.json files. It also supports additional remark and rehype plugins for syntax such as Mermaid and math. See the Fumadocs Obsidian integration guide for the complete source configuration.

Last updated on

On this page