Developer Programs

Learn

Docs

Swagger UI

Formatting your Content > Shortcodes > Swagger UI

Swagger is a tool that allows you to design and document REST APIs. Swagger is based on the OpenAPI specification.

Swagger includes a Swagger Editor tool that you’ll use to edit your API specification. This tool allows you to export the API specification to either a yaml or json file.

jhDocs includes a jhdocs-swagger-ui shortcode that allows you to display a Swagger API specification file.

This shortcode takes one parameter:

  • url: The URL of the API specification file

After exporting your API specification to a yaml or json file from the Swagger Editor, you’ll then add that API specification file into your documentation site.

You’ll then add an instance of the jhdocs-swagger-ui shortcode to a markdown page in your site, setting the shortcode’s url parameter to the URL within your doc site for the API specification file.

If the url links to a Swagger UI specfile that’s local to your site (versus a remote file in a different site), then the content within the specfile will be made visible to your site search, allowing users to search your site for content that’s found within the specfile itself. If you link to a remote specfile, that content is not embedded or searchable within your site.

Configuring Swagger support

Before you can use the jhdocs-swagger-ui shortcode in your content, you must first define a swaggerSupport parameter with a value of standard in your config.yaml file in order for your Swagger UI spec files to display properly. This setting tells jhDocs to load the Swagger UI CSS from the version of Swagger UI that is distributed by jhDocs.

If your site uses a custom Swagger UI setup (to date this is only the Digital Toolkit doc site), you must first define a swaggerSupport parameter with a value of custom in your config.yaml file in order for your Swagger UI spec files to display properly. This setting tells jhDocs to load the Swagger UI CSS from the node_modules/swagger-ui-dist folder.

Swagger UI in the Digital Toolkit doc site

The Digital Toolkit documentation site uses Swagger UI to document its service APIs, but has added custom code to set up tight integration with the Garden test environment for authorization. That site currently uses an older version of swagger-ui, with some complex custom integration.

In contrast, the jhdocs-swagger-ui shortcode described here uses a more recent version of swagger-ui and does not have custom code that integrates with the Garden test environment. Our goal is to see if this generic Swagger UI shortcode will serve the needs of our other doc sites without requiring custom integration for authorization.

Swagger and the Table of Contents

Swagger has the unfortunate side effect of interfering with intradocument links (linking to locations within a document and not just to the document itself) needed for a table of contents, so this shortcode will hide the table of contents in any page that it’s in.

For this reason, you may want to partition your documentation to avoid mixing complex documentation that needs headers in the same page as a Swagger specfile. You can of course certainly do that, but the table of contents will be hidden.

Example

Below, we see the jhdocs-swagger-ui shortcode displaying an API specification. The Authorize feature won’t work in this particular site, but you can still explore the API.

Swagger UI example markdown
{{< jhdocs-swagger-ui url="abilities.swagger.yaml" >}}

Here is the rendered result of this markdown:


Next topic: Tile

Support options
Have questions on this topic?
Join the jhDocs team in Microsoft Teams to connect with the community.
See something in this page that needs to change?
Send us feedback on this page.

Did this page help you?

Last updated Mon Mar 2 2026