Projects

VSCode Extension: OpenAPI Docs Viewer

Display interactive OpenAPI schema documentation in VSCode.

Published April 19, 2024 | Updated April 21, 2024

Overview

Links
Github →Marketplace →

Features

Enter any OpenAPI schema URL and view the documentation in a VSCode tab. You can customize the schema renderer and theme.

Supported Renderers

Elements (Default)

Build beautiful, interactive API Docs with embeddable React or Web Components, powered by OpenAPI and Markdown. https://github.com/stoplightio/elements

Preview

ThemeLayout: MobileLayout: Desktop
DarkElements Dark Theme: SmallElements Dark Theme: Large
LightElements Light Theme: SmallElements Light Theme: Large
RapiDoc

Custom Element for Open-API spec viewing https://github.com/rapi-doc/RapiDoc

Preview

ThemeLayout: MobileLayout: Desktop
DarkRapiDoc Dark Theme: SmallRapiDoc Dark Theme: Large
LightRapiDoc Light Theme: SmallRapiDoc Light Theme: Large
ReDoc

OpenAPI/Swagger-generated API Reference Documentation https://github.com/Redocly/redoc

Preview

ThemeLayout: MobileLayout: Desktop
DarkRedoc Dark Theme: SmallRedoc Dark Theme: Large
LightRedoc Light Theme: SmallRedoc Light Theme: Large
Swagger

Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API. https://github.com/swagger-api/swagger-ui

Preview

ThemeLayout: MobileLayout: Desktop
DarkSwagger Dark Theme: SmallSwagger Dark Theme: Large
LightSwagger Light Theme: SmallSwagger Light Theme: Large

Themes

Supported Themes: system, light, dark Default Theme: system

By default, the extension will use the system theme. System theme adopts the color scheme of the current VSCode theme. If you want to override the system theme, you can set the openapi-docs-viewer.defaultTheme setting to dark or light.

Layout

Supported Layouts: responsive, mobile, desktop Default Layout: responsive

By default, the extension will use the responsive layout. If you want to override the layout, you can set the openapi-docs-viewer.defaultLayout setting to mobile or desktop.

Extension Settings

This extension contributes the following settings:

  • openapi-docs-viewer.defaultRenderer: Set the default theme for the OpenAPI viewer, default is elements.
  • openapi-docs-viewer.defaultTheme: Set the default color scheme, default is system.
  • openapi-docs-viewer.defaultLayout: Set the default layout, default is responsive.