首页

SwaggerJSON渲染

在线Swagger JSON渲染工具，支持Swagger 2.0与OpenAPI 3.0规范，粘贴JSON即可生成交互式Swagger UI文档预览。无需部署Swagger UI服务端，即可查看接口列表、参数定义、请求响应示例，适用于API文档评审、接口展示与团队协作分享。

渲染次数
0
成功次数
0
失败次数
0
接口数
0
渲染配置
Swagger/OpenAPI 规范
Swagger UI 预览
正在生成 Swagger UI 预览页面...
渲染完成后，交互式 Swagger UI 将在此显示...
输入 Swagger JSON 后点击「渲染预览」

功能特性

交互式Swagger UI

渲染为官方Swagger UI 5.x，支持展开折叠接口、查看参数Schema、Try It Out在线调用、下载规范文件。

规范格式校验

粘贴JSON后后端自动校验Swagger 2.0或OpenAPI 3.0规范字段，格式错误时即时提示，确保渲染结果准确。

双版本规范支持

同时支持Swagger 2.0与OpenAPI 3.0/3.1规范，新版Swagger UI渲染器自动识别并兼容历史文档。

Try It Out 在线调用

渲染结果启用Try It Out与持久化授权（PersistAuthorization），输入授权Header即可直接发起接口调用。

新窗口分享

生成的预览页为独立HTML，支持在新窗口打开、复制链接分享给团队成员评审与调试。

接口搜索过滤

内置Swagger UI Filter搜索框、DeepLinking深链接锚点，快速定位目标接口并保留滚动位置。

使用说明

如何使用Swagger JSON渲染工具？

  • 选择「OpenAPI 版本」：Swagger 2.0 或 OpenAPI 3.0（根据规范版本选择，3.x 均选 3.0）。
  • 在「Swagger/OpenAPI JSON 内容」输入框中粘贴你的规范内容，适合私有规范与本地文档。
  • 点击「示例」按钮可快速填充一份示例 OpenAPI 3.0 JSON，便于体验渲染效果。
  • 点击「渲染预览」按钮，后端生成Swagger UI HTML临时页面，iframe 中显示交互式文档。
  • 渲染成功后可点击「新窗口打开」在独立标签页中查看，或复制URL分享给团队。

Try It Out 在线调用的注意事项

  • 渲染结果默认启用「Try It Out」，需确认 Swagger 规范中的 servers（或 host + basePath）配置可访问。
  • 若目标接口需要鉴权，可在预览页顶部「Authorize」按钮输入 Bearer Token 或 API Key，并开启持久化授权。
  • 预览页通过 Swagger UI CDN 加载，Try It Out 发起的请求受浏览器 CORS 限制；如被拒绝，需确保目标接口允许你当前域名的跨域调用。
  • 若接口部署在内网或本地（localhost），建议使用「粘贴 JSON」并在本地打开预览页尝试。

典型使用场景

  • API文档评审：在代码评审前分享渲染好的Swagger UI，团队成员无需部署项目即可查阅接口。
  • 前后端联调：后端提交Swagger JSON后，前端立刻渲染出完整文档并进行Try It Out联调。
  • 第三方API接入：拿到第三方提供的OpenAPI规范，一键渲染后浏览全部接口信息与参数说明。
  • 技术方案评审：在架构评审会中展示渲染好的API文档，直观讨论接口粒度、命名、版本策略。
  • 历史文档预览：保留的Swagger 2.0/OpenAPI 3.0 JSON文件，无需启动后端即可快速查看。

常见问题

支持哪些Swagger/OpenAPI版本？
支持 Swagger 2.0（含 swagger: "2.0" 字段）与 OpenAPI 3.0 / 3.1（含 openapi: "3.x.x" 字段）。工具使用最新版 Swagger UI 5.x 渲染器，该版本已原生兼容 Swagger 2.0 规范并自动识别。渲染时请在「OpenAPI 版本」下拉框选择对应版本，确保规范与选择一致。
渲染失败提示"JSON内容无效"怎么办？
该错误表示输入的JSON语法不合法或缺少必要字段。请：1）确认JSON语法正确（可用在线JSON校验工具检查逗号、引号、括号匹配与编码）；2）确认根节点包含 openapi 或 swagger 字段以及 paths 对象；3）info、paths 为Swagger规范的必填字段。
预览页iframe内显示空白或加载很慢？
空白通常有以下原因：1）CDN加载失败：Swagger UI 5.x 通过 unpkg CDN 加载 CSS 与 JS，若你的网络环境受限可能加载失败，建议检查浏览器控制台是否有 4xx/5xx 错误；2）规范体积过大：含大量接口的规范在前端首次解析时较慢，通常 10-30 秒内可完成；3）JSON解析错误：若规范含非法字符或结构问题，Swagger UI 会静默失败，建议先用 JSON 校验工具排查。
Try It Out 发起请求失败（CORS/401/403）？
Try It Out 的请求从浏览器直接发出，因此受浏览器同源策略约束。解决方案：1）CORS 问题：请求的接口服务器需配置响应头 Access-Control-Allow-Origin 允许本域名跨域；2）401/403 鉴权：点击预览页顶部「Authorize」输入 Bearer Token 或 API Key，工具已启用 persistAuthorization 会保留；3）HTTPS 混合内容：如果预览页运行在 HTTPS 下，接口地址需是 HTTPS（或本地开发环境），否则浏览器会阻止混合内容。
生成的预览HTML临时文件会保留多久？
生成的预览页面以 GUID 命名保存在服务器 UploadsTmp 临时目录下。为节省空间，生产环境通常会配合定期清理任务（如每日清理7天未访问的文件），若需要长期分享建议将预览页的Swagger JSON下载保存，需要时再次渲染。临时文件的URL在可访问期间可随意分享，无需登录。
本工具是免费的吗？规范数据会被存储吗？
完全免费，无需注册登录。渲染流程中Swagger JSON仅用于单次生成临时的Swagger UI HTML页面，不会用于任何其他用途。生成的预览页面存放于临时目录，仅可通过生成时返回的GUID访问。如涉及高度敏感的接口文档，建议在规范中先对域名、Token示例等脱敏后再进行渲染。