Code Editor for OpenAPI

SwaggerHub OpenAPI editor has a split view with the editor on the left and interactive API documentation on the right. The editor has two modes:

You can switch between the Code Editor and Visual Editor by using the buttons in the sidebar on the left. The editor autosaves drafts every 2 minutes, and you can also save your progress manually at any time.

Interactive API docs are generated from your API definition and are based on Swagger UI. The API docs are updated automatically as you type, helping you visualize the API you are creating. Here you can also make API calls directly in your browser.

The Navigation panel on the left shows a list of operations and models defined in your API. You can search and filter by paths, HTTP verbs, and model names, and quickly navigate to the corresponding place in the YAML code.

You can hide or show individual panels by using the buttons on the left.

To undo any unsaved changes in the editor, use the Revert to Last Saved command.

As you type, SwaggerHub automatically validates your API definition and shows any errors or warnings that might occur, such as syntax errors, unresolved references, or unused definitions. To see the error list, expand the validation bar at the bottom of the editor. Click an error message to jump to the line that triggered this error.

If your organization uses API Standardization, this is where API editors can see the style violations found in the current API.

Click the API name in the header area to open the API info panel, where you can rename, compare, or transfer the API. Note: The available commands depend on whether you are the API owner or collaborator.

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

At the bottom of the panel, you can see who created this API version and when, who owns the API, and the date and time it was last saved.

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

You can change the editor font size and switch between the dark and light syntax highlighting themes. Editor options persist across sessions in your current browser.

API definitions can include $ref references to domains or components in the current definition. To navigate to a referenced resource, hover over the $ref value and click Jump To. External links are opened in a new browser tab.

The editor’s toolbar also contains the following items: