このページは Swagger Editor Next（ベータ版）に関するものです。現在の Swagger Editor ドキュメントをお探しの場合は、Swagger Editor をご覧ください。

SwaggerEditor

SwaggerEditor は、構築インフラストラクチャとして フォークされた Create React App を使用しています。

はじめに

前提条件

これらの前提条件は、SwaggerEditor を npm パッケージとしてインストールする場合と、ローカル開発環境を設定する場合の両方で必要です。

node-gyp と Python 3.x
GLIBC >=2.29
emscripten または docker をインストールする必要があります。Docker オプションの使用をお勧めします。

インストール

前提条件が既にインストールされていると仮定すると、SwaggerEditor npm パッケージはインストール可能であり、Node.js >= 12.22.0 で動作します。次のコマンドを実行して、npm CLI を介して SwaggerEditor をインストールできます。

 $ npm install swagger-editor@>=5

注：swagger-editor@5 npm パッケージを使用しているプロジェクトを構築するためにバンドラーを使用する場合、次の Node.js エラーが発生する可能性があります。Reached heap limit Allocation failed - JavaScript heap out of memory。これは、バンドルする必要があるコードの量が非常に多いためです。このエラーは、Node.js の最大ヒープ制限を拡張することで解決できます：export NODE_OPTIONS="--max_old_space_size=4096"。

使用方法

アプリケーションでパッケージを使用する

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import SwaggerEditor from 'swagger-editor';
import 'swagger-editor/swagger-editor.css';

const url = "https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml";

const MyApp = () => (
  <div>
    <h1>SwaggerEditor Integration</h1>
    <SwaggerEditor url={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)

webpack@5 が SwaggerEditor を正しくビルドするために必要な依存関係をインストールします。

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

const path = require('path');
const webpack = 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 parser
      https: require.resolve('https-browserify'), // required for asyncapi parser
      stream: require.resolve('stream-browserify'),
      util: require.resolve('util'),
      url: require.resolve('url'),
      zlib: false,
    },
    alias: {
      // This alias make sure we don't pull two different versions of monaco-editor
      'monaco-editor': '/node_modules/monaco-editor',
    },
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser.js',
      Buffer: ['buffer', 'Buffer'],
    }),
  ],
  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
      },
    ]
  }
};

代替 webpack.config.js (webpack@5)

Web Worker フラグメントは既に作成済みで、npm 配布パッケージの dist/umd/ ディレクトリ内にあります。Web Worker フラグメントの構築の複雑さを回避するために、これらのフラグメントを直接使用できます。この設定は、本番環境と開発環境（webpack-dev-server）の両方で動作し、ビルドプロセスを大幅に短縮します。

copy-webpack-plugin とその他の必要な依存関係をインストールします。

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

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = 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 parser
      https: require.resolve('https-browserify'), // required for asyncapi parser
      stream: require.resolve('stream-browserify'),
      util: require.resolve('util'),
      url: require.resolve('url'),
      zlib: false,
    },
    alias: {
      // This alias make sure we don't pull two different versions of monaco-editor
      'monaco-editor': '/node_modules/monaco-editor',
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser.js',
      Buffer: ['buffer', 'Buffer'],
    }),
    new CopyWebpackPlugin({
      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']
      }
    ]
  }
};

開発

前提条件

前提条件が既にインストールされていると仮定すると、Node.js >=20.3.0 と npm >=9.6.7 はこのリポジトリが動作するのに必要な最小バージョンですが、Node.js@20 の最新バージョンを使用することをお勧めします。

設定

nvm を使用する場合、このリポジトリ内で次のコマンドを実行すると、適切な Node.js バージョンが自動的に選択されます。

 $ nvm use

ローカル開発のためにリポジトリを設定するには、次のコマンドを実行します。

 $ git clone https://github.com/swagger-api/swagger-editor.git
 $ cd swagger-editor
 $ git checkout next
 $ git submodule init
 $ git submodule update
 $ npm i
 $ npm start

npm スクリプト

Lint

 $ npm run lint

単体テストと統合テストを実行します。

 $ npm test

E2E Cypress テストを実行します。

開発環境での使用方法

 $ npm run cy:dev

継続的インテグレーション (CI) 環境での使用方法

 $ npm run cy:ci

ビルド

 $ npm run build

このスクリプトは、すべての SwaggerEditor ビルド成果物（app、esm、umd）をビルドします。

ビルド成果物

成果物をビルドした後、2 つの新しいディレクトリ（build/ と dist/）が作成されます。

build/

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

スタンドアロンの SwaggerEditor アプリケーションとそのすべての資産を http://localhost:3050/ でビルドして提供します。

dist/esm/

$ npm run build:bundle:esm

このバンドルは、SwaggerEditor を独自のアプリケーションでライブラリとして使用し、独自のビルドプロセスを持つサードパーティが使用するために適しています。

dist/umd/

$ npm run build:bundle:umd

SwaggerEditor UMD バンドルは、グローバルオブジェクトに SwaggerEditor シンボルをエクスポートします。React は外部としてバンドルされています。これにより、コンシューマーは独自のバージョンの React + ReactDOM を使用して、SwaggerEditor を遅延ロードできます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta
    name="description"
    content="SwaggerEditor"
  />
  <title>SwaggerEditor</title>
  <link rel="stylesheet" href="./swagger-editor.css" />
</head>
<body>
  <div id="swagger-editor"></div>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script src="./dist/umd/swagger-editor.js"></script>
  <script>
    const props = {
      url: 'https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml',
    };
    const element = React.createElement(SwaggerEditor, props);
    const domContainer = document.querySelector('#swagger-editor');

    ReactDOM.render(element, domContainer);
  </script>
</body>
</html>

npm

SwaggerEditor は、npmjs.com で swagger-editor@5 npm パッケージとしてリリースされています。パッケージは、次のコマンドを実行することによっても手動で作成できます（設定の手順に従っていることを前提としています）。

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

パッケージマッピング

SwaggerEditor は、package.json ファイルでビルド成果物を次のようにマッピングします。

"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"
  },
  "./presets/*": {
    "browser": "./dist/esm/presets/*/index.js"
  },
  "./apidom.worker": {
    "browser": "./dist/esm/apidom.worker.js"
  },
  "./editor.worker": {
    "browser": "./dist/esm/editor.worker.js"
  }
}

これらのフィールドの詳細については、webpack mainFields ドキュメントまたは Node.js モジュール：パッケージドキュメントを参照してください。

ドキュメント

古いバージョンの React を使用する場合

[重要] 古いバージョンとは、特に React >=17 <18 を指します。

デフォルトでは、swagger-editor@5 npm パッケージには、React@18 の最新バージョンが付属しています。swagger-editor@5 npm パッケージを古いバージョンの React と共に使用することも可能です。

たとえば、私のアプリケーションが swagger-editor@5 npm パッケージと統合されていて、[メールアドレスを保護しました] を使用しているとします。

npm

swagger-editor@5 npm パッケージに、私の React バージョンを使用する必要があることを知らせるには、npm オーバーライドを使用する必要があります。

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

[注] React と ReactDOM のオーバーライドは、依存関係への参照として定義されています。react-redux@9 は React >= 18 のみをサポートしているため、react-redux@8 を使用する必要があります。

yarn

swagger-editor@5 npm パッケージに、特定の React バージョンを使用する必要があることを知らせるには、yarn レゾリューションを使用する必要があります。

{
  "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"
  }
}

[注] React と ReactDOM の解決策は、依存関係への参照として定義できません。残念ながら、yarn は npm のように $react や $react-dom のエイリアシングをサポートしていません。正確なバージョンを指定する必要があります。

カスタマイズ

プラグポイント

環境変数

環境変数を使用して、起動時に SwaggerEditor がロードするローカル JSON/YAML ファイルまたはリモート URL を指定できます。これらの環境変数は、ビルド時にビルド成果物に組み込まれます。

