unjs · luxass · Jan 28, 2026
diff --git a/README.md b/README.md
@@ -35,6 +35,11 @@ Simple [OpenAPI](https://www.openapis.org/) spec to HTML renderer.
       <br />
       <a href="https://github.com/Kong/spec-renderer">Kong</a>
     </td>
+    <td align="center">
+      <img src="https://github.com/user-attachments/assets/61a14f99-8eae-4583-8ca3-85bff363e953" alt="Redoc" />
+      <br />
+      <a href="https://github.com/Redocly/redoc">Redoc</a>
+    </td>
   </tr>
 </table>
 
@@ -76,13 +81,14 @@ const html = renderHTML({
 
 ## Options
 
-- `renderer`: Renderer UI. Possible values: `"swagger"` | `"scalar"` | `"kong"`
+- `renderer`: Renderer UI. Possible values: `"swagger"` | `"scalar"` | `"kong"` | `"redoc"`
 - `spec`: URL to OpenAPI spec JSON to render
 - `meta`: Metadata for the OpenAPI documentation.
 - `styles`: Additional HTML styles.
 - `scalar`: Scalar UI configuration.
 - `swagger`: Swagger UI configuration.
 - `kong`: Kong Spec Renderer UI configuration.
+- `redoc`: Redoc UI configuration.
 
 ## Development
 

diff --git a/package.json b/package.json
@@ -40,14 +40,18 @@
   },
   "peerDependencies": {
     "@kong/spec-renderer": "^1",
-    "@scalar/api-reference": "^1"
+    "@scalar/api-reference": "^1",
+    "redoc": "^2"
   },
   "peerDependenciesMeta": {
     "@kong/spec-renderer": {
       "optional": true
     },
     "@scalar/api-reference": {
       "optional": true
+    },
+    "redoc": {
+      "optional": true
     }
   },
   "packageManager": "pnpm@10.12.3"

diff --git a/playground/index.mjs b/playground/index.mjs
@@ -31,6 +31,10 @@ serve({
                 <li>
                   <a href="/?renderer=kong&spec=${DEMO_SPEC}">Kong UI</a>
                 </li>
+                <li>
+                  <a href="/?renderer=redoc&spec=${DEMO_SPEC}">Redoc UI</a>
+                </li>
+              </ul>
             </p>
           </body>
         </html>`,

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/render.ts b/src/render.ts
@@ -3,11 +3,13 @@ import type { RenderHTMLOptions, RenderResponseOptions } from "./types.ts";
 import swagger from "./renderers/swagger.ts";
 import scalar from "./renderers/scalar.ts";
 import kong from "./renderers/kong.ts";
+import redoc from "./renderers/redoc.ts";
 
 const renderers = {
   swagger,
   scalar,
   kong,
+  redoc,
 } as const;
 
 export function renderHTML(opts: RenderHTMLOptions = {}): string {
@@ -24,6 +26,7 @@ export function renderHTML(opts: RenderHTMLOptions = {}): string {
     scalar: opts.scalar,
     swagger: opts.swagger,
     kong: opts.kong,
+    redoc: opts.redoc,
   });
 }
 

diff --git a/src/renderers/redoc.ts b/src/renderers/redoc.ts
@@ -0,0 +1,34 @@
+import type { RenderHTMLOptions } from "../types.ts";
+
+// https://github.com/Redocly/redoc
+
+export default function render(opts: RenderHTMLOptions): string {
+  const CDN_URL =
+    opts.redoc?.cdnURL ||
+    "https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js";
+
+  const redocOptions = opts.redoc || {};
+
+  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="${opts.meta?.description}" />
+        <title>${opts.meta?.title}</title>
+        <style>
+          html, body { margin: 0; padding: 0; }
+        </style>
+        <style>${opts.styles}</style>
+      </head>
+      <body>
+        <div id="redoc"></div>
+        <script src="${CDN_URL}"></script>
+        <script>
+          const specUrl = ${JSON.stringify(opts.spec)};
+          const options = ${JSON.stringify(redocOptions)};
+          Redoc.init(specUrl, options, document.getElementById("redoc"));
+        </script>
+      </body>
+    </html>`;
+}
diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,7 @@
 import type { ApiReferenceConfiguration as ScalarConfig } from "@scalar/api-reference";
 import type { SpecRendererNitroConfig as KongConfig } from "@kong/spec-renderer";
+import type { RedocRawOptions as RedocOptions } from "redoc";
+
 /**
  * OpenAPI render configuration
  */
@@ -9,7 +11,7 @@ export interface RenderHTMLOptions {
    *
    * @default "swagger"
    */
-  renderer?: "swagger" | "scalar" | "kong";
+  renderer?: "swagger" | "scalar" | "kong" | "redoc";
 
   /**
    * The route to the OpenAPI specification to render.
@@ -55,6 +57,13 @@ export interface RenderHTMLOptions {
   kong?: Partial<KongConfig> & {
     cdnURL?: string;
   };
+
+  /**
+   * Redoc configuration.
+   */
+  redoc?: Partial<RedocOptions> & {
+    cdnURL?: string;
+  };
 }
 
 export interface RenderResponseOptions extends RenderHTMLOptions {

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 import { renderHTML } from "../src/render.ts";
 
-const rendererNames = ["kong", "scalar", "swagger"] as const;
+const rendererNames = ["kong", "scalar", "swagger", "redoc"] as const;
 
 describe("renderHTML", () => {
   for (const name of rendererNames) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,6 +31,10 @@ serve({ @@
                     <li>
                       <a href="/?renderer=kong&spec=${DEMO_SPEC}">Kong UI</a>
                     </li>
+                    <li>
+                      <a href="/?renderer=redoc&spec=${DEMO_SPEC}">Redoc UI</a>
+                    </li>
+                  </ul>
                 </p>
               </body>
             </html>`,
@@ Expand Down @@