A lightweight, single-file Swagger UI manager for multiple OpenAPI specifications
Features • Screenshot • Demo • Quick Start • Customization • Contributing • License • Acknowledgments
⭐️ If you find this project useful, please consider giving it a star to show your support! ⭐️
- 📦 Single File - No build process, no dependencies to install
- 🔄 Multiple API Support - Switch between different OpenAPI specifications seamlessly
- 🚀 Easy Deployment - Host anywhere as a static file
- ⚡ Fast Loading - Uses CDN for all external resources
- 🎨 Clean UI - Intuitive interface with API selector
- 🔧 Easy Configuration - Simple API list customization
Swagger Master in action - managing multiple API specifications
Visit our live demo to see Swagger Master in action.
- Download the
index.htmlfile - Add your API list to the
API_LISTarray in theindex.htmlfile - Open the
index.htmlfile in your browser to test it out - Host anywhere as a static file
The UI is customizable through the CSS section in the index.html file. Key style classes:
#api-selector- The API selection dropdown container#swagger-ui- The main Swagger UI container.info-icon- The information icon styling
The API list is configured in the index.html file. The API_LIST array contains the API specifications. Each API specification is an object with the following properties:
const API_LIST = [
{
name: "Petstore API",
url: "https://petstore3.swagger.io/api/v3/openapi.json",
description:
"This is the Swagger Petstore API, a sample API that demonstrates OpenAPI specification features.",
maintainer: {
name: "Swagger Team",
email: "swagger@example.com",
},
},
// Add more APIs as needed
];Each API configuration supports:
name: Display name for the APIurl: URL to the OpenAPI specification JSON/YAMLdescription: A detailed description of the API's purpose and featuresmaintainer: Contact information for the API maintainername: Maintainer's nameemail: Maintainer's email address
The description and maintainer information can be viewed by clicking the info icon (i) next to the API selector.
If you see errors like "Failed to load API definition" or "Possible cross-origin (CORS) issue", you can try one of these solutions:
-
Configure Backend Server (Recommended for Production)
- Configure your API server to allow CORS requests by adding appropriate headers:
Access-Control-Allow-Origin: * # Or your Swagger Master domain Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: *- This is the most secure and recommended solution for production environments
-
Use a Proxy Server (Alternative for Production)
- Set up a proxy server (e.g., Nginx) to forward requests and add CORS headers
- Example Nginx configuration:
location /api/ { proxy_pass http://your-api-server/; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; add_header 'Access-Control-Allow-Headers' '*'; }
-
Use Browser Extensions (Development Only)
- Install CORS-disabling browser extensions (e.g., "CORS Unblock" for Chrome)
⚠️ Warning: Only use this method for development/testing- Disable the extension when not needed for security reasons
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Swagger UI for the amazing API documentation tool
- Font Awesome for the icons
Made with ❤️ by Toby Qin