現在使用可能な環境変数

変数名	説明
`REACT_APP_DEFINITION_FILE`	ローカルファイルパスを指定します。指定されたファイルは、`/public/static` ディレクトリにも存在する必要があります。
`REACT_APP_DEFINITION_URL`	リモート URL を指定します。この環境変数は現在、`REACT_APP_SWAGGER_FILE` よりも優先されます。
`REACT_APP_VERSION`	このアプリのバージョンを指定します。バージョンは `package.json` ファイルから読み取られます。

サンプルの環境変数値は、.env ファイルにあります。環境変数の使用方法の詳細については、Create React App ドキュメントのカスタム環境変数の追加セクションを参照してください。

SwaggerUI でプレビュープラグインを使用する

SwaggerEditor には、エディターで作成されている定義のレンダリングを担当する多くの preview プラグインが含まれています。これらのプラグインには以下が含まれます。

EditorPreviewAsyncAPIPlugin - AsyncAPI 仕様レンダリングサポート
EditorPreviewAPIDesignSystemsPlugin - API デザインシステムレンダリングサポート

少し調整すれば、これらのプラグインをSwaggerUIで使用して、AsyncAPIまたはAPI Design Systemsの定義をSwaggerUIでレンダリングする機能を提供できます。

import SwaggerUI from 'swagger-ui';
import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset';
import 'swagger-editor/swagger-editor.css';
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
import EditorPreviewAPIDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
import SwaggerUIAdapterPlugin from '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: [
    EditorContentTypePlugin,
    EditorPreviewAsyncAPIPlugin,
    EditorPreviewAPIDesignSystemsPlugin,
    SwaggerUIAdapterPlugin,
    SwaggerUI.plugins.DownloadUrl,
  ],
});

ここで重要なのは、SwaggerUIAdapterプラグインです。これは、SwaggerEditorプラグインを直接SwaggerUIで使用できるようにするためのアダプターです。

スタンドアロンモード

SwaggerUIのスタンドアロンモードもサポートされています。スタンドアロンモードでは、定義のURLを入力できるTopBarが表示され、この定義がSwaggerUIによってロードされます。

import SwaggerUI from 'swagger-ui';
import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset';
import 'swagger-ui/dist/swagger-ui.css';
import 'swagger-editor/swagger-editor.css';
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
import EditorPreviewAPIDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
import SwaggerUIAdapterPlugin from '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: [
    EditorContentTypePlugin,
    EditorPreviewAsyncAPIPlugin,
    EditorPreviewAPIDesignSystemsPlugin,
    SwaggerUIAdapterPlugin,
    SwaggerUI.plugins.DownloadUrl,
  ],
  layout: 'StandaloneLayout',
});

unpkg.com を使用したプレビュープラグインの活用

unpkg.com を使用することで、ビルドなしでプレビュープラグインを活用し、複数の仕様をサポートするスタンドアロン型のSwaggerUIを作成できます。

<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="SwaggerUIMultifold" />
    <link rel="stylesheet" href="//unpkg.com/[email protected]/dist/swagger-editor.css" />
  </head>
  <body style="margin:0; padding:0;">
    <section id="swagger-ui"></section>

    <script src="//unpkg.com/[email protected]/swagger-ui-bundle.js"></script>
    <script src="//unpkg.com/[email protected]/swagger-ui-standalone-preset.js"></script>
    <script>
      ui = SwaggerUIBundle({});
      // expose SwaggerUI React globally for SwaggerEditor to use
      window.React = ui.React;
    </script>
    <script src="//unpkg.com/[email protected]/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.EditorContentType,
          SwaggerEditor.plugins.EditorPreviewAsyncAPI,
          SwaggerEditor.plugins.EditorPreviewApiDesignSystems,
          SwaggerEditor.plugins.SwaggerUIAdapter,
          SwaggerUIBundle.plugins.DownloadUrl,
        ],
        layout: 'StandaloneLayout',
      });
    </script>
  </body>
</html>

カスタマイズされたSwaggerEditorバージョンの構成

