diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Constraint/Constraint.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Constraint/Constraint.jsx
index c9282dd6..c9ce2de9 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Constraint/Constraint.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Constraint/Constraint.jsx
@@ -3,14 +3,27 @@
  */
 import React from "react"
 import PropTypes from "prop-types"
+import classNames from "classnames"
 
 /**
  * This component represents various constraint keywords
  * from JSON Schema 2020-12 validation vocabulary.
  */
-const Constraint = ({ constraint }) => (
-  <span className="json-schema-2020-12__constraint">{constraint}</span>
-)
+const Constraint = ({ constraint }) => {
+  const isPattern = /^matches /.test(constraint)
+  const isStringRange = /characters/.test(constraint)
+  const isStringRelated = isPattern || isStringRange
+
+  return (
+    <span
+      className={classNames("json-schema-2020-12__constraint", {
+        "json-schema-2020-12__constraint--string-related": isStringRelated,
+      })}
+    >
+      {constraint}
+    </span>
+  )
+}
 
 Constraint.propTypes = {
   constraint: PropTypes.string.isRequired,
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Constraint/_constraint.scss b/src/core/plugins/json-schema-2020-12/components/keywords/Constraint/_constraint.scss
index f24a6f13..d7422245 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Constraint/_constraint.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Constraint/_constraint.scss
@@ -6,4 +6,9 @@
   color: white;
   background-color: #805AD5;
   border-radius: 4px;
+
+  &--string-related {
+    color: white;
+    background-color: #D69E2E;
+  }
 }
diff --git a/src/core/plugins/json-schema-2020-12/fn.js b/src/core/plugins/json-schema-2020-12/fn.js
index e967a1f7..dd02fad4 100644
--- a/src/core/plugins/json-schema-2020-12/fn.js
+++ b/src/core/plugins/json-schema-2020-12/fn.js
@@ -231,15 +231,44 @@ const stringifyConstraintNumberRange = (schema) => {
   return null
 }
 
+const stringifyConstraintRange = (label, min, max) => {
+  const hasMin = typeof min === "number"
+  const hasMax = typeof max === "number"
+
+  if (hasMin && hasMax) {
+    if (min === max) {
+      return `${min} ${label}`
+    } else {
+      return `[${min}, ${max}] ${label}`
+    }
+  }
+  if (hasMin) {
+    return `>= ${min} ${label}`
+  }
+  if (hasMax) {
+    return `<= ${max} ${label}`
+  }
+
+  return null
+}
+
 export const stringifyConstraints = (schema) => {
   const constraints = []
 
-  // Validation Keywords for Numeric Instances (number and integer)
+  // validation Keywords for Numeric Instances (number and integer)
   const constraintMultipleOf = stringifyConstraintMultipleOf(schema)
   if (constraintMultipleOf !== null) constraints.push(constraintMultipleOf)
-
   const constraintNumberRange = stringifyConstraintNumberRange(schema)
   if (constraintNumberRange !== null) constraints.push(constraintNumberRange)
 
+  // validation Keywords for Strings
+  const constraintStringRange = stringifyConstraintRange(
+    "characters",
+    schema?.minLength,
+    schema?.maxLength
+  )
+  if (constraintStringRange !== null) constraints.push(constraintStringRange)
+  if (schema?.pattern) constraints.push(`matches ${schema?.pattern}`)
+
   return constraints
 }