编程导航会员会员
登录/注册

告别丑陋的 Swagger UI，Coco 给你的 Go API 换上优雅新衣

Hello，大家好，这里是小nuo😎。

小nuo在实习的时候发现，Java 中有 Knief4j 渲染 Swagger 方便 Javaer 调试和提供接口给到前端或者测试等人。但是我在使用 Go 的时候发现没有一款让我满意的，所以自己开发了一个。  

先看效果 ✨

coco-light.png

coco-dark.png

现代化、优雅、流畅 - 这才是你 Go 应用程序的 API 文档应有的样子  

你是否也遇到过这些问题？

  通过 swaggo 或者 huma 写完 Go API 后：

  • 😫 Swagger UI 界面丑陋，用户体验差
  • 🤯 如果要自己弄界面，又需要额外部署前端服务，麻烦
  • 😤 如果用 Postman 或者 Apifox 文档和代码分离，维护困难

是时候换一个方案了！  

认识 Coco 🥥

Coco 文档界面 - 亮色主题

 

Coco 是一个专为 Go 开发者打造的 OpenAPI 文档渲染器，让 API 文档变得优雅且易用。  

核心亮点 🌟

  • ⚡ 快速上手 - 三行代码完成集成
  • 🔌 全框架可用 - 支持 Gin、Echo、Fiber、Chi、net/http 等所有框架
  • 🎨 颜值即正义 - Vue 3 + TailwindCSS 精心打磨的界面
  • 🧪 内置测试 - 无需 Postman，文档里直接测试 API
  • 🌓 主题切换 - 深色浅色主题，随心选择
  • 🚀 零依赖集成 - 纯 Go 实现，前端完全内嵌到二进制
  • 🌍 多语言 - 内置中英文，可扩展
  • 📝 请求历史 - 自动保存测试记录  

对比一下

特性Swagger UIReDocCoco
界面美观度⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Go 集成难度中中超简单
依赖项需要前端资源需要前端资源零依赖
API 测试✅❌✅
主题切换❌✅✅
请求历史❌❌✅
部署方式需要额外部署需要额外部署单二进制

快速上手 ⚡

安装

▼
bash
复制代码
go get github.com/leehainuo/coco

基础使用

只需三行代码！

▼
go
复制代码
import "github.com/leehainuo/coco"
 
// 挂载文档路由
mux.Handle("/docs/", coco.New("./openapi.json"))

启动服务，访问 http://localhost:8000/docs/ 就能看到漂亮的文档了！

与 Gin 集成

▼
go
复制代码
package main
 
import (
    "github.com/gin-gonic/gin"
    "github.com/leehainuo/coco"
)
 
func main() {
    r := gin.Default()
    
    // 你的 API 路由
    r.GET("/api/users", getUsers)
    r.POST("/api/users", createUser)
    
    // 挂载 Coco 文档
    r.Any("/docs/*any", gin.WrapH(coco.New("./docs/swagger.json",
        coco.Title("我的 API 文档"),
        coco.Lang("zh"),
        coco.Theme("auto"),
    )))
    
    r.Run(":8000")
}

配置选项

▼
go
复制代码
coco.New("./openapi.json",
    coco.Title("自定义标题"),        // 文档标题
    coco.Theme("dark"),             // 主题：light/dark/auto
    coco.Lang("zh"),                // 语言：en/zh
    coco.EnableDebug(true),         // 启用调试面板
    coco.EnableExport(true),        // 启用导出功能
    coco.EnableHistory(true),       // 启用请求历史
)

从远程 URL 加载

▼
go
复制代码
coco.New("", coco.SpecURL("https://api.example.com/openapi.json"))

与 Swag 配合使用

▼
bash
复制代码
# 1. 使用 swag 生成文档
swag init
 
# 2. 使用 Coco 渲染
coco.New("./docs/swagger.json")

支持的框架

✅ net/http - Go 标准库
✅ Gin - 最流行的 Web 框架
✅ Echo - 高性能框架
✅ Fiber - Express 风格的框架
✅ Chi - 轻量级路由器
✅ 以及任何兼容 http.Handler 的框架

完整示例见：GitHub - examples

实际效果

📱 响应式设计

完美支持移动端、平板、桌面端

🧪 API 测试面板

直接在文档中测试接口，支持：

  • 请求参数填写
  • 请求头自定义
  • 实时响应预览
  • JSON 格式化显示

📝 请求历史

自动保存所有测试记录，方便回溯和复用

🌓 智能主题

  • 亮色模式 - 清爽舒适
  • 暗色模式 - 保护视力
  • 自动模式 - 跟随系统

🌍 国际化

内置中英文支持，用户可随时切换

项目信息

快速链接

加入 Coco！ 🎉

Coco 是一个开源项目，小nuo欢迎任何形式的贡献！

