AsyncAPI

Installation

npm i @fumadocs/asyncapi shiki

Import the CSS preset in src/app.css:

src/app.css

@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";
@import "fumapress/css/preset.css";
@import "@fumadocs/asyncapi/css/preset.css";

Configure the plugin:

press.config.tsx

import { defineConfig } from "fumapress";
import { defineDocs } from "fumadocs-mdx/macro";
import path from "node:path";
import { createAsyncAPI } from "@fumadocs/asyncapi/server";
import { asyncapiPlugin } from "fumapress/plugins/asyncapi";

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

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

export default defineConfig({
  content: {
    docs: docs.toFumadocsSource(),
    asyncapi: await asyncapi.staticSource(),
  },
})
  // fumapress plugin
  .plugins(asyncapiPlugin({ server: asyncapi }));

Update the path/URL to your AsyncAPI spec (e.g. ./asyncapi.yaml), the API pages will be automatically generated based on your spec.

Options

You can see Fumadocs AsyncAPI for details of advanced options.

`asyncapi.staticSource()`

It support a subset of options from generateFiles().

How to customize its output file structure?

It accepts a baseDir option. For example, the following will generate all API pages under the (asyncapi) folder:

press.config.tsx

import { defineConfig } from "fumapress";
import { defineDocs } from "fumadocs-mdx/macro";

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

export default defineConfig({
  content: {
    docs: docs.toFumadocsSource(),
    asyncapi: await asyncapi.staticSource({
      baseDir: "(asyncapi)",
    }),
  },
});

Client UI

Create the renderer for API pages explicitly:

src/components/asyncapi.tsx

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

export const AsyncAPIPage = createAsyncAPIPage();

And import it from the AsyncAPI plugin:

press.config.tsx

import { AsyncAPIPage } from "./src/components/asyncapi";

export default defineConfig({
  // ...
}).plugins(
  asyncapiPlugin({
    server: asyncapi,
    ClientAPIPage: AsyncAPIPage,
  }),
);

AsyncAPI

Installation

Options

asyncapi.staticSource()

Client UI

On this page

`asyncapi.staticSource()`