OpenAPI

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

Auto Setup

Using Fumadocs CLI.

# install the CLI package, if you haven't installed it yet
npm install @fumadocs/cli --save-dev
 
npx 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. You must use it with Tailwind CSS configured.

Add the package to @source in your Tailwind CSS configuration.

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
 
@source '../node_modules/fumadocs-ui/dist/**/*.js';
@source '../node_modules/fumadocs-openapi/dist/**/*.js';

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.