` per status code; status lives on the response object.
+ * Registered name is lowercase "response".
+ */
+ response: (Original) => (props) => {
+ const status = readStatus(props.response);
+ if (status && status !== "unchanged") {
+ return wrapContents(status, );
+ }
+ return ;
+ },
+ },
+});
+
+export default DiffHighlightPlugin;
diff --git a/src/__tests__/DiffHighlightPlugin.test.jsx b/src/__tests__/DiffHighlightPlugin.test.jsx
new file mode 100644
index 0000000..e04c387
--- /dev/null
+++ b/src/__tests__/DiffHighlightPlugin.test.jsx
@@ -0,0 +1,126 @@
+// SPDX-FileCopyrightText: 2026 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+// SPDX-License-Identifier: Apache-2.0
+import { render } from "@testing-library/react";
+import { fromJS, List } from "immutable";
+import { describe, expect, it } from "vitest";
+
+import DiffHighlightPlugin from "../DiffHighlightPlugin";
+
+const { wrapComponents } = DiffHighlightPlugin();
+
+/** Stub that stands in for the wrapped swagger-ui component. */
+const Original = () => original;
+
+describe("wrapComponents.Model", () => {
+ const Wrapped = wrapComponents.Model(Original);
+
+ it("wraps deleted schemas in a .diff-deleted span", () => {
+ const { container } = render(
+
+ );
+ expect(container.querySelector(".diff-deleted")).not.toBeNull();
+ });
+
+ it("wraps added schemas in a .diff-added span", () => {
+ const { container } = render(
+
+ );
+ expect(container.querySelector(".diff-added")).not.toBeNull();
+ });
+
+ it("renders old and new descriptions for updated schemas", () => {
+ const schema = fromJS({
+ "x-diff-status": "updated",
+ "x-diff-original": { type: "string" },
+ "x-diff-new": { type: "integer", format: "int64" },
+ });
+ const { container } = render();
+ expect(container.querySelector(".diff-updated-old").textContent).toBe(
+ "string"
+ );
+ expect(container.querySelector(".diff-updated-new").textContent).toBe(
+ "integer($int64)"
+ );
+ });
+
+ it("renders the original component untouched when there is no status", () => {
+ const { container } = render(
+
+ );
+ expect(container.querySelector('[class^="diff-"]')).toBeNull();
+ expect(container.textContent).toBe("original");
+ });
+});
+
+describe("wrapComponents.parameterRow", () => {
+ const Wrapped = wrapComponents.parameterRow(Original);
+
+ it("wraps changed parameters read from props.param", () => {
+ const { container } = render(
+
+ );
+ expect(container.querySelector(".diff-wrap.diff-added")).not.toBeNull();
+ });
+
+ it("falls back to props.rawParam", () => {
+ const { container } = render(
+
+ );
+ expect(container.querySelector(".diff-wrap.diff-deleted")).not.toBeNull();
+ });
+
+ it("passes through when status is unchanged", () => {
+ const { container } = render(
+
+ );
+ expect(container.querySelector(".diff-wrap")).toBeNull();
+ });
+});
+
+describe("wrapComponents.response", () => {
+ const Wrapped = wrapComponents.response(Original);
+
+ it("wraps changed responses", () => {
+ const { container } = render(
+
+ );
+ expect(container.querySelector(".diff-wrap.diff-added")).not.toBeNull();
+ });
+
+ it("passes through when there is no status", () => {
+ const { container } = render();
+ expect(container.querySelector(".diff-wrap")).toBeNull();
+ });
+});
+
+describe("wrapComponents.operation", () => {
+ const Wrapped = wrapComponents.operation(Original);
+
+ const makeSpecSelectors = (op) => ({
+ specJson: () => fromJS({ paths: { "/pets": { get: op } } }),
+ });
+
+ it("wraps operations whose status is read from the unresolved spec", () => {
+ const props = {
+ specSelectors: makeSpecSelectors({ "x-diff-status": "added" }),
+ specPath: List(["paths", "/pets", "get"]),
+ };
+ const { container } = render();
+ expect(container.querySelector(".diff-op.diff-op-added")).not.toBeNull();
+ });
+
+ it("passes through when the operation is unchanged", () => {
+ const props = {
+ specSelectors: makeSpecSelectors({ "x-diff-status": "unchanged" }),
+ specPath: List(["paths", "/pets", "get"]),
+ };
+ const { container } = render();
+ expect(container.querySelector(".diff-op")).toBeNull();
+ });
+
+ it("passes through when specSelectors is missing", () => {
+ const { container } = render();
+ expect(container.querySelector(".diff-op")).toBeNull();
+ expect(container.textContent).toBe("original");
+ });
+});
diff --git a/src/__tests__/helpers.test.jsx b/src/__tests__/helpers.test.jsx
new file mode 100644
index 0000000..e866847
--- /dev/null
+++ b/src/__tests__/helpers.test.jsx
@@ -0,0 +1,65 @@
+// SPDX-FileCopyrightText: 2026 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+// SPDX-License-Identifier: Apache-2.0
+import { render } from "@testing-library/react";
+import { fromJS } from "immutable";
+import { describe, expect, it } from "vitest";
+
+import {
+ describeSchema,
+ readStatus,
+ wrapContents,
+} from "../DiffHighlightPlugin";
+
+describe("readStatus", () => {
+ it("returns the x-diff-status value from an Immutable Map", () => {
+ const map = fromJS({ "x-diff-status": "added" });
+ expect(readStatus(map)).toBe("added");
+ });
+
+ it("returns undefined when the extension is absent", () => {
+ const map = fromJS({ type: "string" });
+ expect(readStatus(map)).toBeUndefined();
+ });
+
+ it("returns undefined for a null input", () => {
+ expect(readStatus(null)).toBeUndefined();
+ });
+
+ it("returns undefined for a plain object without a get method", () => {
+ expect(readStatus({ "x-diff-status": "added" })).toBeUndefined();
+ });
+});
+
+describe("describeSchema", () => {
+ it("returns 'any' when the schema has no get method", () => {
+ expect(describeSchema(undefined)).toBe("any");
+ expect(describeSchema({})).toBe("any");
+ });
+
+ it("returns 'object' when the schema has no type", () => {
+ expect(describeSchema(fromJS({ format: "date-time" }))).toBe("object");
+ });
+
+ it("returns the bare type when no format is present", () => {
+ expect(describeSchema(fromJS({ type: "string" }))).toBe("string");
+ });
+
+ it("combines type and format", () => {
+ expect(
+ describeSchema(fromJS({ type: "string", format: "date-time" }))
+ ).toBe("string($date-time)");
+ });
+});
+
+describe("wrapContents", () => {
+ it("renders a diff-wrap element with the status class and children", () => {
+ const { container, getByText } = render(
+ wrapContents("added", child)
+ );
+ const wrapper = container.querySelector(".diff-wrap");
+ expect(wrapper).not.toBeNull();
+ expect(wrapper).toHaveClass("diff-added");
+ expect(wrapper).toHaveStyle({ display: "contents" });
+ expect(getByText("child")).toBeInTheDocument();
+ });
+});
diff --git a/src/diff.css b/src/diff.css
new file mode 100644
index 0000000..f39eb22
--- /dev/null
+++ b/src/diff.css
@@ -0,0 +1,83 @@
+/* SPDX-FileCopyrightText: 2026 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.) */
+/* SPDX-License-Identifier: Apache-2.0 */
+
+/* ----------------------------------------------------------------------------
+ * Diff highlighting
+ * ------------------------------------------------------------------------- */
+
+/* Added: green + bold */
+.diff-added,
+.diff-added * {
+ color: #1b7e3c !important;
+ font-weight: 700 !important;
+}
+
+/* Deleted: red + strikethrough */
+.diff-deleted,
+.diff-deleted * {
+ color: #c0392b !important;
+ text-decoration: line-through !important;
+}
+
+/* Updated rows (parameters / operations / responses): amber marker */
+.diff-wrap.diff-updated * {
+ color: #b9770e !important;
+}
+
+/* Updated attribute value: original (red strike) -> new (green bold) */
+.diff-updated-inline {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.diff-updated-old {
+ color: #c0392b;
+ text-decoration: line-through;
+ font-weight: 600;
+}
+
+.diff-updated-new {
+ color: #1b7e3c;
+ font-weight: 700;
+}
+
+.diff-updated-arrow {
+ color: #6b6b6b;
+}
+
+/* Mark the schema property NAME cell, not just its value.
+ * The value cell (2nd | ) carries the diff class; :has() lets us reach the
+ * sibling name cell (1st | ) rendered by ObjectModel. The `> td >` scoping
+ * keeps a change from leaking onto ancestor rows of nested objects. */
+.swagger-ui tr.property-row:has(> td > .diff-deleted) > td:first-child,
+.swagger-ui tr.property-row:has(> td > .diff-deleted) > td:first-child * {
+ color: #c0392b !important;
+ text-decoration: line-through !important;
+}
+
+.swagger-ui tr.property-row:has(> td > .diff-added) > td:first-child,
+.swagger-ui tr.property-row:has(> td > .diff-added) > td:first-child * {
+ color: #1b7e3c !important;
+ font-weight: 700 !important;
+}
+
+/* Operation-level changes: tag the whole opblock but only paint the
+ * always-visible summary row, so the mark is shown whether the operation is
+ * collapsed or expanded. */
+.diff-op-deleted .opblock-summary,
+.diff-op-deleted .opblock-summary * {
+ color: #c0392b !important;
+ text-decoration: line-through !important;
+}
+
+.diff-op-added .opblock-summary,
+.diff-op-added .opblock-summary * {
+ color: #1b7e3c !important;
+ font-weight: 700 !important;
+}
+
+.diff-op-updated .opblock-summary,
+.diff-op-updated .opblock-summary * {
+ color: #b9770e !important;
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..3780959
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,3 @@
+// SPDX-FileCopyrightText: 2026 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+// SPDX-License-Identifier: Apache-2.0
+export { default, default as DiffHighlightPlugin } from "./DiffHighlightPlugin";
diff --git a/tsup.config.ts b/tsup.config.ts
new file mode 100644
index 0000000..d71a29c
--- /dev/null
+++ b/tsup.config.ts
@@ -0,0 +1,21 @@
+// SPDX-FileCopyrightText: 2026 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+// SPDX-License-Identifier: Apache-2.0
+import { copyFile } from "node:fs/promises";
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+ entry: ["src/index.js"],
+ format: ["esm", "cjs"],
+ target: "es2019",
+ clean: true,
+ sourcemap: false,
+ minify: false,
+ // react / react-dom / swagger-ui-react are peer dependencies and must not be
+ // bundled — consumers already provide them.
+ external: ["react", "react-dom", "swagger-ui-react"],
+ // Ship the standalone stylesheet (consumers import it via the "./styles.css"
+ // export). Copied here instead of via a separate CLI to avoid extra deps.
+ async onSuccess() {
+ await copyFile("src/diff.css", "dist/diff.css");
+ },
+});
diff --git a/types/index.d.ts b/types/index.d.ts
new file mode 100644
index 0000000..416a5c7
--- /dev/null
+++ b/types/index.d.ts
@@ -0,0 +1,32 @@
+// SPDX-FileCopyrightText: 2026 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+// SPDX-License-Identifier: Apache-2.0
+import type { ComponentType } from "react";
+
+/**
+ * The partial Swagger UI "system" returned by the plugin: a map of component
+ * names to wrappers applied through Swagger UI's `wrapComponents` API.
+ */
+export interface DiffHighlightSystem {
+ wrapComponents: Record<
+ string,
+ (Original: ComponentType, system: unknown) => ComponentType
+ >;
+}
+
+/**
+ * A swagger-ui-react / Swagger UI plugin that highlights API changes inline,
+ * based on `x-diff-*` extensions present in the loaded OpenAPI document
+ * (`added`, `deleted`, `updated`).
+ *
+ * @example
+ * import SwaggerUI from "swagger-ui-react";
+ * import "swagger-ui-react/swagger-ui.css";
+ * import DiffHighlightPlugin from "@inditextech/swagger-ui-plugin-diff-highlight";
+ * import "@inditextech/swagger-ui-plugin-diff-highlight/styles.css";
+ *
+ * ;
+ */
+declare const DiffHighlightPlugin: () => DiffHighlightSystem;
+
+export default DiffHighlightPlugin;
+export { DiffHighlightPlugin };
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..a8b2a1c
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,12 @@
+// SPDX-FileCopyrightText: 2026 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+// SPDX-License-Identifier: Apache-2.0
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+ test: {
+ globals: true,
+ environment: "jsdom",
+ setupFiles: ["./vitest.setup.js"],
+ include: ["src/**/*.test.{js,jsx}"],
+ },
+});
diff --git a/vitest.setup.js b/vitest.setup.js
new file mode 100644
index 0000000..036e1f3
--- /dev/null
+++ b/vitest.setup.js
@@ -0,0 +1,3 @@
+// SPDX-FileCopyrightText: 2026 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+// SPDX-License-Identifier: Apache-2.0
+import "@testing-library/jest-dom/vitest";
|