swagger-api

swagger-editor: Edit and Preview API Specifications

Swagger Editor is a browser-based editor and embeddable JavaScript package for creating and reviewing API specifications. It supports OpenAPI and AsyncAPI formats, with plugins for editing, validation-oriented workflows, and previews.

JavaScriptAPIDeveloper ToolsWeb Development
View on GitHub Compare
Stars
9.5k
Forks
2.4k
Stars, last 8 days
+3

Our take

Health score

63/100

How it is scored
Activity
76
Community
61
Issues
37
Pull requests
76

+3 stars in the last 8 days

  • Releases more often than 86% of the projects we track
  • Merges more pull requests than 79% of the projects we track
  • Slower to close issues than 88% of the projects we track

Overview

Swagger Editor provides an interactive workspace for authoring API definitions and viewing a rendered preview. It is useful for API developers who want to work with specification files in a browser, or embed the editor in an existing React application.

The project is assembled from Swagger UI plugins and includes both a standalone application and distributable JavaScript bundles. Its plugin and preset system also lets teams compose a customized editor experience.

Key Features

  • Edit specification files in Monaco or a textarea-based editor.
  • Work with OpenAPI 2.0, 3.0, 3.1, and 3.2, as well as AsyncAPI 2.x and 3.x, in JSON or YAML.
  • Preview definitions with Swagger UI and plugins for AsyncAPI and API Design Systems.
  • Import the editor as an npm package or use its standalone web application.
  • Customize the editor by composing plugins and presets.
  • Choose simplified or ApiDOM-based syntax highlighting.
  • Build and deploy the application in Docker.

Use Cases

  • API developers can draft and inspect OpenAPI definitions while iterating on an API contract.
  • Teams can embed an API specification editor in an existing React-based developer portal or internal tool.
  • Organizations can assemble a tailored editor with only the plugins and presets they need.
  • Developers working with AsyncAPI can edit specifications and use the available preview plugin.

Getting Started

The README documents prerequisites and integration options. For local development, clone the repository, install dependencies, and start the app:

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

See the README for package integration, build, and deployment details.

Considerations

  • Installing the npm package requires native build prerequisites, including Python 3.x with node-gyp, GLIBC 2.29 or newer, and Emscripten or Docker.
  • The README specifies Node.js 24.18.0 or newer and npm 11.16.0 or newer for repository development. The npm package has a separate stated minimum of Node.js 12.22.0.
  • Bundling the package can use substantial memory; the README describes increasing Node.js heap size as a workaround.
  • Installation analytics are collected through Scarf, with documented opt-out settings.
  • The repository input does not provide a license value, although its README identifies Apache 2.0 licensing.

Found this useful?

Share it with someone who would like swagger-editor.