Swap out Swagger UI for ReDoc

Last updated:

Attention:

You’ve reached a page related to the Tyk Classic Portal. If you were searching for API documentation of the new Tyk Developer Portal please use the latest Postman collection page.

Future deprecation of Tyk Classic Portal

This product is no longer actively developed as it has been superseded by the new Tyk Developer Portal.
Please note that the Tyk Classic Portal now has limited support and maintenance. Please contact us at [email protected]if you have any questions.

This short guide will show you how easy it is to swap out out the default https://swagger.io/tools/swagger-ui/ library for Portal Catalog API documentation for another tool like ReDoc

  • Open up the default /opt/tyk-dashboard/portal/templates/swagger.html
  {{ define "swaggerPage" }}
  {{ template "header" .}}
  <link href='/portal-assets/css/swagger.min.css' media='screen' rel='stylesheet' type='text/css'/>
  <!-- <link href='/portal-assets/css/swagger-ui.css' media='screen' rel='stylesheet' type='text/css'/> -->
  <body>
    {{ template "navigation" . }}
    <div>
      <div class="container" style="margin-top: 80px;">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
...
        </svg>
        <div id="swagger-ui"></div>
      </div>
    </div>
    {{ template "footer" .}}
    {{ template "scripts" .}}
    <script src="/portal-assets/js/vendors.min.js"> </script>
    <script src="/portal-assets/js/swagger.min.js"> </script>
    <script type="text/javascript">
...
    </script>
  </body>
</html>
{{ end }}
  • Replace the content of swagger.html with the following:
  {{ define "swaggerPage" }}
  {{ template "header" .}}
  <body>
    {{ template "navigation" . }}
    <div>
      <div class="container" style="margin-top: 80px;">
        <redoc spec-url="{{.SwaggerURL}}"></redoc>
      </div>
    </div>
    {{ template "footer" .}}
    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"></script>
  </body>
</html>
{{ end }}
  • Restart your dashboard service

  • Browse your portal documentation

Tyk Portal Catalogue API Documentation with ReDoc