nitrojs · adamdehaven · Jun 30, 2025 · Jun 30, 2025 · Jun 30, 2025 · Jun 30, 2025
@@ -58,6 +58,7 @@ export default defineBuildConfig({
     ...subpaths.map((subpath) => `nitropack/${subpath}`),
     "firebase-functions",
     "@scalar/api-reference",
+    "@kong/spec-renderer",
   ],
   stubOptions: {
     jiti: {

@@ -48,7 +48,7 @@ Enable experimental features.
 
 #### `openAPI`
 
-Enable `/_scalar`, `/_swagger` and `/_openapi.json` endpoints.
+Enable `/_scalar`, `/_swagger`, `/_kong`, and `/_openapi.json` endpoints.
 
 - Default: `false`
 
@@ -76,7 +76,7 @@ openAPI: {
 }
 ```
 
-If you like to customize the Scalar integration, you can [pass a configuration object](https://github.com/scalar/scalar) like this:
+If you would like to customize the Scalar integration, you can [pass a configuration object](https://github.com/scalar/scalar) like this:
 
 ```js
 openAPI: {
@@ -88,6 +88,18 @@ openAPI: {
 }
 ```
 
+If you would like to customize the Kong Spec Renderer integration, you can [pass a configuration object](https://github.com/Kong/spec-renderer) like this:
+
+```js
+openAPI: {
+  ui: {
+    kong: {
+      hideDeprecated: true
+    }
+  }
+}
+```
+
 Or if you want to customize the endpoints:
 
 ```js

@@ -175,6 +175,7 @@
     "@azure/static-web-apps-cli": "^2.0.6",
     "@cloudflare/workers-types": "^4.20250620.0",
     "@deno/types": "^0.0.1",
+    "@kong/spec-renderer": "^1.95.0",
     "@netlify/edge-functions": "^2.15.2",
     "@scalar/api-reference": "^1.31.18",
     "@types/archiver": "^6.0.3",

@@ -51,6 +51,17 @@ export async function resolveOpenAPIOptions(options: NitroOptions) {
     });
   }
 
+  // Kong Spec Renderer
+  if (options.openAPI?.ui?.kong !== false) {
+    const kongSpecRendererRoute = options.openAPI?.ui?.kong?.route || "/_kong";
+    prerenderRoutes.push(kongSpecRendererRoute);
+    options.handlers.push({
+      route: kongSpecRendererRoute,
+      env: handlersEnv,
+      handler: join(runtimeDir, "internal/routes/kong"),
+    });
+  }
+
   // Prerender
   if (shouldPrerender) {
     options.prerender ??= {} as any;

@@ -0,0 +1,80 @@
+import { eventHandler, type EventHandler } from "h3";
+import { useRuntimeConfig } from "../config";
+import { kebabCase } from "scule";
+import type { SpecRendererNitroConfig } from "@kong/spec-renderer";
+
+// Helper function to convert object properties to HTML attributes
+function objectToAttributes(obj: Record<string, any>): string {
+  return Object.entries(obj)
+    .filter(
+      ([_, value]) =>
+        value !== null &&
+        value !== undefined &&
+        String(value || "").trim() !== ""
+    )
+    .map(([key, value]) => {
+      const attrName = kebabCase(key);
+      // Always include attribute="value" format for all types including booleans
+      return `${attrName}="${String(value).replace(/"/g, "&quot;")}"`;
+    })
+    .filter(Boolean)
+    .join(" ");
+}
+
+export default eventHandler((event) => {
+  const runtimeConfig = useRuntimeConfig(event);
+  const title = runtimeConfig.nitro.openAPI?.meta?.title || "API Reference";
+  const description = runtimeConfig.nitro.openAPI?.meta?.description || "";
+  const openAPIEndpoint =
+    runtimeConfig.nitro.openAPI?.route || "./_openapi.json";
+
+  // https://github.com/Kong/spec-renderer
+  const _config = runtimeConfig.nitro.openAPI?.ui
+    ?.kong as SpecRendererNitroConfig & { route?: string };
+  const kongSpecRendererConfig: SpecRendererNitroConfig = {
+    ..._config,
+    specUrl: openAPIEndpoint,
+    navigationType: "hash", // use hash navigation for better compatibility
+    hideInsomniaTryIt: true,
+    showPoweredBy: true, // Enforce the "Powered by Kong" is always shown
+    basePath: _config?.route || "/_kong",
+  };
+
+  const componentAttributes = objectToAttributes(kongSpecRendererConfig);
+  const CDN_BASE = "https://cdn.jsdelivr.net/npm/@kong/spec-renderer@^1";
+
+  return /* html */ `<!doctype html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="${description}" />
+        <title>${title}</title>
+        <!-- Include Kong Spec Renderer styles for content teleported out of web component. -->
+        <link rel="stylesheet" href="${CDN_BASE}/dist/spec-renderer.css" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
+        <style>
+        html, body { padding: 0; margin: 0; height: 100%;}
+        body { font-family: 'Inter', Roboto, Helvetica, sans-serif; }
+        </style>
+      </head>
+      <body>
+        <kong-spec-renderer spec="" ${componentAttributes} />
+        <script type="module">
+        import { registerKongSpecRenderer } from '${CDN_BASE}/dist/kong-spec-renderer.web-component.es.js'
+        // Check if hash exists and set current-path
+        const hash = window.location.hash;
+        if (hash) {
+          const path = hash.substring(1); // Remove the # character
+          const renderer = document.querySelector('kong-spec-renderer');
+          if (renderer) {
+            renderer.setAttribute('current-path', path);
+          }
+        }
+        registerKongSpecRenderer()
+        </script>
+      </body>
+    </html>`;
+}) as EventHandler;
@@ -1,4 +1,5 @@
 import type { ApiReferenceConfiguration as ScalarConfig } from "@scalar/api-reference";
+import type { SpecRendererNitroConfig as KongConfig } from "@kong/spec-renderer";
 
 /**
  * Nitro OpenAPI configuration
@@ -55,5 +56,18 @@ export interface NitroOpenAPIConfig {
            */
           route?: string;
         };
+    /**
+     * Kong Spec Renderer UI configuration
+     */
+    kong?:
+      | false
+      | (Partial<KongConfig> & {
+          /**
+           * Kong Spec Renderer UI route
+           *
+           * Default is `/_kong`
+           */
+          route?: string;
+        });
   };
 }
