Layouts

Overview

Layouts are page renderers. They decide how a content page is wrapped, how the page body is rendered, and which UI pieces like sidebar, table of contents, navbar, and footer are shown.

Fumapress uses the docs layout by default. Pick another layout when a page needs a different reading experience, or switch between layouts per page with your own renderer.

Docs Layout

For documentation pages with sidebar navigation, table of contents, page title, and page metadata.

Notebook Layout

For reference-style pages that keep docs features with the notebook appearance from Fumadocs UI.

Glass Layout

For docs pages with the glass appearance from Fumadocs UI, where sidebar and header are shown as floating translucent panels.

Home Layout

For standalone pages that need the shared navbar and layout props without docs page chrome.

Shared Props

Define defaultLayoutProps to share props across Fumadocs layouts. These props are merged into layouts that inherit default props, such as docs, notebook, and home layouts:

press.config.tsx

import { defineConfig } from "fumapress";

export default defineConfig({
  // ...
  defaultLayoutProps: {
    nav: {
      title: "My Docs",
    },
    links: [
      {
        text: "GitHub",
        url: "https://github.com/acme/docs",
      },
    ],
  },
});

Switching Layouts

renderPage is just a function that returns JSX node. To switch between layouts for every page, create typed layout components and forward props to the one you want:

press.config.tsx

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

const DocsPage = createDocsLayoutPage<typeof config.$context>();
const NotebookPage = createNotebookLayoutPage<typeof config.$context>();

const config = defineConfig({
  // ...
  renderPage: (props) => {
    if (props.page.path.startsWith("reference/")) {
      return <NotebookPage {...props} />;
    }

    return <DocsPage {...props} />;
  },
});

export default config;

File-based Layouts

File-based routes in src/pages use Waku's file-based routing model. Use _layout.tsx files to apply layouts on children routes.

Define & export layouts:

press.config.tsx

import { defineConfig } from "fumapress";
import { createHomeLayout } from "fumapress/layouts/home";

const config = defineConfig({
  // ...
});

export const HomeLayout = createHomeLayout<typeof config.$context>();

export default config;

To apply HomeLayout on all file-based routes under /:

src/pages/_layout.tsx

export { HomeLayout as default } from "../../press.config";

Layouts

Overview

Docs Layout

Notebook Layout

Glass Layout

Home Layout

Shared Props

Switching Layouts

File-based Layouts

On this page