feat: apply cumulative update to address various issues (#10324)

2025-02-27 11:12:42 +01:00
parent 621a7f0f76
commit 80d56c9518
298 changed files with 11066 additions and 11680 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -2,7 +2,7 @@
 maintained node versions

 [node-development]
-node 20.3.0
+node 22

 [browser-production]
 > 1%
@@ -26,4 +26,4 @@ maintained node versions
 last 1 chrome version
 last 1 firefox version
 last 1 safari version
-node 20.3.0
+node 22
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,38 +0,0 @@
-parser: "@babel/eslint-parser"
-env:
-  browser: true
-  node: true
-  es6: true
-  jest: true
-  jest/globals: true
-parserOptions:
-  ecmaFeatures:
-    jsx: true
-extends:
-  - eslint:recommended
-  - plugin:react/recommended
-plugins:
-  - react
-  - import
-  - jest
-settings:
-  react:
-    pragma: React
-    version: '15.0'
-rules:
-  semi: [2, never]
-  strict: 0
-  quotes: [2, double, { avoidEscape: true, allowTemplateLiterals: true }]
-  no-unused-vars: 2
-  no-multi-spaces: 1
-  camelcase: 1
-  no-use-before-define: [2, nofunc]
-  no-underscore-dangle: 0
-  no-unused-expressions: 1
-  comma-dangle: 0
-  no-console: [2, { allow: [warn, error] }]
-  react/jsx-no-bind: 1
-  react/jsx-no-target-blank: 2
-  react/display-name: 0
-  import/no-extraneous-dependencies: 2
-  react/jsx-filename-extension: 2
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,78 @@
+/**
+ * @prettier
+ */
+const path = require("node:path")
+
+module.exports = {
+  parser: "@babel/eslint-parser",
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+    jest: true,
+    "jest/globals": true,
+  },
+  parserOptions: {
+    ecmaFeatures: { jsx: true },
+    babelOptions: { configFile: path.join(__dirname, "babel.config.js") },
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+  ],
+  plugins: ["react", "import", "jest", "prettier"],
+  settings: {
+    react: {
+      pragma: "React",
+      version: "15.0",
+    },
+  },
+  rules: {
+    semi: [2, "never"],
+    strict: 0,
+    quotes: [
+      2,
+      "double",
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true,
+      },
+    ],
+    "no-unused-vars": 2,
+    "no-multi-spaces": 1,
+    camelcase: [
+      "error",
+      {
+        allow: [
+          "^UNSAFE_",
+          "^requestSnippetGenerator_",
+          "^JsonSchema_",
+          "^curl_",
+          "^dom_",
+          "^api_",
+          "^client_",
+          "^grant_",
+          "^code_",
+          "^redirect_",
+          "^spec",
+        ],
+      },
+    ],
+    "no-use-before-define": [2, "nofunc"],
+    "no-underscore-dangle": 0,
+    "no-unused-expressions": 1,
+    "comma-dangle": 0,
+    "no-console": [
+      2,
+      {
+        allow: ["warn", "error"],
+      },
+    ],
+    "react/jsx-no-bind": 1,
+    "react/jsx-no-target-blank": 2,
+    "react/display-name": 0,
+    "import/no-extraneous-dependencies": 2,
+    "react/jsx-filename-extension": 2,
+  },
+}
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -1,3 +1,4 @@
 {
-  "*.js": "eslint"
+  "*.{js,jsx}": ["eslint --max-warnings 0"],
+  "*.scss": ["stylelint '**/*.scss'"]
 }
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-20.3.0
+22.11.0
--- a/.releaserc
+++ b/.releaserc
@@ -1,13 +1,6 @@
 {
  "branches": [
-    {
-      "name": "master"
-    },
-    {
-      "name": "next",
-      "channel": "alpha",
-      "prerelease": "alpha"
-    }
+    {"name": "master"}
  ],
  "tagFormat": "v${version}",
  "plugins": [
@@ -21,15 +14,12 @@
    "@semantic-release/release-notes-generator",
    "@semantic-release/npm",
    "@semantic-release/github",
-    [
-      "@semantic-release/git",
-      {
+    ["@semantic-release/git", {
      "assets": [
        "package.json",
        "package-lock.json"
      ],
      "message": "chore(release): cut the ${nextRelease.version} release\n\n${nextRelease.notes}"
-      }
-    ]
+    }]
  ]
 }
--- a/7
+++ b/7
@@ -4,6 +4,13 @@

 FROM nginx:1.27.4-alpine

+LABEL maintainer="vladimir.gorej@gmail.com" \
+      org.opencontainers.image.authors="vladimir.gorej@gmail.com" \
+      org.opencontainers.image.url="docker.swagger.io/swaggerapi/swagger-ui" \
+      org.opencontainers.image.source="https://github.com/swagger-api/swagger-ui" \
+      org.opencontainers.image.description="SwaggerUI Docker image" \
+      org.opencontainers.image.licenses="Apache-2.0"
+
 RUN apk add --update-cache --no-cache "nodejs"

 LABEL maintainer="char0n"
--- a/config/jest/jest.unit.config.js
+++ b/config/jest/jest.unit.config.js
@@ -18,6 +18,6 @@ module.exports = {
  moduleNameMapper: {
    '^.+\\.svg$': 'jest-transform-stub'
  },
-  transformIgnorePatterns: ['/node_modules/(?!(sinon|react-syntax-highlighter)/)'],
+  transformIgnorePatterns: ['/node_modules/(?!(sinon|react-syntax-highlighter|@asamuzakjp/css-color)/)'],
  silent: true, // set to `false` to allow console.* calls to be printed
 };
--- a/docs/development/scripts.md
+++ b/docs/development/scripts.md
@@ -10,6 +10,8 @@ Script name | Description
 `lint` | Report ESLint style errors and warnings.
 `lint-errors` | Report ESLint style errors, without warnings.
 `lint-fix` | Attempt to fix style errors automatically.
+`lint-styles` | Report Stylelint style errors and warnings.
+`lint-styles-fix` | Attempt to fix Stylelint errors and warnings automatically.
 `watch` | Rebuild the core files in `/dist` when the source code changes. Useful for `npm link` with Swagger Editor.

 ### Building
--- a/docs/development/setting-up.md
+++ b/docs/development/setting-up.md
@@ -1,20 +1,23 @@
 # Setting up a dev environment

-Swagger UI includes a development server that provides hot module reloading and unminified stack traces, for easier development.
+SwaggerUI includes a development server that provides hot module reloading and unminified stack traces, for easier development.

 ### Prerequisites

 - git, any version
- **Node.js >=20.3.0** and **npm >=9.6.7** are the minimum required versions that this repo runs on, but we always recommend using the latest version of Node.js.
+- **Node.js >=22.11.0** and **npm >=10.9.0** are the minimum required versions that this repo runs on, but we always recommend using the latest version of Node.js.
+
+

 ### Steps

 1. `git clone https://github.com/swagger-api/swagger-ui.git`
 2. `cd swagger-ui`
 3. `npm install`
-4. `npm run dev`
-5. Wait a bit
-6. Open http://localhost:3200/
+4. `npx husky init` (optional)
+5. `npm run dev`
+6. Wait a bit
+7. Open http://localhost:3200/

 ### Using your own local api definition with local dev build

--- a/docs/samples/webpack-getting-started/src/swagger-config.yaml
+++ b/docs/samples/webpack-getting-started/src/swagger-config.yaml
@@ -1,4 +1,4 @@
-openapi: "3.0.0"
+openapi: "3.0.4"
 info:
  version: "0.0.1"
  title: "Swagger UI Webpack Setup"
--- a/docs/usage/configuration.md
+++ b/docs/usage/configuration.md
@@ -371,7 +371,7 @@ Set the value to the literal object value you'd like, taking care to escape char
 Example:

 ```sh
-SPEC="{ \"openapi\": \"3.0.0\" }"
+SPEC="{ \"openapi\": \"3.0.4\" }"
 ```

 ### Docker-Compose
--- a/docs/usage/installation.md
+++ b/docs/usage/installation.md
@@ -10,6 +10,23 @@ We publish three modules to npm: **`swagger-ui`**, **`swagger-ui-dist`** and **`
 such as Webpack, Browserify, and Rollup. Its main file exports Swagger UI's main function,
 and the module also includes a namespaced stylesheet at `swagger-ui/dist/swagger-ui.css`. Here's an example:

+### Installation
+
+You can now install SwaggerUI packages using `npm`:
+
+```sh
+ $ npm install swagger-ui 
+````
+
+```sh
+ $ npm install swagger-ui-react 
+````
+
+```sh
+ $ npm install swagger-ui-dist 
+````
+
+
 ```javascript
 import SwaggerUI from 'swagger-ui'
 // or use require if you prefer
--- a/flavors/swagger-ui-react/README.md
+++ b/flavors/swagger-ui-react/README.md
@@ -33,7 +33,7 @@ Alternatively, you can set the environment variable `SCARF_ANALYTICS` to `false`
 Install `swagger-ui-react`:

 ```
