Notebook Layout

Overview

Use the notebook layout for reference pages that should keep docs features, but use the notebook appearance from Fumadocs UI.

It is a good fit for API references, generated content, or dense technical pages where the notebook style is easier to scan than the default docs page.

Config

Define the layout and pass it through renderPage.

press.config.tsx

import { defineConfig } from "fumapress";
import { createNotebookLayoutPage } from "fumapress/layouts/notebook";

const NotebookLayout = createNotebookLayoutPage<typeof config.$context>();

const config = defineConfig({
  // ...
  renderPage: (props) => <NotebookLayout {...props} />,
});

export default config;

The notebook layout accepts the same kind of render option as the docs layout:

press.config.tsx

import { defineConfig } from "fumapress";
import { createNotebookLayoutPage } from "fumapress/layouts/notebook";

const NotebookLayout = createNotebookLayoutPage<typeof config.$context>({
  async render(page) {
    return {
      pageProps: {
        full: true,
      },
    };
  },
});

const config = defineConfig({
  // ...
  renderPage: (props) => <NotebookLayout {...props} />,
});

export default config;

The render function can return page props, layout props, markdown URL, last modified date, or a custom body.

Other options, such as treeRoot and interceptors, work the same as in the docs layout.

Notebook Layout

OverviewCopy Anchor Link

ConfigCopy Anchor Link

On this page

Overview

Config