小nuo还是一个学生，经验还是不足，Coco 肯定存在很多的不足。Coco 很需要各位佬佬和童鞋们的帮助！！！才能变的更好 💕

你可以：

  • 🌟 给个 Star - 这是对小nuo和各位贡献者最大的鼓励
  • 🐛 报告 Bug - 帮助我们发现问题
  • 📝 改进文档 - 让文档更清晰易懂
  • 🌍 添加翻译 - 支持更多语言
  • 💻 贡献代码 - 实现新功能或修复问题
  • 📢 分享推荐 - 让更多人知道 Coco

贡献指南

查看 CONTRIBUTING.md 了解如何参与贡献。

社区

  • GitHub Issues: 提问题、提需求
  • GitHub Discussions: 技术讨论、分享经验
  • Star & Watch: 及时获取更新

结语

如果你厌倦了 Swagger UI 的老旧界面，如果你想要更优雅的 API 文档体验，那就试试 Coco 吧！

三行代码，优雅文档，就是这么简单！  🥥

觉得有用？请给小nuo一个 Star！⭐

发现问题？欢迎提 Issue！成为贡献者！🐛

项目地址: https://github.com/leehainuo/coco

Go
GitHub
开源
项目
0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
no
no
等级
内容推荐
更多
开源一个能自动发现和分析 GitHub 仓库的 AI Skill 与全栈应用
7
耄耋专属AI Loop全自动编码器技术笔记
4
如何从0到1 Vibe Coding 一个项目，并长期维护
60
RKit：我常用的 uTools 工具的“轻量替代”
5
开源我的 Vibe Coding 工作流，已有人靠它把项目做完了
7
作者分享
更多
做了一个 Go 的优雅的交互式 API 文档库 属于 Go 语言的 Knife4j 它来了！终于可以告别丑陋的 Swagger UI。 项目地址：https://github.com/leehainuo/coco 点个 star ⭐️ ！也欢迎大家积极贡献！！！
4
Hello，大家好，这里是小nuo😎。 我今天打算分享一下我自己做的一个 Fetch 请求库，制作它的起因呢，是我自己在学习做项目的过程中发现很多的教程使用的都是 Axios 。但是 Next.js 框架是推荐基于 Fetch 请求的。Axios 则是基于 XMLHttpRequest 和 Promise 的 HTTP 客户端 。 但是基于原生 Fetch 比较麻烦，无法做到像 Axios 一样便捷方便。参考了 Axios 与 Ky ，小nuo基于 Fetch 封装了一个 HTTP 客户端 - Ceno 。 Github地址：https://github.com/leehainuo/ceno 用法 Ceno 的用法与 Axios 很像确又有所不同，不过放心。Ceno 很容易上手的： ``` typescript import ceno from 'ceno'; const BASEURL = 'localhost'; const PORT = 8000; const c = ceno.create({ prefixUrl: `${BASEURL}:${PORT}`, // -> axios的 baseURL timeout: 6000, throwHttpErrors: false, // 若不了解则先设为 false }); c.interceptors.use({ request: { onFulfilled: (req) => { console.log('请求拦截器生效....'); return req; }, }, response: { onFulfilled: (res) => { console.log('响应拦截器生效....'); return res; }, onRejected: (err) => { if (err.status === 401) { console.log('401 错误待处理....'); } throw err; }, }, }); ``` 这样便可处理大多数情况了。如何发送请求，来看如下代码： ``` typescript // -> Get 请求 'localhost:8000/api' const json = c.get('api').json() ``` 很好~ 🥰 更多请查看 Github 仓库 https://github.com/leehainuo/ceno/blob/main/readme.md 为什么选择 Ceno ? Ceno 面向现代浏览器，支持 Node.js、Deno、Bun 。✅ Ceno 比 Axios 更加的轻量，现代化。Ceno 的 Unpacked Size 仅 **101kB** 。✅ Ceno 拥有 TypeScript 支持，保证类型安全。✅ Ceno 基于现代化的 Fetch API ，同时做到了写法简洁优雅。✅ ``` typescript // fetch const response = await fetch('https://example.com', { method: 'POST', body: JSON.stringify({data: '🍰'}), headers: { 'content-type': 'application/json' } }); if (!response.ok) { throw new Error(`Fetch error: ${response.statusText}`); } const json = await response.json(); console.log(json); // ceno import ceno from 'ceno'; const json = await ceno.post('https://example.com', { json: {data: '🍰'} }).json(); console.log(json); ``` 总结 Ceno 的目的就是为了方便的使用 Fetch，做到简洁、轻量、优雅。 如果大家有好的建议和想法，欢迎随时再评论区反馈交流。 同时小nuo希望大家点点 start ⭐，多多鼓励与支持~
4
大学生一个暑假，做一个基于 Fetch 的请求库
3
下载 APP