diff --git a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
index 5c80a7f0ebb..6f3037f6b99 100644
--- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
@@ -74,6 +74,7 @@ const JSONSchema = forwardRef(
const KeywordDescription = useComponent("KeywordDescription")
const KeywordDefault = useComponent("KeywordDefault")
const KeywordDeprecated = useComponent("KeywordDeprecated")
+ const KeywordReadOnly = useComponent("KeywordReadOnly")
const ExpandDeepButton = useComponent("ExpandDeepButton")
/**
@@ -134,6 +135,7 @@ const JSONSchema = forwardRef(
)}
+
{constraints.length > 0 &&
constraints.map((constraint) => (
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/ReadOnly.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/ReadOnly.jsx
new file mode 100644
index 00000000000..ca970618e3e
--- /dev/null
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/ReadOnly.jsx
@@ -0,0 +1,18 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+
+const ReadOnly = ({ schema }) => {
+ if (schema?.readOnly !== true) return null
+
+ return read-only
+}
+
+ReadOnly.propTypes = {
+ schema: schema.isRequired,
+}
+
+export default ReadOnly
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/_read-only.scss b/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/_read-only.scss
new file mode 100644
index 00000000000..36ce41ddc6a
--- /dev/null
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/_read-only.scss
@@ -0,0 +1,6 @@
+.json-schema-2020-12 {
+ &__readonly {
+ @extend .json-schema-2020-12__deprecated;
+ color: gray;
+ }
+}
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss b/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss
index 3d105d135c2..529f5912e27 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss
@@ -75,3 +75,4 @@
@import './Constraint/constraint';
@import './DependentRequired/dependent-required';
@import './Deprecated/deprecated';
+@import './ReadOnly/read-only';
diff --git a/src/core/plugins/json-schema-2020-12/hoc.jsx b/src/core/plugins/json-schema-2020-12/hoc.jsx
index 3be731668ab..fca017b87d1 100644
--- a/src/core/plugins/json-schema-2020-12/hoc.jsx
+++ b/src/core/plugins/json-schema-2020-12/hoc.jsx
@@ -40,6 +40,7 @@ import KeywordTitle from "./components/keywords/Title/Title"
import KeywordDescription from "./components/keywords/Description/Description"
import KeywordDefault from "./components/keywords/Default"
import KeywordDeprecated from "./components/keywords/Deprecated/Deprecated"
+import KeywordReadOnly from "./components/keywords/ReadOnly/ReadOnly"
import Accordion from "./components/Accordion/Accordion"
import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
import ChevronRightIcon from "./components/icons/ChevronRight"
@@ -96,6 +97,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
KeywordDescription,
KeywordDefault,
KeywordDeprecated,
+ KeywordReadOnly,
Accordion,
ExpandDeepButton,
ChevronRightIcon,
diff --git a/src/core/plugins/json-schema-2020-12/index.js b/src/core/plugins/json-schema-2020-12/index.js
index 4c2e28cefc9..3860ed71e83 100644
--- a/src/core/plugins/json-schema-2020-12/index.js
+++ b/src/core/plugins/json-schema-2020-12/index.js
@@ -38,6 +38,7 @@ import KeywordTitle from "./components/keywords/Title/Title"
import KeywordDescription from "./components/keywords/Description/Description"
import KeywordDefault from "./components/keywords/Default"
import KeywordDeprecated from "./components/keywords/Deprecated/Deprecated"
+import KeywordReadOnly from "./components/keywords/ReadOnly/ReadOnly"
import Accordion from "./components/Accordion/Accordion"
import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
import ChevronRightIcon from "./components/icons/ChevronRight"
@@ -83,6 +84,7 @@ const JSONSchema202012Plugin = () => ({
JSONSchema202012KeywordDescription: KeywordDescription,
JSONSchema202012KeywordDefault: KeywordDefault,
JSONSchema202012KeywordDeprecated: KeywordDeprecated,
+ JSONSchema202012KeywordReadOnly: KeywordReadOnly,
JSONSchema202012Accordion: Accordion,
JSONSchema202012ExpandDeepButton: ExpandDeepButton,
JSONSchema202012ChevronRightIcon: ChevronRightIcon,
diff --git a/src/core/plugins/oas31/wrap-components/models.jsx b/src/core/plugins/oas31/wrap-components/models.jsx
index 0142237ff33..21cff9e53a9 100644
--- a/src/core/plugins/oas31/wrap-components/models.jsx
+++ b/src/core/plugins/oas31/wrap-components/models.jsx
@@ -72,6 +72,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
)
const KeywordDefault = getComponent("JSONSchema202012KeywordDefault")
const KeywordDeprecated = getComponent("JSONSchema202012KeywordDeprecated")
+ const KeywordReadOnly = getComponent("JSONSchema202012KeywordReadOnly")
const Accordion = getComponent("JSONSchema202012Accordion")
const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton")
const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
@@ -120,6 +121,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
KeywordDescription,
KeywordDefault,
KeywordDeprecated,
+ KeywordReadOnly,
Accordion,
ExpandDeepButton,
ChevronRightIcon,