NotificationsYou must be signed in to change notification settings
Fork2.4k
Star9.4k

Swagger Editor

9.4k stars 2.4k forks Branches Tags Activity

You must be signed in to change notification settings

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 2,119 Commits
.github		.github
.husky		.husky
LICENSES		LICENSES
config		config
docs		docs
public		public
scripts		scripts
src		src
test		test
.browserslistrc		.browserslistrc
.commitlintrc.json		.commitlintrc.json
.dockerignore		.dockerignore
.editorconfig		.editorconfig
.env		.env
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitattributes		.gitattributes
.gitignore		.gitignore
.lintstagedrc		.lintstagedrc
.npmignore		.npmignore
.nvmrc		.nvmrc
.prettierrc		.prettierrc
.releaserc		.releaserc
CHANGELOG.md		CHANGELOG.md
Dockerfile		Dockerfile
Dockerfile.unprivileged		Dockerfile.unprivileged
NOTICE		NOTICE
README.md		README.md
cypress.config.js		cypress.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Repository files navigation

SwaggerEditor

Anonymized analytics

Swagger Editor usesScarf to collectanonymized installation analytics. These analytics help support the maintainers of this library and ONLY run during installation. Toopt out, you can set thescarfSettings.enabled field tofalse in your project'spackage.json:

// package.json{  // ...  "scarfSettings": {    "enabled": false  }  // ...}

Alternatively, you can set the environment variableSCARF_ANALYTICS tofalse 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 withPython 3.x
GLIBC>=2.29
emscripten ordocker needs to be installed, we recommend going with a docker option

Installation

Assumingprerequisites are already installed, SwaggerEditor npm package is installable and works withNode.js >= 12.22.0.You can install SwaggerEditor vianpm CLI by running the following command:

 $ 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's caused by significant amount of code that needs to be bundled. This error can be resolvedby extending the Node.js max heap limit:export NODE_OPTIONS="--max_old_space_size=4096".

Usage

Use the package in your application:

index.js:

importReactfrom'react';importReactDOMfrom'react-dom';importSwaggerEditorfrom'swagger-editor';import'swagger-editor/swagger-editor.css';consturl="https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml";constMyApp=()=>(<div><h1>SwaggerEditor Integration</h1><SwaggerEditorurl={url}/></div>);self.MonacoEnvironment={/**   * We're building into the dist/ folder. When application starts on   * URL=https://example.com then SwaggerEditor will look for   * `apidom.worker.js` on https://example.com/dist/apidom.worker.js and   * `editor.worker` on https://example.com/dist/editor.worker.js.   */baseUrl:`${document.baseURI||location.href}dist/`,}ReactDOM.render(<MyApp/>,document.getElementById('swagger-editor'));

webpack.config.js (webpack@5)

Install dependencies needed for webpack@5 to properly build SwaggerEditor.

 $ npm i stream-browserify --save-dev $ npm i https-browserify --save-dev $ npm i stream-http --save-dev $ npm i util --save-dev $ npm i buffer --save-dev $ npm i process --save-dev

