SwaggerEditor
SwaggerEditor is using forked Create React App as it’s building infrastructure.
Anonymized analytics
Swagger Editor uses Scarf to collect anonymized installation analytics. These analytics help support the maintainers of this library and ONLY run during installation. To opt out, you can set the scarfSettings.enabled
field to false
in your project’s package.json
:
1{2 // ...3 "scarfSettings": {4 "enabled": false5 }6 // ...7}
Alternatively, you can set the environment variable SCARF_ANALYTICS
to false
as part of the environment that installs your npm packages, e.g., SCARF_ANALYTICS=false npm install
.
Getting started
Prerequisites
These prerequisites are required both for installing SwaggerEditor as a npm package and local development setup.
- node-gyp with Python 3.x
- GLIBC
>=2.29
- emscripten or docker needs to be installed, we recommend going with a docker option
Installation
Assuming prerequisites are already installed, SwaggerEditor npm package is installable and works with Node.js >= 12.22.0
.
You can install SwaggerEditor via npm CLI by running the following command:
1 $ npm install swagger-editor@alpha
NOTE: when using bundler to build your project which is using swagger-editor@5 npm package, you might run into following Node.js error:
Reached heap limit Allocation failed - JavaScript heap out of memory
. It is caused by significant amount of code that needs to be bundled. This error can be resolved by extending the Node.js max heap limit:export NODE_OPTIONS="--max_old_space_size=4096"
.
Usage
Use the package in you application:
index.js:
1import React from 'react';2import ReactDOM from 'react-dom';3import SwaggerEditor from 'swagger-editor';4import 'swagger-editor/swagger-editor.css';5
6const url = "https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml";7
8const MyApp = () => (9 <div>10 <h1>SwaggerEditor Integration</h1>11 <SwaggerEditor url={url} />12 </div>13);14
15self.MonacoEnvironment = {16 /**17 * We're building into the dist/ folder. When application starts on18 * URL=https://example.com then SwaggerEditor will look for19 * `apidom.worker.js` on https://example.com/dist/apidom.worker.js and20 * `editor.worker` on https://example.com/dist/editor.worker.js.21 */22 baseUrl: `${document.baseURI || location.href}dist/`,23}24
25ReactDOM.render(<MyApp />, document.getElementById('swagger-editor'));
webpack.config.js (webpack@5)
Install dependencies needed for webpack@5 to properly build SwaggerEditor.
1 $ npm i stream-browserify --save-dev2 $ npm i https-browserify --save-dev3 $ npm i stream-http --save-dev4 $ npm i util --save-dev
1const path = require('path');2const webpack = require('webpack');3
4module.exports = {5 mode: 'production',6 entry: {7 app: './index.js',8 'apidom.worker': 'swagger-editor/apidom.worker',9 'editor.worker': 'swagger-editor/editor.worker',10 },11 output: {12 globalObject: 'self',13 filename: '[name].js',14 path: path.resolve(__dirname, 'dist')15 },16 resolve: {17 fallback: {18 path: false,19 fs: false,20 http: require.resolve('stream-http'), // required for asyncapi parser21 https: require.resolve('https-browserify'), // required for asyncapi parser22 stream: require.resolve('stream-browserify'),23 util: require.resolve('util'),24 url: require.resolve('url'),25 zlib: false,26 },27 alias: {28 // This alias make sure we don't pull two different versions of monaco-editor29 'monaco-editor': '/node_modules/monaco-editor',30 // This alias makes sure we're avoiding a runtime error related to this package31 '@stoplight/ordered-object-literal$': '/node_modules/@stoplight/ordered-object-literal/src/index.mjs',32 },33 },34 plugins: [35 new webpack.ProvidePlugin({36 Buffer: ['buffer', 'Buffer'],37 }),38 ],39 module: {40 rules: [41 {42 test: /\.css$/,43 use: ['style-loader', 'css-loader']44 },45 /**46 * The default way in which webpack loads wasm files won’t work in a worker,47 * so we will have to disable webpack’s default handling of wasm files and48 * then fetch the wasm file by using the file path that we get using file-loader.49 *50 * Resource: https://pspdfkit.com/blog/2020/webassembly-in-a-web-worker/51 *52 * Alternatively, WASM file can be bundled directly into JavaScript bundle as data URLs.53 * This configuration reduces the complexity of WASM file loading54 * but increases the overal bundle size:55 *56 * {57 * test: /\.wasm$/,58 * type: 'asset/inline',59 * }60 */61 {62 test: /\.wasm$/,63 loader: 'file-loader',64 type: 'javascript/auto', // this disables webpacks default handling of wasm65 },66 ]67 }68};
Alternative webpack.config.js (webpack@5)
We’ve already built Web Workers fragments for you, and they’re located inside our npm distribution
package in dist/umd/
directory. In order to avoid complexity of building the Web Worker fragments you can
use those fragments directly. This setup will work both for production and development (webpack-dev-server)
and will significantly shorten your build process.
Install copy-webpack-plugin
and other needed dependencies.
1 $ npm i copy-webpack-plugin --save-dev2 $ npm i stream-browserify --save-dev3 $ npm i https-browserify --save-dev4 $ npm i stream-http --save-dev5 $ npm i util --save-dev
1const path = require('path');2const webpack = require('webpack');3const CopyWebpackPlugin = require('copy-webpack-plugin');4
5module.exports = {6 mode: 'production',7 entry: {8 app: './index.js',9 },10 output: {11 globalObject: 'self',12 filename: 'static/js/[name].js',13 path: path.resolve(__dirname, 'dist')14 },15 resolve: {16 fallback: {17 path: false,18 fs: false,19 http: require.resolve('stream-http'), // required for asyncapi parser20 https: require.resolve('https-browserify'), // required for asyncapi parser21 stream: require.resolve('stream-browserify'),22 util: require.resolve('util'),23 url: require.resolve('url'),24 zlib: false,25 },26 alias: {27 // This alias make sure we don't pull two different versions of monaco-editor28 'monaco-editor': '/node_modules/monaco-editor',29 // This alias makes sure we're avoiding a runtime error related to this package30 '@stoplight/ordered-object-literal$': '/node_modules/@stoplight/ordered-object-literal/src/index.mjs',31 }32 },33 plugins: [34 new webpack.ProvidePlugin({35 Buffer: ['buffer', 'Buffer'],36 }),37 new CopyWebpackPlugin({38 patterns: [39 {40 from: 'node_modules/swagger-editor/dist/umd/apidom.worker.js',41 to: 'static/js',42 },43 {44 from: 'node_modules/swagger-editor/dist/umd/editor.worker.js',45 to: 'static/js',46 }47 ]48 }),49 ],50 module: {51 rules: [52 {53 test: /\.css$/,54 use: ['style-loader', 'css-loader']55 },56 ]57 }58};
Development
Prerequisites
Assuming prerequisites are already installed, Node.js >=20.3.0
and npm >=9.6.7
are the minimum required versions that this repo runs on, but we recommend using the latest version of Node.js@20.
Setting up
If you use nvm, running following command inside this repository will automatically pick the right Node.js version for you:
1 $ nvm use
Run the following commands to set up the repository for local development:
1 $ git clone https://github.com/swagger-api/swagger-editor.git2 $ cd swagger-editor3 $ git checkout next4 $ git submodule init5 $ git submodule update6 $ npm i7 $ npm start
npm scripts
Lint
1 $ npm run lint
Runs unit and integration tests
1 $ npm test
Runs E2E Cypress tests
Usage in development environment:
1 $ npm run cy:dev
Usage in Continuos Integration (CI) environment:
1 $ npm run cy:ci
Build
1 $ npm run build
This script will build all the SwaggerEditor build artifacts - app
, esm
and umd
.
Build artifacts
After building artifacts, every two new directories will be created: build/
and dist/
.
build/
1$ npm run build:app2$ npm run build:app:serve
Builds and serves standalone SwaggerEditor application and all it’s assets on http://localhost:3050/
.
dist/esm/
1$ npm run build:bundle:esm
This bundle is suited for consumption by 3rd parties, which want to use SwaggerEditor as a library in their own applications and have their own build process.
dist/umd/
1$ npm run build:bundle:umd
SwaggerEditor UMD bundle exports SwaggerEditor symbol on global object. It’s bundled with React defined as external. This allows consumer to use his own version of React + ReactDOM and mount SwaggerEditor lazily.
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 <meta7 name="description"8 content="SwaggerEditor"9 />10 <title>SwaggerEditor</title>11 <link rel="stylesheet" href="./swagger-editor.css" />12</head>13<body>14 <div id="swagger-editor"></div>15 <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>16 <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>17 <script src="./dist/umd/swagger-editor.js"></script>18 <script>19 const props = {20 url: 'https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml',21 };22 const element = React.createElement(SwaggerEditor, props);23 const domContainer = document.querySelector('#swagger-editor');24
25 ReactDOM.render(element, domContainer);26 </script>27</body>28</html>
npm
SwaggerEditor is released as swagger-editor@5
npm package on npmjs.com.
Package can also be produced manually by running following commands (assuming you’re already followed setting up steps):
1 $ npm run build:bundle:esm2 $ npm run build:bundle:umd3 $ npm pack
Package mapping
SwaggerEditor maps its build artifacts in package.json
file in following way:
1"unpkg": "./dist/umd/swagger-editor.js",2"module": "./dist/esm/swagger-editor.js",3"browser": "./dist/esm/swagger-editor.js",4"jsnext:main": "./dist/esm/swagger-editor.js",5"exports": {6 "./package.json": "./package.json",7 "./swagger-editor.css": "./dist/swagger-editor.css",8 ".": {9 "browser": "./dist/esm/swagger-editor.js"10 },11 "./plugins/*": {12 "browser": "./dist/esm/plugins/*/index.js"13 },14 "./presets/*": {15 "browser": "./dist/esm/presets/*/index.js"16 },17 "./apidom.worker": {18 "browser": "./dist/esm/apidom.worker.js"19 },20 "./editor.worker": {21 "browser": "./dist/esm/editor.worker.js"22 }23}
To learn more about these fields please refer to webpack mainFields documentation or to Node.js Modules: Packages documentation.
Documentation
Using older version of React
[!IMPORTANT] By older versions we specifically refer to
React >=17 <18
.
By default swagger-editor@5 npm package comes with latest version of React@18. It’s possible to use swagger-editor@5 npm package with older version of React.
Let’s say my application integrates with swagger-editor@5 npm package and uses React@17.0.2.
npm
In order to inform swagger-editor@5
npm package that I require it to use my React version, I need to use npm overrides.
1{2 "dependencies": {3 "react": "=17.0.2",4 "react-dom": "=17.0.2"5 },6 "overrides": {7 "swagger-editor": {8 "react": "$react",9 "react": "$react-dom",10 "react-redux": "^8"11 }12 }13}
[!NOTE] The React and ReactDOM override are defined as a reference to the dependency. Since react-redux@9 only supports
React >= 18
, we need to use react-redux@8.
yarn
In order to inform swagger-editor@5
npm package that I require it to use my specific React version, I need to use yarn resolutions.
1{2 "dependencies": {3 "react": "17.0.2",4 "react-dom": "17.0.2"5 },6 "resolutions": {7 "swagger-editor/react": "17.0.2",8 "swagger-editor/react-dom": "17.0.2",9 "swagger-editor/react-redux": "^8"10 }11}
[!NOTE] The React and ReactDOM resolution cannot be defined as a reference to the dependency. Unfortunately yarn does not support aliasing like
$react
or$react-dom
as npm does. You’ll need to specify the exact versions.
Customization
Environment Variables
It is possible to use an environment variable to specify a local JSON/YAML file or a remote URL for SwaggerEditor to load on startup. These environment variables will get baked in during build time into build artifacts.
Environment variables currently available:
Variable name | Description |
---|---|
REACT_APP_DEFINITION_FILE | Specifies a local file path, and the specified file must also be present in the /public/static directory |
REACT_APP_DEFINITION_URL | Specifies a remote URL. This environment variable currently takes precedence over REACT_APP_SWAGGER_FILE |
REACT_APP_VERSION | Specifies the version of this app. The version is read from package.json file. |
Sample environment variable values can be found in .env
file. For more information about using
environment variables, please refer to adding Custom Environment Variables
section of Create React App documentation.
Using preview plugins in SwaggerUI
SwaggerEditor comes with number of preview
plugins that are responsible for rendering
the definition that’s being created in the editor. These plugins include:
- EditorPreviewAsyncAPIPlugin - AsyncAPI specification rendering support
- EditorPreviewAPIDesignSystemsPlugin - API Design Systems rendering support
With a bit of adapting, we can use these plugins with SwaggerUI to provide ability to render AsyncAPI or API Design Systems definitions with SwaggerUI.
1import SwaggerUI from 'swagger-ui';2import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset';3import 'swagger-editor/swagger-editor.css';4import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';5import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';6import EditorPreviewAPIDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';7import SwaggerUIAdapterPlugin from 'swagger-editor/plugins/swagger-ui-adapter';8
9SwaggerUI({10 url: 'https://petstore.swagger.io/v2/swagger.json',11 dom_id: '#swagger-ui',12 presets: [SwaggerUI.presets.apis, SwaggerUIStandalonePreset],13 plugins: [14 EditorContentTypePlugin,15 EditorPreviewAsyncAPIPlugin,16 EditorPreviewAPIDesignSystemsPlugin,17 SwaggerUIAdapterPlugin,18 SwaggerUI.plugins.DownloadUrl,19 ],20});
The key here is SwaggerUIAdapter
plugin which adapts SwaggerEditor plugins to use
directly with SwaggerUI.
Standalone mode
SwaggerUI standalone mode is supported as well. With standalone mode you’ll get a TopBar
with
an input where URL of the definition can be provided and this definition is subsequently loaded
by the SwaggerUI.
1import SwaggerUI from 'swagger-ui';2import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset';3import 'swagger-ui/dist/swagger-ui.css';4import 'swagger-editor/swagger-editor.css';5import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';6import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';7import EditorPreviewAPIDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';8import SwaggerUIAdapterPlugin from 'swagger-editor/plugins/swagger-ui-adapter';9
10SwaggerUI({11 url: 'https://petstore.swagger.io/v2/swagger.json',12 dom_id: '#swagger-ui',13 presets: [SwaggerUI.presets.apis, SwaggerUIStandalonePreset],14 plugins: [15 EditorContentTypePlugin,16 EditorPreviewAsyncAPIPlugin,17 EditorPreviewAPIDesignSystemsPlugin,18 SwaggerUIAdapterPlugin,19 SwaggerUI.plugins.DownloadUrl,20 ],21 layout: 'StandaloneLayout',22});
Utilizing preview plugins via unpkg.com
It’s possible to utilize preview plugins in a build-free way via unpkg.com to create a standalone multi-spec supporting version of SwaggerUI.
1<!DOCTYPE html>2<html >3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 <meta name="theme-color" content="#000000" />7 <meta name="description" content="SwaggerUIMultifold" />8 <link rel="stylesheet" href="//unpkg.com/swagger-editor@5.0.0-alpha.86/dist/swagger-editor.css" />9 </head>10 <body style="margin:0; padding:0;">11 <section id="swagger-ui"></section>12
13 <script src="//unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-bundle.js"></script>14 <script src="//unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-standalone-preset.js"></script>15 <script>16 ui = SwaggerUIBundle({});17 // expose SwaggerUI React globally for SwaggerEditor to use18 window.React = ui.React;19 </script>20 <script src="//unpkg.com/swagger-editor@5.0.0-alpha.86/dist/umd/swagger-editor.js"></script>21 <script>22 SwaggerUIBundle({23 url: 'https://petstore3.swagger.io/api/v3/openapi.json',24 dom_id: '#swagger-ui',25 presets: [26 SwaggerUIBundle.presets.apis,27 SwaggerUIStandalonePreset,28 ],29 plugins: [30 SwaggerEditor.plugins.EditorContentType,31 SwaggerEditor.plugins.EditorPreviewAsyncAPI,32 SwaggerEditor.plugins.EditorPreviewApiDesignSystems,33 SwaggerEditor.plugins.SwaggerUIAdapter,34 SwaggerUIBundle.plugins.DownloadUrl,35 ],36 layout: 'StandaloneLayout',37 });38 </script>39 </body>40</html>
Composing customized SwaggerEditor version
SwaggerEditor is just a number of SwaggerUI plugins used with swagger-ui-react. Customized SwaggerEditor can be created by composing individual plugins with either swagger-ui and swagger-ui-react.
Plugins
List of available plugins:
- dialogs
- dropdown-menu
- dropzone
- editor-content-fixtures
- editor-content-origin
- editor-content-persistence
- editor-content-read-only
- editor-content-type
- editor-monaco
- editor-monaco-language-apidom
- editor-preview
- editor-preview-api-design-systems
- editor-preview-asyncapi
- editor-preview-swagger-ui
- editor-safe-render
- editor-textarea
- layout
- modals
- splash-screen
- swagger-ui-adapter
- top-bar
- versions
Individual plugins can be imported in the following way:
1import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';2import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';
Presets
Along with plugins, presets are available as well. Preset is a collection of plugins that are design to work together to provide a compound feature.
List of available presets:
- textarea
- monaco
Individual presets can be imported in the following way:
1import TextareaPreset from 'swagger-editor/presets/textarea';2import MonacoPreset from 'swagger-editor/presets/monaco';
NOTE: Please refer to the Plug points documentation of SwaggerUI to understand how presets are passed to SwaggerUI.
Composing with swagger-ui
1import SwaggerUI from 'swagger-ui';2import 'swagger-ui/dist/swagger-ui.css';3import ModalsPlugin from 'swagger-editor/plugins/modals';4import DialogsPlugin from 'swagger-editor/plugins/dialogs';5import DropdownMenuPlugin from 'swagger-editor/plugins/dropdown-menu';6import DropzonePlugin from 'swagger-editor/plugins/dropzone';7import VersionsPlugin from 'swagger-editor/plugins/versions';8import EditorTextareaPlugin from 'swagger-editor/plugins/editor-textarea';9import EditorMonacoPlugin from 'swagger-editor/plugins/editor-monaco';10import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';11import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';12import EditorContentOriginPlugin from 'swagger-editor/plugins/editor-content-origin';13import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';14import EditorContentPersistencePlugin from 'swagger-editor/plugins/editor-content-persistence';15import EditorContentFixturesPlugin from 'swagger-editor/plugins/editor-content-fixtures';16import EditorPreviewPlugin from 'swagger-editor/plugins/editor-preview';17import EditorPreviewSwaggerUIPlugin from 'swagger-editor/plugins/editor-preview-swagger-ui';18import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';19import EditorPreviewApiDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';20import TopBarPlugin from 'swagger-editor/plugins/top-bar';21import SplashScreenPlugin from 'swagger-editor/plugins/splash-screen';22import LayoutPlugin from 'swagger-editor/plugins/layout';23import EditorSafeRenderPlugin from 'swagger-editor/plugins/editor-safe-render';24
25SwaggerUI({26 url: 'https://petstore.swagger.io/v2/swagger.json',27 dom_id: '#swagger-editor',28 plugins: [29 ModalsPlugin,30 DialogsPlugin,31 DropdownMenuPlugin,32 DropzonePlugin,33 VersionsPlugin,34 EditorTextareaPlugin,35 EditorMonacoPlugin,36 EditorMonacoLanguageApiDOMPlugin,37 EditorContentReadOnlyPlugin,38 EditorContentOriginPlugin,39 EditorContentTypePlugin,40 EditorContentPersistencePlugin,41 EditorContentFixturesPlugin,42 EditorPreviewPlugin,43 EditorPreviewSwaggerUIPlugin,44 EditorPreviewAsyncAPIPlugin,45 EditorPreviewApiDesignSystemsPlugin,46 TopBarPlugin,47 SplashScreenPlugin,48 LayoutPlugin,49 EditorSafeRenderPlugin,50 ],51 layout: 'StandaloneLayout',52});
Composing with swagger-ui-react
1import React from 'react';2import ReactDOM from 'react-dom';3import SwaggerUI from 'swagger-ui-react';4import 'swagger-ui-react/swagger-ui.css';5import ModalsPlugin from 'swagger-editor/plugins/modals';6import DialogsPlugin from 'swagger-editor/plugins/dialogs';7import DropdownMenuPlugin from 'swagger-editor/plugins/dropdown-menu';8import DropzonePlugin from 'swagger-editor/plugins/dropzone';9import VersionsPlugin from 'swagger-editor/plugins/versions';10import EditorTextareaPlugin from 'swagger-editor/plugins/editor-textarea';11import EditorMonacoPlugin from 'swagger-editor/plugins/editor-monaco';12import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';13import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';14import EditorContentOriginPlugin from 'swagger-editor/plugins/editor-content-origin';15import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';16import EditorContentPersistencePlugin from 'swagger-editor/plugins/editor-content-persistence';17import EditorContentFixturesPlugin from 'swagger-editor/plugins/editor-content-fixtures';18import EditorPreviewPlugin from 'swagger-editor/plugins/editor-preview';19import EditorPreviewSwaggerUIPlugin from 'swagger-editor/plugins/editor-preview-swagger-ui';20import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';21import EditorPreviewApiDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';22import TopBarPlugin from 'swagger-editor/plugins/top-bar';23import SplashScreenPlugin from 'swagger-editor/plugins/splash-screen';24import LayoutPlugin from 'swagger-editor/plugins/layout';25import EditorSafeRenderPlugin from 'swagger-editor/plugins/editor-safe-render';26
27const SwaggerEditor = () => {28 return (29 <SwaggerUI30 url={url}31 plugins={[32 ModalsPlugin,33 DialogsPlugin,34 DropdownMenuPlugin,35 DropzonePlugin,36 VersionsPlugin,37 EditorTextareaPlugin,38 EditorMonacoPlugin,39 EditorMonacoLanguageApiDOMPlugin,40 EditorContentReadOnlyPlugin,41 EditorContentOriginPlugin,42 EditorContentTypePlugin,43 EditorContentPersistencePlugin,44 EditorContentFixturesPlugin,45 EditorPreviewPlugin,46 EditorPreviewSwaggerUIPlugin,47 EditorPreviewAsyncAPIPlugin,48 EditorPreviewApiDesignSystemsPlugin,49 TopBarPlugin,50 SplashScreenPlugin,51 LayoutPlugin,52 EditorSafeRenderPlugin,53 ]}54 layout="StandaloneLayout"55 />56 );57};58
59ReactDOM.render(<SwaggerEditor />, document.getElementById('swagger-editor'));
Docker
Pre-built DockerHub image
SwaggerEditor is available as a pre-built docker image hosted on docker.swagger.io.
1$ docker pull docker.swagger.io/swaggerapi/swagger-editor:next-v52$ docker run -d -p 8080:80 docker.swagger.io/swaggerapi/swagger-editor:next-v5
Building locally
Privileged image:
1 $ npm run build:app2 $ docker build . -t swaggerapi/swagger-editor:next-v53 $ docker run -d -p 8080:80 swaggerapi/swagger-editor:next-v5
Now open your browser at http://localhost:8080/
.
Unprivileged image:
1 $ npm run build:app2 $ docker build . -f Dockerfile.unprivileged -t swaggerapi/swagger-editor:next-v5-unprivileged3 $ docker run -d -p 8080:8080 swaggerapi/swagger-editor:next-v5-unprivileged
Now open your browser at http://localhost:8080/
.
No custom environment variables are currently supported by SwaggerEditor.
License
SwaggerEditor is licensed under Apache 2.0 license. SwaggerEditor comes with an explicit NOTICE file containing additional legal notifications and information.
This project uses REUSE specification that defines a standardized method for declaring copyright and licensing for software projects.
Software Bill Of Materials (SBOM)
Software Bill Of materials is available in this repository dependency graph.
Click on Export SBOM
button to download the SBOM in SPDX format.