Swagger Studio Code Editor

Swagger Studio provides an in-browser code editor that allows you to work both with OpenAPI and AsyncAPI definitions in YAML format.

You can write, edit, and preview your API definitions in real time, with support for multiple specification versions.

Note

Alternatively, you can use the Swagger Studio extension for Visual Studio Code to create, edit, and validate API definitions and domains. Learn more about it in Visual Studio Marketplace.

The API definitions are stored in the YAML format. You can also import or paste JSON and edit it directly, or convert it to YAML. Note that you can download your AsyncAPI definitions in both formats, YAML and JSON.

In addition to the code editor, also includes a form editor for selected OpenAPI definitions. It allows you to edit API metadata and operations without having to understand the OpenAPI syntax.

Supported specifications

Swagger Studio code editor supports the following specifications:

Overview

Swagger Studio features a split-view interface with the code editor on the left and interactive API documentation on the right. This layout allows you to write and preview your API definitions in real time.

The code editor supports the following features:

  • Autocomplete for specification keywords.

  • Syntax highlighting.

  • Code folding.

  • Search and replace.

  • Keyboard shortcuts.

SH_Screenshot_CodeEditor_01.png

The Interactive API documentation, powered by Swagger UI, updates automatically as you type. It helps you visualize your API and make live API calls directly from the browser.

Use Diff Mode to compare your current changes with the last saved version. If needed, you can revert to the last saved state by clicking Revert to Last Saved.

SH_Screenshot_CodeEditor_02.png

Important

When working on the same API along with other collaborators, keep in mind that Swagger Studio does not support simultaneous editing. Changes are not merged; they are overwritten by the user who saves them last. Make sure to coordinate your editing sessions with other collaborators.

Syntax validation

As you type, Swagger Studio automatically validates your API definition and highlights issues such as syntax errors, unresolved references, or unused definitions. To view the list of issues, expand the validation bar at the bottom of the editor.

Click an error message to view the corresponding line in the editor.

Note

Syntax validation is not currently supported for AsyncAPI 3.0.0.

SH_Screenshot_CodeEditor_03.png

Swagger Studio uses lazy loading for domain references, which may affect how domain-related errors appear in APIs. See Lazy Loading to learn how to validate both the API and its referenced domains.

If your organization uses API Standardization, the editor will display style issues and rule violations for OpenAPI and AsyncAPI 2.x.x definitions, based on your organization's guidelines.

With support for Spectral validation, code editor allows you to check your definition in real time againts predefined rulesets. The error list below the editor displays detected issues grouped by rule and filterable by severity.

Info Panel: manage API and integrations

Click the API name in the header area to open the Info Panel, where you can manage your API.

SH_Screenshot_CodeEditor_04.png

Depending on your role (owner or collaborator), on the Details tab you can:

  • SH_Icon_CodeEditor_04.png Fork or delete the API (available for AsyncAPI).

  • SH_Icon_CodeEditor_05.png Transfer ownership.

  • SH_Icon_CodeEditor_06.png Delete the API.

  • SH_Icon_CodeEditor_07.png Rename the API.

  • SH_Icon_CodeEditor_08.png Compare and merge the API.

SH_Screenshot_CodeEditor_09.png

On the Integrations tab of the Info Panel, you can configure integrations for your API.

SH_Screenshot_CodeEditor_10.png

At the bottom of the Info Panel, you can find metadata such as:

  • Owner: The owner of the API.

  • Created By: The name of the user who created the API.

  • Last Saved: The last saved timestamp.

  • Created: The date of creation.

Note

The Created By information is available only for API and domain versions created in Swagger Studio after November 26, 2019. For earlier versions, refer to the audit logs.

Version selector

If your API has multiple versions, you can quickly switch between the versions by using the drop-down menu next to the version number in the header.

SH_Screenshot_CodeEditor_05.png

Editor options

You can customize your editing experience by:

  • Adjusting the editor font size.

  • Switching between dark and light themes.

These preferences are saved in your current browser and persist across sessions.

SH_Screenshot_CodeEditor_06.png

Source control integration

If your API is connected to a source control system (for example, GitHub), you can use the Sync Management button to generate code and push changes directly to the configured repository branches.

Note

The legacy GitHub Push option is still available but deprecated. Use GitHub Sync for current integrations.

SH_Screenshot_CodeEditor_07.png

Export options

Swagger Studio allows you to export your API or domain definition in multiple formats:

  • Download API/Domain: YAML or JSON.

  • Client SDK: Generates a client SDK in the selected language.

  • Server Stub: Generates a server stub in the selected language.

  • Documentation: Generates documentation in the chosen format.

  • Codegen Options: Customize code generation options for stubs and SDKs.

To export your API, click Export and select the format.

SH_Screenshot_CodeEditor_08.png

Note

Exporting resolved definitions is not supported for AsyncAPI 3.0.0.

Contract Testing

If Swagger Studio is configured for the current API, you can use the Contract Testing button in the toolbar to check compatibility between your API definition and the expected contract.

SH_Screenshot_CodeEditor_11.png

Note

This feature is available only for OpenAPI definitions up to version 3.0. It is not supported for OpenAPI 3.1 or AsyncAPI.

Code generation

Swagger Studio allows you to generate code using the Codegen functionality. It fully supports OpenAPI 2.0 and OpenAPI 3.0 definitions. Support for OpenAPI 3.1 is currently in beta and is limited.

Learn more in Generating Code.Generating Code

SH_Screenshot_CodeEditor_12.png

Miscellaneous

The editor’s toolbar also contains the following options:

SH_Icon_CodeEditor_03.png View Documentation

Click to view interactive documentation for this API in a new browser tab.

SH_Icon_CodeEditor_02.png Enable/Disable Notifications

Click to subscribe to or unsubscribe from email notifications about changes in this API.

SH_Icon_CodeEditor_01.png Share & Collaborate

Click to invite other users to collaborate on this API.

Keyboard shortcuts

The Swagger Studio editor supports the following keyboard shortcuts for faster editing:

Find/replace

Action

Windows/Linux

Mac

Find dialog

Ctrl + F

Command + F

Replace dialog

Ctrl + H

Command + Option + F

Editing

Action

Windows/Linux

Mac

Show the auto-completion list

Ctrl + Space

Ctrl + Space

Comment out or uncomment the current line

Ctrl + /

Command + /

Delete the current line

Ctrl + D

Ctrl + D

Undo

Ctrl + Z

Command + Z

Redo

Ctrl + Y, Ctrl + Shift + Z

Command + Shift + Z

Indent selection

Tab

Tab

Outdent selection

Shift + Tab

Shift + Tab

Select all

Ctrl + A

Command + A

See Also

Publication date: