createOpenAPIPage()
The component for rendering OpenAPI docs content
Overview
Fumadocs OpenAPI uses a <OpenAPIPage /> component to render page contents, it should be a client component.
'use client';
import { createOpenAPIPage } from 'fumadocs-openapi/ui';
export const OpenAPIPage = createOpenAPIPage({
// config
});Generate Code Usages
Generate code usage examples for each API endpoint.
'use client';
import { } from 'fumadocs-openapi/ui';
import {
,
type ,
} from 'fumadocs-openapi/requests/generators';
import { } from 'fumadocs-openapi/requests/generators/all';
const = ();
// include defaults
();
// add custom generators
.('custom-id', {
: 'My Example',
: 'js',
(, { }) {
// request data
.();
return 'const response = "hello world";';
},
});
export const = ({
,
});In addition, you can also specify code samples via OpenAPI schema.
paths:
/plants:
get:
x-codeSamples:
- lang: js
label: JavaScript SDK
source: |
const planter = require('planter');
planter.list({ unwatered: true });Internationalization
Assuming you have configured Internationalization at UI level:
import { defineI18n } from 'fumadocs-core/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';
import { openapiTranslations } from 'fumadocs-openapi/i18n';
const i18n = defineI18n({
languages: ['en', 'cn'],
defaultLanguage: 'en',
});
export const translations = i18n
.translations()
.extend(uiTranslations())
.extend(openapiTranslations())
.add({
cn: {
displayName: 'Chinese',
'Body(playground)': '請求正文',
},
});See Translations for more details.
Media Adapters
You can create a media adapter to support other media types in API pages, a media adapter implements:
- Converting value into
fetch()body compatible with corresponding media type. - Generate code example based on different programming language/tool.
'use client';
import { } from 'fumadocs-openapi/ui';
import type { MediaAdapter } from 'fumadocs-openapi';
const : <string, MediaAdapter> = {
// example: custom `application/json
'application/json': {
() {
return .(.);
},
// returns code that inits a `body` variable, used for request body
(, ) {
if (. === 'js') {
return `const body = "hello world"`;
}
if (. === 'python') {
return `body = "hello world"`;
}
if (. === 'go' && 'addImport' in ) {
.('strings');
return `body := strings.NewReader("hello world")`;
}
},
},
};
export const = ({
,
});How is this guide?