createAsyncAPIPage()
The component for rendering AsyncAPI docs content
Overview
Fumadocs AsyncAPI uses a <AsyncAPIPage /> component to render page contents, it should be a client component.
'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.
'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.
'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:
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.
'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.
'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>;
},
},
});How is this guide?