@soft-chen/api-reference
v0.0.3
Published
Generate beautiful API references from OpenAPI documents
Maintainers
xiaojiang666Readme
Soft Chen API Reference
Interactive API Reference from OpenAPI/Swagger documents.
CDN
<!doctype html>
<html lang="zh-CN">
<head>
<title>Soft Chen API Reference</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/@soft-chen/api-reference"></script>
<script>
SoftChen.createApiReference('#app', {
configuration: {
url: 'https://petstore3.swagger.io/api/v3/openapi.json',
poweredByScalar: false,
agent: {
disabled: true,
},
},
i18n: {
locale: 'zh-CN',
},
})
</script>
</body>
</html>window.Scalar.createApiReference is still available as a compatibility alias.
Common configuration
Chinese configuration reference:
Hide the sidebar branding link:
SoftChen.createApiReference('#app', {
url: '/openapi.json',
poweredByScalar: false,
})Replace the sidebar branding link:
SoftChen.createApiReference('#app', {
url: '/openapi.json',
poweredByScalar: {
label: 'Powered by Soft Chen',
url: 'https://gitee.com/soft-chen',
},
})Set the default language to Chinese. The component also syncs
document.documentElement.lang and renders a language toggle next to the dark
mode toggle:
SoftChen.createApiReference('#app', {
configuration: {
url: '/openapi.json',
},
i18n: {
locale: 'zh-CN',
},
})Hide Ask AI:
SoftChen.createApiReference('#app', {
url: '/openapi.json',
agent: {
disabled: true,
},
})Hide MCP:
SoftChen.createApiReference('#app', {
url: '/openapi.json',
mcp: {
disabled: true,
},
})Local development
- ESM playground:
pnpm playground:esm - Vue + Vite playground:
pnpm playground:vue
License
MIT