Turn your Markdown into a documentation site.

Fumapress is a site generator for docs, blogs and API references, offering a polished theme, search and other features with zero configuration.

Quick Start or try it in the playground

原稿The manuscript

Only the writing is left to you.

Each file you write becomes a page, and each folder a chapter in the sidebar. There are no routes to wire and no layouts to keep in step.

When words alone fall short, MDX lets you set a React component between the lines.

丁合Gathering

Publish content from any source as one site.

Keep pages as files in your repository, or fetch them from Notion, Obsidian, Sanity or a source of your own. Fumapress serves each source under its own path.

from Notion

/guides

from Obsidian

/notes

from Sanity

/blog

export default createPress({
  docs: docs.toFumadocsSource({ baseDir: "docs" }),
  guides: notion.dynamicSource({ baseDir: "guides" }),
  // a vault and a Sanity dataset join the same way
}).plugins(notionPlugin({ notion }));

装丁Binding

It looks finished on day one, and stays yours to change.

Every page is built on Fumadocs UI, a design already refined on many documentation sites, with dark mode and phone layouts included. Pick a layout and a color theme, and there is nothing left to design.

When you want your own design, the Fumadocs CLI installs any component or layout into your project, where its source is yours to edit.

付録Appendix

When your docs grow, the site grows with them.

A blog for your news, a changelog for your releases, an AI that answers from your pages, a reference drawn from your API spec. Each is one plugin away.

Turn a content collection into blog posts, an index and tag pages.

press.config.tsx

import { createPress } from "fumapress";
import { blogPlugin } from "@fumapress/blog";
import { defineDocs } from "fumadocs-mdx/macro";

const docs = defineDocs({
  dir: "content/docs",
  docs: { async: true },
});
const blog = defineDocs({
  dir: "content/blog",
  docs: { async: true },
});

export default createPress({
  docs: docs.toFumadocsSource(),
  blog: blog.toFumadocsSource({ baseDir: "blog" }),
}).plugins(blogPlugin({ source: "blog" }));

Read the Blog docs

試し刷りTest print

Try it here before you install anything.

Settings

Appearance

Layout

Theme

Neutral

Features

AI chat

Feedback

OpenAPI

Blog

Changelog

Copy page

Details

Site name

Tabs

Folders

On this page

1import { createPress } from "fumapress";2import { defineDocs } from "fumadocs-mdx/macro";3import { createOpenAPI } from "fumadocs-openapi/server";4import openapiPlugin from "fumadocs-openapi/press";5import { DocsLayout } from "fumadocs-ui/layouts/docs";6import {7  DocsBody,8  DocsDescription,9  DocsPage,10  DocsTitle,11} from "fumadocs-ui/layouts/docs/page";12 13const docs = defineDocs({ dir: "content/docs" });14const openapi = createOpenAPI({ input: ["./openapi.json"] });15 16export default createPress({17  docs: docs.toFumadocsSource(),18  openapi: await openapi.staticSource(),19})20  .plugins(21    openapiPlugin({ server: openapi }),22  )23  .config({24    site: { name: "Acme Docs" },25    ui: {26      renderPage(props) {27        const { renderDefault } = props;28        if (props.type !== "docs" && props.type !== "openapi") return renderDefault();29        const { layoutProps, pageData, toc, body, slots } = props;30 31        return (32          <DocsLayout {...layoutProps}>33            <DocsPage toc={toc} full={pageData.full}>34              <DocsTitle>{pageData.title}</DocsTitle>35              <DocsDescription>{pageData.description}</DocsDescription>36              <div className="flex gap-2">37                {slots["core:markdown"]?.element}38                {slots["core:view-options"]?.element}39              </div>40              <DocsBody>{body}</DocsBody>41            </DocsPage>42          </DocsLayout>43        );44      },45    },46  });

奥付Colophon

Your first page is one command away.

Waku

Quick Start

Custom pages are React Server Components.

Astro