AsyncAPI

Setup

asyncapiPlugin() renders AsyncAPI pages with the interactive playground.

npm i @fumadocs/asyncapi shiki

Add its styles:

src/styles/global.css

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

Create the AsyncAPI server from your schema:

src/lib/asyncapi.ts

import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  input: ['./asyncapi.yaml'],
});

Add its pages to your source:

src/lib/source.ts

import { getCollection } from 'astro:content';
import { loader } from 'fumadocs-core/source';
import { toFumadocsSource } from '@fumadocs/astro/source';
import { asyncapi } from './asyncapi'; 

export const source = loader({
  source: {
    docs: toFumadocsSource(await getCollection('docs'), await getCollection('meta')),
    asyncapi: await asyncapi.staticSource({ baseDir: 'asyncapi' }), 
  },
  baseUrl: '/docs',
  // adds the direction of messages to each page in the sidebar
  plugins: [asyncapi.loaderPlugin()],
});

It generates a page per operation under /docs/asyncapi, see Generating Pages to customize them. Generated MDX files are not supported, use staticSource() above.

Render them with the plugin:

src/fumadocs.config.ts

import { defineConfig } from '@fumadocs/astro/config';
import { asyncapiPlugin } from '@fumadocs/astro/plugins/asyncapi'; 
import { source } from './lib/source';
import { asyncapi } from './lib/asyncapi'; 

export default defineConfig({
  source,
  plugins: [asyncapiPlugin({ server: asyncapi })], 
});

The plugin serves the documents left out by includeDocument: false, so pages load them once per browser session.

To customize the pages, create <AsyncAPIPage /> with createAsyncAPIPage() and add it to your MDX components, loaded lazily (see Lazy Components).

SetupCopy Anchor Link

On this page

Setup