---
title: Loader Plugins
description: Extend Loader API
---

## Overview

Loader plugins can extend `loader()` to customize its output.

A list of built-in plugins:

- **Lucide Icons**: use icons from [Lucide React](https://lucide.dev) (require `lucide-react` to be installed).

  ```ts
  import { loader } from 'fumadocs-core/source';
  import { lucideIconsPlugin } from 'fumadocs-core/source/lucide-icons';

  export const source = loader({
    // ...
    plugins: [lucideIconsPlugin()],
  });
  ```

## Creating Plugins

Each plugin is an object:

```ts tab="Strictly Typed"
import { loader } from 'fumadocs-core/source';

export const source = loader({
  plugins: ({ typedPlugin }) => [
    typedPlugin({
      // plugin config
    }),
  ],
});
```

```ts tab="Simple"
import { loader, type LoaderPlugin } from 'fumadocs-core/source';

export const source = loader({
  plugins: [myPlugin()],
});

function myPlugin(): LoaderPlugin {
  return {
    // plugin config
  };
}
```

<Callout title="Good to know">

`typedPlugin` enforces a more accurate type for plugin, including custom properties from your content source.

But to make the plugin reusable (across different loaders), use the `LoaderPlugin` type instead.

</Callout>

### Storage

During the process, your input source files will be parsed and form a virtual storage in memory.

To perform virtual file-system operations before processing, you can hook `transformStorage`.

```ts
import { loader } from 'fumadocs-core/source';

export const source = loader({
  plugins: ({ typedPlugin }) => [
    typedPlugin({
      transformStorage({ storage }) {
        storage.read('my/path');
      },
    }),
  ],
});
```

### Page Tree

The page tree is generated from your file system, some unnecessary information (e.g. unused frontmatter properties) will be filtered.

You can customize it using the `transformPageTree`, such as attaching custom properties to nodes, or customising the display name of pages.

```tsx
import { loader } from 'fumadocs-core/source';

export const source = loader({
  plugins: ({ typedPlugin }) => [
    typedPlugin({
      transformPageTree: {
        file(node, file) {
          // access the original (unfiltered) file data
          if (file) console.log(this.storage.read(file));

          // modify nodes
          node.name = <>Some JSX Nodes here</>;
          return node;
        },
      },
    }),
  ],
});
```