-$ npm i --save swagger-ui-react
+$ npm install swagger-ui-react
 ```

 Use it in your React application:
@@ -194,6 +194,11 @@ Redirect url given as parameter to the oauth2 provider. Default the url refers t

 ⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.

+#### `initialState`: PropTypes.object
+
+Passes initial values to the Swagger UI state.
+
+⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.

 ## Limitations

--- a/flavors/swagger-ui-react/index.jsx
+++ b/flavors/swagger-ui-react/index.jsx
@@ -45,6 +45,7 @@ const SwaggerUI = ({
  persistAuthorization = config.defaults.persistAuthorization,
  oauth2RedirectUrl = config.defaults.oauth2RedirectUrl,
  onComplete = null,
+  initialState = config.defaults.initialState,
 }) => {
  const [system, setSystem] = useState(null)
  const SwaggerUIComponent = system?.getComponent("App", "root")
@@ -83,6 +84,7 @@ const SwaggerUI = ({
      filter,
      persistAuthorization,
      withCredentials,
+      initialState,
      ...(typeof oauth2RedirectUrl === "string"
        ? { oauth2RedirectUrl: oauth2RedirectUrl }
        : {}),
@@ -165,6 +167,7 @@ SwaggerUI.propTypes = {
  persistAuthorization: PropTypes.bool,
  withCredentials: PropTypes.bool,
  oauth2RedirectUrl: PropTypes.string,
+  initialState: PropTypes.object,
 }
 SwaggerUI.System = SwaggerUIConstructor.System
 SwaggerUI.presets = SwaggerUIConstructor.presets
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -53,6 +53,8 @@
    "lint": "eslint --ext \".js,.jsx\" src test dev-helpers flavors",
    "lint-errors": "eslint --quiet --ext \".js,.jsx\" src test dev-helpers flavors",
    "lint-fix": "eslint --ext \".js,.jsx\" src test dev-helpers flavors --fix",
+    "lint-styles": "stylelint \"**/*.scss\"",
+    "lint-styles-fix": "stylelint \"**/*.scss\" --fix",
    "test": "run-s lint-errors test:unit cy:ci",
    "test:artifact": "cross-env NODE_ENV=production BABEL_ENV=commonjs BROWSERSLIST_ENV=node-development jest --config ./config/jest/jest.artifact.config.js",
    "test:unit": "cross-env NODE_ENV=test BABEL_ENV=commonjs BROWSERSLIST_ENV=node-development jest --config ./config/jest/jest.unit.config.js",
@@ -71,8 +73,7 @@
    "start": "npm-run-all --parallel serve-static open-static"
  },
  "dependencies": {
-    "@babel/runtime-corejs3": "^7.26.9",
-    "@braintree/sanitize-url": "=7.0.4",
+    "@babel/runtime-corejs3": "^7.26.7",
    "@scarf/scarf": "=1.4.0",
    "base64-js": "^1.5.1",
    "classnames": "^2.5.1",
@@ -94,15 +95,15 @@
    "react-immutable-proptypes": "2.2.0",
    "react-immutable-pure-component": "^2.2.0",
    "react-inspector": "^6.0.1",
-    "react-redux": "^9.1.2",
-    "react-syntax-highlighter": "^15.5.0",
+    "react-redux": "^9.2.0",
+    "react-syntax-highlighter": "^15.6.1",
    "redux": "^5.0.1",
    "redux-immutable": "^4.0.0",
    "remarkable": "^2.0.1",
    "reselect": "^5.1.1",
    "serialize-error": "^8.1.0",
    "sha.js": "^2.4.11",
-    "swagger-client": "^3.34.0",
+    "swagger-client": "^3.34.1",
    "url-parse": "^1.5.10",
    "xml": "=1.0.1",
    "xml-but-prettier": "^1.0.1",
@@ -110,43 +111,46 @@
  },
  "devDependencies": {
    "@babel/cli": "=7.26.4",
-    "@babel/core": "=7.26.8",
+    "@babel/core": "=7.26.9",
    "@babel/eslint-parser": "=7.26.8",
-    "@babel/plugin-transform-runtime": "=7.26.9",
+    "@babel/plugin-transform-runtime": "=7.26.8",
    "@babel/preset-env": "=7.26.9",
-    "@babel/preset-react": "=7.24.7",
+    "@babel/preset-react": "=7.26.3",
    "@babel/register": "=7.25.9",
    "@cfaester/enzyme-adapter-react-18": "=0.8.0",
-    "@commitlint/cli": "^19.6.1",
-    "@commitlint/config-conventional": "^19.2.2",
+    "@commitlint/cli": "^19.7.1",
+    "@commitlint/config-conventional": "^19.7.1",
    "@jest/globals": "=29.7.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@release-it/conventional-changelog": "=8.0.1",
+    "@release-it/conventional-changelog": "=8.0.2",
    "@svgr/webpack": "=8.1.0",
-    "autoprefixer": "^10.4.19",
-    "babel-loader": "^9.1.3",
+    "autoprefixer": "^10.4.20",
+    "babel-loader": "^9.2.1",
    "babel-plugin-lodash": "=3.3.4",
    "babel-plugin-module-resolver": "=5.0.2",
    "babel-plugin-transform-react-remove-prop-types": "=0.4.24",
    "body-parser": "^1.19.0",
    "buffer": "^6.0.3",
+    "cheerio": "=1.0.0-rc.12",
    "cors": "^2.8.5",
    "cross-env": "=7.0.3",
    "css-loader": "=7.1.2",
    "cssnano": "=7.0.6",
-    "cypress": "=13.13.0",
+    "cypress": "=14.0.3",
    "dedent": "^1.5.3",
    "deepmerge": "^4.3.1",
    "enzyme": "=3.11.0",
    "eslint": "^8.57.0",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
    "esm": "=3.2.25",
    "expect": "=29.7.0",
-    "express": "^4.21.1",
+    "express": "^4.21.2",
    "git-describe": "^4.1.0",
-    "html-webpack-plugin": "^5.5.1",
+    "html-webpack-plugin": "^5.6.3",
    "html-webpack-skip-assets-plugin": "^1.0.4",
    "husky": "=9.1.7",
    "inspectpack": "=4.7.1",
@@ -157,31 +161,34 @@
    "json-loader": "^0.5.7",
    "json-merger": "^2.0.0",
    "json-server": "=0.17.4",
-    "less": "^4.2.0",
+    "less": "^4.2.2",
    "license-checker": "^25.0.0",
    "lint-staged": "^15.4.3",
-    "local-web-server": "^5.3.3",
-    "mini-css-extract-plugin": "^2.9.0",
+    "local-web-server": "^5.4.0",
+    "mini-css-extract-plugin": "^2.9.2",
    "npm-audit-ci-wrapper": "^3.0.2",
    "npm-run-all": "^4.1.5",
    "oauth2-server": "^2.4.1",
    "open": "^10.1.0",
    "postcss": "^8.5.2",
+    "postcss-scss": "^4.0.9",
    "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "^9.6.0",
+    "postcss-preset-env": "^10.1.4",
    "prettier": "^3.5.2",
    "process": "^0.11.10",
    "react-refresh": "^0.16.0",
    "react-test-renderer": "^18.3.1",
-    "release-it": "=17.10.0",
-    "rimraf": "^5.0.7",
-    "sass": "^1.77.6",
-    "sass-loader": "^14.2.1",
+    "release-it": "=17.11.0",
+    "rimraf": "^6.0.1",
+    "sass-embedded": "=1.83.4",
+    "sass-loader": "^16.0.4",
    "shx": "=0.3.4",
    "sinon": "=19.0.2",
    "source-map-support": "^0.5.21",
    "start-server-and-test": "^2.0.10",
    "stream-browserify": "^3.0.0",
+    "stylelint": "^16.14.1",
+    "stylelint-prettier": "^5.0.3",
    "tachyons-sass": "^4.9.5",
    "terser-webpack-plugin": "^5.3.11",
    "webpack": "^5.97.1",
--- a/renovate.json
+++ b/renovate.json
@@ -1,45 +0,0 @@
-{
-  "extends": [
-    "config:base"
-  ],
-  "packageRules": [
-    {
-      "managers": ["npm"],
-      "commitMessage": "{{{commitMessagePrefix}}} {{{commitMessageTopic}}}{{{commitMessageExtra}}} {{{commitMessageSuffix}}}",
-      "commitMessageTopic": "{{depName}}",
-      "commitMessageExtra": "{{#if isMajor}} v{{{newMajor}}}{{else}}{{#if isSingleVersion}}@{{{toVersion}}}{{else}}@{{{newValue}}}{{/if}}{{/if}}"
-    },
-    {
-      "packagePatterns": [
-        "*"
-      ],
-      "rangeStrategy": "replace",
-      "semanticCommitType": "housekeeping"
-    },
-    {
-      "depTypeList": [
-        "devDependencies"
-      ],
-      "rangeStrategy": "update-lockfile",
-      "semanticCommitScope": "dev-deps",
-      "automerge": true,
-      "major": {
-        "automerge": false
-      }
-    },
-    {
-      "depTypeList": [
-        "peerDependencies"
-      ],
-      "rangeStrategy": "widen",
-      "semanticCommitScope": "peer-deps"
-    },
-    {
-      "packagePatterns": ["^react"],
-      "enabled": false
-    }
-  ],
-  "ignorePaths": ["swagger-ui-dist-package/package.json"],
-  "ignoreDeps": ["release-it", "@release-it/conventional-changelog"],
-  "prConcurrentLimit": 3
-}
--- a/src/core/components/auth/api-key-auth.jsx
+++ b/src/core/components/auth/api-key-auth.jsx
@@ -8,7 +8,8 @@ export default class ApiKeyAuth extends React.Component {
    errSelectors: PropTypes.object.isRequired,
    schema: PropTypes.object.isRequired,
    name: PropTypes.string.isRequired,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    authSelectors: PropTypes.object.isRequired
  }

  constructor(props, context) {
@@ -39,13 +40,14 @@ export default class ApiKeyAuth extends React.Component {
  }

  render() {
-    let { schema, getComponent, errSelectors, name } = this.props
+    let { schema, getComponent, errSelectors, name, authSelectors } = this.props
    const Input = getComponent("Input")
    const Row = getComponent("Row")
    const Col = getComponent("Col")
    const AuthError = getComponent("authError")
    const Markdown = getComponent("Markdown", true)
    const JumpToPath = getComponent("JumpToPath", true)
+    const path = authSelectors.selectAuthPath(name)
    let value = this.getValue()
    let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)

@@ -53,7 +55,7 @@ export default class ApiKeyAuth extends React.Component {
      <div>
        <h4>
          <code>{ name || schema.get("name") }</code>&nbsp;(apiKey)
-          <JumpToPath path={[ "securityDefinitions", name ]} />
+          <JumpToPath path={path} />
        </h4>
        { value && <h6>Authorized</h6>}
        <Row>
--- a/src/core/components/auth/auth-item.jsx
+++ b/src/core/components/auth/auth-item.jsx
@@ -10,6 +10,7 @@ export default class Auths extends React.Component {
    getComponent: PropTypes.func.isRequired,
    onAuthChange: PropTypes.func.isRequired,
    errSelectors: PropTypes.object.isRequired,
+    authSelectors: PropTypes.object.isRequired,
  }

  render() {
@@ -19,7 +20,8 @@ export default class Auths extends React.Component {
      getComponent,
      onAuthChange,
      authorized,
-      errSelectors
+      errSelectors,
+      authSelectors
    } = this.props
    const ApiKeyAuth = getComponent("apiKeyAuth")
    const BasicAuth = getComponent("basicAuth")
@@ -35,7 +37,8 @@ export default class Auths extends React.Component {
                                        errSelectors={ errSelectors }
                                        authorized={ authorized }
                                        getComponent={ getComponent }
-                                        onChange={ onAuthChange } />
+                                        onChange={ onAuthChange }
+                                        authSelectors = { authSelectors } />
        break
      case "basic": authEl = <BasicAuth key={ name }
                                      schema={ schema }
@@ -43,7 +46,8 @@ export default class Auths extends React.Component {
                                      errSelectors={ errSelectors }
                                      authorized={ authorized }
                                      getComponent={ getComponent }
-                                      onChange={ onAuthChange } />
+                                      onChange={ onAuthChange }
+                                      authSelectors = { authSelectors } />
        break
      default: authEl = <div key={ name }>Unknown security definition type { type }</div>
    }
--- a/src/core/components/auth/auths.jsx
+++ b/src/core/components/auth/auths.jsx
@@ -83,6 +83,7 @@ export default class Auths extends React.Component {
                  onAuthChange={this.onAuthChange}
                  authorized={authorized}
                  errSelectors={errSelectors}
+                  authSelectors={authSelectors}
                  />
              }).toArray()
            }
--- a/src/core/components/auth/basic-auth.jsx
+++ b/src/core/components/auth/basic-auth.jsx
@@ -10,6 +10,7 @@ export default class BasicAuth extends React.Component {
    onChange: PropTypes.func.isRequired,
    name: PropTypes.string.isRequired,
    errSelectors: PropTypes.object.isRequired,
+    authSelectors: PropTypes.object.isRequired
  }

  constructor(props, context) {
@@ -47,19 +48,20 @@ export default class BasicAuth extends React.Component {
  }

  render() {
-    let { schema, getComponent, name, errSelectors } = this.props
+    let { schema, getComponent, name, errSelectors, authSelectors } = this.props
    const Input = getComponent("Input")
    const Row = getComponent("Row")
    const Col = getComponent("Col")
    const AuthError = getComponent("authError")
    const JumpToPath = getComponent("JumpToPath", true)
    const Markdown = getComponent("Markdown", true)
+    const path = authSelectors.selectAuthPath(name)
    let username = this.getValue().username
    let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)

    return (
      <div>
-        <h4>Basic authorization<JumpToPath path={[ "securityDefinitions", name ]} /></h4>
+        <h4>Basic authorization<JumpToPath path={path} /></h4>
        { username && <h6>Authorized</h6> }
        <Row>
          <Markdown source={ schema.get("description") } />
--- a/src/core/components/auth/oauth2.jsx
+++ b/src/core/components/auth/oauth2.jsx
@@ -130,6 +130,8 @@ export default class Oauth2 extends React.Component {
    const AUTH_FLOW_ACCESS_CODE = isOAS3() ? (oidcUrl ? "authorization_code" : "authorizationCode") : "accessCode"
    const AUTH_FLOW_APPLICATION = isOAS3() ? (oidcUrl ? "client_credentials" : "clientCredentials") : "application"

+    const path = authSelectors.selectAuthPath(name)
+
    let authConfigs = authSelectors.getConfigs() || {}
    let isPkceCodeGrant = !!authConfigs.usePkceWithAuthorizationCodeGrant

@@ -144,7 +146,7 @@ export default class Oauth2 extends React.Component {

    return (
      <div>
-        <h4>{name} (OAuth2, { flowToDisplay }) <JumpToPath path={[ "securityDefinitions", name ]} /></h4>
+        <h4>{name} (OAuth2, { flowToDisplay }) <JumpToPath path={path} /></h4>
        { !this.state.appName ? null : <h5>Application: { this.state.appName } </h5> }
        { description && <Markdown source={ schema.get("description") } /> }

--- a/src/core/components/contact.jsx
+++ b/src/core/components/contact.jsx
@@ -3,8 +3,7 @@
 */
 import React from "react"
 import PropTypes from "prop-types"
-import { safeBuildUrl } from "core/utils/url"
-import { sanitizeUrl } from "core/utils"
+import { safeBuildUrl, sanitizeUrl } from "core/utils/url"

 class Contact extends React.Component {
  static propTypes = {
--- a/src/core/components/example.jsx
+++ b/src/core/components/example.jsx
@@ -6,6 +6,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { stringify } from "core/utils"
+import { Map } from "immutable"

 export default function Example(props) {
  const { example, showValue, getComponent } = props
@@ -13,7 +14,7 @@ export default function Example(props) {
  const Markdown = getComponent("Markdown", true)
  const HighlightCode = getComponent("HighlightCode", true)

-  if (!example) return null
+  if (!example || !Map.isMap(example)) return null

  return (
    <div className="example">
--- a/src/core/components/examples-select-value-retainer.jsx
+++ b/src/core/components/examples-select-value-retainer.jsx
@@ -28,7 +28,7 @@ import { stringify } from "core/utils"

 // Note that `currentNamespace` isn't currently used anywhere!

-const stringifyUnlessList = input =>
+const stringifyUnlessList = (input) =>
  List.isList(input) ? input : stringify(input)

 export default class ExamplesSelectValueRetainer extends React.PureComponent {
@@ -53,12 +53,14 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {
      // NOOP
    },
    onSelect: (...args) =>
-      console.log( // eslint-disable-line no-console
+      // eslint-disable-next-line no-console
+      console.log(
        "ExamplesSelectValueRetainer: no `onSelect` function was provided",
        ...args
      ),
    updateValue: (...args) =>
-      console.log( // eslint-disable-line no-console
+      // eslint-disable-next-line no-console
+      console.log(
        "ExamplesSelectValueRetainer: no `updateValue` function was provided",
        ...args
      ),
@@ -94,7 +96,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {
    return (this.state[currentNamespace] || Map()).toObject()
  }

-  _setStateForCurrentNamespace = obj => {
+  _setStateForCurrentNamespace = (obj) => {
    const { currentNamespace } = this.props

    return this._setStateForNamespace(currentNamespace, obj)
@@ -125,7 +127,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {
    )
  }

-  _getCurrentExampleValue = props => {
+  _getCurrentExampleValue = (props) => {
    // props are accepted so that this can be used in UNSAFE_componentWillReceiveProps,
    // which has access to `nextProps`
    const { currentKey } = props || this.props
@@ -133,12 +135,8 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {
  }

  _onExamplesSelect = (key, { isSyntheticChange } = {}, ...otherArgs) => {
-    const {
-      onSelect,
-      updateValue,
-      currentUserInputValue,
-      userHasEditedBody,
-    } = this.props
+    const { onSelect, updateValue, currentUserInputValue, userHasEditedBody } =
+      this.props
    const { lastUserEditedValue } = this._getStateForCurrentNamespace()

    const valueFromExample = this._getValueForExample(key)
@@ -179,10 +177,8 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {
      userHasEditedBody,
    } = nextProps

-    const {
-      lastUserEditedValue,
-      lastDownstreamValue,
-    } = this._getStateForCurrentNamespace()
+    const { lastUserEditedValue, lastDownstreamValue } =
+      this._getStateForCurrentNamespace()

    const valueFromCurrentExample = this._getValueForExample(
      nextProps.currentKey,
@@ -199,8 +195,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {

    if (examplesMatchingNewValue.size) {
      let key
-      if(examplesMatchingNewValue.has(nextProps.currentKey))
-      {
+      if (examplesMatchingNewValue.has(nextProps.currentKey)) {
        key = nextProps.currentKey
      } else {
        key = examplesMatchingNewValue.keySeq().first()
--- a/src/core/components/examples-select.jsx
+++ b/src/core/components/examples-select.jsx
@@ -3,7 +3,7 @@
 */

 import React from "react"
-import Im from "immutable"
+import { Map } from "immutable"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"

@@ -18,9 +18,10 @@ export default class ExamplesSelect extends React.PureComponent {
  }

  static defaultProps = {
-    examples: Im.Map({}),
+    examples: Map({}),
    onSelect: (...args) =>
-      console.log( // eslint-disable-line no-console
+      // eslint-disable-next-line no-console
+      console.log(
        // FIXME: remove before merging to master...
        `DEBUG: ExamplesSelect was not given an onSelect callback`,
        ...args
@@ -37,7 +38,7 @@ export default class ExamplesSelect extends React.PureComponent {
    }
  }

-  _onDomSelect = e => {
+  _onDomSelect = (e) => {
    if (typeof this.props.onSelect === "function") {
      const element = e.target.selectedOptions[0]
      const key = element.getAttribute("value")
@@ -103,18 +104,16 @@ export default class ExamplesSelect extends React.PureComponent {

    return (
      <div className="examples-select">
-        {
-          showLabels ? (
+        {showLabels ? (
          <span className="examples-select__section-label">Examples: </span>
-          ) : null
-        }
+        ) : null}
        <select
          className="examples-select-element"
          onChange={this._onDomSelect}
          value={
            isModifiedValueAvailable && isValueModified
              ? "__MODIFIED__VALUE__"
-              : (currentExampleKey || "")
+              : currentExampleKey || ""
          }
        >
          {isModifiedValueAvailable ? (
@@ -127,7 +126,8 @@ export default class ExamplesSelect extends React.PureComponent {
                  key={exampleName} // for React
                  value={exampleName} // for matching to select's `value`
                >
-                  {example.get("summary") || exampleName}
+                  {(Map.isMap(example) && example.get("summary")) ||
+                    exampleName}
                </option>
              )
            })
--- a/src/core/components/info.jsx
+++ b/src/core/components/info.jsx
@@ -4,8 +4,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
-import { sanitizeUrl } from "core/utils"
-import { safeBuildUrl } from "core/utils/url"
+import { safeBuildUrl, sanitizeUrl } from "core/utils/url"

 export class InfoBasePath extends React.Component {
  static propTypes = {
--- a/src/core/components/layout-utils.jsx
+++ b/src/core/components/layout-utils.jsx
@@ -178,7 +178,9 @@ export class Select extends React.Component {

    this.setState({value: value})

-    onChange && onChange(value)
+    if(onChange) {
+      onChange(value)
+    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
--- a/src/core/components/license.jsx
+++ b/src/core/components/license.jsx
@@ -3,8 +3,7 @@
 */
 import React from "react"
 import PropTypes from "prop-types"
-import { safeBuildUrl } from "core/utils/url"
-import { sanitizeUrl } from "core/utils"
+import { safeBuildUrl, sanitizeUrl } from "core/utils/url"

 class License extends React.Component {
  static propTypes = {
--- a/src/core/components/online-validator-badge.jsx
+++ b/src/core/components/online-validator-badge.jsx
@@ -2,7 +2,8 @@ import React from "react"
 import URL from "url-parse"

 import PropTypes from "prop-types"
-import { sanitizeUrl, requiresValidationURL } from "core/utils"
+import { requiresValidationURL } from "core/utils"
+import { sanitizeUrl } from "core/utils/url"
 import win from "core/window"

 export default class OnlineValidatorBadge extends React.Component {
--- a/src/core/components/operation-tag.jsx
+++ b/src/core/components/operation-tag.jsx
@@ -2,9 +2,10 @@ import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import Im from "immutable"
-import { createDeepLinkPath, escapeDeepLinkPath, sanitizeUrl } from "core/utils"
-import { safeBuildUrl } from "core/utils/url"
-import { isFunc } from "core/utils"
+import { createDeepLinkPath, escapeDeepLinkPath, isFunc } from "core/utils"
+import { safeBuildUrl, sanitizeUrl } from "core/utils/url"
+
+/* eslint-disable  react/jsx-no-bind */

 export default class OperationTag extends React.Component {

--- a/src/core/components/operation.jsx
+++ b/src/core/components/operation.jsx
@@ -1,8 +1,7 @@
 import React, { PureComponent } from "react"
 import PropTypes from "prop-types"
-import { getList } from "core/utils"
-import { getExtensions, sanitizeUrl, escapeDeepLinkPath } from "core/utils"
-import { safeBuildUrl } from "core/utils/url"
+import { getExtensions, escapeDeepLinkPath, getList } from "core/utils"
+import { safeBuildUrl, sanitizeUrl } from "core/utils/url"
 import { Iterable, List } from "immutable"
 import ImPropTypes from "react-immutable-proptypes"

--- a/src/core/components/parameter-row.jsx
+++ b/src/core/components/parameter-row.jsx
@@ -3,7 +3,7 @@ import { Map, List, fromJS } from "immutable"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import win from "core/window"
-import { getExtensions, getCommonExtensions, numberToString, stringify, isEmptyValue } from "core/utils"
+import { getExtensions, getCommonExtensions, numberToString, stringify, isEmptyValue, immutableToJS } from "core/utils"
 import getParameterSchema from "core/utils/get-parameter-schema.js"

 export default class ParameterRow extends Component {
@@ -152,10 +152,13 @@ export default class ParameterRow extends Component {

      //// Dispatch the initial value

+      const type = fn.jsonSchema202012.foldType(immutableToJS(schema?.get("type")))
+      const itemType = fn.jsonSchema202012.foldType(immutableToJS(schema?.getIn(["items", "type"])))
+
      if(initialValue !== undefined) {
        this.onChangeWrapper(initialValue)
      } else if(
-        schema && schema.get("type") === "object"
+        type === "object"
        && generatedSampleValue
        && !paramWithMeta.get("examples")
      ) {
@@ -172,6 +175,20 @@ export default class ParameterRow extends Component {
          )
        )
      } 
+      else if (
+        type === "array"
+        && itemType === "object"
+        && generatedSampleValue
+        && !paramWithMeta.get("examples")
+      ) {
+        this.onChangeWrapper(
+          List.isList(generatedSampleValue) ? (
+            generatedSampleValue
+          ) : (
+            List(JSON.parse(generatedSampleValue))
+          )
+        )
+      }
    }
  }

@@ -236,12 +253,16 @@ export default class ParameterRow extends Component {
    }
    
    let format = schema ? schema.get("format") : null
-    let type = schema ? schema.get("type") : null
-    let itemType = schema ? schema.getIn(["items", "type"]) : null
    let isFormData = inType === "formData"
    let isFormDataSupported = "FormData" in win
    let required = param.get("required")

+    const typeLabel = fn.jsonSchema202012.getType(immutableToJS(schema))
+    const type = fn.jsonSchema202012.foldType(immutableToJS(schema?.get("type"))) 
+    const itemType = fn.jsonSchema202012.foldType(immutableToJS(schema?.getIn(["items", "type"]))) 
+    const isObject = !bodyParam && type === "object"
+    const isArrayOfObjects = !bodyParam && itemType === "object"
+
    let value = paramWithMeta ? paramWithMeta.get("value") : ""
    let commonExt = showCommonExtensions ? getCommonExtensions(schema) : null
    let extensions = showExtensions ? getExtensions(param) : null
@@ -281,6 +302,18 @@ export default class ParameterRow extends Component {
      }
    }

+    const jsonSchemaForm = bodyParam ? null
+      : <JsonSchemaForm fn={fn}
+        getComponent={getComponent}
+        value={ value }
+        required={ required }
+        disabled={!isExecute}
+        description={param.get("name")}
+        onChange={ this.onChangeWrapper }
+        errors={ paramWithMeta.get("errors") }
+        schema={ schema }
+      />
+
    return (
      <tr data-param-name={param.get("name")} data-param-in={param.get("in")}>
        <td className="parameters-col_name">
@@ -289,8 +322,7 @@ export default class ParameterRow extends Component {
            { !required ? null : <span>&nbsp;*</span> }
          </div>
          <div className="parameter__type">
-            { type }
-            { itemType && `[${itemType}]` }
+            { typeLabel }
            { format && <span className="prop-format">(${format})</span>}
          </div>
          <div className="parameter__deprecated">
@@ -338,19 +370,19 @@ export default class ParameterRow extends Component {
            ) : null
          }

-          { bodyParam ? null
-            : <JsonSchemaForm fn={fn}
+          { (isObject || isArrayOfObjects) ? (
+            <ModelExample 
              getComponent={getComponent}
-                              value={ value }
-                              required={ required }
-                              disabled={!isExecute}
-                              description={param.get("name")}
-                              onChange={ this.onChangeWrapper }
-                              errors={ paramWithMeta.get("errors") }
-                              schema={ schema }/>
+              specPath={specPath.push("schema")}
+              getConfigs={getConfigs}
+              isExecute={isExecute}
+              specSelectors={specSelectors}
+              schema={schema}
+              example={jsonSchemaForm}
+            />
+            ) : jsonSchemaForm 
          }

-
          {
            bodyParam && schema ? <ModelExample getComponent={ getComponent }
                                                specPath={specPath.push("schema")}
--- a/src/core/components/response.jsx
+++ b/src/core/components/response.jsx
@@ -6,6 +6,7 @@ import { fromJS, Seq, Iterable, List, Map } from "immutable"
 import { getExtensions, fromJSOrdered, stringify } from "core/utils"
 import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"

+/* eslint-disable  react/jsx-no-bind */

 const getExampleComponent = ( sampleResponse, HighlightCode ) => {
  if (sampleResponse == null) return null
@@ -139,7 +140,9 @@ export default class Response extends React.Component {
        const targetExample = examplesForMediaType
          .get(targetExamplesKey, Map({}))
        const getMediaTypeExample = (targetExample) =>
-          targetExample.get("value")
+          Map.isMap(targetExample)
+          ? targetExample.get("value")
+          : undefined
        mediaTypeExample = getMediaTypeExample(targetExample)
        if(mediaTypeExample === undefined) {
          mediaTypeExample = getMediaTypeExample(examplesForMediaType.values().next().value)
--- a/src/core/components/version-pragma-filter.jsx
+++ b/src/core/components/version-pragma-filter.jsx
@@ -30,7 +30,7 @@ export default class VersionPragmaFilter extends React.PureComponent {
          <div>
            <h3>Unable to render this definition</h3>
            <p><code>swagger</code> and <code>openapi</code> fields cannot be present in the same Swagger or OpenAPI definition. Please remove one of the fields.</p>
-            <p>Supported version fields are <code>swagger: {"\"2.0\""}</code> and those that match <code>openapi: 3.0.n</code> (for example, <code>openapi: 3.0.0</code>).</p>
+            <p>Supported version fields are <code>swagger: {"\"2.0\""}</code> and those that match <code>openapi: 3.0.n</code> (for example, <code>openapi: 3.0.4</code>).</p>
          </div>
        </div>
      </div>
@@ -43,7 +43,7 @@ export default class VersionPragmaFilter extends React.PureComponent {
          <div>
            <h3>Unable to render this definition</h3>
            <p>The provided definition does not specify a valid version field.</p>
-            <p>Please indicate a valid Swagger or OpenAPI version field. Supported version fields are <code>swagger: {"\"2.0\""}</code> and those that match <code>openapi: 3.0.n</code> (for example, <code>openapi: 3.0.0</code>).</p>
+            <p>Please indicate a valid Swagger or OpenAPI version field. Supported version fields are <code>swagger: {"\"2.0\""}</code> and those that match <code>openapi: 3.0.n</code> (for example, <code>openapi: 3.0.4</code>).</p>
          </div>
        </div>
      </div>
--- a/src/core/oauth2-authorize.js
+++ b/src/core/oauth2-authorize.js
@@ -1,6 +1,7 @@
 import parseUrl from "url-parse"
 import Im from "immutable"
-import { btoa, sanitizeUrl, generateCodeVerifier, createCodeChallenge } from "core/utils"
+import { btoa, generateCodeVerifier, createCodeChallenge } from "core/utils"
+import { sanitizeUrl } from "core/utils/url"

 export default function authorize ( { auth, authActions, errActions, configs, authConfigs={}, currentServer } ) {
  let { schema, scopes, name, clientId } = auth
--- a/src/core/plugins/auth/actions.js
+++ b/src/core/plugins/auth/actions.js
@@ -5,9 +5,7 @@ import { btoa, buildFormData } from "core/utils"
 export const SHOW_AUTH_POPUP = "show_popup"
 export const AUTHORIZE = "authorize"
 export const LOGOUT = "logout"
-export const PRE_AUTHORIZE_OAUTH2 = "pre_authorize_oauth2"
 export const AUTHORIZE_OAUTH2 = "authorize_oauth2"
-export const VALIDATE = "validate"
 export const CONFIGURE_AUTH = "configure_auth"
 export const RESTORE_AUTHORIZATION = "restore_authorization"

--- a/src/core/plugins/auth/selectors.js
+++ b/src/core/plugins/auth/selectors.js
@@ -26,6 +26,14 @@ export const definitionsToAuthorize = createSelector(
    }
 )

+export const selectAuthPath =
+  (state, name) =>
+  ({ specSelectors }) =>
+    List(
+      specSelectors.isOAS3()
+        ? ["components", "securitySchemes", name]
+        : ["securityDefinitions", name]
+    )
    
 export const getDefinitionsByNames = ( state, securities ) => ( { specSelectors } ) => {
  console.warn("WARNING: getDefinitionsByNames is deprecated and will be removed in the next major version.")
--- a/src/core/plugins/icons/index.js
+++ b/src/core/plugins/icons/index.js
@@ -18,7 +18,7 @@ const IconsPlugin = () => ({
    CopyIcon,
    LockIcon,
    UnlockIcon,
-    }
+  },
 })

 export default IconsPlugin
--- a/src/core/plugins/json-schema-2020-12-samples/fn/index.js
+++ b/src/core/plugins/json-schema-2020-12-samples/fn/index.js
@@ -13,3 +13,4 @@ export { default as encoderAPI } from "./api/encoderAPI"
 export { default as formatAPI } from "./api/formatAPI"
 export { default as mediaTypeAPI } from "./api/mediaTypeAPI"
 export { default as mergeJsonSchema } from "./core/merge"
+export { foldType } from "./core/type"
--- a/src/core/plugins/json-schema-2020-12-samples/index.js
+++ b/src/core/plugins/json-schema-2020-12-samples/index.js
@@ -12,6 +12,7 @@ import {
  mediaTypeAPI,
  formatAPI,
  mergeJsonSchema,
+  foldType,
 } from "./fn/index"
 import makeGetJsonSampleSchema from "./fn/get-json-sample-schema"
 import makeGetYamlSampleSchema from "./fn/get-yaml-sample-schema"
@@ -41,6 +42,7 @@ const JSONSchema202012SamplesPlugin = ({ getSystem }) => {
        getXmlSampleSchema,
        getSampleSchema,
        mergeJsonSchema,
+        foldType,
      },
    },
  }
--- a/src/core/plugins/json-schema-2020-12/components/Accordion/_accordion.scss
+++ b/src/core/plugins/json-schema-2020-12/components/Accordion/_accordion.scss
@@ -14,13 +14,13 @@
    vertical-align: bottom;

    &--expanded {
-      transition: transform .15s ease-in;
+      transition: transform 0.15s ease-in;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }

    &--collapsed {
-      transition: transform .15s ease-in;
+      transition: transform 0.15s ease-in;
      transform: rotate(0deg);
      transform-origin: 50% 50%;
    }
@@ -31,4 +31,3 @@
    }
  }
 }
-
--- a/src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss
+++ b/src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss
@@ -1,5 +1,8 @@
+@use "./../../../../../style/variables" as *;
+@use "./../../../../../style/type";
+
 .json-schema-2020-12-expand-deep-button {
-  @include text_headline($section-models-model-title-font-color);
+  @include type.text_headline($section-models-model-title-font-color);
  font-size: 12px;
  color: rgb(175, 174, 174);
  border: none;
--- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
@@ -1,7 +1,7 @@
 /**
 * @prettier
 */
-import React, { forwardRef, useState, useCallback, useEffect } from "react"
+import React, { forwardRef, useCallback } from "react"
 import PropTypes from "prop-types"
 import classNames from "classnames"

@@ -12,23 +12,32 @@ import {
  useFn,
  useIsEmbedded,
  useIsExpanded,
-  useIsExpandedDeeply,
  useIsCircular,
  useRenderedSchemas,
+  usePath,
 } from "../../hooks"
 import {
  JSONSchemaLevelContext,
-  JSONSchemaDeepExpansionContext,
  JSONSchemaCyclesContext,
+  JSONSchemaPathContext,
 } from "../../context"

 const JSONSchema = forwardRef(
-  ({ schema, name = "", dependentRequired = [], onExpand = () => {} }, ref) => {
+  (
+    {
+      schema,
+      name = "",
+      dependentRequired = [],
+      onExpand = () => {},
+      identifier = "",
+    },
+    ref
+  ) => {
    const fn = useFn()
-    const isExpanded = useIsExpanded()
-    const isExpandedDeeply = useIsExpandedDeeply()
-    const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-    const [expandedDeeply, setExpandedDeeply] = useState(isExpandedDeeply)
+    // this implementation assumes that $id is always non-relative URI
+    const pathToken = identifier || schema.$id || name
+    const { path } = usePath(pathToken)
+    const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
    const [level, nextLevel] = useLevel()
    const isEmbedded = useIsEmbedded()
    const isExpandable = fn.isExpandable(schema) || dependentRequired.length > 0
@@ -78,42 +87,39 @@ const JSONSchema = forwardRef(
    const KeywordDeprecated = useComponent("KeywordDeprecated")
    const KeywordReadOnly = useComponent("KeywordReadOnly")
    const KeywordWriteOnly = useComponent("KeywordWriteOnly")
+    const KeywordExamples = useComponent("KeywordExamples")
+    const ExtensionKeywords = useComponent("ExtensionKeywords")
    const ExpandDeepButton = useComponent("ExpandDeepButton")

-    /**
-     * Effects handlers.
-     */
-    useEffect(() => {
-      setExpandedDeeply(isExpandedDeeply)
-    }, [isExpandedDeeply])
-
-    useEffect(() => {
-      setExpandedDeeply(expandedDeeply)
-    }, [expandedDeeply])
-
    /**
     * Event handlers.
     */
    const handleExpansion = useCallback(
      (e, expandedNew) => {
-        setExpanded(expandedNew)
-        !expandedNew && setExpandedDeeply(false)
+        if (expandedNew) {
+          setExpanded()
+        } else {
+          setCollapsed()
+        }
        onExpand(e, expandedNew, false)
      },
-      [onExpand]
+      [onExpand, setExpanded, setCollapsed]
    )
    const handleExpansionDeep = useCallback(
      (e, expandedDeepNew) => {
-        setExpanded(expandedDeepNew)
-        setExpandedDeeply(expandedDeepNew)
+        if (expandedDeepNew) {
+          setExpanded({ deep: true })
+        } else {
+          setCollapsed({ deep: true })
+        }
        onExpand(e, expandedDeepNew, true)
      },
-      [onExpand]
+      [onExpand, setExpanded, setCollapsed]
    )

    return (
+      <JSONSchemaPathContext.Provider value={path}>
        <JSONSchemaLevelContext.Provider value={nextLevel}>
-        <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
          <JSONSchemaCyclesContext.Provider value={renderedSchemas}>
            <article
              ref={ref}
@@ -126,11 +132,11 @@ const JSONSchema = forwardRef(
              <div className="json-schema-2020-12-head">
                {isExpandable && !isCircular ? (
                  <>
-                    <Accordion expanded={expanded} onChange={handleExpansion}>
+                    <Accordion expanded={isExpanded} onChange={handleExpansion}>
                      <KeywordTitle title={name} schema={schema} />
                    </Accordion>
                    <ExpandDeepButton
-                      expanded={expanded}
+                      expanded={isExpanded}
                      onClick={handleExpansionDeep}
                    />
                  </>
@@ -151,10 +157,10 @@ const JSONSchema = forwardRef(
              </div>
              <div
                className={classNames("json-schema-2020-12-body", {
-                  "json-schema-2020-12-body--collapsed": !expanded,
+                  "json-schema-2020-12-body--collapsed": !isExpanded,
                })}
              >
-                {expanded && (
+                {isExpanded && (
                  <>
                    <KeywordDescription schema={schema} />
                    {!isCircular && isExpandable && (
@@ -186,6 +192,7 @@ const JSONSchema = forwardRef(
                      dependentRequired={dependentRequired}
                    />
                    <KeywordDefault schema={schema} />
+                    <KeywordExamples schema={schema} />
                    <Keyword$schema schema={schema} />
                    <Keyword$vocabulary schema={schema} />
                    <Keyword$id schema={schema} />
@@ -197,13 +204,14 @@ const JSONSchema = forwardRef(
                    )}
                    <Keyword$dynamicRef schema={schema} />
                    <Keyword$comment schema={schema} />
+                    <ExtensionKeywords schema={schema} />
                  </>
                )}
              </div>
            </article>
          </JSONSchemaCyclesContext.Provider>
-        </JSONSchemaDeepExpansionContext.Provider>
        </JSONSchemaLevelContext.Provider>
+      </JSONSchemaPathContext.Provider>
    )
  }
 )
@@ -213,6 +221,7 @@ JSONSchema.propTypes = {
  schema: propTypes.schema.isRequired,
  dependentRequired: PropTypes.arrayOf(PropTypes.string),
  onExpand: PropTypes.func,
+  identifier: PropTypes.string,
 }

 export default JSONSchema
--- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss
+++ b/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss
@@ -1,8 +1,14 @@
+@use "./../../../../../style/variables" as *;
+@use "./../../components/mixins";
+
 .json-schema-2020-12 {
  margin: 0 20px 15px 20px;
  border-radius: 4px;
  padding: 12px 0 12px 20px;
-  background-color: rgba($section-models-model-container-background-color, .05);
+  background-color: rgba(
+    $section-models-model-container-background-color,
+    0.05
+  );

  &:first-of-type {
    margin: 20px;
@@ -18,7 +24,7 @@
  }

  &-body {
-    @include expansion-border;
+    @include mixins.expansion-border;
    margin: 2px 0;

    &--collapsed {
@@ -26,5 +32,3 @@
    }
  }
 }
-
-
--- a/src/core/plugins/json-schema-2020-12/components/JSONViewer/JSONViewer.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/JSONViewer/JSONViewer.jsx
@@ -0,0 +1,153 @@
+/**
+ * @prettier
+ */
+import React, { useCallback } from "react"
+import PropTypes from "prop-types"
+import classNames from "classnames"
+
+import {
+  useComponent,
+  useIsExpanded,
+  useFn,
+  usePath,
+  useLevel,
+} from "../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
+import { isEmptyObject, isEmptyArray } from "../../fn"
+
+const JSONViewer = ({ name, value, className }) => {
+  const fn = useFn()
+  const { path } = usePath(name)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(name)
+  const [level, nextLevel] = useLevel()
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const isPrimitive =
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "bigint" ||
+    typeof value === "boolean" ||
+    typeof value === "symbol" ||
+    value == null
+  const isEmpty = isEmptyObject(value) || isEmptyArray(value)
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
+
+  /**
+   * Rendering.
+   */
+  if (isPrimitive) {
+    return (
+      <div className={classNames("json-schema-2020-12-json-viewer", className)}>
+        <span className="json-schema-2020-12-json-viewer__name json-schema-2020-12-json-viewer__name--secondary">
+          {name}
+        </span>
+        <span className="json-schema-2020-12-json-viewer__value json-schema-2020-12-json-viewer__value--secondary">
+          {fn.stringify(value)}
+        </span>
+      </div>
+    )
+  }
+
+  if (isEmpty) {
+    return (
+      <div className={classNames("json-schema-2020-12-json-viewer", className)}>
+        <span className="json-schema-2020-12-json-viewer__name json-schema-2020-12-json-viewer__name--secondary">
+          {name}
+        </span>
+        <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+          {Array.isArray(value) ? "empty array" : "empty object"}
+        </strong>
+      </div>
+    )
+  }
+
+  return (
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className={classNames("json-schema-2020-12-json-viewer", className)}
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-json-viewer__name json-schema-2020-12-json-viewer__name--secondary">
+              {name}
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+            {Array.isArray(value) ? "array" : "object"}
+          </strong>
+          <ul
+            className={classNames("json-schema-2020-12-json-viewer__children", {
+              "json-schema-2020-12-json-viewer__children--collapsed":
+                !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {Array.isArray(value)
+                  ? value.map((item, index) => (
+                      <li
+                        key={`#${index}`}
+                        className="json-schema-2020-12-property"
+                      >
+                        <JSONViewer
+                          name={`#${index}`}
+                          value={item}
+                          className={className}
+                        />
+                      </li>
+                    ))
+                  : Object.entries(value).map(
+                      ([propertyName, propertyValue]) => (
+                        <li
+                          key={propertyName}
+                          className="json-schema-2020-12-property"
+                        >
+                          <JSONViewer
+                            name={propertyName}
+                            value={propertyValue}
+                            className={className}
+                          />
+                        </li>
+                      )
+                    )}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+JSONViewer.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
+  className: PropTypes.string,
+}
+
+export default JSONViewer
--- a/src/core/plugins/json-schema-2020-12/components/JSONViewer/_json-viewer.scss
+++ b/src/core/plugins/json-schema-2020-12/components/JSONViewer/_json-viewer.scss
@@ -0,0 +1,11 @@
+@use "./../mixins";
+@use "./../keywords/all";
+
+.json-schema-2020-12-json-viewer {
+  @include mixins.json-schema-2020-12-keyword;
+}
+
+.json-schema-2020-12-json-viewer__name--secondary
+  + .json-schema-2020-12-json-viewer__value--secondary::before {
+  content: "=";
+}
--- a/src/core/plugins/json-schema-2020-12/components/_all.scss
+++ b/src/core/plugins/json-schema-2020-12/components/_all.scss
@@ -1,9 +1,4 @@
-@mixin expansion-border {
-  margin: 0 0 0 20px;
-  border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
-}
-
-@import './JSONSchema/json-schema';
-@import './Accordion/accordion';
-@import './ExpandDeepButton/expand-deep-button';
-@import './keywords/all';
+@use "./JSONViewer/json-viewer";
+@use "./JSONSchema/json-schema";
+@use "./Accordion/accordion";
+@use "./ExpandDeepButton/expand-deep-button";
--- a/src/core/plugins/json-schema-2020-12/components/_mixins.scss
+++ b/src/core/plugins/json-schema-2020-12/components/_mixins.scss
@@ -0,0 +1,82 @@
+@use "./../../../../style/variables" as *;
+@use "./../../../../style/type";
+
+@mixin expansion-border {
+  margin: 0 0 0 20px;
+  border-left: 1px dashed
+    rgba($section-models-model-container-background-color, 0.1);
+}
+
+@mixin json-schema-2020-12-keyword--primary {
+  color: $text-code-default-font-color;
+  font-style: normal;
+}
+
+@mixin json-schema-2020-12-keyword--extension {
+  color: #929292;
+  font-style: italic;
+}
+
+@mixin json-schema-2020-12-keyword {
+  margin: 5px 0 5px 0;
+
+  &__children {
+    @include expansion-border;
+    padding: 0;
+
+    &--collapsed {
+      display: none;
+    }
+  }
+
+  &__name {
+    font-size: 12px;
+    margin-left: 20px;
+    font-weight: bold;
+
+    &--primary {
+      @include json-schema-2020-12-keyword--primary;
+    }
+
+    &--secondary {
+      color: #6b6b6b;
+      font-style: italic;
+    }
+
+    &--extension {
+      @include json-schema-2020-12-keyword--extension;
+    }
+  }
+
+  &__value {
+    color: #6b6b6b;
+    font-style: italic;
+    font-size: 12px;
+    font-weight: normal;
+
+    &--primary {
+      @include json-schema-2020-12-keyword--primary;
+    }
+
+    &--secondary {
+      color: #6b6b6b;
+      font-style: italic;
+    }
+
+    &--extension {
+      @include json-schema-2020-12-keyword--extension;
+    }
+
+    &--warning {
+      @include type.text_code();
+      font-style: normal;
+      display: inline-block;
+      margin-left: 10px;
+      line-height: 1.5;
+      padding: 1px 4px 1px 4px;
+      border-radius: 4px;
+      color: red;
+      border: 1px dashed red;
+    }
+  }
+}
--- a/src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx
@@ -1,19 +1,19 @@
 /**
 * @prettier
 */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"

 import { schema } from "../../prop-types"
-import { useComponent, useIsExpanded, useIsExpandedDeeply } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { useComponent, useIsExpanded, usePath, useLevel } from "../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"

 const $defs = ({ schema }) => {
  const $defs = schema?.$defs || {}
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "$defs"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
  const Accordion = useComponent("Accordion")
  const ExpandDeepButton = useComponent("ExpandDeepButton")
  const JSONSchema = useComponent("JSONSchema")
@@ -22,12 +22,22 @@ const $defs = ({ schema }) => {
   * Event handlers.
   */
  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )

  /**
   * Rendering.
@@ -37,23 +47,30 @@ const $defs = ({ schema }) => {
  }

  return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$defs">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$defs"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
              $defs
            </span>
          </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
          <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
            object
          </strong>
          <ul
            className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
            })}
          >
-          {expanded && (
+            {isExpanded && (
              <>
                {Object.entries($defs).map(([schemaName, schema]) => (
                  <li key={schemaName} className="json-schema-2020-12-property">
@@ -64,7 +81,8 @@ const $defs = ({ schema }) => {
            )}
          </ul>
        </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
  )
 }

--- a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx
@@ -1,25 +1,26 @@
 /**
 * @prettier
 */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"

 import { schema } from "../../../prop-types"
-import {
-  useComponent,
-  useIsExpanded,
-  useIsExpandedDeeply,
-} from "../../../hooks"
+import { useComponent, useIsExpanded, usePath } from "../../../hooks"
+import { JSONSchemaPathContext } from "../../../context"

 const $vocabulary = ({ schema }) => {
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
+  const pathToken = "$vocabulary"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
  const Accordion = useComponent("Accordion")

  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])

  /**
   * Rendering.
@@ -28,8 +29,9 @@ const $vocabulary = ({ schema }) => {
  if (typeof schema.$vocabulary !== "object") return null

  return (
+    <JSONSchemaPathContext.Provider value={path}>
      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$vocabulary">
-      <Accordion expanded={expanded} onChange={handleExpansion}>
+        <Accordion expanded={isExpanded} onChange={handleExpansion}>
          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
            $vocabulary
          </span>
@@ -38,7 +40,7 @@ const $vocabulary = ({ schema }) => {
          object
        </strong>
        <ul>
-        {expanded &&
+          {isExpanded &&
            Object.entries(schema.$vocabulary).map(([uri, enabled]) => (
              <li
                key={uri}
@@ -53,6 +55,7 @@ const $vocabulary = ({ schema }) => {
            ))}
        </ul>
      </div>
+    </JSONSchemaPathContext.Provider>
  )
 }

--- a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss
@@ -1,7 +1,9 @@
+@use "./../../../components/mixins";
+
 .json-schema-2020-12 {
  &-keyword--\$vocabulary {
    ul {
-      @include expansion-border;
+      @include mixins.expansion-border;
    }
  }

--- a/src/core/plugins/json-schema-2020-12/components/keywords/AdditionalProperties.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/AdditionalProperties.jsx
@@ -39,7 +39,11 @@ const AdditionalProperties = ({ schema }) => {
          </span>
        </>
      ) : (
-        <JSONSchema name={name} schema={additionalProperties} />
+        <JSONSchema
+          name={name}
+          schema={additionalProperties}
+          identifier="additionalProperties"
+        />
      )}
    </div>
  )
--- a/src/core/plugins/json-schema-2020-12/components/keywords/AllOf.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/AllOf.jsx
@@ -1,7 +1,7 @@
 /**
 * @prettier
 */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"

 import { schema } from "../../prop-types"
