OpenAPI

You can setup Fumadocs OpenAPI manually, or use Fumadocs CLI.

Auto Setup

Using Fumadocs CLI.

pnpm fumadocs init openapi

Manual Setup

Install the required packages.

npm install fumadocs-openapi shiki

Generate Styles

The interactive UI of OpenAPI integration is styled with Tailwind CSS, it doesn't include a pre-built stylesheet by default. You must use it in conjunction with the official Tailwind CSS plugin.

Add the package to content under your Tailwind CSS configuration.

import { createPreset } from 'fumadocs-ui/tailwind-plugin';
 
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './node_modules/fumadocs-ui/dist/**/*.js',
    './node_modules/fumadocs-openapi/dist/**/*.js',
  ],
  presets: [createPreset()],
};

Configure Pages

Create an OpenAPI instance on the server. Fumadocs OpenAPI renders the pages on server-side.

import { createOpenAPI } from 'fumadocs-openapi/server';
 
export const openapi = createOpenAPI({
  // options
});

Add APIPage to your MDX Components, so that you can use it in MDX files.

import defaultComponents from 'fumadocs-ui/mdx';
import { openapi } from '@/lib/source';
 
<MDX
  components={{
    ...defaultComponents,
    APIPage: openapi.APIPage,
  }}
/>;

Generate Files

You can generate MDX files directly from your OpenAPI schema.

Create a script:

import { generateFiles } from 'fumadocs-openapi';
 
void generateFiles({
  input: ['./unkey.json'], // the OpenAPI schemas
  output: './content/docs',
});

Generate docs with the script:

node ./scripts/generate-docs.mjs

Generate Page Tree

You can add the attachFile to decorate the page tree with Source API.

It adds a badge to each page item.

import { loader } from 'fumadocs-core/source';
import { attachFile } from 'fumadocs-openapi/server';
 
export const utils = loader({
  pageTree: {
    attachFile,
  },
  // other props
});

Features

The official OpenAPI integration supports:

• Basic API endpoint information
• Interactive API playground
• Example code to send request (in different programming languages)
• Response samples and TypeScript definitions
• Request parameters and body generated from schemas

Demo

View demo.