Gathering detailed insights and metrics for openapi-ui-dist
Gathering detailed insights and metrics for openapi-ui-dist
OpenAPI/Swagger UI document, quickly generate mock params and call api, also simplified postman tool. 基于 OpenAPI/Swagger 规范的接口文档，快速模拟请求参数并调用接口，也是简化版 postman 工具，欢迎提功能请求、bug
Installations
npm install openapi-ui-distDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Min. Node Version
^18.0.0 || >=20.0.0
Node Version
18.20.4
NPM Version
10.7.0
Score
42
Supply Chain
82.3
Quality
75
Maintenance
50
Vulnerability
98.2
License
Releases
42
Languages
5
TypeScript
JavaScript
HTML
Dockerfile
Makefile
TypeScript (98.47%)
JavaScript (0.59%)
HTML (0.36%)
Dockerfile (0.32%)
Makefile (0.25%)
Developer
Download Statistics
Total Downloads
1,382
Last Day
2
Last Week
16
Last Month
56
Last Year
901
GitHub Statistics
MIT License
690 Stars
928 Commits
62 Forks
4 Watchers
5 Branches
4 Contributors
Updated on Aug 23, 2025
Maintainers
1
Package Meta Information
Latest Version
2.3.3
Package Id
openapi-ui-dist@2.3.3
Unpacked Size
12.31 MB
Size
3.40 MB
File Count
13
NPM Version
10.7.0
Node Version
18.20.4
Published on
Oct 13, 2024
Total Downloads
Cumulative downloads
Total Downloads
1,382
Last Day
0%
2
Compared to previous day
Last Week
220%
16
Compared to previous week
Last Month
60%
56
Compared to previous month
Last Year
87.3%
901
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
25
@emotion/react@faker-js/faker@monaco-editor/reactantdaxioscopy-to-clipboarddayjsi18nexti18next-browser-languagedetectorjs-yamljson-schema-enhanced-editor-reactlodash-esmonaco-editoropenapi-samplerreactreact-domreact-error-boundaryreact-i18nextreact-markdownreact-router-domreact-router-toolkitreact-syntax-highlighterregenerator-runtimeswagger2openapizustand
Dev Dependencies
33
@babel/preset-react@commitlint/cli@commitlint/config-conventional@emotion/babel-plugin@esbuild-plugins/node-globals-polyfill@esbuild-plugins/node-modules-polyfill@trivago/prettier-plugin-sort-imports@types/js-yaml@types/lodash-es@types/react@types/react-dom@types/react-syntax-highlighter@types/swagger2openapi@typescript-eslint/eslint-plugin@typescript-eslint/parser@vitejs/plugin-reactcsstypeeslinteslint-import-resolver-typescripteslint-plugin-importeslint-plugin-reacteslint-plugin-react-hookseslint-plugin-react-refreshhuskylint-stagedopenapi-ts-requestopenapi-typesprettierrollup-plugin-visualizerts-nodetypescriptvitevite-plugin-css-injected-by-js
OpenAPI UI
OpenAPI/Swagger UI document, quickly generate mock params and call api, also simplified postman tool
English | 简体中文
Screen Shot
Website domain
- CN: www.openapi-ui.com, support http,https
- US: doc.openapi-ui.com
- US2: docs.openapi-ui.com
Usage
With CDN
spec-url is full path
1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>openAPI UI</title> 6 </head> 7 <body> 8 <div id="openapi-ui-container" spec-url="https://petstore3.swagger.io/api/v3/openapi.json" theme="light"></div> 9 <script src="https://cdn.jsdelivr.net/npm/openapi-ui-dist@latest/lib/openapi-ui.umd.js"></script> 10 </body> 11</html>
spec-url is path
1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>openAPI UI</title> 6 </head> 7 <body> 8 <div id="openapi-ui-container" spec-url="/openapi.json" theme="dark"></div> 9 <script src="https://cdn.jsdelivr.net/npm/openapi-ui-dist@latest/lib/openapi-ui.umd.js"></script> 10 </body> 11</html>
With React(or With Vue)
1import { useEffect } from "react"; 2 3const SetUpOpenApiUI = () => { 4 useEffect(() => { 5 import("openapi-ui-dist") 6 }, []); 7 8 return ( 9 <div id="openapi-ui-container" spec-url="https://petstore3.swagger.io/api/v3/openapi.json" theme="light" /> 10 ); 11} 12 13export const openapiRoutes = { 14 path: "/openapi", 15 id: "openapi", 16 element: <SetUpOpenApiUI />, 17};
With Go Web Framework
With Nodejs Web Framework
Quick start
1# node version >= 18 2# download node_modules 3pnpm install 4# or make install 5 6# start 7npm run dev 8# or make dev
Some script
1# build 2npm run build 3# or make build 4 5# make docker image 6make docker-build 7 8# run docker image 9make docker-run 10 11# make docker image and run docker image 12make docker-build-run
Support data format
- swagger2.json/swagger2.yml
- openapi3.json/openapi3.yml
How to use
- enter swagger2/openapi3 api gateway URL, refresh the page to update the interface
- upload swagger2/openapi3 file
- enter swagger2/openapi3 text
Global config
- supports configure request timeout, the default request timeout is 2 minutes
- supports configure request Authorization, Authorization can be overridden in the current request
Share URL
- 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
Mock request params
- 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
Request error message display rules
- 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
Connect intranet api
- if unable to connect intranet api, you can run this project locally or use docker to deploy this project locally or on the server
Support multiple api gateway URL
- the caching strategy used is session storage, so you can open multiple pages at the same time
Docker deploy, support env variable injection
1# pull Docker image 2docker pull ghcr.io/rookie-luochao/openapi-ui:latest 3 4# start container, nginx reverse proxy custom port, for example: docker run -d -p 8081:80 ghcr.io/rookie-luochao/openapi-ui:latest 5docker run -d -p 80:80 -e APP_CONFIG=env=zh,appNameZH=简洁美观的接口文档 ghcr.io/rookie-luochao/openapi-ui:latest
Node version
node >= 18
No vulnerabilities found.