API Docs

Each integration generates pages from your spec, and adds them to your site as a content source. Follow the one you need.

OpenAPI

Generates pages from your spec, with a playground to send requests.

Install

npm i fumadocs-openapi shiki

Add the Styles

Add this after the imports in your stylesheet:

src/app.css

@import "fumadocs-openapi/css/preset.css";

Create the Source

Call createOpenAPI() with your spec, then add its pages as a content source. baseDir sets the URL prefix of the pages.

press.config.tsx

import { createOpenAPI } from "fumadocs-openapi/server";
import openapiPlugin from "fumadocs-openapi/press";

const openapi = createOpenAPI({
  // a path or URL to your spec
  input: ["./openapi.yaml"],
});

export default createPress({
  docs: docsSource,
  openapi: await openapi.staticSource({ baseDir: "docs/api" }),
}).plugins(openapiPlugin({ server: openapi }));

staticSource() also takes options of generateFiles(). See Fumadocs OpenAPI for all options.

Page Customization

To set the options of the page, like shiki, create the renderer yourself and pass it to the plugin:

"use client";
import { createOpenAPIPage } from "fumadocs-openapi/ui";

export const OpenAPIPage = createOpenAPIPage();

Proxy

A browser can't call an API that blocks cross-origin requests. A proxy sends playground requests through your site, so the site needs a server.

press.config.tsx

const openapi = createOpenAPI({
  input: ["./openapi.yaml"],
  proxyUrl: "/_proxy", 
});

openapiPlugin({
  server: openapi,
  createProxy: {
    allowedOrigins: ["https://example.com"],
  },
});

Set allowedOrigins

The proxy forwards headers and bodies from the playground, including cookies and Authorization. createProxy: true leaves origins open, and an open proxy can be abused to call any origin.

AsyncAPI

Generates pages from your spec.

Install

npm i @fumadocs/asyncapi shiki

Add the Styles

Add this after the imports in your stylesheet:

src/app.css

@import "@fumadocs/asyncapi/css/preset.css";

Create the Source

press.config.tsx

import { createAsyncAPI } from "@fumadocs/asyncapi/server";
import asyncapiPlugin from "@fumadocs/asyncapi/press";

const asyncapi = createAsyncAPI({
  // a path or URL to your spec
  input: ["./asyncapi.yaml"],
});

export default createPress({
  docs: docsSource,
  asyncapi: await asyncapi.staticSource({ baseDir: "docs/events" }),
}).plugins(asyncapiPlugin({ server: asyncapi }));

staticSource() also takes options of generateFiles(). See Fumadocs AsyncAPI for all options.

Page Customization

To set the options of the page, create the renderer yourself and pass it to the plugin:

"use client";
import { createAsyncAPIPage } from "@fumadocs/asyncapi/ui";

export const AsyncAPIPage = createAsyncAPIPage();

GraphQL

Generates pages from your schema, grouped in folders by kind, like queries/ and objects/.

Install

npm i @fumadocs/graphql

Add the Styles

Add this after the imports in your stylesheet:

src/app.css

@import "@fumadocs/graphql/css/preset.css";

Create the Source

press.config.tsx

import { createGraphQL } from "@fumadocs/graphql/server";
import graphqlPlugin from "@fumadocs/graphql/press";

const graphql = createGraphQL({
  // SDL files or URLs, SDL text, introspection results or a `GraphQLSchema`
  input: ["./schema.graphql"],
});

export default createPress({
  docs: docsSource,
  graphql: await graphql.staticSource({ baseDir: "docs/graphql" }),
}).plugins(graphqlPlugin({ server: graphql }));

See Fumadocs GraphQL for all options.

Playground

Create the renderer yourself and pass it to the plugin. url is your GraphQL endpoint.

"use client";
import { createGraphQLPage } from "@fumadocs/graphql/ui";

export const GraphQLPage = createGraphQLPage({
  playground: {
    url: "https://api.example.com/graphql",
  },
});

Links aren't localized

With internationalization, resolve links generated from the schema with the typeLinks and operationLinks options of createGraphQLPage().

API Docs

OpenAPICopy Anchor Link

InstallCopy Anchor Link

Add the StylesCopy Anchor Link

Create the SourceCopy Anchor Link

Page CustomizationCopy Anchor Link

ProxyCopy Anchor Link

AsyncAPICopy Anchor Link

InstallCopy Anchor Link

Add the StylesCopy Anchor Link

Create the SourceCopy Anchor Link

Page CustomizationCopy Anchor Link

GraphQLCopy Anchor Link

InstallCopy Anchor Link

Add the StylesCopy Anchor Link

Create the SourceCopy Anchor Link

PlaygroundCopy Anchor Link

On this page

OpenAPI

Install

Add the Styles

Create the Source

Page Customization

Proxy

AsyncAPI

Install

Add the Styles

Create the Source

Page Customization

GraphQL

Install

Add the Styles

Create the Source

Playground