@@ -9,17 +9,18 @@ import {
  useFn,
  useComponent,
  useIsExpanded,
-  useIsExpandedDeeply,
+  usePath,
+  useLevel,
 } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"

 const AllOf = ({ schema }) => {
  const allOf = schema?.allOf || []
  const fn = useFn()
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "allOf"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
  const Accordion = useComponent("Accordion")
  const ExpandDeepButton = useComponent("ExpandDeepButton")
  const JSONSchema = useComponent("JSONSchema")
@@ -29,12 +30,22 @@ const AllOf = ({ schema }) => {
   * Event handlers.
   */
  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )

  /**
   * Rendering.
@@ -44,24 +55,34 @@ const AllOf = ({ schema }) => {
  }

  return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--allOf">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--allOf"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
              All of
            </span>
          </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
          <KeywordType schema={{ allOf }} />
          <ul
            className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
            })}
          >
-          {expanded && (
+            {isExpanded && (
              <>
                {allOf.map((schema, index) => (
-                <li key={`#${index}`} className="json-schema-2020-12-property">
+                  <li
+                    key={`#${index}`}
+                    className="json-schema-2020-12-property"
+                  >
                    <JSONSchema
                      name={`#${index} ${fn.getTitle(schema)}`}
                      schema={schema}
@@ -72,7 +93,8 @@ const AllOf = ({ schema }) => {
            )}
          </ul>
        </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
  )
 }

--- a/src/core/plugins/json-schema-2020-12/components/keywords/AnyOf.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/AnyOf.jsx
@@ -1,7 +1,7 @@
 /**
 * @prettier
 */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"

 import { schema } from "../../prop-types"
@@ -9,17 +9,18 @@ import {
  useFn,
  useComponent,
  useIsExpanded,
-  useIsExpandedDeeply,
+  usePath,
+  useLevel,
 } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"

 const AnyOf = ({ schema }) => {
  const anyOf = schema?.anyOf || []
  const fn = useFn()
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "anyOf"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
  const Accordion = useComponent("Accordion")
  const ExpandDeepButton = useComponent("ExpandDeepButton")
  const JSONSchema = useComponent("JSONSchema")
@@ -29,12 +30,22 @@ const AnyOf = ({ schema }) => {
   * Event handlers.
   */
  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )

  /**
   * Rendering.
@@ -44,24 +55,34 @@ const AnyOf = ({ schema }) => {
  }

  return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--anyOf">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--anyOf"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
              Any of
            </span>
          </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
          <KeywordType schema={{ anyOf }} />
          <ul
            className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
            })}
          >
-          {expanded && (
+            {isExpanded && (
              <>
                {anyOf.map((schema, index) => (
-                <li key={`#${index}`} className="json-schema-2020-12-property">
+                  <li
+                    key={`#${index}`}
+                    className="json-schema-2020-12-property"
+                  >
                    <JSONSchema
                      name={`#${index} ${fn.getTitle(schema)}`}
                      schema={schema}
@@ -72,7 +93,8 @@ const AnyOf = ({ schema }) => {
            )}
          </ul>
        </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
  )
 }

--- a/src/core/plugins/json-schema-2020-12/components/keywords/Const.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Const.jsx
@@ -1,30 +0,0 @@
-/**
- * @prettier
- */
-import React from "react"
-
-import { schema } from "../../prop-types"
-import { useFn } from "../../hooks"
-
-const Const = ({ schema }) => {
-  const fn = useFn()
-
-  if (!fn.hasKeyword(schema, "const")) return null
-
-  return (
-    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--const">
-      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
-        Const
-      </span>
-      <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--const">
-        {fn.stringify(schema.const)}
-      </span>
-    </div>
-  )
-}
-
-Const.propTypes = {
-  schema: schema.isRequired,
-}
-
-export default Const
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Const/Const.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Const/Const.jsx
@@ -0,0 +1,28 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent, useFn } from "../../../hooks"
+
+const Const = ({ schema }) => {
+  const fn = useFn()
+  const JSONViewer = useComponent("JSONViewer")
+
+  if (!fn.hasKeyword(schema, "const")) return null
+
+  return (
+    <JSONViewer
+      name="Const"
+      value={schema.const}
+      className="json-schema-2020-12-keyword json-schema-2020-12-keyword--const"
+    />
+  )
+}
+
+Const.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Const
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Const/_const.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Const/_const.scss
@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-keyword--const {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+}
--- 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
@@ -1,14 +1,16 @@
+@use "./../../../../../../style/type";
+
 .json-schema-2020-12__constraint {
-  @include text_code();
+  @include type.text_code();
  margin-left: 10px;
  line-height: 1.5;
  padding: 1px 3px;
  color: white;
-  background-color: #805AD5;
+  background-color: #805ad5;
  border-radius: 4px;

  &--string {
    color: white;
-    background-color: #D69E2E;
+    background-color: #d69e2e;
  }
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Contains.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Contains.jsx
@@ -23,7 +23,7 @@ const Contains = ({ schema }) => {

  return (
    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--contains">
-      <JSONSchema name={name} schema={schema.contains} />
+      <JSONSchema name={name} schema={schema.contains} identifier="contains" />
    </div>
  )
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/ContentSchema.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/ContentSchema.jsx
@@ -23,7 +23,11 @@ const ContentSchema = ({ schema }) => {

  return (
    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--contentSchema">
-      <JSONSchema name={name} schema={schema.contentSchema} />
+      <JSONSchema
+        name={name}
+        schema={schema.contentSchema}
+        identifier="contentSchema"
+      />
    </div>
  )
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Default.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Default.jsx
@@ -1,30 +0,0 @@
-/**
- * @prettier
- */
-import React from "react"
-
-import { schema } from "../../prop-types"
-import { useFn } from "../../hooks"
-
-const Default = ({ schema }) => {
-  const fn = useFn()
-
-  if (!fn.hasKeyword(schema, "default")) return null
-
-  return (
-    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--default">
-      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
-        Default
-      </span>
-      <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--const">
-        {fn.stringify(schema.default)}
-      </span>
-    </div>
-  )
-}
-
-Default.propTypes = {
-  schema: schema.isRequired,
-}
-
-export default Default
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Default/Default.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Default/Default.jsx
@@ -0,0 +1,28 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent, useFn } from "../../../hooks"
+
+const Default = ({ schema }) => {
+  const fn = useFn()
+  const JSONViewer = useComponent("JSONViewer")
+
+  if (!fn.hasKeyword(schema, "default")) return null
+
+  return (
+    <JSONViewer
+      name="Default"
+      value={schema.default}
+      className="json-schema-2020-12-keyword json-schema-2020-12-keyword--default"
+    />
+  )
+}
+
+Default.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Default
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Default/_default.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Default/_default.scss
@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-keyword--default {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+}
--- a/src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx
@@ -1,19 +1,19 @@
 /**
 * @prettier
 */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"

 import { schema } from "../../prop-types"
-import { useComponent, useIsExpanded, useIsExpandedDeeply } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { useComponent, useIsExpanded, useLevel, usePath } from "../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"

 const DependentSchemas = ({ schema }) => {
  const dependentSchemas = schema?.dependentSchemas || []
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "dependentSchemas"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
  const Accordion = useComponent("Accordion")
  const ExpandDeepButton = useComponent("ExpandDeepButton")
  const JSONSchema = useComponent("JSONSchema")
@@ -22,12 +22,22 @@ const DependentSchemas = ({ schema }) => {
   * Event handlers.
   */
  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )

  /**
   * Rendering.
@@ -36,34 +46,47 @@ const DependentSchemas = ({ schema }) => {
  if (Object.keys(dependentSchemas).length === 0) return null

  return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--dependentSchemas">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--dependentSchemas"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
              Dependent schemas
            </span>
          </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
          <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
            object
          </strong>
          <ul
            className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
            })}
          >
-          {expanded && (
+            {isExpanded && (
              <>
-              {Object.entries(dependentSchemas).map(([schemaName, schema]) => (
-                <li key={schemaName} className="json-schema-2020-12-property">
+                {Object.entries(dependentSchemas).map(
+                  ([schemaName, schema]) => (
+                    <li
+                      key={schemaName}
+                      className="json-schema-2020-12-property"
+                    >
                      <JSONSchema name={schemaName} schema={schema} />
                    </li>
-              ))}
+                  )
+                )}
              </>
            )}
          </ul>
        </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
  )
 }

--- a/src/core/plugins/json-schema-2020-12/components/keywords/Else.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Else.jsx
@@ -23,7 +23,7 @@ const Else = ({ schema }) => {

  return (
    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--if">
-      <JSONSchema name={name} schema={schema.else} />
+      <JSONSchema name={name} schema={schema.else} identifier="else" />
    </div>
  )
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Enum/Enum.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Enum/Enum.jsx
@@ -4,32 +4,19 @@
 import React from "react"

 import { schema } from "../../../prop-types"
-import { useFn } from "../../../hooks"
+import { useComponent } from "../../../hooks"

 const Enum = ({ schema }) => {
-  const fn = useFn()
+  const JSONViewer = useComponent("JSONViewer")

  if (!Array.isArray(schema?.enum)) return null

  return (
-    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--enum">
-      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
-        Allowed values
-      </span>
-      <ul>
-        {schema.enum.map((element) => {
-          const strigifiedElement = fn.stringify(element)
-
-          return (
-            <li key={strigifiedElement}>
-              <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--const">
-                {strigifiedElement}
-              </span>
-            </li>
-          )
-        })}
-      </ul>
-    </div>
+    <JSONViewer
+      name="Enum"
+      value={schema.enum}
+      className="json-schema-2020-12-keyword json-schema-2020-12-keyword--enum"
+    />
  )
 }

--- a/src/core/plugins/json-schema-2020-12/components/keywords/Enum/_enum.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Enum/_enum.scss
@@ -1,12 +1,11 @@
-.json-schema-2020-12-keyword--enum {
-  & > ul {
-    display: inline-block;
-    padding: 0;
-    margin: 0;
+@use "./../../mixins";

-    li {
-      display: inline;
-      list-style-type: none;
+.json-schema-2020-12-keyword--enum {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--primary;
  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--primary;
  }
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Examples/Examples.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Examples/Examples.jsx
@@ -0,0 +1,30 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent } from "../../../hooks"
+
+const Examples = ({ schema }) => {
+  const examples = schema?.examples || []
+  const JSONViewer = useComponent("JSONViewer")
+
+  if (!Array.isArray(examples) || examples.length === 0) {
+    return null
+  }
+
+  return (
+    <JSONViewer
+      name="Examples"
+      value={schema.examples}
+      className="json-schema-2020-12-keyword json-schema-2020-12-keyword--examples"
+    />
+  )
+}
+
+Examples.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Examples
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Examples/_examples.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Examples/_examples.scss
@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-keyword--examples {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+}
--- a/src/core/plugins/json-schema-2020-12/components/keywords/ExtensionKeywords/ExtensionKeywords.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/ExtensionKeywords/ExtensionKeywords.jsx
@@ -0,0 +1,103 @@
+/**
+ * @prettier
+ */
+import React, { useCallback } from "react"
+import classNames from "classnames"
+
+import { schema } from "../../../prop-types"
+
+import {
+  useComponent,
+  useIsExpanded,
+  useFn,
+  usePath,
+  useLevel,
+  useConfig,
+} from "../../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../../context"
+
+const ExtensionKeywords = ({ schema }) => {
+  const fn = useFn()
+  const pathToken = "ExtensionKeywords"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const JSONViewer = useComponent("JSONViewer")
+  const { showExtensionKeywords } = useConfig("showExtensionKeywords")
+  const extensionKeywords = fn.getExtensionKeywords(schema)
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
+
+  /**
+   * Rendering.
+   */
+  if (!showExtensionKeywords || extensionKeywords.length === 0) {
+    return null
+  }
+
+  return (
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--extension-keywords"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--extension">
+              Extension Keywords
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {extensionKeywords.map((keyword) => (
+                  <JSONViewer
+                    key={keyword}
+                    name={keyword}
+                    value={schema[keyword]}
+                    className="json-schema-2020-12-json-viewer-extension-keyword"
+                  />
+                ))}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+ExtensionKeywords.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default ExtensionKeywords
--- a/src/core/plugins/json-schema-2020-12/components/keywords/ExtensionKeywords/_extension-keywords.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/ExtensionKeywords/_extension-keywords.scss
@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-json-viewer-extension-keyword {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--extension;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--extension;
+  }
+}
--- a/src/core/plugins/json-schema-2020-12/components/keywords/If.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/If.jsx
@@ -23,7 +23,7 @@ const If = ({ schema }) => {

  return (
    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--if">
-      <JSONSchema name={name} schema={schema.if} />
+      <JSONSchema name={name} schema={schema.if} identifier="if" />
    </div>
  )
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Items.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Items.jsx
@@ -23,7 +23,7 @@ const Items = ({ schema }) => {

  return (
    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--items">
-      <JSONSchema name={name} schema={schema.items} />
+      <JSONSchema name={name} schema={schema.items} identifier="items" />
    </div>
  )
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Not.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Not.jsx
@@ -23,7 +23,7 @@ const Not = ({ schema }) => {

  return (
    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--not">
-      <JSONSchema name={name} schema={schema.not} />
+      <JSONSchema name={name} schema={schema.not} identifier="not" />
    </div>
  )
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/OneOf.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/OneOf.jsx
@@ -1,7 +1,7 @@
 /**
 * @prettier
 */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"

 import { schema } from "../../prop-types"
@@ -9,17 +9,18 @@ import {
  useFn,
  useComponent,
  useIsExpanded,
-  useIsExpandedDeeply,
+  usePath,
+  useLevel,
 } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"

 const OneOf = ({ schema }) => {
  const oneOf = schema?.oneOf || []
  const fn = useFn()
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "oneOf"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
  const Accordion = useComponent("Accordion")
  const ExpandDeepButton = useComponent("ExpandDeepButton")
  const JSONSchema = useComponent("JSONSchema")
@@ -29,12 +30,22 @@ const OneOf = ({ schema }) => {
   * Event handlers.
   */
  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )

  /**
   * Rendering.
@@ -44,24 +55,34 @@ const OneOf = ({ schema }) => {
  }

  return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--oneOf">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--oneOf"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
              One of
            </span>
          </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
          <KeywordType schema={{ oneOf }} />
          <ul
            className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
            })}
          >
-          {expanded && (
+            {isExpanded && (
              <>
                {oneOf.map((schema, index) => (
-                <li key={`#${index}`} className="json-schema-2020-12-property">
+                  <li
+                    key={`#${index}`}
+                    className="json-schema-2020-12-property"
+                  >
                    <JSONSchema
                      name={`#${index} ${fn.getTitle(schema)}`}
                      schema={schema}
@@ -72,7 +93,8 @@ const OneOf = ({ schema }) => {
            )}
          </ul>
        </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
  )
 }

--- a/src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/PatternProperties.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/PatternProperties.jsx
@@ -4,11 +4,13 @@
 import React from "react"

 import { schema } from "../../../prop-types"
-import { useComponent } from "../../../hooks"
+import { useComponent, usePath } from "../../../hooks"
+import { JSONSchemaPathContext } from "../../../context"

 const PatternProperties = ({ schema }) => {
  const patternProperties = schema?.patternProperties || {}
  const JSONSchema = useComponent("JSONSchema")
+  const { path } = usePath("patternProperties")

  /**
   * Rendering.
@@ -18,6 +20,7 @@ const PatternProperties = ({ schema }) => {
  }

  return (
+    <JSONSchemaPathContext.Provider value={path}>
      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--patternProperties">
        <ul>
          {Object.entries(patternProperties).map(([propertyName, schema]) => (
@@ -27,6 +30,7 @@ const PatternProperties = ({ schema }) => {
          ))}
        </ul>
      </div>
+    </JSONSchemaPathContext.Provider>
  )
 }

--- a/src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/_pattern-properties.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/_pattern-properties.scss
@@ -1,3 +1,5 @@
+@use "./../../../../../../style/variables" as *;
+
 .json-schema-2020-12 {
  &-keyword--patternProperties {
    ul {
--- a/src/core/plugins/json-schema-2020-12/components/keywords/PrefixItems.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/PrefixItems.jsx
@@ -1,25 +1,26 @@
 /**
 * @prettier
 */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"

 import { schema } from "../../prop-types"
 import {
  useFn,
  useComponent,
-  useIsExpandedDeeply,
  useIsExpanded,
+  usePath,
+  useLevel,
 } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"

 const PrefixItems = ({ schema }) => {
  const prefixItems = schema?.prefixItems || []
  const fn = useFn()
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "prefixItems"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
  const Accordion = useComponent("Accordion")
  const ExpandDeepButton = useComponent("ExpandDeepButton")
  const JSONSchema = useComponent("JSONSchema")
@@ -29,12 +30,22 @@ const PrefixItems = ({ schema }) => {
   * Event handlers.
   */
  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )

  /**
   * Rendering.
@@ -44,24 +55,34 @@ const PrefixItems = ({ schema }) => {
  }

  return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--prefixItems">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--prefixItems"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
              Prefix items
            </span>
          </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
          <KeywordType schema={{ prefixItems }} />
          <ul
            className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
            })}
          >
-          {expanded && (
+            {isExpanded && (
              <>
                {prefixItems.map((schema, index) => (
-                <li key={`#${index}`} className="json-schema-2020-12-property">
+                  <li
+                    key={`#${index}`}
+                    className="json-schema-2020-12-property"
+                  >
                    <JSONSchema
                      name={`#${index} ${fn.getTitle(schema)}`}
                      schema={schema}
@@ -72,7 +93,8 @@ const PrefixItems = ({ schema }) => {
            )}
          </ul>
        </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
  )
 }

--- a/src/core/plugins/json-schema-2020-12/components/keywords/Properties/Properties.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Properties/Properties.jsx
@@ -5,13 +5,15 @@ import React from "react"
 import classNames from "classnames"

 import { schema } from "../../../prop-types"
-import { useFn, useComponent } from "../../../hooks"
+import { useFn, useComponent, usePath } from "../../../hooks"
+import { JSONSchemaPathContext } from "../../../context"

 const Properties = ({ schema }) => {
  const fn = useFn()
  const properties = schema?.properties || {}
  const required = Array.isArray(schema?.required) ? schema.required : []
  const JSONSchema = useComponent("JSONSchema")
+  const { path } = usePath("properties")

  /**
   * Rendering.
@@ -21,6 +23,7 @@ const Properties = ({ schema }) => {
  }

  return (
+    <JSONSchemaPathContext.Provider value={path}>
      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--properties">
        <ul>
          {Object.entries(properties).map(([propertyName, propertySchema]) => {
@@ -47,6 +50,7 @@ const Properties = ({ schema }) => {
          })}
        </ul>
      </div>
+    </JSONSchemaPathContext.Provider>
  )
 }

--- a/src/core/plugins/json-schema-2020-12/components/keywords/Properties/_properties.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Properties/_properties.scss
@@ -11,8 +11,11 @@
    list-style-type: none;

    &--required {
-      & > .json-schema-2020-12:first-of-type > .json-schema-2020-12-head .json-schema-2020-12__title:after {
-        content: '*';
+      &
+        > .json-schema-2020-12:first-of-type
+        > .json-schema-2020-12-head
+        .json-schema-2020-12__title:after {
+        content: "*";
        color: red;
        font-weight: bold;
      }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/PropertyNames.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/PropertyNames.jsx
@@ -23,7 +23,11 @@ const PropertyNames = ({ schema }) => {

  return (
    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--propertyNames">
-      <JSONSchema name={name} schema={propertyNames} />
+      <JSONSchema
+        name={name}
+        schema={propertyNames}
+        identifier="propertyNames"
+      />
    </div>
  )
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Then.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Then.jsx
@@ -23,7 +23,7 @@ const Then = ({ schema }) => {

  return (
    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--then">
-      <JSONSchema name={name} schema={schema.then} />
+      <JSONSchema name={name} schema={schema.then} identifier="then" />
    </div>
  )
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss
@@ -1,6 +1,9 @@
+@use "./../../../../../../style/variables" as *;
+@use "./../../../../../../style/type";
+
 .json-schema-2020-12 {
  &__title {
-    @include text_headline($section-models-model-title-font-color);
+    @include type.text_headline($section-models-model-title-font-color);
    display: inline-block;
    font-weight: bold;
    font-size: 12px;
@@ -15,7 +18,7 @@
    margin: 7px 0;

    .json-schema-2020-12__title {
-      @include text_code();
+      @include type.text_code();
      font-size: 12px;
      vertical-align: middle;
    }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedItems.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedItems.jsx
@@ -24,7 +24,11 @@ const UnevaluatedItems = ({ schema }) => {

  return (
    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--unevaluatedItems">
-      <JSONSchema name={name} schema={unevaluatedItems} />
+      <JSONSchema
+        name={name}
+        schema={unevaluatedItems}
+        identifier="unevaluatedItems"
+      />
    </div>
  )
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedProperties.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedProperties.jsx
@@ -24,7 +24,11 @@ const UnevaluatedProperties = ({ schema }) => {

  return (
    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--unevaluatedProperties">
-      <JSONSchema name={name} schema={unevaluatedProperties} />
+      <JSONSchema
+        name={name}
+        schema={unevaluatedProperties}
+        identifier="unevaluatedProperties"
+      />
    </div>
  )
 }
--- a/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss
@@ -1,68 +1,25 @@
+@use "./../../../../../style/variables" as *;
+@use "./../mixins";
+@use "./$vocabulary/$vocabulary" as vocabulary;
+@use "./Const/const";
+@use "./Constraint/constraint";
+@use "./Default/default";
+@use "./DependentRequired/dependent-required";
+@use "./Description/description";
+@use "./Enum/enum";
+@use "./Examples/examples";
+@use "./ExtensionKeywords/extension-keywords";
+@use "./PatternProperties/pattern-properties";
+@use "./Properties/properties";
+@use "./Title/title";
+
 .json-schema-2020-12-keyword {
-  margin: 5px 0 5px 0;
-
-  &__children {
-    @include expansion-border;
-    padding: 0;
-
-    &--collapsed {
-      display: none;
-    }
-  }
-
-  &__name {
-    font-size: 12px;
-    margin-left: 20px;
-    font-weight: bold;
-
-    &--primary {
-      color: $text-code-default-font-color;
-      font-style: normal;
-    }
-
-    &--secondary {
-      color: #6b6b6b;
-      font-style: italic;
-    }
-  }
-
-  &__value {
-    color: #6b6b6b;
-    font-style: italic;
-    font-size: 12px;
-    font-weight: normal;
-
-    &--primary {
-      color: $text-code-default-font-color;
-      font-style: normal;
-    }
-
-    &--secondary {
-      color: #6b6b6b;
-      font-style: italic;
-    }
-
-    &--const {
-      @include text_code();
-      color: #6b6b6b;
-      font-style: normal;
-      display: inline-block;
-      margin-left: 10px;
-      line-height: 1.5;
-      padding: 1px 4px 1px 4px;
-      border: 1px dashed #6b6b6b;
-      border-radius: 4px;
-    }
-
-    &--warning {
-      @extend .json-schema-2020-12-keyword__value--const;
-      color: red;
-      border: 1px dashed red;
-    }
-  }
+  @include mixins.json-schema-2020-12-keyword;
 }
-.json-schema-2020-12-keyword__name--secondary + .json-schema-2020-12-keyword__value--secondary::before {
-  content: '='
+
+.json-schema-2020-12-keyword__name--secondary
+  + .json-schema-2020-12-keyword__value--secondary::before {
+  content: "=";
 }

 .json-schema-2020-12__attribute {
@@ -84,12 +41,3 @@
    color: red;
  }
 }
-
-@import './$vocabulary/$vocabulary';
-@import './Description/description';
-@import './Title/title';
-@import './Properties/properties';
-@import './PatternProperties/pattern-properties';
-@import './Enum/enum';
-@import './Constraint/constraint';
-@import './DependentRequired/dependent-required';
--- a/src/core/plugins/json-schema-2020-12/context.js
+++ b/src/core/plugins/json-schema-2020-12/context.js
@@ -9,7 +9,6 @@ JSONSchemaContext.displayName = "JSONSchemaContext"
 export const JSONSchemaLevelContext = createContext(0)
 JSONSchemaLevelContext.displayName = "JSONSchemaLevelContext"

-export const JSONSchemaDeepExpansionContext = createContext(false)
-JSONSchemaDeepExpansionContext.displayName = "JSONSchemaDeepExpansionContext"
-
 export const JSONSchemaCyclesContext = createContext(new Set())
+
+export const JSONSchemaPathContext = createContext([])
--- a/src/core/plugins/json-schema-2020-12/enum.js
+++ b/src/core/plugins/json-schema-2020-12/enum.js
@@ -0,0 +1,10 @@
+/**
+ * @prettier
+ */
+export class JSONSchemaIsExpandedState {
+  static Collapsed = "collapsed"
+
+  static Expanded = "expanded"
+
+  static DeeplyExpanded = "deeply-expanded"
+}
--- a/src/core/plugins/json-schema-2020-12/fn.js
+++ b/src/core/plugins/json-schema-2020-12/fn.js
@@ -1,8 +1,6 @@
 /**
 * @prettier
 */
-import { useFn } from "./hooks"
-
 export const upperFirst = (value) => {
  if (typeof value === "string") {
    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`
@@ -13,8 +11,9 @@ export const upperFirst = (value) => {
 /**
 * Lookup can be `basic` or `extended`. By default the lookup is `extended`.
 */
-export const getTitle = (schema, { lookup = "extended" } = {}) => {
-  const fn = useFn()
+export const makeGetTitle = (fnAccessor) => {
+  const getTitle = (schema, { lookup = "extended" } = {}) => {
+    const fn = fnAccessor()

    if (schema?.title != null) return fn.upperFirst(String(schema.title))
    if (lookup === "extended") {
@@ -23,10 +22,14 @@ export const getTitle = (schema, { lookup = "extended" } = {}) => {
    }

    return ""
+  }
+
+  return getTitle
 }

-export const getType = (schema, processedSchemas = new WeakSet()) => {
-  const fn = useFn()
+export const makeGetType = (fnAccessor) => {
+  const getType = (schema, processedSchemas = new WeakSet()) => {
+    const fn = fnAccessor()

    if (schema == null) {
      return "any"
@@ -155,6 +158,9 @@ export const getType = (schema, processedSchemas = new WeakSet()) => {
    processedSchemas.delete(schema)

    return combinedStrings || "any"
+  }
+
+  return getType
 }

 export const isBooleanJSONSchema = (schema) => typeof schema === "boolean"
@@ -164,8 +170,9 @@ export const hasKeyword = (schema, keyword) =>
  typeof schema === "object" &&
  Object.hasOwn(schema, keyword)

-export const isExpandable = (schema) => {
-  const fn = useFn()
+export const makeIsExpandable = (fnAccessor) => {
+  const isExpandable = (schema) => {
+    const fn = fnAccessor()

    return (
      schema?.$schema ||
@@ -198,8 +205,13 @@ export const isExpandable = (schema) => {
      schema?.enum ||
      fn.hasKeyword(schema, "const") ||
      fn.hasKeyword(schema, "contentSchema") ||
-    fn.hasKeyword(schema, "default")
+      fn.hasKeyword(schema, "default") ||
+      schema?.examples ||
+      fn.getExtensionKeywords(schema).length > 0
    )
+  }
+
+  return isExpandable
 }

 export const stringify = (value) => {
@@ -339,13 +351,16 @@ export const stringifyConstraints = (schema) => {

  // validation Keywords for Arrays
  const arrayRange = stringifyConstraintRange(
-    schema?.hasUniqueItems ? "unique items" : "items",
+    schema?.uniqueItems ? "unique items" : "items",
    schema?.minItems,
    schema?.maxItems
  )
  if (arrayRange !== null) {
    constraints.push({ scope: "array", value: arrayRange })
  }
+  if (schema?.uniqueItems && !arrayRange) {
+    constraints.push({ scope: "array", value: "unique" })
+  }
  const containsRange = stringifyConstraintRange(
    "contained items",
    schema?.minContains,
@@ -382,3 +397,108 @@ export const getDependentRequired = (propertyName, schema) => {
    }, new Set())
  )
 }
+
+export const isPlainObject = (value) =>
+  typeof value === "object" &&
+  value !== null &&
+  !Array.isArray(value) &&
+  (Object.getPrototypeOf(value) === null ||
+    Object.getPrototypeOf(value) === Object.prototype)
+
+export const isEmptyObject = (value) =>
+  isPlainObject(value) && Object.keys(value).length === 0
+
+export const isEmptyArray = (value) =>
+  Array.isArray(value) && value.length === 0
+
+export const difference = (value, comparisonValue) => {
+  const comparisonSet = new Set(comparisonValue)
+  return value.filter((item) => !comparisonSet.has(item))
+}
+
+export const getSchemaKeywords = () => {
+  return [
+    // core vocabulary
+    "$schema",
+    "$vocabulary",
+    "$id",
+    "$anchor",
+    "$dynamicAnchor",
+    "$dynamicRef",
+    "$ref",
+    "$defs",
+    "$comment",
+    // applicator vocabulary
+    "allOf",
+    "anyOf",
+    "oneOf",
+    "not",
+    "if",
+    "then",
+    "else",
+    "dependentSchemas",
+    "prefixItems",
+    "items",
+    "contains",
+    "properties",
+    "patternProperties",
+    "additionalProperties",
+    "propertyNames",
+    // unevaluated Locations vocabulary
+    "unevaluatedItems",
+    "unevaluatedProperties",
+    // validation vocabulary
+    // validation Keywords for Any Instance Type
+    "type",
+    "enum",
+    "const",
+    // validation Keywords for Numeric Instances (number and integer)
+    "multipleOf",
+    "maximum",
+    "exclusiveMaximum",
+    "minimum",
+    "exclusiveMinimum",
+    // validation Keywords for Strings
+    "maxLength",
+    "minLength",
+    "pattern",
+    // validation Keywords for Arrays
+    "maxItems",
+    "minItems",
+    "uniqueItems",
+    "maxContains",
+    "minContains",
+    // validation Keywords for Objects
+    "maxProperties",
+    "minProperties",
+    "required",
+    "dependentRequired",
+    // basic Meta-Data Annotations vocabulary
+    "title",
+    "description",
+    "default",
+    "deprecated",
+    "readOnly",
+    "writeOnly",
+    "examples",
+    // semantic Content With "format" vocabulary
+    "format",
+    // contents of String-Encoded Data vocabulary
+    "contentEncoding",
+    "contentMediaType",
+    "contentSchema",
+  ]
+}
+
+export const makeGetExtensionKeywords = (fnAccessor) => {
+  const getExtensionKeywords = (schema) => {
+    const fn = fnAccessor()
+    const keywords = fn.getSchemaKeywords()
+
+    return isPlainObject(schema)
+      ? difference(Object.keys(schema), keywords)
+      : []
+  }
+
+  return getExtensionKeywords
+}
--- a/src/core/plugins/json-schema-2020-12/hoc.jsx
+++ b/src/core/plugins/json-schema-2020-12/hoc.jsx
@@ -32,30 +32,36 @@ import KeywordUnevaluatedItems from "./components/keywords/UnevaluatedItems"
 import KeywordUnevaluatedProperties from "./components/keywords/UnevaluatedProperties"
 import KeywordType from "./components/keywords/Type"
 import KeywordEnum from "./components/keywords/Enum/Enum"
-import KeywordConst from "./components/keywords/Const"
+import KeywordConst from "./components/keywords/Const/Const"
 import KeywordConstraint from "./components/keywords/Constraint/Constraint"
 import KeywordDependentRequired from "./components/keywords/DependentRequired/DependentRequired"
 import KeywordContentSchema from "./components/keywords/ContentSchema"
 import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
-import KeywordDefault from "./components/keywords/Default"
+import KeywordDefault from "./components/keywords/Default/Default"
 import KeywordDeprecated from "./components/keywords/Deprecated"
 import KeywordReadOnly from "./components/keywords/ReadOnly"
 import KeywordWriteOnly from "./components/keywords/WriteOnly"
+import KeywordExamples from "./components/keywords/Examples/Examples"
+import ExtensionKeywords from "./components/keywords/ExtensionKeywords/ExtensionKeywords"
+import JSONViewer from "./components/JSONViewer/JSONViewer"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
 import { JSONSchemaContext } from "./context"
+import { useFn } from "./hooks"
 import {
-  getTitle,
+  makeGetTitle,
  isBooleanJSONSchema,
  upperFirst,
-  getType,
+  makeGetType,
  hasKeyword,
-  isExpandable,
+  makeIsExpandable,
  stringify,
  stringifyConstraints,
  getDependentRequired,
+  getSchemaKeywords,
+  makeGetExtensionKeywords,
 } from "./fn"

 export const withJSONSchemaContext = (Component, overrides = {}) => {
@@ -100,6 +106,9 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
      KeywordDeprecated,
      KeywordReadOnly,
      KeywordWriteOnly,
+      KeywordExamples,
+      ExtensionKeywords,
+      JSONViewer,
      Accordion,
      ExpandDeepButton,
      ChevronRightIcon,
@@ -116,20 +125,24 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       * 3 -> [0]...(3)
       */
      defaultExpandedLevels: 0, // 2 = 0...2
+      showExtensionKeywords: true,
      ...overrides.config,
    },
    fn: {
      upperFirst,
-      getTitle,
-      getType,
+      getTitle: makeGetTitle(useFn),
+      getType: makeGetType(useFn),
      isBooleanJSONSchema,
      hasKeyword,
-      isExpandable,
+      isExpandable: makeIsExpandable(useFn),
      stringify,
      stringifyConstraints,
      getDependentRequired,
+      getSchemaKeywords,
+      getExtensionKeywords: makeGetExtensionKeywords(useFn),
      ...overrides.fn,
    },
+    state: { paths: {} },
  }

  const HOC = (props) => (
@@ -144,3 +157,140 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {

  return HOC
 }
+
+export const makeWithJSONSchemaSystemContext =
+  ({ getSystem }) =>
+  (Component, overrides = {}) => {
+    const { getComponent, getConfigs } = getSystem()
+    const configs = getConfigs()
+
+    const JSONSchema = getComponent("JSONSchema202012")
+    const Keyword$schema = getComponent("JSONSchema202012Keyword$schema")
+    const Keyword$vocabulary = getComponent(
+      "JSONSchema202012Keyword$vocabulary"
+    )
+    const Keyword$id = getComponent("JSONSchema202012Keyword$id")
+    const Keyword$anchor = getComponent("JSONSchema202012Keyword$anchor")
+    const Keyword$dynamicAnchor = getComponent(
+      "JSONSchema202012Keyword$dynamicAnchor"
+    )
+    const Keyword$ref = getComponent("JSONSchema202012Keyword$ref")
+    const Keyword$dynamicRef = getComponent(
+      "JSONSchema202012Keyword$dynamicRef"
+    )
+    const Keyword$defs = getComponent("JSONSchema202012Keyword$defs")
+    const Keyword$comment = getComponent("JSONSchema202012Keyword$comment")
+    const KeywordAllOf = getComponent("JSONSchema202012KeywordAllOf")
+    const KeywordAnyOf = getComponent("JSONSchema202012KeywordAnyOf")
+    const KeywordOneOf = getComponent("JSONSchema202012KeywordOneOf")
+    const KeywordNot = getComponent("JSONSchema202012KeywordNot")
+    const KeywordIf = getComponent("JSONSchema202012KeywordIf")
+    const KeywordThen = getComponent("JSONSchema202012KeywordThen")
+    const KeywordElse = getComponent("JSONSchema202012KeywordElse")
+    const KeywordDependentSchemas = getComponent(
+      "JSONSchema202012KeywordDependentSchemas"
+    )
+    const KeywordPrefixItems = getComponent(
+      "JSONSchema202012KeywordPrefixItems"
+    )
+    const KeywordItems = getComponent("JSONSchema202012KeywordItems")
+    const KeywordContains = getComponent("JSONSchema202012KeywordContains")
+    const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
+    const KeywordPatternProperties = getComponent(
+      "JSONSchema202012KeywordPatternProperties"
+    )
+    const KeywordAdditionalProperties = getComponent(
+      "JSONSchema202012KeywordAdditionalProperties"
+    )
+    const KeywordPropertyNames = getComponent(
+      "JSONSchema202012KeywordPropertyNames"
+    )
+    const KeywordUnevaluatedItems = getComponent(
+      "JSONSchema202012KeywordUnevaluatedItems"
+    )
+    const KeywordUnevaluatedProperties = getComponent(
+      "JSONSchema202012KeywordUnevaluatedProperties"
+    )
+    const KeywordType = getComponent("JSONSchema202012KeywordType")
+    const KeywordEnum = getComponent("JSONSchema202012KeywordEnum")
+    const KeywordConst = getComponent("JSONSchema202012KeywordConst")
+    const KeywordConstraint = getComponent("JSONSchema202012KeywordConstraint")
+    const KeywordDependentRequired = getComponent(
+      "JSONSchema202012KeywordDependentRequired"
+    )
+    const KeywordContentSchema = getComponent(
+      "JSONSchema202012KeywordContentSchema"
+    )
+    const KeywordTitle = getComponent("JSONSchema202012KeywordTitle")
+    const KeywordDescription = getComponent(
+      "JSONSchema202012KeywordDescription"
+    )
+    const KeywordDefault = getComponent("JSONSchema202012KeywordDefault")
+    const KeywordDeprecated = getComponent("JSONSchema202012KeywordDeprecated")
+    const KeywordReadOnly = getComponent("JSONSchema202012KeywordReadOnly")
+    const KeywordWriteOnly = getComponent("JSONSchema202012KeywordWriteOnly")
+    const KeywordExamples = getComponent("JSONSchema202012KeywordExamples")
+    const ExtensionKeywords = getComponent("JSONSchema202012ExtensionKeywords")
+    const JSONViewer = getComponent("JSONSchema202012JSONViewer")
+    const Accordion = getComponent("JSONSchema202012Accordion")
+    const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton")
+    const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
+
+    return withJSONSchemaContext(Component, {
+      components: {
+        JSONSchema,
+        Keyword$schema,
+        Keyword$vocabulary,
+        Keyword$id,
+        Keyword$anchor,
+        Keyword$dynamicAnchor,
+        Keyword$ref,
+        Keyword$dynamicRef,
+        Keyword$defs,
+        Keyword$comment,
+        KeywordAllOf,
+        KeywordAnyOf,
+        KeywordOneOf,
+        KeywordNot,
+        KeywordIf,
+        KeywordThen,
+        KeywordElse,
+        KeywordDependentSchemas,
+        KeywordPrefixItems,
+        KeywordItems,
+        KeywordContains,
+        KeywordProperties,
+        KeywordPatternProperties,
+        KeywordAdditionalProperties,
+        KeywordPropertyNames,
+        KeywordUnevaluatedItems,
+        KeywordUnevaluatedProperties,
+        KeywordType,
+        KeywordEnum,
+        KeywordConst,
+        KeywordConstraint,
+        KeywordDependentRequired,
+        KeywordContentSchema,
+        KeywordTitle,
+        KeywordDescription,
+        KeywordDefault,
+        KeywordDeprecated,
+        KeywordReadOnly,
+        KeywordWriteOnly,
+        KeywordExamples,
+        ExtensionKeywords,
+        JSONViewer,
+        Accordion,
+        ExpandDeepButton,
+        ChevronRightIcon,
+        ...overrides.components,
+      },
+      config: {
+        showExtensionKeywords: configs.showExtensions,
+        ...overrides.config,
+      },
+      fn: {
+        ...overrides.fn,
+      },
+    })
+  }
--- a/src/core/plugins/json-schema-2020-12/hooks.js
+++ b/src/core/plugins/json-schema-2020-12/hooks.js
@@ -1,14 +1,15 @@
 /**
 * @prettier
 */
-import { useContext } from "react"
+import { useCallback, useContext, useEffect, useState } from "react"

 import {
  JSONSchemaContext,
  JSONSchemaLevelContext,
-  JSONSchemaDeepExpansionContext,
  JSONSchemaCyclesContext,
+  JSONSchemaPathContext,
 } from "./context"
+import { JSONSchemaIsExpandedState } from "./enum"

 export const useConfig = () => {
  const { config } = useContext(JSONSchemaContext)
@@ -26,6 +27,17 @@ export const useFn = (fnName = undefined) => {
  return typeof fnName !== "undefined" ? fn[fnName] : fn
 }

+export const useJSONSchemaContextState = () => {
+  const [, setFakeState] = useState(null)
+  const { state } = useContext(JSONSchemaContext)
+  const setState = (updateFn) => {
+    updateFn(state)
+    setFakeState({})
+  }
+
+  return { state, setState }
+}
+
 export const useLevel = () => {
  const level = useContext(JSONSchemaLevelContext)

@@ -38,15 +50,84 @@ export const useIsEmbedded = () => {
  return level > 0
 }

-export const useIsExpanded = () => {
-  const [level] = useLevel()
-  const { defaultExpandedLevels } = useConfig()
+export const usePath = (pathToken) => {
+  const path = useContext(JSONSchemaPathContext)
+  const { setState } = useJSONSchemaContextState()
+  const currentPath =
+    typeof pathToken === "string" ? [...path, pathToken] : path

-  return defaultExpandedLevels - level > 0
+  const pathMutator = (value, options = { deep: false }) => {
+    const startPath = currentPath.toString()
+    const updateFn = (state) => {
+      state.paths[startPath] = value
+
+      if (value === JSONSchemaIsExpandedState.Collapsed) {
+        Object.keys(state.paths).forEach((key) => {
+          if (
+            key.startsWith(startPath) &&
+            state.paths[key] === JSONSchemaIsExpandedState.DeeplyExpanded
+          ) {
+            state.paths[key] = JSONSchemaIsExpandedState.Expanded
+          }
+        })
+      }
+    }
+    const updateDeepFn = (state) => {
+      Object.keys(state.paths).forEach((key) => {
+        if (key.startsWith(startPath)) {
+          state.paths[key] = value
+        }
+      })
+    }
+
+    if (options.deep) {
+      setState(updateDeepFn)
+    } else {
+      setState(updateFn)
+    }
+  }
+
+  return { path: currentPath, pathMutator }
 }

-export const useIsExpandedDeeply = () => {
-  return useContext(JSONSchemaDeepExpansionContext)
+export const useIsExpanded = (name) => {
+  const [level] = useLevel()
+  const { defaultExpandedLevels } = useConfig()
+  const { path, pathMutator } = usePath(name)
+  const { path: parentPath } = usePath()
+  const { state } = useJSONSchemaContextState()
+  const currentState = state.paths[path.toString()]
+  const parentState =
+    state.paths[parentPath.toString()] ??
+    state.paths[parentPath.slice(0, -1).toString()]
+  const isExpandedState =
+    currentState ??
+    (defaultExpandedLevels - level > 0
+      ? JSONSchemaIsExpandedState.Expanded
+      : JSONSchemaIsExpandedState.Collapsed)
+  const isExpanded = isExpandedState !== JSONSchemaIsExpandedState.Collapsed
+
+  useEffect(() => {
+    pathMutator(
+      parentState === JSONSchemaIsExpandedState.DeeplyExpanded
+        ? JSONSchemaIsExpandedState.DeeplyExpanded
+        : isExpandedState
+    )
+  }, [parentState])
+
+  const setExpanded = useCallback((options = { deep: false }) => {
+    pathMutator(
+      options.deep
+        ? JSONSchemaIsExpandedState.DeeplyExpanded
+        : JSONSchemaIsExpandedState.Expanded
+    )
+  }, [])
+
+  const setCollapsed = useCallback((options = { deep: false }) => {
+    pathMutator(JSONSchemaIsExpandedState.Collapsed, options)
+  }, [])
+
+  return { isExpanded, setExpanded, setCollapsed }
 }

 export const useRenderedSchemas = (schema = undefined) => {
--- a/src/core/plugins/json-schema-2020-12/index.js
+++ b/src/core/plugins/json-schema-2020-12/index.js
@@ -30,25 +30,50 @@ import KeywordUnevaluatedItems from "./components/keywords/UnevaluatedItems"
 import KeywordUnevaluatedProperties from "./components/keywords/UnevaluatedProperties"
 import KeywordType from "./components/keywords/Type"
 import KeywordEnum from "./components/keywords/Enum/Enum"
-import KeywordConst from "./components/keywords/Const"
+import KeywordConst from "./components/keywords/Const/Const"
 import KeywordConstraint from "./components/keywords/Constraint/Constraint"
 import KeywordDependentRequired from "./components/keywords/DependentRequired/DependentRequired"
 import KeywordContentSchema from "./components/keywords/ContentSchema"
 import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
-import KeywordDefault from "./components/keywords/Default"
+import KeywordDefault from "./components/keywords/Default/Default"
 import KeywordDeprecated from "./components/keywords/Deprecated"
 import KeywordReadOnly from "./components/keywords/ReadOnly"
 import KeywordWriteOnly from "./components/keywords/WriteOnly"
+import KeywordExamples from "./components/keywords/Examples/Examples"
+import ExtensionKeywords from "./components/keywords/ExtensionKeywords/ExtensionKeywords"
+import JSONViewer from "./components/JSONViewer/JSONViewer"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
-import { upperFirst, hasKeyword, isExpandable } from "./fn"
-import { JSONSchemaDeepExpansionContext } from "./context"
-import { useFn, useConfig, useComponent, useIsExpandedDeeply } from "./hooks"
-import { withJSONSchemaContext } from "./hoc"
+import {
+  upperFirst,
+  hasKeyword,
+  makeGetTitle,
+  makeGetType,
+  makeIsExpandable,
+  isBooleanJSONSchema,
+  getSchemaKeywords,
+  makeGetExtensionKeywords,
+} from "./fn"
+import { JSONSchemaPathContext, JSONSchemaLevelContext } from "./context"
+import {
+  useFn,
+  useConfig,
+  useComponent,
+  useIsExpanded,
+  usePath,
+  useLevel,
+} from "./hooks"
+import { withJSONSchemaContext, makeWithJSONSchemaSystemContext } from "./hoc"

-const JSONSchema202012Plugin = () => ({
+const JSONSchema202012Plugin = ({ getSystem, fn }) => {
+  const fnAccessor = () => ({
+    upperFirst: fn.upperFirst,
+    ...fn.jsonSchema202012,
+  })
+
+  return {
    components: {
      JSONSchema202012: JSONSchema,
      JSONSchema202012Keyword$schema: Keyword$schema,
@@ -76,7 +101,8 @@ const JSONSchema202012Plugin = () => ({
      JSONSchema202012KeywordAdditionalProperties: KeywordAdditionalProperties,
      JSONSchema202012KeywordPropertyNames: KeywordPropertyNames,
      JSONSchema202012KeywordUnevaluatedItems: KeywordUnevaluatedItems,
-    JSONSchema202012KeywordUnevaluatedProperties: KeywordUnevaluatedProperties,
+      JSONSchema202012KeywordUnevaluatedProperties:
+        KeywordUnevaluatedProperties,
      JSONSchema202012KeywordType: KeywordType,
      JSONSchema202012KeywordEnum: KeywordEnum,
      JSONSchema202012KeywordConst: KeywordConst,
@@ -89,23 +115,37 @@ const JSONSchema202012Plugin = () => ({
      JSONSchema202012KeywordDeprecated: KeywordDeprecated,
      JSONSchema202012KeywordReadOnly: KeywordReadOnly,
      JSONSchema202012KeywordWriteOnly: KeywordWriteOnly,
+      JSONSchema202012KeywordExamples: KeywordExamples,
+      JSONSchema202012ExtensionKeywords: ExtensionKeywords,
+      JSONSchema202012JSONViewer: JSONViewer,
      JSONSchema202012Accordion: Accordion,
      JSONSchema202012ExpandDeepButton: ExpandDeepButton,
      JSONSchema202012ChevronRightIcon: ChevronRightIcon,
      withJSONSchema202012Context: withJSONSchemaContext,
-    JSONSchema202012DeepExpansionContext: () => JSONSchemaDeepExpansionContext,
+      withJSONSchema202012SystemContext:
+        makeWithJSONSchemaSystemContext(getSystem()),
+      JSONSchema202012PathContext: () => JSONSchemaPathContext,
+      JSONSchema202012LevelContext: () => JSONSchemaLevelContext,
    },
    fn: {
      upperFirst,
      jsonSchema202012: {
-      isExpandable,
+        getTitle: makeGetTitle(fnAccessor),
+        getType: makeGetType(fnAccessor),
+        isExpandable: makeIsExpandable(fnAccessor),
+        isBooleanJSONSchema,
        hasKeyword,
        useFn,
        useConfig,
        useComponent,
-      useIsExpandedDeeply,
+        useIsExpanded,
+        usePath,
+        useLevel,
+        getSchemaKeywords,
+        getExtensionKeywords: makeGetExtensionKeywords(fnAccessor),
      },
    },
-})
+  }
+}

 export default JSONSchema202012Plugin
--- a/src/core/plugins/json-schema-5/components/array-model.jsx
+++ b/src/core/plugins/json-schema-5/components/array-model.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
-import { sanitizeUrl } from "core/utils"
+import { sanitizeUrl } from "core/utils/url"

 const propClass = "property"

--- a/src/core/plugins/json-schema-5/components/json-schema-components.jsx
+++ b/src/core/plugins/json-schema-5/components/json-schema-components.jsx
@@ -4,7 +4,9 @@ import { List, fromJS } from "immutable"
 import cx from "classnames"
 import ImPropTypes from "react-immutable-proptypes"
 import DebounceInput from "react-debounce-input"
-import { stringify } from "core/utils"
+import { stringify, isImmutable, immutableToJS } from "core/utils"
+
+/* eslint-disable  react/jsx-no-bind */

 const noop = ()=> {}
 const JsonSchemaPropShape = {
@@ -48,15 +50,22 @@ export class JsonSchemaForm extends Component {
    let { schema, errors, value, onChange, getComponent, fn, disabled } = this.props
    const format = schema && schema.get ? schema.get("format") : null
    const type = schema && schema.get ? schema.get("type") : null
+    const foldedType = fn.jsonSchema202012.foldType(immutableToJS(type))

    let getComponentSilently = (name) => getComponent(name, false, { failSilently: true })
    let Comp = type ? format ?
      getComponentSilently(`JsonSchema_${type}_${format}`) :
      getComponentSilently(`JsonSchema_${type}`) :
      getComponent("JsonSchema_string")
+
+    if (List.isList(type) && (foldedType === "array" || foldedType === "object")) {
+      Comp = getComponent("JsonSchema_object")
+    }
+
    if (!Comp) {
      Comp = getComponent("JsonSchema_string")
    }
+
    return <Comp { ...this.props } errors={errors} fn={fn} getComponent={getComponent} value={value} onChange={onChange} schema={schema} disabled={disabled}/>
  }
 }
@@ -77,7 +86,10 @@ export class JsonSchema_string extends Component {
    const schemaIn = schema && schema.get ? schema.get("in") : null
    if (!value) {
      value = "" // value should not be null; this fixes a Debounce error
+    } else if (isImmutable(value) || typeof value === "object") {
+      value = stringify(value)
    }
+
    errors = errors.toJS ? errors.toJS() : []

    if ( enumValue ) {
@@ -182,6 +194,8 @@ export class JsonSchema_array extends PureComponent {
      value && value.count && value.count() > 0 ? true : false
    const schemaItemsEnum = schema.getIn(["items", "enum"])
    const schemaItemsType = schema.getIn(["items", "type"])
+    const foldedSchemaItemsType = fn.jsonSchema202012.foldType(immutableToJS(schemaItemsType))
+    const schemaItemsTypeLabel = fn.jsonSchema202012.getType(immutableToJS(schema.get("items")))
    const schemaItemsFormat = schema.getIn(["items", "format"])
    const schemaItemsSchema = schema.get("items")
    let ArrayItemsComponent
@@ -192,6 +206,11 @@ export class JsonSchema_array extends PureComponent {
    } else if (schemaItemsType === "boolean" || schemaItemsType === "array" || schemaItemsType === "object") {
      ArrayItemsComponent = getComponent(`JsonSchema_${schemaItemsType}`)
    }
+
+    if (List.isList(schemaItemsType) && (foldedSchemaItemsType === "array" || foldedSchemaItemsType === "object")) {
+      ArrayItemsComponent = getComponent(`JsonSchema_object`)
+    }
+
    // if ArrayItemsComponent not assigned or does not exist,
    // use default schemaItemsType === "string" & JsonSchemaArrayItemText component
    if (!ArrayItemsComponent && !isArrayItemFile) {
@@ -266,7 +285,7 @@ export class JsonSchema_array extends PureComponent {
            title={arrayErrors.length ? arrayErrors : ""}
            onClick={this.addItem}
          >
-            Add {schemaItemsType ? `${schemaItemsType} ` : ""}item
+            Add {schemaItemsTypeLabel} item
          </Button>
        ) : null}
      </div>
@@ -287,7 +306,10 @@ export class JsonSchemaArrayItemText extends Component {
    let { value, errors, description, disabled } = this.props
    if (!value) {
      value = "" // value should not be null
+    } else if (isImmutable(value) || typeof value === "object") {
+      value = stringify(value)
    }
+
    errors = errors.toJS ? errors.toJS() : []

    return (<DebounceInput
--- a/src/core/plugins/json-schema-5/components/model-example.jsx
+++ b/src/core/plugins/json-schema-5/components/model-example.jsx
@@ -120,6 +120,7 @@ const ModelExample = ({

      {activeTab === tabs.model && (
        <div
+          className="model-container"
          aria-hidden={activeTab === tabs.example}
          aria-labelledby={modelTabId}
          data-name="modelPanel"
--- a/src/core/plugins/json-schema-5/components/model-extensions.jsx
+++ b/src/core/plugins/json-schema-5/components/model-extensions.jsx
@@ -0,0 +1,28 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import { immutableToJS } from "core/utils"
+import ImPropTypes from "react-immutable-proptypes"
+
+export const ModelExtensions = ({ extensions, propClass = "" }) => {
+  return extensions
+    .entrySeq()
+    .map(([key, value]) => {
+      const normalizedValue = immutableToJS(value) ?? null
+
+      return (
+        <tr key={key} className={propClass}>
+          <td>{key}</td>
+          <td>{JSON.stringify(normalizedValue)}</td>
+        </tr>
+      )
+    })
+    .toArray()
+}
+
+ModelExtensions.propTypes = {
+  extensions: ImPropTypes.map.isRequired,
+  propClass: PropTypes.string,
+}
--- a/src/core/plugins/json-schema-5/components/models.jsx
+++ b/src/core/plugins/json-schema-5/components/models.jsx
@@ -2,6 +2,8 @@ import React, { Component } from "react"
 import Im, { Map } from "immutable"
 import PropTypes from "prop-types"

+/* eslint-disable  react/jsx-no-bind */
+
 export default class Models extends Component {
  static propTypes = {
    getComponent: PropTypes.func,
@@ -114,7 +116,7 @@ export default class Models extends Component {

            return <div id={ `model-${name}` } className="model-container" key={ `models-section-${name}` }
                    data-name={name} ref={this.onLoadModel} >
-              <span className="models-jump-to-path"><JumpToPath specPath={specPath} /></span>
+              <span className="models-jump-to-path"><JumpToPath path={specPath} /></span>
              <ModelCollapse
                classes="model-box"
                collapsedContent={this.getCollapsedContent(name)}
--- a/src/core/plugins/json-schema-5/components/object-model.jsx
+++ b/src/core/plugins/json-schema-5/components/object-model.jsx
@@ -1,8 +1,13 @@
-import React, { Component, } from "react"
+/**
+ * @prettier
+ */
+import React, { Component } from "react"
 import PropTypes from "prop-types"
 import { List } from "immutable"
 import ImPropTypes from "react-immutable-proptypes"
-import { sanitizeUrl } from "core/utils"
+import { sanitizeUrl } from "core/utils/url"
+import classNames from "classnames"
+import { getExtensions } from "../../../utils"

 const braceOpen = "{"
 const braceClose = "}"
@@ -26,24 +31,43 @@ export default class ObjectModel extends Component {
    includeWriteOnly: PropTypes.bool,
  }

-  render(){
-    let { schema, name, displayName, isRef, getComponent, getConfigs, depth, onToggle, expanded, specPath, ...otherProps } = this.props
-    let { specSelectors,expandDepth, includeReadOnly, includeWriteOnly} = otherProps
+  render() {
+    let {
+      schema,
+      name,
+      displayName,
+      isRef,
+      getComponent,
+      getConfigs,
+      depth,
+      onToggle,
+      expanded,
+      specPath,
+      ...otherProps
+    } = this.props
+    let { specSelectors, expandDepth, includeReadOnly, includeWriteOnly } =
+      otherProps
    const { isOAS3 } = specSelectors
+    const isEmbedded = depth > 2 || (depth === 2 && specPath.last() !== "items")

-    if(!schema) {
+    if (!schema) {
      return null
    }

    const { showExtensions } = getConfigs()
+    const extensions = showExtensions ? getExtensions(schema) : List()

    let description = schema.get("description")
    let properties = schema.get("properties")
    let additionalProperties = schema.get("additionalProperties")
    let title = schema.get("title") || displayName || name
    let requiredProperties = schema.get("required")
-    let infoProperties = schema
-      .filter( ( v, key) => ["maxProperties", "minProperties", "nullable", "example"].indexOf(key) !== -1 )
+    let infoProperties = schema.filter(
+      (v, key) =>
+        ["maxProperties", "minProperties", "nullable", "example"].indexOf(
+          key
+        ) !== -1
+    )
    let deprecated = schema.get("deprecated")
    let externalDocsUrl = schema.getIn(["externalDocs", "url"])
    let externalDocsDescription = schema.getIn(["externalDocs", "description"])
@@ -54,82 +78,99 @@ export default class ObjectModel extends Component {
    const ModelCollapse = getComponent("ModelCollapse")
    const Property = getComponent("Property")
    const Link = getComponent("Link")
+    const ModelExtensions = getComponent("ModelExtensions")

    const JumpToPathSection = () => {
-      return <span className="model-jump-to-path"><JumpToPath specPath={specPath} /></span>
+      return (
+        <span className="model-jump-to-path">
+          <JumpToPath path={specPath} />
+        </span>
+      )
    }
-    const collapsedContent = (<span>
-        <span>{ braceOpen }</span>...<span>{ braceClose }</span>
-        {
-          isRef ? <JumpToPathSection /> : ""
-        }
-    </span>)
+    const collapsedContent = (
+      <span>
+        <span>{braceOpen}</span>...<span>{braceClose}</span>
+        {isRef ? <JumpToPathSection /> : ""}
+      </span>
+    )

    const allOf = specSelectors.isOAS3() ? schema.get("allOf") : null
    const anyOf = specSelectors.isOAS3() ? schema.get("anyOf") : null
    const oneOf = specSelectors.isOAS3() ? schema.get("oneOf") : null
    const not = specSelectors.isOAS3() ? schema.get("not") : null

-    const titleEl = title && <span className="model-title">
-      { isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
-      <span className="model-title__text">{ title }</span>
+    const titleEl = title && (
+      <span className="model-title">
+        {isRef && schema.get("$$ref") && (
+          <span
+            className={classNames("model-hint", {
+              "model-hint--embedded": isEmbedded,
+            })}
+          >
+            {schema.get("$$ref")}
          </span>
+        )}
+        <span className="model-title__text">{title}</span>
+      </span>
+    )

-    return <span className="model">
+    return (
+      <span className="model">
        <ModelCollapse
          modelName={name}
          title={titleEl}
-        onToggle = {onToggle}
-        expanded={ expanded ? true : depth <= expandDepth }
-        collapsedContent={ collapsedContent }>
-
-         <span className="brace-open object">{ braceOpen }</span>
-          {
-            !isRef ? null : <JumpToPathSection />
-          }
+          onToggle={onToggle}
+          expanded={expanded ? true : depth <= expandDepth}
+          collapsedContent={collapsedContent}
+        >
+          <span className="brace-open object">{braceOpen}</span>
+          {!isRef ? null : <JumpToPathSection />}
          <span className="inner-object">
            {
-              <table className="model"><tbody>
-              {
-                !description ? null : <tr className="description">
+              <table className="model">
+                <tbody>
+                  {!description ? null : (
+                    <tr className="description">
                      <td>description:</td>
                      <td>
-                      <Markdown source={ description } />
+                        <Markdown source={description} />
                      </td>
                    </tr>
-              }
-              {
-                externalDocsUrl &&
+                  )}
+                  {externalDocsUrl && (
                    <tr className={"external-docs"}>
+                      <td>externalDocs:</td>
                      <td>
-                    externalDocs:
-                  </td>
-                  <td>
-                    <Link target="_blank" href={sanitizeUrl(externalDocsUrl)}>{externalDocsDescription || externalDocsUrl}</Link>
+                        <Link
+                          target="_blank"
+                          href={sanitizeUrl(externalDocsUrl)}
+                        >
+                          {externalDocsDescription || externalDocsUrl}
+                        </Link>
                      </td>
                    </tr>
-              }
-              {
-                !deprecated ? null :
+                  )}
+                  {!deprecated ? null : (
                    <tr className={"property"}>
-                    <td>
-                      deprecated:
-                    </td>
-                    <td>
-                      true
-                    </td>
+                      <td>deprecated:</td>
+                      <td>true</td>
                    </tr>
-              }
-              {
-                !(properties && properties.size) ? null : properties.entrySeq().filter(
-                    ([, value]) => {
-                      return (!value.get("readOnly") || includeReadOnly) &&
+                  )}
+                  {!(properties && properties.size)
+                    ? null
+                    : properties
+                        .entrySeq()
+                        .filter(([, value]) => {
+                          return (
+                            (!value.get("readOnly") || includeReadOnly) &&
                            (!value.get("writeOnly") || includeWriteOnly)
-                    }
-                ).map(
-                    ([key, value]) => {
+                          )
+                        })
+                        .map(([key, value]) => {
                          let isDeprecated = isOAS3() && value.get("deprecated")
-                      let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
+                          let isRequired =
+                            List.isList(requiredProperties) &&
+                            requiredProperties.contains(key)

                          let classNames = ["property-row"]

@@ -141,133 +182,159 @@ export default class ObjectModel extends Component {
                            classNames.push("required")
                          }

-                      return (<tr key={key} className={classNames.join(" ")}>
+                          return (
+                            <tr key={key} className={classNames.join(" ")}>
                              <td>
-                          { key }{ isRequired && <span className="star">*</span> }
+                                {key}
+                                {isRequired && <span className="star">*</span>}
                              </td>
                              <td>
-                          <Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
-                                 required={ isRequired }
-                                 getComponent={ getComponent }
+                                <Model
+                                  key={`object-${name}-${key}_${value}`}
+                                  {...otherProps}
+                                  required={isRequired}
+                                  getComponent={getComponent}
                                  specPath={specPath.push("properties", key)}
-                                 getConfigs={ getConfigs }
-                                 schema={ value }
-                                 depth={ depth + 1 } />
-                        </td>
-                      </tr>)
-                    }).toArray()
-              }
-              {
-                // empty row before extensions...
-                !showExtensions ? null : <tr><td>&nbsp;</td></tr>
-              }
-              {
-                !showExtensions ? null :
-                  schema.entrySeq().map(
-                    ([key, value]) => {
-                      if(key.slice(0,2) !== "x-") {
-                        return
-                      }
-
-                      const normalizedValue = !value ? null : value.toJS ? value.toJS() : value
-
-                      return (<tr key={key} className="extension">
-                        <td>
-                          { key }
-                        </td>
-                        <td>
-                          { JSON.stringify(normalizedValue) }
-                        </td>
-                      </tr>)
-                    }).toArray()
-              }
-              {
-                !additionalProperties || !additionalProperties.size ? null
-                  : <tr>
-                    <td>{ "< * >:" }</td>
-                    <td>
-                      <Model { ...otherProps } required={ false }
-                             getComponent={ getComponent }
-                             specPath={specPath.push("additionalProperties")}
-                             getConfigs={ getConfigs }
-                             schema={ additionalProperties }
-                             depth={ depth + 1 } />
+                                  getConfigs={getConfigs}
+                                  schema={value}
+                                  depth={depth + 1}
+                                />
                              </td>
                            </tr>
-              }
-              {
-                !allOf ? null
-                  : <tr>
-                    <td>{ "allOf ->" }</td>
+                          )
+                        })
+                        .toArray()}
+                  {extensions.size === 0 ? null : (
+                    <>
+                      <tr>
+                        <td>&nbsp;</td>
+                      </tr>
+                      <ModelExtensions
+                        extensions={extensions}
+                        propClass="extension"
+                      />
+                    </>
+                  )}
+                  {!additionalProperties ||
+                  !additionalProperties.size ? null : (
+                    <tr>
+                      <td>{"< * >:"}</td>
+                      <td>
+                        <Model
+                          {...otherProps}
+                          required={false}
+                          getComponent={getComponent}
+                          specPath={specPath.push("additionalProperties")}
+                          getConfigs={getConfigs}
+                          schema={additionalProperties}
+                          depth={depth + 1}
+                        />
+                      </td>
+                    </tr>
+                  )}
+                  {!allOf ? null : (
+                    <tr>
+                      <td>{"allOf ->"}</td>
                      <td>
                        {allOf.map((schema, k) => {
-                        return <div key={k}><Model { ...otherProps } required={ false }
-                                 getComponent={ getComponent }
+                          return (
+                            <div key={k}>
+                              <Model
+                                {...otherProps}
+                                required={false}
+                                getComponent={getComponent}
                                specPath={specPath.push("allOf", k)}
-                                 getConfigs={ getConfigs }
-                                 schema={ schema }
-                                 depth={ depth + 1 } /></div>
+                                getConfigs={getConfigs}
+                                schema={schema}
+                                depth={depth + 1}
+                              />
+                            </div>
+                          )
                        })}
                      </td>
                    </tr>
-              }
-              {
-                !anyOf ? null
-                  : <tr>
-                    <td>{ "anyOf ->" }</td>
+                  )}
+                  {!anyOf ? null : (
+                    <tr>
+                      <td>{"anyOf ->"}</td>
                      <td>
                        {anyOf.map((schema, k) => {
-                        return <div key={k}><Model { ...otherProps } required={ false }
-                                 getComponent={ getComponent }
+                          return (
+                            <div key={k}>
+                              <Model
+                                {...otherProps}
+                                required={false}
+                                getComponent={getComponent}
                                specPath={specPath.push("anyOf", k)}
-                                 getConfigs={ getConfigs }
-                                 schema={ schema }
-                                 depth={ depth + 1 } /></div>
+                                getConfigs={getConfigs}
+                                schema={schema}
+                                depth={depth + 1}
+                              />
+                            </div>
+                          )
                        })}
                      </td>
                    </tr>
-              }
-              {
-                !oneOf ? null
-                  : <tr>
-                    <td>{ "oneOf ->" }</td>
+                  )}
+                  {!oneOf ? null : (
+                    <tr>
+                      <td>{"oneOf ->"}</td>
                      <td>
                        {oneOf.map((schema, k) => {
-                        return <div key={k}><Model { ...otherProps } required={ false }
-                                 getComponent={ getComponent }
+                          return (
+                            <div key={k}>
+                              <Model
+                                {...otherProps}
+                                required={false}
+                                getComponent={getComponent}
                                specPath={specPath.push("oneOf", k)}
-                                 getConfigs={ getConfigs }
-                                 schema={ schema }
-                                 depth={ depth + 1 } /></div>
+                                getConfigs={getConfigs}
+                                schema={schema}
+                                depth={depth + 1}
+                              />
+                            </div>
+                          )
                        })}
                      </td>
                    </tr>
-              }
-              {
-                !not ? null
-                  : <tr>
-                    <td>{ "not ->" }</td>
+                  )}
+                  {!not ? null : (
+                    <tr>
+                      <td>{"not ->"}</td>
                      <td>
                        <div>
-                        <Model { ...otherProps }
-                               required={ false }
-                               getComponent={ getComponent }
+                          <Model
+                            {...otherProps}
+                            required={false}
+                            getComponent={getComponent}
                            specPath={specPath.push("not")}
-                               getConfigs={ getConfigs }
-                               schema={ not }
-                               depth={ depth + 1 } />
+                            getConfigs={getConfigs}
+                            schema={not}
+                            depth={depth + 1}
+                          />
                        </div>
                      </td>
                    </tr>
-              }
-              </tbody></table>
+                  )}
+                </tbody>
+              </table>
            }
          </span>
-        <span className="brace-close">{ braceClose }</span>
+          <span className="brace-close">{braceClose}</span>
        </ModelCollapse>
-      {
-        infoProperties.size ? infoProperties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
-      }
+        {infoProperties.size
+          ? infoProperties
+              .entrySeq()
+              .map(([key, v]) => (
+                <Property
+                  key={`${key}-${v}`}
+                  propKey={key}
+                  propVal={v}
+                  propClass={propClass}
+                />
+              ))
+          : null}
      </span>
+    )
  }
 }
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .3.0
 .11.0