createAsyncAPIPage()

Overview

Fumadocs AsyncAPI uses a <AsyncAPIPage /> component to render page contents, it should be a client component.

components/api-page.tsx

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

export const AsyncAPIPage = createAsyncAPIPage({
  // config
});

Custom Layout

You can customize how operations and message examples are laid out.

components/api-page.tsx

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

export const AsyncAPIPage = createAsyncAPIPage({
  content: {
    renderOperationLayout(slots) {
      return (
        <div className="flex flex-col gap-6">
          {slots.header}
          {slots.description}
          {slots.channel}
          {slots.messages}
          {slots.messageExamples}
        </div>
      );
    },
  },
});

Schema UI

Customize how JSON schemas are rendered, or disable schema examples.

components/api-page.tsx

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

export const AsyncAPIPage = createAsyncAPIPage({
  schemaUI: {
    showExample: true,
    render(options, ctx) {
      // fully custom schema renderer
      return ctx.SchemaUI(options);
    },
  },
});

Internationalization

Assuming you have configured Internationalization at UI level:

layout.shared.tsx

import { defineI18n } from 'fumadocs-core/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';
import { asyncapiTranslations } from '@fumadocs/asyncapi/i18n';

const i18n = defineI18n({
  languages: ['en', 'cn'],
  defaultLanguage: 'en',
});

export const translations = i18n
  .translations()
  .extend(uiTranslations())
  .extend(asyncapiTranslations())
  .add({
    cn: {
      displayName: 'Chinese'
      'Messages(operation page)': '消息',
      },
  })

See Translations for more details.

Syntax Highlighting

AsyncAPI pages use Shiki for code blocks. You can customize the highlighter and themes.

components/api-page.tsx

'use client';
import { createAsyncAPIPage } from '@fumadocs/asyncapi/ui';
import { defaultShikiFactory } from 'fumadocs-core/highlight/shiki/full';

export const AsyncAPIPage = createAsyncAPIPage({
  shiki: defaultShikiFactory,
  shikiOptions: {
    themes: {
      light: 'github-light',
      dark: 'github-dark',
    },
  },
});

Custom Components

Override the default heading and code block components.

components/api-page.tsx

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

export const AsyncAPIPage = createAsyncAPIPage({
  components: {
    Heading({ id, depth, ...props }) {
      const Tag = `h${depth}` as const;
      return <Tag id={id} {...props} />;
    },
    CodeBlock({ lang, code }) {
      return <pre data-lang={lang}>{code}</pre>;
    },
  },
});

Customise UI

For customisations beyond the available options, you can install the UI into your codebase with Fumadocs CLI.

Full UI

The entire UI of API pages, built on the headless layer.

npx @fumadocs/cli add fumadocs/asyncapi/page

It installs <AsyncAPIPage /> itself, your components/api-page.tsx is no longer needed.

mdx-components.tsx

import { AsyncAPIPage } from '@/components/api-page';
import { AsyncAPIPage } from '@/components/asyncapi/page';

Operation

The UI of a single operation, including its channel, messages and bindings.

npx @fumadocs/cli add fumadocs/asyncapi/operation

components/api-page.tsx

'use client';
import { createAsyncAPIPage } from '@fumadocs/asyncapi/ui';
import { Operation } from '@/components/asyncapi/operation';

export const AsyncAPIPage = createAsyncAPIPage({
  components: {
    Operation,
  },
});

Schema UI

The UI of JSON schemas, shared with the other API integrations.

npx @fumadocs/cli add fumadocs/api-docs/schema

components/api-page.tsx

'use client';
import { createAsyncAPIPage } from '@fumadocs/asyncapi/ui';
import { Schema } from '@/components/api/schema';

export const AsyncAPIPage = createAsyncAPIPage({
  components: {
    SchemaUI: Schema,
  },
});

createAsyncAPIPage()

On this page