Live API documentation preview
The Redocly OpenAPI VS Code extension relies on Redocly API docs to generate a preview of the API documentation based on the OpenAPI document you're editing. With this feature, you can view the OpenAPI source and the corresponding API documentation side-by-side. When you save a change to your OpenAPI definition, the documentation in the preview panel is automatically updated.
Access the documentation preview in any of the following ways:
- Select the Open preview button in the upper right section of your VS Code window.
, start typing
redocly, then select Redocly OpenAPI: Open preview .
Both actions open the Preview panel.
In the panel, you must enter your API key from Redocly to use the documentation preview feature. To obtain the key, first create a free Redocly account, then generate a personal API key for it.
When you have generated your personal API key, paste it into the API key in the Preview panel and select Submit. This enables documentation previews for all your workspaces.
In the tab bar above the panel, select the name of the YAML file for which you want to preview the documentation.
If you have defined custom names in the
apiDefinitions section of the
.redocly.yaml file, those names are used in tabs instead of full file names.
Selecting a name loads the API documentation preview for the API definition.
To customize the documentation preview, add supported API docs configuration options to the
referenceDocs section in your
For example, to hide the logo image and change the font size and color, you could add the following:
apiDefinitions: main: path/to/your-openapi.yaml test: path/to/another-openapi.yaml lint: extends: - recommended referenceDocs: hideLogo: true theme: colors: text: primary: "#FF0000" typography: fontSize: 16px
Remember to save the
.redocly.yaml file for changes to apply.
To exit the documentation preview, close the Preview panel. You can open it again at any point.