DEV Community 👩‍💻👨‍💻

Cover image for Host your Swagger files with Github Pages & Swagger UI 🦜
Thomas Gotwig
Thomas Gotwig

Posted on • Updated on

Host your Swagger files with Github Pages & Swagger UI 🦜

Get some Swagger files like from the tmforum ProductOrder specification.

Create index.html at root level:

    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" type="text/css" href="" />
    <div id="swagger-ui"></div>
    <script defer>
      window.onload = function () {
        const ui = SwaggerUIBundle({
          urls: [
              name: "TMF622-ProductOrder-v4.0.0",
              url: "TMF622-ProductOrder-v4.0.0.swagger.json",
              name: "Product_Ordering_Management.regular",
              url: "Product_Ordering_Management.regular.swagger.json",
          dom_id: "#swagger-ui",
          deepLinking: true,
          presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
          plugins: [SwaggerUIBundle.plugins.DownloadUrl],
          layout: "StandaloneLayout",
        window.ui = ui;
      .swagger-ui .topbar .download-url-wrapper input[type="text"] {
        border: 2px solid #77889a;
      .swagger-ui .topbar .download-url-wrapper .download-url-button {
        background: #77889a;
      .swagger-ui img {
        display: none;
      .swagger-ui .topbar {
        background-color: #ededed;
        border-bottom: 2px solid #c1c1c1;
      .swagger-ui .topbar .download-url-wrapper .select-label {
        color: #3b4151;
Enter fullscreen mode Exit fullscreen mode

Enable Github Pages:

Github Pages settings

That's all! 😀🎉

Swagger UI

Top comments (0)

🌱 DEV runs on 100% open source code that we started called Forem.

You can contribute to the codebase or host your own.