SwaggerEditorは、swagger-ui-reactで使用されるいくつかのSwaggerUIプラグインの集合体です。カスタマイズされたSwaggerEditorは、swagger-uiとswagger-ui-reactのいずれかを使用して個々のプラグインを組み合わせることで作成できます。

プラグイン

利用可能なプラグインの一覧

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

個々のプラグインは、以下の方法でインポートできます。

import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';

プリセット

プラグインに加えて、プリセットも利用可能です。プリセットは、複合機能を提供するために連携して動作するように設計されたプラグインの集合体です。

利用可能なプリセットの一覧

textarea
monaco

個々のプリセットは、以下の方法でインポートできます。

import TextareaPreset from 'swagger-editor/presets/textarea';
import MonacoPreset from 'swagger-editor/presets/monaco';

注意：プリセットがSwaggerUIにどのように渡されるかについては、SwaggerUIのプラグポイントに関するドキュメントを参照してください。

swagger-uiとの構成

import SwaggerUI from 'swagger-ui';
import 'swagger-ui/dist/swagger-ui.css';
import ModalsPlugin from 'swagger-editor/plugins/modals';
import DialogsPlugin from 'swagger-editor/plugins/dialogs';
import DropdownMenuPlugin from 'swagger-editor/plugins/dropdown-menu';
import DropzonePlugin from 'swagger-editor/plugins/dropzone';
import VersionsPlugin from 'swagger-editor/plugins/versions';
import EditorTextareaPlugin from 'swagger-editor/plugins/editor-textarea';
import EditorMonacoPlugin from 'swagger-editor/plugins/editor-monaco';
import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';
import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';
import EditorContentOriginPlugin from 'swagger-editor/plugins/editor-content-origin';
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
import EditorContentPersistencePlugin from 'swagger-editor/plugins/editor-content-persistence';
import EditorContentFixturesPlugin from 'swagger-editor/plugins/editor-content-fixtures';
import EditorPreviewPlugin from 'swagger-editor/plugins/editor-preview';
import EditorPreviewSwaggerUIPlugin from 'swagger-editor/plugins/editor-preview-swagger-ui';
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
import EditorPreviewApiDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
import TopBarPlugin from 'swagger-editor/plugins/top-bar';
import SplashScreenPlugin from 'swagger-editor/plugins/splash-screen';
import LayoutPlugin from 'swagger-editor/plugins/layout';
import EditorSafeRenderPlugin from 'swagger-editor/plugins/editor-safe-render';

SwaggerUI({
  url: 'https://petstore.swagger.io/v2/swagger.json',
  dom_id: '#swagger-editor',
  plugins: [
    ModalsPlugin,
    DialogsPlugin,
    DropdownMenuPlugin,
    DropzonePlugin,
    VersionsPlugin,
    EditorTextareaPlugin,
    EditorMonacoPlugin,
    EditorMonacoLanguageApiDOMPlugin,
    EditorContentReadOnlyPlugin,
    EditorContentOriginPlugin,
    EditorContentTypePlugin,
    EditorContentPersistencePlugin,
    EditorContentFixturesPlugin,
    EditorPreviewPlugin,
    EditorPreviewSwaggerUIPlugin,
    EditorPreviewAsyncAPIPlugin,
    EditorPreviewApiDesignSystemsPlugin,
    TopBarPlugin,
    SplashScreenPlugin,
    LayoutPlugin,
    EditorSafeRenderPlugin,
  ],
  layout: 'StandaloneLayout',
});

swagger-ui-reactとの構成

