{"id":13820835,"url":"https://github.com/rookie-luochao/openapi-ui","last_synced_at":"2025-05-14T22:08:03.570Z","repository":{"id":213669527,"uuid":"733969338","full_name":"rookie-luochao/openapi-ui","owner":"rookie-luochao","description":"OpenAPI/Swagger UI document, quickly generate mock params and call api, also simplified postman tool.   基于 OpenAPI/Swagger 规范的接口文档，快速模拟请求参数并调用接口，也是简化版 postman 工具，欢迎提功能请求、bug","archived":false,"fork":false,"pushed_at":"2025-05-02T15:55:50.000Z","size":12809,"stargazers_count":686,"open_issues_count":8,"forks_count":63,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-02T16:52:35.986Z","etag":null,"topics":["api-documentation","oasv3","openapi","openapi-specification","openapi-ui","openapi3","openapi31","openapiui","postman","swagger","swagger-ui","swagger2"],"latest_commit_sha":null,"homepage":"https://openapi-ui.vercel.app/service/findPetsByStatus?serviceURL=https%3A%2F%2Fpetstore3.swagger.io%2Fapi%2Fv3%2Fopenapi.json\u0026importModeType=url","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rookie-luochao.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-12-20T14:51:12.000Z","updated_at":"2025-05-02T15:55:48.000Z","dependencies_parsed_at":"2024-05-19T16:29:50.254Z","dependency_job_id":"fce111fb-592c-4b70-89cb-c5e6abe6dfba","html_url":"https://github.com/rookie-luochao/openapi-ui","commit_stats":{"total_commits":393,"total_committers":5,"mean_commits":78.6,"dds":0.4936386768447837,"last_synced_commit":"13471e2e83446929e37933d55c63cbb5dec7a57a"},"previous_names":["rookie-luochao/openapi-ui"],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rookie-luochao%2Fopenapi-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rookie-luochao%2Fopenapi-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rookie-luochao%2Fopenapi-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rookie-luochao%2Fopenapi-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rookie-luochao","download_url":"https://codeload.github.com/rookie-luochao/openapi-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254235696,"owners_count":22036963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-documentation","oasv3","openapi","openapi-specification","openapi-ui","openapi3","openapi31","openapiui","postman","swagger","swagger-ui","swagger2"],"created_at":"2024-08-04T08:01:09.988Z","updated_at":"2025-05-14T22:07:58.556Z","avatar_url":"https://github.com/rookie-luochao.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  OpenAPI UI\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n比 Swagger-UI 更好用、更美观的 OpenAPI-UI 接口文档，可以快速的生成模拟请求参数并调用 API 请求，也是简化版的 postman 工具\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/rookie-luochao/openapi-ui/blob/master/LICENSE\"\u003e\n    \u003cimg alt=\"License\" src=\"https://img.shields.io/github/license/rookie-luochao/openapi-ui\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/rookie-luochao/openapi-ui/releases\"\u003e\n    \u003cimg alt=\"Release (latest by date)\" src=\"https://img.shields.io/github/v/release/rookie-luochao/openapi-ui\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/openapi-ui-dist\"\u003e\n    \u003cimg alt=\"npm openapi-ui package\" src=\"https://img.shields.io/npm/v/openapi-ui-dist.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/rookie-luochao/openapi-ui/actions/workflows/release-ci.yml\"\u003e\n    \u003cimg alt=\"build\" src=\"https://img.shields.io/github/actions/workflow/status/rookie-luochao/openapi-ui/release-ci.yml\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://react.dev\"\u003e\n    \u003cimg alt=\"framework\" src=\"https://img.shields.io/badge/framework-react-brightgreen\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch4 align=\"center\"\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://github.com/rookie-luochao/openapi-ui/blob/master/README.md\"\u003eEnglish\u003c/a\u003e |\n    \u003cb\u003e简体中文\u003c/b\u003e\n  \u003c/p\u003e\n\u003c/h4\u003e\n\n## 截图\n\u003cdiv style=\"display:flex\"\u003e\n  \u003ca href=\"https://github.com/rookie-luochao/openapi-ui/blob/master/src/assets/screen-shot/openapi-view.png\" style=\"width:50%\"\u003e\n    \u003cimg alt=\"openapi\" src=\"./src/assets/screen-shot/openapi-view.png\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/rookie-luochao/openapi-ui/blob/master/src/assets/screen-shot/openapi-view2.png\" style=\"width:50%\"\u003e\n    \u003cimg alt=\"openapi\" src=\"./src/assets/screen-shot/openapi-view2.png\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003ca href=\"https://github.com/rookie-luochao/openapi-ui/blob/master/src/assets/screen-shot/postman-view.png\"\u003e\n  \u003cimg alt=\"postman\" src=\"./src/assets/screen-shot/postman-view.png\"\u003e\n\u003c/a\u003e\n\n## 网站域名\n* CN: [www.openapi-ui.com](https://www.openapi-ui.com)，支持http、https\n* US: [doc.openapi-ui.com](https://doc.openapi-ui.com)\n* US2: [docs.openapi-ui.com](https://docs.openapi-ui.com)\n\n## 使用方法\n### CDN接入\n`spec-url` 为 `完整路径`\n\n```tsx\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003eopenAPI UI\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"openapi-ui-container\" spec-url=\"https://petstore3.swagger.io/api/v3/openapi.json\" theme=\"light\"\u003e\u003c/div\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/openapi-ui-dist@latest/lib/openapi-ui.umd.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n`spec-url` 为 `路径`\n\n```tsx\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003eopenAPI UI\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"openapi-ui-container\" spec-url=\"/openapi.json\" theme=\"dark\"\u003e\u003c/div\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/openapi-ui-dist@latest/lib/openapi-ui.umd.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### React接入(或者 Vue接入)\n```tsx\nimport { useEffect } from \"react\";\n\nconst SetUpOpenApiUI = () =\u003e {\n  useEffect(() =\u003e {\n    import(\"openapi-ui-dist\")\n  }, []);\n\n  return (\n    \u003cdiv id=\"openapi-ui-container\" spec-url=\"https://petstore3.swagger.io/api/v3/openapi.json\" theme=\"light\" /\u003e\n  );\n}\n\nexport const openapiRoutes = {\n  path: \"/openapi\",\n  id: \"openapi\",\n  element: \u003cSetUpOpenApiUI /\u003e,\n};\n```\n### Golang后端框架接入\n- [go-openapi-ui](https://github.com/rookie-luochao/go-openapi-ui)\n\n### Nodejs后端框架接入\n- [nodejs-openapi-ui](https://github.com/openapi-ui/nodejs-openapi-ui)\n\n## 快速开始\n```bash\n# node version \u003e= 18\n# 下载依赖包\npnpm install\n# or make install\n\n# 启动\nnpm run dev\n# or make dev\n```\n\n## 其他命令\n```bash\n# 打包构建\nnpm run build\n# or make build\n\n# 生成docker镜像\nmake docker-build\n\n# 运行docker镜像\nmake docker-run\n\n# 生成docker镜像，并且运行docker镜像\nmake docker-build-run\n```\n\n## 支持的数据格式\n* swagger2.json/swagger2.yml\n* openapi3.json/openapi3.yml\n\n## 使用方法\n* 输入 swagger2/openapi3 的网关地址, 重新刷新页面就可以更新接口\n* 上传 swagger2/openapi3 文件\n* 输入 swagger2/openapi3 文本\n\n## 全局配置\n* 支持配置接口请求超时时间，默认的接口请求超时时间为 2 分钟\n* 支持配置接口请求Authorization，可以在当前接口覆写Authorization\n\n## 分享URL\n* 只有通过 url 模式导入才可以分享链接\n* 拷贝链接分享给需要的人，他们可以通过 url 回显到指定接口\n\n## 模拟接口请求数据\n1. 如果 openapi 接口请求参数 schema 定义了 format 字段，则使用 [openapi-sampler](https://github.com/Redocly/openapi-sampler) 去生成模拟请求参数\n2. 如果 openapi 接口请求参数 schema 没有定义 format 字段, 则使用 faker 去生成模拟请求参数\n\n## 接口请求错误信息展示规则\n1. 如果返回的结构体含有 message 字段，则展示 message 字段\n2. 如果返回的结构体含有 msg 字段，则展示 msg 字段\n3. 如果返回的结果是字符串，则展示字符串\n4. 展示 AxiosResponse.statusText 类型对应的字段\n5. 展示 AxiosError.message 类型对应的字段\n\n## 连接内网api\n* 如果不能连接内网api, 你可以在本地运行此项目或者使用 docker 在本地或者服务器部署此项目\n\n## 同时查看多个api网关\n* 默认的缓存策略是session storage, 可以同时打开多个页面去查看多个 api 网关\n\n## Docker部署，支持环境变量注入\n```bash\n# 拉取 Docker 镜像\ndocker pull ghcr.io/rookie-luochao/openapi-ui:latest\n\n# 启动容器，nginx反向代理可自定义端口，例如：docker run -d -p 8081:80 ghcr.io/rookie-luochao/openapi-ui:latest\ndocker run -d -p 80:80 -e APP_CONFIG=env=zh,appNameZH=简洁美观的接口文档 ghcr.io/rookie-luochao/openapi-ui:latest\n```\n\n## node版本\nnode \u003e= 18","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frookie-luochao%2Fopenapi-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frookie-luochao%2Fopenapi-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frookie-luochao%2Fopenapi-ui/lists"}