constpath=require('path');constwebpack=require('webpack');module.exports={mode:'production',entry:{app:'./index.js','apidom.worker':'swagger-editor/apidom.worker','editor.worker':'swagger-editor/editor.worker',},output:{globalObject:'self',filename:'[name].js',path:path.resolve(__dirname,'dist')},resolve:{fallback:{path:false,fs:false,http:require.resolve('stream-http'),// required for asyncapi parserhttps:require.resolve('https-browserify'),// required for asyncapi parserstream:require.resolve('stream-browserify'),util:require.resolve('util'),url:require.resolve('url'),buffer:require.resolve('buffer'),zlib:false,},alias:{// This alias make sure we don't pull two different versions of monaco-editor'monaco-editor':'/node_modules/monaco-editor',// This alias makes sure we're avoiding a runtime error related to this package'@stoplight/ordered-object-literal$':'/node_modules/@stoplight/ordered-object-literal/src/index.mjs','react/jsx-runtime.js':'react/jsx-runtime',},},plugins:[newwebpack.ProvidePlugin({Buffer:['buffer','Buffer'],process:['process'],}),],module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']},/**       * The default way in which webpack loads wasm files won’t work in a worker,       * so we will have to disable webpack’s default handling of wasm files and       * then fetch the wasm file by using the file path that we get using file-loader.       *       * Resource: https://pspdfkit.com/blog/2020/webassembly-in-a-web-worker/       *       * Alternatively, WASM file can be bundled directly into JavaScript bundle as data URLs.       * This configuration reduces the complexity of WASM file loading       * but increases the overal bundle size:       *       * {       *   test: /\.wasm$/,       *   type: 'asset/inline',       * }       */{test:/\.wasm$/,loader:'file-loader',type:'javascript/auto',// this disables webpacks default handling of wasm},]}};

Alternativewebpack.config.js (webpack@5)

We've already built Web Workers artifacts for you, and they're located inside our npm distributionpackage indist/umd/ directory. To avoid the complexity of building the Web Worker artifacts, you canuse those artifacts directly. This setup will work both forproduction anddevelopment (webpack-dev-server)and will significantly shorten your build process.

Installcopy-webpack-plugin and other needed dependencies.

 $ npm i copy-webpack-plugin --save-dev $ npm i stream-browserify --save-dev $ npm i https-browserify --save-dev $ npm i stream-http --save-dev $ npm i util --save-dev $ npm i buffer --save-dev $ npm i process --save-dev

constpath=require('path');constwebpack=require('webpack');constCopyWebpackPlugin=require('copy-webpack-plugin');module.exports={mode:'production',entry:{app:'./index.js',},output:{globalObject:'self',filename:'static/js/[name].js',path:path.resolve(__dirname,'dist')},resolve:{fallback:{path:false,fs:false,http:require.resolve('stream-http'),// required for asyncapi parserhttps:require.resolve('https-browserify'),// required for asyncapi parserstream:require.resolve('stream-browserify'),util:require.resolve('util'),url:require.resolve('url'),buffer:require.resolve('buffer'),zlib:false,},alias:{// This alias make sure we don't pull two different versions of monaco-editor'monaco-editor':'/node_modules/monaco-editor',// This alias makes sure we're avoiding a runtime error related to this package'@stoplight/ordered-object-literal$':'/node_modules/@stoplight/ordered-object-literal/src/index.mjs','react/jsx-runtime.js':'react/jsx-runtime',}},plugins:[newwebpack.ProvidePlugin({Buffer:['buffer','Buffer'],process:['process'],}),newCopyWebpackPlugin({patterns:[{from:'node_modules/swagger-editor/dist/umd/apidom.worker.js',to:'static/js',},{from:'node_modules/swagger-editor/dist/umd/editor.worker.js',to:'static/js',}]}),],module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']},/**       * The default way in which webpack loads wasm files won’t work in a worker,       * so we will have to disable webpack’s default handling of wasm files and       * then fetch the wasm file by using the file path that we get using file-loader.       *       * Resource: https://pspdfkit.com/blog/2020/webassembly-in-a-web-worker/       *       * Alternatively, WASM file can be bundled directly into JavaScript bundle as data URLs.       * This configuration reduces the complexity of WASM file loading       * but increases the overal bundle size:       *       * {       *   test: /\.wasm$/,       *   type: 'asset/inline',       * }       */{test:/\.wasm$/,loader:'file-loader',type:'javascript/auto',// this disables webpacks default handling of wasm},]}};

Development

Prerequisites

Assumingprerequisites are already installed,Node.js>=22.11.0 andnpm >=10.9.0are the minimum required versions that this repo runs on, but we recommend using the latest version of Node.js@20.

Setting up

If you usenvm, running following command inside this repositorywill automatically pick the right Node.js version for you:

 $ nvm use

Run the following commands to set up the repository for local development:

 $ git clone https://github.com/swagger-api/swagger-editor.git $cd swagger-editor $ npm i $ npm start

npm scripts

Lint

 $ npm run lint

Runs unit and integration tests

 $ npmtest

Runs E2E Cypress tests

Usage indevelopment environment:

 $ npm run cy:dev

Usage inContinuous Integration (CI) environment:

 $ npm run cy:ci

Build

 $ npm run build

This script will build all the SwaggerEditor build artifacts -app,esm andumd.

Build artifacts

After building artifacts, every two new directories will be created:build/ anddist/.

build/

$ npm run build:app$ npm run build:app:serve

Builds and serves standalone SwaggerEditor application and all it's assets onhttp://localhost:3050/.

dist/esm/

$ 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/

$ npm run build:bundle:umd

SwaggerEditor UMD bundle exports SwaggerEditor symbol on a global object.It's bundled with React defined as external. This allows the consumer to use his own version of React + ReactDOM and mount SwaggerEditor lazily.

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1"/><metaname="description"content="SwaggerEditor"/><title>SwaggerEditor</title><linkrel="stylesheet"href="./swagger-editor.css"/></head><body><divid="swagger-editor"></div><scriptsrc="https://unpkg.com/react@18/umd/react.production.min.js"crossorigin></script><scriptsrc="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"crossorigin></script><scriptsrc="./dist/umd/swagger-editor.js"></script><script>constprops={url:'https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml',};constelement=React.createElement(SwaggerEditor,props);constdomContainer=document.querySelector('#swagger-editor');ReactDOM.render(element,domContainer);</script></body></html>

npm

SwaggerEditor is released asswagger-editor@5 npm package onnpmjs.com.Package can also be produced manually by running the following commands (assuming you're already followedsetting up steps):

 $ npm run build:bundle:esm $ npm run build:bundle:umd $ npm pack

Package mapping

SwaggerEditor maps itsbuild artifacts inpackage.json file in the following way:

"unpkg":"./dist/umd/swagger-editor.js","module":"./dist/esm/swagger-editor.js","browser":"./dist/esm/swagger-editor.js","jsnext:main":"./dist/esm/swagger-editor.js","exports": {"./package.json":"./package.json","./swagger-editor.css":"./dist/swagger-editor.css",".": {"browser":"./dist/esm/swagger-editor.js"  },"./plugins/*": {"browser":"./dist/esm/plugins/*/index.js","node":"./dist/esm/plugins/*/index.js"  },"./presets/*": {"browser":"./dist/esm/presets/*/index.js"  },"./apidom.worker": {"browser":"./dist/esm/apidom.worker.js"  },"./editor.worker": {"browser":"./dist/esm/editor.worker.js"  }}

To learn more about these fields please refer towebpack mainFields documentationor toNode.js Modules: Packages documentation.

Documentation

Using older version of React

Important

By older versions we specifically refer toReact >=17 <18.

By defaultswagger-editor@5 npm package comes with latest version ofReact@18.It's possible to useswagger-editor@5 npm package with older version of React.

Let's say my application integrates withswagger-editor@5 npm package and usesReact@17.0.2.

npm

In order to informswagger-editor@5 npm package that I require it to use my React version, I need to usenpm overrides.

{"dependencies": {"react":"=17.0.2","react-dom":"=17.0.2"  },"overrides": {"swagger-editor": {"react":"$react","react":"$react-dom","react-redux":"^8"    }  }}

Note

The React and ReactDOM override are defined as a reference to the dependency. Sincereact-redux@9 only supportsReact >= 18, we need to usereact-redux@8.

yarn

In order to informswagger-editor@5 npm package that I require it to use my specific React version, I need to useyarn resolutions.

{"dependencies": {"react":"17.0.2","react-dom":"17.0.2"  },"resolutions": {"swagger-editor/react":"17.0.2","swagger-editor/react-dom":"17.0.2","swagger-editor/react-redux":"^8"  }}

Note

The React and ReactDOM resolution cannot be defined as a reference to the dependency. Unfortunatelyyarn does not support aliasing like$react or$react-dom asnpm does. You'll need to specify the exact versions.

Customization

Plug points

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 usingenvironment variables, please refer toadding Custom Environment Variablessection of Create React App documentation.

Using preview plugins in SwaggerUI

SwaggerEditor comes with number ofpreview plugins that are responsible for renderingthe 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 an abilityto render AsyncAPI or API Design Systems definitions with SwaggerUI.

importSwaggerUIfrom'swagger-ui';importSwaggerUIStandalonePresetfrom'swagger-ui/dist/swagger-ui-standalone-preset';import'swagger-editor/swagger-editor.css';importEditorContentOriginPluginfrom'swagger-editor/plugins/editor-content-origin';importEditorContentTypePluginfrom'swagger-editor/plugins/editor-content-type';importEditorPreviewAsyncAPIPluginfrom'swagger-editor/plugins/editor-preview-asyncapi';importEditorPreviewAPIDesignSystemsPluginfrom'swagger-editor/plugins/editor-preview-api-design-systems';importSwaggerUIAdapterPluginfrom'swagger-editor/plugins/swagger-ui-adapter';SwaggerUI({url:'https://petstore.swagger.io/v2/swagger.json',dom_id:'#swagger-ui',presets:[SwaggerUI.presets.apis,SwaggerUIStandalonePreset],plugins:[EditorContentOriginPlugin,EditorContentTypePlugin,EditorPreviewAsyncAPIPlugin,EditorPreviewAPIDesignSystemsPlugin,SwaggerUIAdapterPlugin,SwaggerUI.plugins.DownloadUrl,],});

The key here isSwaggerUIAdapter plugin which adapts SwaggerEditor plugins to usedirectly with SwaggerUI.

Standalone mode

SwaggerUI standalone mode is supported as well. With standalone mode you'll get aTopBar withan input where URL of the definition can be provided and this definition is subsequently loadedby the SwaggerUI.

importSwaggerUIfrom'swagger-ui';importSwaggerUIStandalonePresetfrom'swagger-ui/dist/swagger-ui-standalone-preset';import'swagger-ui/dist/swagger-ui.css';import'swagger-editor/swagger-editor.css';importEditorContentOriginPluginfrom'swagger-editor/plugins/editor-content-origin';importEditorContentTypePluginfrom'swagger-editor/plugins/editor-content-type';importEditorPreviewAsyncAPIPluginfrom'swagger-editor/plugins/editor-preview-asyncapi';importEditorPreviewAPIDesignSystemsPluginfrom'swagger-editor/plugins/editor-preview-api-design-systems';importSwaggerUIAdapterPluginfrom'swagger-editor/plugins/swagger-ui-adapter';SwaggerUI({url:'https://petstore.swagger.io/v2/swagger.json',dom_id:'#swagger-ui',presets:[SwaggerUI.presets.apis,SwaggerUIStandalonePreset],plugins:[EditorContentOriginPlugin,EditorContentTypePlugin,EditorPreviewAsyncAPIPlugin,EditorPreviewAPIDesignSystemsPlugin,SwaggerUIAdapterPlugin,SwaggerUI.plugins.DownloadUrl,],layout:'StandaloneLayout',});

Utilizing preview plugins viaunpkg.com

It's possible to utilize preview plugins in a build-free way viaunpkg.com to create a standalonemulti-spec supporting version of SwaggerUI.

<!DOCTYPE html><html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1"/><metaname="theme-color"content="#000000"/><metaname="description"content="SwaggerUIMultifold"/><linkrel="stylesheet"href="//unpkg.com/swagger-editor@5.0.0-alpha.102/dist/swagger-editor.css"/></head><bodystyle="margin:0; padding:0;"><sectionid="swagger-ui"></section><scriptsrc="//unpkg.com/swagger-ui-dist@5.21.0/swagger-ui-bundle.js"></script><scriptsrc="//unpkg.com/swagger-ui-dist@5.21.0/swagger-ui-standalone-preset.js"></script><script>ui=SwaggerUIBundle({});// expose SwaggerUI React globally for SwaggerEditor to usewindow.React=ui.React;</script><scriptsrc="//unpkg.com/swagger-editor@5.0.0-alpha.102/dist/umd/swagger-editor.js"></script><script>SwaggerUIBundle({url:'https://petstore3.swagger.io/api/v3/openapi.json',dom_id:'#swagger-ui',presets:[SwaggerUIBundle.presets.apis,SwaggerUIStandalonePreset,],plugins:[SwaggerEditor.plugins.EditorContentOrigin,SwaggerEditor.plugins.EditorContentType,SwaggerEditor.plugins.EditorPreviewAsyncAPI,SwaggerEditor.plugins.EditorPreviewApiDesignSystems,SwaggerEditor.plugins.SwaggerUIAdapter,SwaggerUIBundle.plugins.DownloadUrl,],layout:'StandaloneLayout',});</script></body></html>

Composing customized SwaggerEditor version

SwaggerEditor is just a number of SwaggerUI plugins used withswagger-ui-react.Customized SwaggerEditor can be created by composing individual plugins with eitherswagger-ui andswagger-ui-react.

Plugins

List of available plugins:

dialogs
dropdown-menu
dropzone
editor-content-fixtures
editor-content-from-file
editor-content-origin
editor-content-persistence
editor-content-read-only
editor-content-type
editor-monaco
editor-monaco-language-apidom
editor-monaco-yaml-paste
editor-preview
editor-preview-api-design-systems
editor-preview-asyncapi
editor-preview-swagger-ui
editor-safe-render
editor-textarea
layout
modals
props-change-watcher
splash-screen
swagger-ui-adapter
top-bar
versions

Individual plugins can be imported in the following way:

importEditorContentTypePluginfrom'swagger-editor/plugins/editor-content-type';importEditorContentReadOnlyPluginfrom'swagger-editor/plugins/editor-content-read-only';

Presets

Along with plugins, presets are available as well. Preset is a collection of pluginsthat 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:

importTextareaPresetfrom'swagger-editor/presets/textarea';importMonacoPresetfrom'swagger-editor/presets/monaco';

NOTE: Please refer to thePlug points documentationof SwaggerUI to understand how presets are passed to SwaggerUI.

Composing with swagger-ui

importSwaggerUIfrom'swagger-ui';import'swagger-ui/dist/swagger-ui.css';importUtilPluginfrom'swagger-editor/plugins/util';importVersionsPluginfrom'swaggereditor/plugins/versions';importModalsPluginfrom'swagger-editor/plugins/modals';importDialogsPluginfrom'swagger-editor/plugins/dialogs';importDropdownMenuPluginfrom'swagger-editor/plugins/dropdown-menu';importDropzonePluginfrom'swagger-editor/plugins/dropzone';importVersionsPluginfrom'swagger-editor/plugins/versions';importEditorTextareaPluginfrom'swagger-editor/plugins/editor-textarea';importEditorMonacoPluginfrom'swagger-editor/plugins/editor-monaco';importEditorMonacoYamlPastePluginfrom'swagger-editor/plugins/editor-monaco-yaml-paste';importEditorMonacoLanguageApiDOMPluginfrom'swagger-editor/plugins/editor-monaco-language-apidom';importEditorContentReadOnlyPluginfrom'swagger-editor/plugins/editor-content-read-only';importEditorContentOriginPluginfrom'swagger-editor/plugins/editor-content-origin';importEditorContentTypePluginfrom'swagger-editor/plugins/editor-content-type';importEditorContentPersistencePluginfrom'swagger-editor/plugins/editor-content-persistence';importEditorContentFixturesPluginfrom'swagger-editor/plugins/editor-content-fixtures';importEditorContentFromFilePluginfrom'swagger-editor/plugins/editor-content-from-file';importEditorPreviewPluginfrom'swagger-editor/plugins/editor-preview';importEditorPreviewSwaggerUIPluginfrom'swagger-editor/plugins/editor-preview-swagger-ui';importEditorPreviewAsyncAPIPluginfrom'swagger-editor/plugins/editor-preview-asyncapi';importEditorPreviewApiDesignSystemsPluginfrom'swagger-editor/plugins/editor-preview-api-design-systems';importTopBarPluginfrom'swagger-editor/plugins/top-bar';importSplashScreenPluginfrom'swagger-editor/plugins/splash-screen';importLayoutPluginfrom'swagger-editor/plugins/layout';importEditorSafeRenderPluginfrom'swagger-editor/plugins/editor-safe-render';SwaggerUI({url:'https://petstore.swagger.io/v2/swagger.json',dom_id:'#swagger-editor',plugins:[UtilPlugin,VersionsPlugin,ModalsPlugin,DialogsPlugin,DropdownMenuPlugin,DropzonePlugin,VersionsPlugin,EditorTextareaPlugin,EditorMonacoPlugin,EditorMonacoYamlPastePlugin,EditorMonacoLanguageApiDOMPlugin,EditorContentReadOnlyPlugin,EditorContentOriginPlugin,EditorContentTypePlugin,EditorContentPersistencePlugin,EditorContentFixturesPlugin,EditorContentFromFilePlugin,EditorPreviewPlugin,EditorPreviewSwaggerUIPlugin,EditorPreviewAsyncAPIPlugin,EditorPreviewApiDesignSystemsPlugin,TopBarPlugin,SplashScreenPlugin,LayoutPlugin,EditorSafeRenderPlugin,],layout:'StandaloneLayout',});

Composing with swagger-ui-react

importReactfrom'react';importReactDOMfrom'react-dom';importSwaggerUIfrom'swagger-ui-react';import'swagger-ui-react/swagger-ui.css';importUtilPluginfrom'swagger-editor/plugins/util';importVersionsPluginfrom'swaggereditor/plugins/versions';importModalsPluginfrom'swagger-editor/plugins/modals';importDialogsPluginfrom'swagger-editor/plugins/dialogs';importDropdownMenuPluginfrom'swagger-editor/plugins/dropdown-menu';importDropzonePluginfrom'swagger-editor/plugins/dropzone';importVersionsPluginfrom'swagger-editor/plugins/versions';importEditorTextareaPluginfrom'swagger-editor/plugins/editor-textarea';importEditorMonacoPluginfrom'swagger-editor/plugins/editor-monaco';importEditorMonacoYamlPastePluginfrom'swagger-editor/plugins/editor-monaco-yaml-paste';importEditorMonacoLanguageApiDOMPluginfrom'swagger-editor/plugins/editor-monaco-language-apidom';importEditorContentReadOnlyPluginfrom'swagger-editor/plugins/editor-content-read-only';importEditorContentOriginPluginfrom'swagger-editor/plugins/editor-content-origin';importEditorContentTypePluginfrom'swagger-editor/plugins/editor-content-type';importEditorContentPersistencePluginfrom'swagger-editor/plugins/editor-content-persistence';importEditorContentFixturesPluginfrom'swagger-editor/plugins/editor-content-fixtures';importEditorContentFromFilePluginfrom'swagger-editor/plugins/editor-content-from-file';importEditorPreviewPluginfrom'swagger-editor/plugins/editor-preview';importEditorPreviewSwaggerUIPluginfrom'swagger-editor/plugins/editor-preview-swagger-ui';importEditorPreviewAsyncAPIPluginfrom'swagger-editor/plugins/editor-preview-asyncapi';importEditorPreviewApiDesignSystemsPluginfrom'swagger-editor/plugins/editor-preview-api-design-systems';importTopBarPluginfrom'swagger-editor/plugins/top-bar';importSplashScreenPluginfrom'swagger-editor/plugins/splash-screen';importLayoutPluginfrom'swagger-editor/plugins/layout';importEditorSafeRenderPluginfrom'swagger-editor/plugins/editor-safe-render';constSwaggerEditor=()=>{return(<SwaggerUIurl={url}plugins={[UtilPlugin,VersionsPlugin,ModalsPlugin,DialogsPlugin,DropdownMenuPlugin,DropzonePlugin,VersionsPlugin,EditorTextareaPlugin,EditorMonacoPlugin,EditorMonacoYamlPastePlugin,EditorMonacoLanguageApiDOMPlugin,EditorContentReadOnlyPlugin,EditorContentOriginPlugin,EditorContentTypePlugin,EditorContentPersistencePlugin,EditorContentFixturesPlugin,EditorContentFromFilePlugin,EditorPreviewPlugin,EditorPreviewSwaggerUIPlugin,EditorPreviewAsyncAPIPlugin,EditorPreviewApiDesignSystemsPlugin,TopBarPlugin,SplashScreenPlugin,LayoutPlugin,EditorSafeRenderPlugin,]}layout="StandaloneLayout"/>);};ReactDOM.render(<SwaggerEditor/>,document.getElementById('swagger-editor'));

Docker

Pre-built DockerHub image

SwaggerEditor is available as a pre-built docker image hosted ondocker.swagger.io.

$ docker pull docker.swagger.io/swaggerapi/swagger-editor:latest$ docker run -d -p 8080:80 docker.swagger.io/swaggerapi/swagger-editor:latest

Building locally

Privileged image:

 $ npm run build:app $ docker build. -t swaggerapi/swagger-editor:latest $ docker run -d -p 8080:80 swaggerapi/swagger-editor:latest

Now open your browser athttp://localhost:8080/.

Unprivileged image:

 $ npm run build:app $ docker build. -f Dockerfile.unprivileged -t swaggerapi/swagger-editor:latest-unprivileged $ docker run -d -p 8080:8080 swaggerapi/swagger-editor:latest-unprivileged

Now open your browser athttp://localhost:8080/.

No custom environment variables are currently supported by SwaggerEditor.

License

SwaggerEditor is licensed underApache 2.0 license.SwaggerEditor comes with an explicitNOTICE filecontaining additional legal notifications and information.

This project usesREUSE specification that defines a standardized methodfor declaring copyright and licensing for software projects.