import React from 'react';
import ReactDOM from 'react-dom';
import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';
import ModalsPlugin from 'swagger-editor/plugins/modals';
import DialogsPlugin from 'swagger-editor/plugins/dialogs';
import DropdownMenuPlugin from 'swagger-editor/plugins/dropdown-menu';
import DropzonePlugin from 'swagger-editor/plugins/dropzone';
import VersionsPlugin from 'swagger-editor/plugins/versions';
import EditorTextareaPlugin from 'swagger-editor/plugins/editor-textarea';
import EditorMonacoPlugin from 'swagger-editor/plugins/editor-monaco';
import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';
import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';
import EditorContentOriginPlugin from 'swagger-editor/plugins/editor-content-origin';
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
import EditorContentPersistencePlugin from 'swagger-editor/plugins/editor-content-persistence';
import EditorContentFixturesPlugin from 'swagger-editor/plugins/editor-content-fixtures';
import EditorPreviewPlugin from 'swagger-editor/plugins/editor-preview';
import EditorPreviewSwaggerUIPlugin from 'swagger-editor/plugins/editor-preview-swagger-ui';
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
import EditorPreviewApiDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
import TopBarPlugin from 'swagger-editor/plugins/top-bar';
import SplashScreenPlugin from 'swagger-editor/plugins/splash-screen';
import LayoutPlugin from 'swagger-editor/plugins/layout';
import EditorSafeRenderPlugin from 'swagger-editor/plugins/editor-safe-render';

const SwaggerEditor = () => {
  return (
    <SwaggerUI
      url={url}
      plugins={[
        ModalsPlugin,
        DialogsPlugin,
        DropdownMenuPlugin,
        DropzonePlugin,
        VersionsPlugin,
        EditorTextareaPlugin,
        EditorMonacoPlugin,
        EditorMonacoLanguageApiDOMPlugin,
        EditorContentReadOnlyPlugin,
        EditorContentOriginPlugin,
        EditorContentTypePlugin,
        EditorContentPersistencePlugin,
        EditorContentFixturesPlugin,
        EditorPreviewPlugin,
        EditorPreviewSwaggerUIPlugin,
        EditorPreviewAsyncAPIPlugin,
        EditorPreviewApiDesignSystemsPlugin,
        TopBarPlugin,
        SplashScreenPlugin,
        LayoutPlugin,
        EditorSafeRenderPlugin,
      ]}
      layout="StandaloneLayout"
    />
  );
};

ReactDOM.render(<SwaggerEditor />, document.getElementById('swagger-editor'));

Docker

事前ビルド済みのDockerHubイメージ

SwaggerEditorは、DockerHubでホストされている事前ビルド済みのDockerイメージとして利用できます。

$ docker pull swaggerapi/swagger-editor:next-v5
$ docker run -d -p 8080:80 swaggerapi/swagger-editor:next-v5

ローカルでのビルド

特権イメージ:

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

ブラウザでhttp://localhost:8080/を開いてください。

非特権イメージ:

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

ブラウザでhttp://localhost:8080/を開いてください。

現在、SwaggerEditorではカスタム環境変数はサポートされていません。

ライセンス

SwaggerEditorはApache 2.0ライセンスの下でライセンスされています。SwaggerEditorには、追加の法的通知と情報を含む明示的なNOTICEファイルが付属しています。

このプロジェクトは、ソフトウェアプロジェクトの著作権とライセンスを宣言するための標準化された方法を定義するREUSE仕様を使用しています。

ソフトウェア構成品目表 (SBOM)

ソフトウェア部品表（SBOM）は、このリポジトリの依存関係グラフで利用できます。SPDX形式でSBOMをダウンロードするには、「SBOMのエクスポート」ボタンをクリックしてください。

SwaggerEditor

目次

はじめに

前提条件

インストール

使用方法

開発

前提条件

設定

npm スクリプト

ビルド成果物

パッケージマッピング

ドキュメント

古いバージョンの React を使用する場合

npm

yarn

カスタマイズ

環境変数

SwaggerUI でプレビュープラグインを使用する

スタンドアロンモード

unpkg.com を使用したプレビュープラグインの活用

カスタマイズされたSwaggerEditorバージョンの構成

プラグイン

プリセット

swagger-uiとの構成

swagger-ui-reactとの構成

Docker

事前ビルド済みのDockerHubイメージ

ローカルでのビルド

ライセンス

ソフトウェア構成品目表 (SBOM)