Borrow
DocVal

Fumadocs

How to integrate DocVal with Fumadocs.

Fumadocs

Fumadocs is a documentation framework built on Next.js.

Since Fumadocs supports remark plugins, integrating DocVal is straightforward.

Setup

1. Install DocVal

npm install @borrowdev/docval

2. Add the plugin

In your source.config.ts, add remarkDocVal to the remarkPlugins array:

import { defineConfig, defineDocs } from "fumadocs-mdx/config";
import { remarkDocVal } from "@borrowdev/docval";

export const docs = defineDocs({
  dir: "content",
});

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [() => remarkDocVal()],
  },
});

3. Mark codeblocks for validation

Add the docval keyword to any codeblock you want to validate:

```ts docval
import { something } from "some-package";

console.log(something());
```

Enabling include mode

Once you're ready to validate all codeblocks automatically, pass the include option:

import { defineConfig, defineDocs } from "fumadocs-mdx/config";
import { remarkDocVal } from "@borrowdev/docval";

export const docs = defineDocs({
  dir: "content",
});

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [
      () =>
        remarkDocVal({
          include: true,
        }),
    ],
  },
});

Example: Borrow Documentation

The Borrow documentation itself uses DocVal with Fumadocs. You can see the full configuration in the Borrow source code.

On this page