@@ -122,6 +122,10 @@ describe("nitro:preset:azure", { timeout: 10_000 }, async () => {
               "rewrite": "/api/hey/index.html",
               "route": "/api/hey",
             },
+            {
+              "rewrite": "/_kong/index.html",
+              "route": "/_kong",
+            },
             {
               "rewrite": "/_swagger/index.html",
               "route": "/_swagger",

@@ -45,6 +45,7 @@ describe.skipIf(isWindows)("nitro:preset:cloudflare-pages", async () => {
           "/blog/static/*",
           "/cf-pages-exclude/*",
           "/build/*",
+          "/_kong",
           "/_openapi.json",
           "/_openapi.json.br",
           "/_openapi.json.gz",
@@ -57,6 +58,8 @@ describe.skipIf(isWindows)("nitro:preset:cloudflare-pages", async () => {
           "/json-string",
           "/prerender",
           "/prerender-custom",
+          "/_kong/index.html.br",
+          "/_kong/index.html.gz",
           "/_swagger/index.html.br",
           "/_swagger/index.html.gz",
           "/api/hello",

@@ -25,6 +25,9 @@ describe("nitro:preset:vercel", async () => {
         expect(config).toMatchInlineSnapshot(`
           {
             "overrides": {
+              "_kong/index.html": {
+                "path": "_kong",
+              },
               "_scalar/index.html": {
                 "path": "_scalar",
               },