OpenAPI/Swagger UI document, quickly generate mock params and call api, also simplified postman tool
- CN: www.openapi-ui.com, support http,https
- US: doc.openapi-ui.com
- US2: docs.openapi-ui.com
spec-url is full path
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>openAPI UI</title>
</head>
<body>
<div id="openapi-ui-container" spec-url="https://petstore3.swagger.io/api/v3/openapi.json" theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/openapi-ui-dist@latest/lib/openapi-ui.umd.js"></script>
</body>
</html>spec-url is path
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>openAPI UI</title>
</head>
<body>
<div id="openapi-ui-container" spec-url="/openapi.json" theme="dark"></div>
<script src="https://cdn.jsdelivr.net/npm/openapi-ui-dist@latest/lib/openapi-ui.umd.js"></script>
</body>
</html>import { useEffect } from "react";
const SetUpOpenApiUI = () => {
useEffect(() => {
import("openapi-ui-dist")
}, []);
return (
<div id="openapi-ui-container" spec-url="https://petstore3.swagger.io/api/v3/openapi.json" theme="light" />
);
}
export const openapiRoutes = {
path: "/openapi",
id: "openapi",
element: <SetUpOpenApiUI />,
};# node version >= 18
# download node_modules
pnpm install
# or make install
# start
npm run dev
# or make dev# build
npm run build
# or make build
# make docker image
make docker-build
# run docker image
make docker-run
# make docker image and run docker image
make docker-build-run- swagger2.json/swagger2.yml
- openapi3.json/openapi3.yml
- enter swagger2/openapi3 api gateway URL, refresh the page to update the interface
- upload swagger2/openapi3 file
- enter swagger2/openapi3 text
- supports configure request timeout, the default request timeout is 2 minutes
- supports configure request Authorization, Authorization can be overridden in the current request
- url can only be shared when imported through url mode
- copy the url and share it with those who need it, they can echo the url to the specified interface
- if the schema contains the format field, then use openapi-sampler to mock request params
- if the schema does not contain the format field, then use faker to mock request params
- if the returned structure contains a message field, display the message field
- if the returned structure contains a msg field, display the msg field
- if the returned result is a string, display the string
- display AxiosResponse.statusText field
- display AxiosError.message field
- if unable to connect intranet api, you can run this project locally or use docker to deploy this project locally or on the server
- the caching strategy used is session storage, so you can open multiple pages at the same time
# pull Docker image
docker pull ghcr.io/rookie-luochao/openapi-ui:latest
# start container, nginx reverse proxy custom port, for example: docker run -d -p 8081:80 ghcr.io/rookie-luochao/openapi-ui:latest
docker run -d -p 80:80 -e APP_CONFIG=env=zh,appNameZH=简洁美观的接口文档 ghcr.io/rookie-luochao/openapi-ui:latestnode >= 18