OpenAPIDesigner 是一款开源的 OpenAPI 3.0 规范可视化设计工具，支持创建、编辑和验证接口文档。
- 可视化 API 规范设计器
- 实时 OpenAPI 模式验证
- 多框架集成支持（Vue/React/原生JS）
- 双语界面支持（英文/中文）
- 动态 API 文档预览
npm install open-api-designer<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="module" src="your-entry-file.js"></script>
</head>
<body>
<div class="openapi-container"></div></div>
</body>
</html>import OpenApiDesigner from 'open-api-designer';
import 'open-api-designer/style.css';
const initialSpec = {
openapi: "3.0.1",
info: {
title: "API 服务",
version: "1.0.0"
}
};
const designer = new OpenApiDesigner('.openapi-container', {
language: 'en', // 'en' | 'zh_CN' (默认: 'en')
openApiDoc: initialSpec
});import { useEffect } from 'react';
import OpenApiDesigner from 'open-api-designer';
import 'open-api-designer/style.css';
export default function ApiDesigner() {
useEffect(() => {
new OpenApiDesigner('.designer-container', {
openApiDoc: {} // 你的OpenAPI规范
});
}, []);
return ;
}import { onMounted } from 'vue';
import OpenApiDesigner from 'open-api-designer';
import 'open-api-designer/style.css';
onMounted(() => {
new OpenApiDesigner('.designer-container', {
language: 'zh_CN',
openApiDoc: {} // 你的OpenAPI规范
});
});| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
element |
string | - | 容器元素CSS选择器 |
language |
string | 'en' | 界面语言（en/zh_CN） |
openApiDoc |
object | {} | 初始OpenAPI规范 |
onMountedCallback |
function | - | 初始化完成后的回调函数 |
| 方法 | 说明 |
|---|---|
getDocApi() |
获取当前OpenAPI JSON规范 |
updateData() |
更新规范数据 |
npm run build
npm run demo
> [email protected] demo
> http-server -p 8080 & open http://127.0.0.1:8080/demo/index.html访问 http://127.0.0.1:8080/demo/index.html 查看演示
基于 GPLv3 协议授权。