diff --git a/README.md b/README.md
index 12b3ae42..745232f2 100644
--- a/README.md
+++ b/README.md
@@ -205,6 +205,23 @@ const editor = new JSONEditor({
 - `onChangeMode(mode: string)`. Invoked when the mode is changed.
 - `onClassName(path: Path, value: any): string | undefined`.
   Add a custom class name to specific nodes, based on their path and/or value.
+- `onRenderValue(props: RenderValueProps) : RenderValueConstructor[]`
+
+  _EXPERIMENTAL! This API will most likely change in future versions._
+
+  Customize rendering of the values. By default, `renderValue` is used, which renders a value as an editable div and depending on the value can also render a boolean toggle, a color picker, and a timestamp tag. Multiple components can be rendered alongside each other, like the boolean toggle and color picker being rendered left from the editable div. Built in value renderer components: `EditableValue`, `ReadonlyValue`, `BooleanToggle`, `ColorPicker`, `TimestampTag`, `EnumValue`.
+
+  For JSON Schema enums, there is a value renderer `renderJSONSchemaEnum` which renders enums using the `EnumValue` component. This can be used like:
+
+  ```js
+  import { renderJSONSchemaEnum, renderValue } from 'svelte-jsoneditor'
+
+  function onRenderValue(props) {
+    // use the enum renderer, and fallback on the default renderer
+    return renderJSONSchemaEnum(props, schema, schemaRefs) || renderValue(props)
+  }
+  ```
+
 - `onRenderMenu(mode: string, items: Array) : Array | undefined`.
   Callback which can be used to make changes to the menu items. New items can
   be added, or existing items can be removed or reorganized. When the function
@@ -341,6 +358,24 @@ type QueryLanguageOptions = {
     paths?: string[][]
   }
 }
+
+type RenderValueProps = {
+  path: Path
+  value: JSON
+  readOnly: boolean
+  selection?: Selection
+  isSelected: boolean
+  isEditing: boolean
+  searchResult?: SearchResultItem
+  onPatch: (patch: JSONPatchDocument, newSelection: Selection | null) => void
+  onPasteJson: (pastedJson: { path: Path; contents: JSON }) => void
+  onSelect: (selection: Selection) => void
+}
+
+type RenderValueConstructor = {
+  component: SvelteComponentConstructor
+  props: Object
+}
 ```
 
 ## Develop
diff --git a/package-lock.json b/package-lock.json
index 92bb2a28..705b4587 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,16 +14,16 @@
         "ace-builds": "^1.4.13",
         "ajv": "^8.8.2",
         "classnames": "^2.3.1",
-        "diff-sequences": "^27.0.6",
+        "diff-sequences": "^27.4.0",
         "immutable-json-patch": "^1.1.2",
         "jmespath": "^0.15.0",
         "json-source-map": "^0.6.1",
         "jsonrepair": "^2.2.1",
         "lodash-es": "^4.17.21",
         "natural-compare-lite": "^1.4.0",
-        "sass": "^1.43.4",
+        "sass": "^1.44.0",
         "svelte-awesome": "^2.4.2",
-        "svelte-select": "^4.4.5",
+        "svelte-select": "^4.4.6",
         "svelte-simple-modal": "^1.1.1",
         "vanilla-picker": "^2.12.1"
       },
@@ -34,20 +34,20 @@
         "@rollup/plugin-json": "4.1.0",
         "@rollup/plugin-node-resolve": "13.0.6",
         "@rollup/plugin-typescript": "8.3.0",
-        "@sveltejs/kit": "1.0.0-next.199",
+        "@sveltejs/kit": "1.0.0-next.201",
         "@types/cookie": "0.4.1",
         "@types/lodash-es": "4.17.5",
         "@types/mocha": "9.0.0",
-        "@typescript-eslint/eslint-plugin": "5.4.0",
-        "@typescript-eslint/parser": "5.4.0",
+        "@typescript-eslint/eslint-plugin": "5.5.0",
+        "@typescript-eslint/parser": "5.5.0",
         "eslint": "8.3.0",
         "eslint-config-prettier": "8.3.0",
         "eslint-plugin-svelte3": "3.2.1",
         "husky": "7.0.4",
         "mocha": "9.1.3",
-        "prettier": "2.4.1",
+        "prettier": "2.5.0",
         "prettier-plugin-svelte": "2.5.0",
-        "rollup": "2.59.0",
+        "rollup": "2.60.2",
         "rollup-plugin-svelte": "7.1.0",
         "rollup-plugin-terser": "7.0.2",
         "standard-version": "9.3.2",
@@ -705,9 +705,9 @@
       "integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw=="
     },
     "node_modules/@sveltejs/kit": {
-      "version": "1.0.0-next.199",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.199.tgz",
-      "integrity": "sha512-dJGmXUf5zchMvwrCfQfHOwxXOruMQHlL4DhXU5ZtB5ccZtU9OlQBcJU0xoa/mDrF5zndPRJUuVjz2ivdD+1cPw==",
+      "version": "1.0.0-next.201",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.201.tgz",
+      "integrity": "sha512-WcYexOEPWgDWOk0oOteTU5QwWykdIcOFJig+akeHqwE/jVtPURLZFtTNx0ymUWXN4S+dUXf60KF6HEMv74FHpA==",
       "dev": true,
       "dependencies": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
@@ -877,13 +877,13 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.4.0.tgz",
-      "integrity": "sha512-9/yPSBlwzsetCsGEn9j24D8vGQgJkOTr4oMLas/w886ZtzKIs1iyoqFrwsX2fqYEeUwsdBpC21gcjRGo57u0eg==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.5.0.tgz",
+      "integrity": "sha512-4bV6fulqbuaO9UMXU0Ia0o6z6if+kmMRW8rMRyfqXj/eGrZZRGedS4n0adeGNnjr8LKAM495hrQ7Tea52UWmQA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/experimental-utils": "5.4.0",
-        "@typescript-eslint/scope-manager": "5.4.0",
+        "@typescript-eslint/experimental-utils": "5.5.0",
+        "@typescript-eslint/scope-manager": "5.5.0",
         "debug": "^4.3.2",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.1.8",
@@ -909,15 +909,15 @@
       }
     },
     "node_modules/@typescript-eslint/experimental-utils": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.4.0.tgz",
-      "integrity": "sha512-Nz2JDIQUdmIGd6p33A+naQmwfkU5KVTLb/5lTk+tLVTDacZKoGQisj8UCxk7onJcrgjIvr8xWqkYI+DbI3TfXg==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.5.0.tgz",
+      "integrity": "sha512-kjWeeVU+4lQ1SLYErRKV5yDXbWDPkpbzTUUlfAUifPYvpX0qZlrcCZ96/6oWxt3QxtK5WVhXz+KsnwW9cIW+3A==",
       "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.4.0",
-        "@typescript-eslint/types": "5.4.0",
-        "@typescript-eslint/typescript-estree": "5.4.0",
+        "@typescript-eslint/scope-manager": "5.5.0",
+        "@typescript-eslint/types": "5.5.0",
+        "@typescript-eslint/typescript-estree": "5.5.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       },
@@ -933,14 +933,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.4.0.tgz",
-      "integrity": "sha512-JoB41EmxiYpaEsRwpZEYAJ9XQURPFer8hpkIW9GiaspVLX8oqbqNM8P4EP8HOZg96yaALiLEVWllA2E8vwsIKw==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.5.0.tgz",
+      "integrity": "sha512-JsXBU+kgQOAgzUn2jPrLA+Rd0Y1dswOlX3hp8MuRO1hQDs6xgHtbCXEiAu7bz5hyVURxbXcA2draasMbNqrhmg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.4.0",
-        "@typescript-eslint/types": "5.4.0",
-        "@typescript-eslint/typescript-estree": "5.4.0",
+        "@typescript-eslint/scope-manager": "5.5.0",
+        "@typescript-eslint/types": "5.5.0",
+        "@typescript-eslint/typescript-estree": "5.5.0",
         "debug": "^4.3.2"
       },
       "engines": {
@@ -960,13 +960,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.4.0.tgz",
-      "integrity": "sha512-pRxFjYwoi8R+n+sibjgF9iUiAELU9ihPBtHzocyW8v8D8G8KeQvXTsW7+CBYIyTYsmhtNk50QPGLE3vrvhM5KA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.5.0.tgz",
+      "integrity": "sha512-0/r656RmRLo7CbN4Mdd+xZyPJ/fPCKhYdU6mnZx+8msAD8nJSP8EyCFkzbd6vNVZzZvWlMYrSNekqGrCBqFQhg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.4.0",
-        "@typescript-eslint/visitor-keys": "5.4.0"
+        "@typescript-eslint/types": "5.5.0",
+        "@typescript-eslint/visitor-keys": "5.5.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -977,9 +977,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.4.0.tgz",
-      "integrity": "sha512-GjXNpmn+n1LvnttarX+sPD6+S7giO+9LxDIGlRl4wK3a7qMWALOHYuVSZpPTfEIklYjaWuMtfKdeByx0AcaThA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.5.0.tgz",
+      "integrity": "sha512-OaYTqkW3GnuHxqsxxJ6KypIKd5Uw7bFiQJZRyNi1jbMJnK3Hc/DR4KwB6KJj6PBRkJJoaNwzMNv9vtTk87JhOg==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -990,13 +990,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.4.0.tgz",
-      "integrity": "sha512-nhlNoBdhKuwiLMx6GrybPT3SFILm5Gij2YBdPEPFlYNFAXUJWX6QRgvi/lwVoadaQEFsizohs6aFRMqsXI2ewA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.5.0.tgz",
+      "integrity": "sha512-pVn8btYUiYrjonhMAO0yG8lm7RApzy2L4RC7Td/mC/qFkyf6vRbGyZozoA94+w6D2Y2GRqpMoCWcwx/EUOzyoQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.4.0",
-        "@typescript-eslint/visitor-keys": "5.4.0",
+        "@typescript-eslint/types": "5.5.0",
+        "@typescript-eslint/visitor-keys": "5.5.0",
         "debug": "^4.3.2",
         "globby": "^11.0.4",
         "is-glob": "^4.0.3",
@@ -1017,12 +1017,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.4.0.tgz",
-      "integrity": "sha512-PVbax7MeE7tdLfW5SA0fs8NGVVr+buMPrcj+CWYWPXsZCH8qZ1THufDzbXm1xrZ2b2PA1iENJ0sRq5fuUtvsJg==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.5.0.tgz",
+      "integrity": "sha512-4GzJ1kRtsWzHhdM40tv0ZKHNSbkDhF0Woi/TDwVJX6UICwJItvP7ZTXbjTkCdrors7ww0sYe0t+cIKDAJwZ7Kw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.4.0",
+        "@typescript-eslint/types": "5.5.0",
         "eslint-visitor-keys": "^3.0.0"
       },
       "engines": {
@@ -1952,9 +1952,9 @@
       }
     },
     "node_modules/diff-sequences": {
-      "version": "27.0.6",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.0.6.tgz",
-      "integrity": "sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ==",
+      "version": "27.4.0",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.4.0.tgz",
+      "integrity": "sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==",
       "engines": {
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
@@ -3289,6 +3289,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+    },
     "node_modules/immutable-json-patch": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/immutable-json-patch/-/immutable-json-patch-1.1.2.tgz",
@@ -4359,9 +4364,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
-      "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.0.tgz",
+      "integrity": "sha512-FM/zAKgWTxj40rH03VxzIPdXmj39SwSjwG0heUcNFwI+EMZJnY93yAiKXM3dObIKAM5TA88werc8T/EwhB45eg==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -4722,9 +4727,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.59.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.59.0.tgz",
-      "integrity": "sha512-l7s90JQhCQ6JyZjKgo7Lq1dKh2RxatOM+Jr6a9F7WbS9WgKbocyUSeLmZl8evAse7y96Ae98L2k1cBOwWD8nHw==",
+      "version": "2.60.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.60.2.tgz",
+      "integrity": "sha512-1Bgjpq61sPjgoZzuiDSGvbI1tD91giZABgjCQBKM5aYLnzjq52GoDuWVwT/cm/MCxCMPU8gqQvkj8doQ5C8Oqw==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -4872,11 +4877,12 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.43.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.43.4.tgz",
-      "integrity": "sha512-/ptG7KE9lxpGSYiXn7Ar+lKOv37xfWsZRtFYal2QHNigyVQDx685VFT/h7ejVr+R8w7H4tmUgtulsKl5YpveOg==",
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.44.0.tgz",
+      "integrity": "sha512-0hLREbHFXGQqls/K8X+koeP+ogFRPF4ZqetVB19b7Cst9Er8cOR0rc6RU7MaI4W1JmUShd1BPgPoeqmmgMMYFw==",
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0"
       },
       "bin": {
         "sass": "sass.js"
@@ -5384,9 +5390,9 @@
       }
     },
     "node_modules/svelte-select": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-4.4.5.tgz",
-      "integrity": "sha512-TvBA5ZHY8ULaiwCgXGpslf/3iSfGOsyGEFDjIUefSnwD6I+rKwoBKfMRAN34G1oaLD/vUHV1lhUWDhMlomTHjQ=="
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-4.4.6.tgz",
+      "integrity": "sha512-AcWNfakmr8dBFH77MSlTskfrYGYP6BRBv/QpPb+59Tag8OQ6/JBXf0r0S0+U18/1JNXtXHJUMaQqRSLfaOtyIA=="
     },
     "node_modules/svelte-simple-modal": {
       "version": "1.1.1",
@@ -6381,9 +6387,9 @@
       "integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw=="
     },
     "@sveltejs/kit": {
-      "version": "1.0.0-next.199",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.199.tgz",
-      "integrity": "sha512-dJGmXUf5zchMvwrCfQfHOwxXOruMQHlL4DhXU5ZtB5ccZtU9OlQBcJU0xoa/mDrF5zndPRJUuVjz2ivdD+1cPw==",
+      "version": "1.0.0-next.201",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.201.tgz",
+      "integrity": "sha512-WcYexOEPWgDWOk0oOteTU5QwWykdIcOFJig+akeHqwE/jVtPURLZFtTNx0ymUWXN4S+dUXf60KF6HEMv74FHpA==",
       "dev": true,
       "requires": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
@@ -6530,13 +6536,13 @@
       }
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.4.0.tgz",
-      "integrity": "sha512-9/yPSBlwzsetCsGEn9j24D8vGQgJkOTr4oMLas/w886ZtzKIs1iyoqFrwsX2fqYEeUwsdBpC21gcjRGo57u0eg==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.5.0.tgz",
+      "integrity": "sha512-4bV6fulqbuaO9UMXU0Ia0o6z6if+kmMRW8rMRyfqXj/eGrZZRGedS4n0adeGNnjr8LKAM495hrQ7Tea52UWmQA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "5.4.0",
-        "@typescript-eslint/scope-manager": "5.4.0",
+        "@typescript-eslint/experimental-utils": "5.5.0",
+        "@typescript-eslint/scope-manager": "5.5.0",
         "debug": "^4.3.2",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.1.8",
@@ -6546,55 +6552,55 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.4.0.tgz",
-      "integrity": "sha512-Nz2JDIQUdmIGd6p33A+naQmwfkU5KVTLb/5lTk+tLVTDacZKoGQisj8UCxk7onJcrgjIvr8xWqkYI+DbI3TfXg==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.5.0.tgz",
+      "integrity": "sha512-kjWeeVU+4lQ1SLYErRKV5yDXbWDPkpbzTUUlfAUifPYvpX0qZlrcCZ96/6oWxt3QxtK5WVhXz+KsnwW9cIW+3A==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.4.0",
-        "@typescript-eslint/types": "5.4.0",
-        "@typescript-eslint/typescript-estree": "5.4.0",
+        "@typescript-eslint/scope-manager": "5.5.0",
+        "@typescript-eslint/types": "5.5.0",
+        "@typescript-eslint/typescript-estree": "5.5.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.4.0.tgz",
-      "integrity": "sha512-JoB41EmxiYpaEsRwpZEYAJ9XQURPFer8hpkIW9GiaspVLX8oqbqNM8P4EP8HOZg96yaALiLEVWllA2E8vwsIKw==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.5.0.tgz",
+      "integrity": "sha512-JsXBU+kgQOAgzUn2jPrLA+Rd0Y1dswOlX3hp8MuRO1hQDs6xgHtbCXEiAu7bz5hyVURxbXcA2draasMbNqrhmg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.4.0",
-        "@typescript-eslint/types": "5.4.0",
-        "@typescript-eslint/typescript-estree": "5.4.0",
+        "@typescript-eslint/scope-manager": "5.5.0",
+        "@typescript-eslint/types": "5.5.0",
+        "@typescript-eslint/typescript-estree": "5.5.0",
         "debug": "^4.3.2"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.4.0.tgz",
-      "integrity": "sha512-pRxFjYwoi8R+n+sibjgF9iUiAELU9ihPBtHzocyW8v8D8G8KeQvXTsW7+CBYIyTYsmhtNk50QPGLE3vrvhM5KA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.5.0.tgz",
+      "integrity": "sha512-0/r656RmRLo7CbN4Mdd+xZyPJ/fPCKhYdU6mnZx+8msAD8nJSP8EyCFkzbd6vNVZzZvWlMYrSNekqGrCBqFQhg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.4.0",
-        "@typescript-eslint/visitor-keys": "5.4.0"
+        "@typescript-eslint/types": "5.5.0",
+        "@typescript-eslint/visitor-keys": "5.5.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.4.0.tgz",
-      "integrity": "sha512-GjXNpmn+n1LvnttarX+sPD6+S7giO+9LxDIGlRl4wK3a7qMWALOHYuVSZpPTfEIklYjaWuMtfKdeByx0AcaThA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.5.0.tgz",
+      "integrity": "sha512-OaYTqkW3GnuHxqsxxJ6KypIKd5Uw7bFiQJZRyNi1jbMJnK3Hc/DR4KwB6KJj6PBRkJJoaNwzMNv9vtTk87JhOg==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.4.0.tgz",
-      "integrity": "sha512-nhlNoBdhKuwiLMx6GrybPT3SFILm5Gij2YBdPEPFlYNFAXUJWX6QRgvi/lwVoadaQEFsizohs6aFRMqsXI2ewA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.5.0.tgz",
+      "integrity": "sha512-pVn8btYUiYrjonhMAO0yG8lm7RApzy2L4RC7Td/mC/qFkyf6vRbGyZozoA94+w6D2Y2GRqpMoCWcwx/EUOzyoQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.4.0",
-        "@typescript-eslint/visitor-keys": "5.4.0",
+        "@typescript-eslint/types": "5.5.0",
+        "@typescript-eslint/visitor-keys": "5.5.0",
         "debug": "^4.3.2",
         "globby": "^11.0.4",
         "is-glob": "^4.0.3",
@@ -6603,12 +6609,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.4.0.tgz",
-      "integrity": "sha512-PVbax7MeE7tdLfW5SA0fs8NGVVr+buMPrcj+CWYWPXsZCH8qZ1THufDzbXm1xrZ2b2PA1iENJ0sRq5fuUtvsJg==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.5.0.tgz",
+      "integrity": "sha512-4GzJ1kRtsWzHhdM40tv0ZKHNSbkDhF0Woi/TDwVJX6UICwJItvP7ZTXbjTkCdrors7ww0sYe0t+cIKDAJwZ7Kw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.4.0",
+        "@typescript-eslint/types": "5.5.0",
         "eslint-visitor-keys": "^3.0.0"
       }
     },
@@ -7325,9 +7331,9 @@
       "dev": true
     },
     "diff-sequences": {
-      "version": "27.0.6",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.0.6.tgz",
-      "integrity": "sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ=="
+      "version": "27.4.0",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.4.0.tgz",
+      "integrity": "sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww=="
     },
     "dir-glob": {
       "version": "3.0.1",
@@ -8286,6 +8292,11 @@
       "integrity": "sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+    },
     "immutable-json-patch": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/immutable-json-patch/-/immutable-json-patch-1.1.2.tgz",
@@ -9100,9 +9111,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
-      "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.0.tgz",
+      "integrity": "sha512-FM/zAKgWTxj40rH03VxzIPdXmj39SwSjwG0heUcNFwI+EMZJnY93yAiKXM3dObIKAM5TA88werc8T/EwhB45eg==",
       "dev": true
     },
     "prettier-plugin-svelte": {
@@ -9355,9 +9366,9 @@
       }
     },
     "rollup": {
-      "version": "2.59.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.59.0.tgz",
-      "integrity": "sha512-l7s90JQhCQ6JyZjKgo7Lq1dKh2RxatOM+Jr6a9F7WbS9WgKbocyUSeLmZl8evAse7y96Ae98L2k1cBOwWD8nHw==",
+      "version": "2.60.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.60.2.tgz",
+      "integrity": "sha512-1Bgjpq61sPjgoZzuiDSGvbI1tD91giZABgjCQBKM5aYLnzjq52GoDuWVwT/cm/MCxCMPU8gqQvkj8doQ5C8Oqw==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -9461,11 +9472,12 @@
       }
     },
     "sass": {
-      "version": "1.43.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.43.4.tgz",
-      "integrity": "sha512-/ptG7KE9lxpGSYiXn7Ar+lKOv37xfWsZRtFYal2QHNigyVQDx685VFT/h7ejVr+R8w7H4tmUgtulsKl5YpveOg==",
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.44.0.tgz",
+      "integrity": "sha512-0hLREbHFXGQqls/K8X+koeP+ogFRPF4ZqetVB19b7Cst9Er8cOR0rc6RU7MaI4W1JmUShd1BPgPoeqmmgMMYFw==",
       "requires": {
-        "chokidar": ">=3.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0"
       }
     },
     "semver": {
@@ -9828,9 +9840,9 @@
       }
     },
     "svelte-select": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-4.4.5.tgz",
-      "integrity": "sha512-TvBA5ZHY8ULaiwCgXGpslf/3iSfGOsyGEFDjIUefSnwD6I+rKwoBKfMRAN34G1oaLD/vUHV1lhUWDhMlomTHjQ=="
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-4.4.6.tgz",
+      "integrity": "sha512-AcWNfakmr8dBFH77MSlTskfrYGYP6BRBv/QpPb+59Tag8OQ6/JBXf0r0S0+U18/1JNXtXHJUMaQqRSLfaOtyIA=="
     },
     "svelte-simple-modal": {
       "version": "1.1.1",
diff --git a/package.json b/package.json
index f8d9e972..1644056d 100644
--- a/package.json
+++ b/package.json
@@ -32,16 +32,16 @@
     "ace-builds": "^1.4.13",
     "ajv": "^8.8.2",
     "classnames": "^2.3.1",
-    "diff-sequences": "^27.0.6",
+    "diff-sequences": "^27.4.0",
     "immutable-json-patch": "^1.1.2",
     "jmespath": "^0.15.0",
     "json-source-map": "^0.6.1",
     "jsonrepair": "^2.2.1",
     "lodash-es": "^4.17.21",
     "natural-compare-lite": "^1.4.0",
-    "sass": "^1.43.4",
+    "sass": "^1.44.0",
     "svelte-awesome": "^2.4.2",
-    "svelte-select": "^4.4.5",
+    "svelte-select": "^4.4.6",
     "svelte-simple-modal": "^1.1.1",
     "vanilla-picker": "^2.12.1"
   },
@@ -52,20 +52,20 @@
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "13.0.6",
     "@rollup/plugin-typescript": "8.3.0",
-    "@sveltejs/kit": "1.0.0-next.199",
+    "@sveltejs/kit": "1.0.0-next.201",
     "@types/cookie": "0.4.1",
     "@types/lodash-es": "4.17.5",
     "@types/mocha": "9.0.0",
-    "@typescript-eslint/eslint-plugin": "5.4.0",
-    "@typescript-eslint/parser": "5.4.0",
+    "@typescript-eslint/eslint-plugin": "5.5.0",
+    "@typescript-eslint/parser": "5.5.0",
     "eslint": "8.3.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-svelte3": "3.2.1",
     "husky": "7.0.4",
     "mocha": "9.1.3",
-    "prettier": "2.4.1",
+    "prettier": "2.5.0",
     "prettier-plugin-svelte": "2.5.0",
-    "rollup": "2.59.0",
+    "rollup": "2.60.2",
     "rollup-plugin-svelte": "7.1.0",
     "rollup-plugin-terser": "7.0.2",
     "standard-version": "9.3.2",
diff --git a/src/lib/components/JSONEditor.svelte b/src/lib/components/JSONEditor.svelte
index b4f1e866..d573a47e 100644
--- a/src/lib/components/JSONEditor.svelte
+++ b/src/lib/components/JSONEditor.svelte
@@ -11,6 +11,7 @@
   import CodeMode from './modes/codemode/CodeMode.svelte'
   import TreeMode from './modes/treemode/TreeMode.svelte'
   import { javascriptQueryLanguage } from '../plugins/query/javascriptQueryLanguage.js'
+  import { renderValue } from '$lib/plugins/value/renderValue'
 
   // TODO: document how to enable debugging in the readme: localStorage.debug="jsoneditor:*", then reload
   const debug = createDebug('jsoneditor:Main')
@@ -46,6 +47,9 @@
   /** @type {((content: Content, previousContent: Content, patchResult: JSONPatchResult | null) => void) | null} */
   export let onChange = null
 
+  /** @type {(props: RenderValueProps) => RenderValueConstructor[]} */
+  export let onRenderValue = renderValue
+
   export let onClassName = () => {
     // no op by default
   }
@@ -297,7 +301,6 @@
             {readOnly}
             {indentation}
             {mainMenuBar}
-            {navigationBar}
             {validator}
             {queryLanguages}
             {queryLanguageId}
@@ -325,6 +328,7 @@
             {onError}
             onChange={handleChange}
             onRequestRepair={handleRequestRepair}
+            {onRenderValue}
             {onClassName}
             onFocus={handleFocus}
             onBlur={handleBlur}
diff --git a/src/lib/components/modes/treemode/value/EditableDiv.scss b/src/lib/components/controls/EditableDiv.scss
similarity index 89%
rename from src/lib/components/modes/treemode/value/EditableDiv.scss
rename to src/lib/components/controls/EditableDiv.scss
index 1ee3070b..381e4fdd 100644
--- a/src/lib/components/modes/treemode/value/EditableDiv.scss
+++ b/src/lib/components/controls/EditableDiv.scss
@@ -1,5 +1,5 @@
-@import '../../../../styles';
-@import '../shared.scss';
+@import '../../styles';
+@import './EditableDivShared';
 
 // for key and value
 div.jse-editable-div {
@@ -11,6 +11,7 @@ div.jse-editable-div {
   outline: none;
   border-radius: 1px;
   vertical-align: top;
+  overflow-wrap: anywhere;
 
   &[contenteditable='true'] {
     outline: 2px solid $edit-border-color;
diff --git a/src/lib/components/modes/treemode/value/EditableDiv.svelte b/src/lib/components/controls/EditableDiv.svelte
similarity index 94%
rename from src/lib/components/modes/treemode/value/EditableDiv.svelte
rename to src/lib/components/controls/EditableDiv.svelte
index dba57b38..ff3f718b 100644
--- a/src/lib/components/modes/treemode/value/EditableDiv.svelte
+++ b/src/lib/components/controls/EditableDiv.svelte
@@ -4,10 +4,10 @@
   import { onDestroy, onMount } from 'svelte'
   import { getPlainText, setCursorToEnd, setPlainText } from '$lib/utils/domUtils'
   import { keyComboFromEvent } from '$lib/utils/keyBindings'
-  import { createDebug } from '../../../../utils/debug'
+  import { createDebug } from '$lib/utils/debug'
   import { noop } from 'lodash-es'
 
-  const debug = createDebug('jsoneditor:ValueEditor')
+  const debug = createDebug('jsoneditor:EditableDiv')
 
   export let value
   export let onChange
diff --git a/src/lib/components/modes/treemode/shared.scss b/src/lib/components/controls/EditableDivShared.scss
similarity index 93%
rename from src/lib/components/modes/treemode/shared.scss
rename to src/lib/components/controls/EditableDivShared.scss
index 982f96f2..f4141f7b 100644
--- a/src/lib/components/modes/treemode/shared.scss
+++ b/src/lib/components/controls/EditableDivShared.scss
@@ -1,4 +1,4 @@
-@import '../../../styles';
+@import '../../styles';
 
 .value {
   &.string {
diff --git a/src/lib/components/modals/Header.scss b/src/lib/components/modals/Header.scss
index 537cd3de..5dd81129 100644
--- a/src/lib/components/modals/Header.scss
+++ b/src/lib/components/modals/Header.scss
@@ -11,8 +11,7 @@
     vertical-align: middle;
   }
 
-  button.config,
-  button.close {
+  button {
     border: none;
     background: transparent;
     min-width: 32px;
diff --git a/src/lib/components/modes/treemode/JSONKey.scss b/src/lib/components/modes/treemode/JSONKey.scss
index abd91072..b4d2fc97 100644
--- a/src/lib/components/modes/treemode/JSONKey.scss
+++ b/src/lib/components/modes/treemode/JSONKey.scss
@@ -1,5 +1,4 @@
 @import '../../../styles';
-@import 'shared';
 
 .key {
   display: inline-block;
diff --git a/src/lib/components/modes/treemode/JSONKey.svelte b/src/lib/components/modes/treemode/JSONKey.svelte
index 1e1922d9..6f930ccf 100644
--- a/src/lib/components/modes/treemode/JSONKey.svelte
+++ b/src/lib/components/modes/treemode/JSONKey.svelte
@@ -2,10 +2,10 @@
 
 <script>
   import classnames from 'classnames'
-  import { isEqual } from 'lodash-es'
+  import { initial } from 'lodash-es'
   import { SELECTION_TYPE } from '$lib/logic/selection'
   import SearchResultHighlighter from './highlight/SearchResultHighlighter.svelte'
-  import EditableDiv from './value/EditableDiv.svelte'
+  import EditableDiv from '../../controls/EditableDiv.svelte'
 
   export let path
   export let key
@@ -15,8 +15,7 @@
   export let onSelect
   export let searchResult
 
-  $: selectedKey =
-    selection && selection.type === SELECTION_TYPE.KEY ? isEqual(selection.focusPath, path) : false
+  $: selectedKey = selection && selection.type === SELECTION_TYPE.KEY
   $: editKey = !readOnly && selectedKey && selection && selection.edit === true
 
   function handleKeyDoubleClick(event) {
@@ -33,9 +32,10 @@
   }
 
   function handleChangeValue(newKey) {
-    onUpdateKey(key, newKey)
+    const updatedKey = onUpdateKey(key, newKey)
+    const updatedPath = initial(path).concat(updatedKey)
 
-    onSelect({ type: SELECTION_TYPE.KEY, path, next: true })
+    onSelect({ type: SELECTION_TYPE.KEY, path: updatedPath, next: true })
   }
 
   function handleCancelChange() {
diff --git a/src/lib/components/modes/treemode/JSONNode.svelte b/src/lib/components/modes/treemode/JSONNode.svelte
index 45e6b310..84b3f28c 100644
--- a/src/lib/components/modes/treemode/JSONNode.svelte
+++ b/src/lib/components/modes/treemode/JSONNode.svelte
@@ -17,6 +17,7 @@
     STATE_KEYS,
     STATE_SEARCH_PROPERTY,
     STATE_SEARCH_VALUE,
+    STATE_SELECTION,
     STATE_VISIBLE_SECTIONS,
     VALIDATION_ERROR
   } from '$lib/constants'
@@ -49,6 +50,7 @@
   export let onExpand
   export let onSelect
   export let onPasteJson
+  export let onRenderValue
   export let onContextMenu
   export let onClassName
   export let onDrag
@@ -59,27 +61,14 @@
 
   export let selection
 
-  // TODO: this is not efficient. Create a nested object with the selection and pass that
-  $: selected =
-    selection && selection.pathsMap ? selection.pathsMap[compileJSONPointer(path)] === true : false
+  // TODO: it is ugly to have to translate selection into selectionObj, and not accidentally use the wrong one. Is there an other way?
+  $: selectionObj = selection && selection[STATE_SELECTION]
 
-  $: selectedAfter =
-    selection && selection.type === SELECTION_TYPE.AFTER
-      ? isEqual(selection.focusPath, path)
-      : false
-
-  $: selectedInside =
-    selection && selection.type === SELECTION_TYPE.INSIDE
-      ? isEqual(selection.focusPath, path)
-      : false
-
-  $: selectedKey =
-    selection && selection.type === SELECTION_TYPE.KEY ? isEqual(selection.focusPath, path) : false
-
-  $: selectedValue =
-    selection && selection.type === SELECTION_TYPE.VALUE
-      ? isEqual(selection.focusPath, path)
-      : false
+  $: selected = !!(selectionObj && selectionObj.pathsMap)
+  $: selectedAfter = !!(selectionObj && selectionObj.type === SELECTION_TYPE.AFTER)
+  $: selectedInside = !!(selectionObj && selectionObj.type === SELECTION_TYPE.INSIDE)
+  $: selectedKey = !!(selectionObj && selectionObj.type === SELECTION_TYPE.KEY)
+  $: selectedValue = !!(selectionObj && selectionObj.type === SELECTION_TYPE.VALUE)
 
   $: expanded = state[STATE_EXPANDED]
   $: visibleSections = state[STATE_VISIBLE_SECTIONS]
@@ -130,8 +119,12 @@
 
     const anchorType = getSelectionTypeFromTarget(event.target)
 
-    // when right clicking inside the current selection, do nothing
-    if (event.button === 2 && selection && isPathInsideSelection(selection, path, anchorType)) {
+    // when right-clicking inside the current selection, do nothing
+    if (
+      event.button === 2 &&
+      selectionObj &&
+      isPathInsideSelection(selectionObj, path, anchorType)
+    ) {
       return
     }
 
@@ -146,7 +139,7 @@
       // Shift+Click will select multiple entries
       onSelect({
         type: SELECTION_TYPE.MULTI,
-        anchorPath: selection.anchorPath,
+        anchorPath: selectionObj.anchorPath,
         focusPath: path
       })
     } else {
@@ -313,7 +306,7 @@
             {/if}
           </div>
         </div>
-        {#if !readOnly && selection && (selection.type === SELECTION_TYPE.VALUE || selection.type === SELECTION_TYPE.MULTI) && !selection.edit && isEqual(selection.focusPath, path)}
+        {#if !readOnly && selectionObj && (selectionObj.type === SELECTION_TYPE.VALUE || selectionObj.type === SELECTION_TYPE.MULTI) && !selectionObj.edit && isEqual(selectionObj.focusPath, path)}
           <div class="context-menu-button-anchor">
             <ContextMenuButton selected={true} {onContextMenu} />
           </div>
@@ -359,24 +352,25 @@
               value={item}
               path={path.concat(visibleSection.start + itemIndex)}
               state={state[visibleSection.start + itemIndex]}
-              {readOnly}
+              selection={selection ? selection[visibleSection.start + itemIndex] : undefined}
               searchResult={searchResult
                 ? searchResult[visibleSection.start + itemIndex]
                 : undefined}
               validationErrors={validationErrors
                 ? validationErrors[visibleSection.start + itemIndex]
                 : undefined}
+              {readOnly}
               {onPatch}
               {onInsert}
               {onExpand}
               {onSelect}
               {onPasteJson}
               {onExpandSection}
+              {onRenderValue}
               {onContextMenu}
               {onClassName}
               {onDrag}
               {onDragEnd}
-              {selection}
             >
               <div slot="identifier" class="identifier">
                 <div class="index">{visibleSection.start + itemIndex}</div>
@@ -390,7 +384,7 @@
               total={value.length}
               {path}
               {onExpandSection}
-              {selection}
+              selection={selectionObj}
             />
           {/if}
         {/each}
@@ -440,7 +434,7 @@
             {/if}
           </div>
         </div>
-        {#if !readOnly && selection && (selection.type === SELECTION_TYPE.VALUE || selection.type === SELECTION_TYPE.MULTI) && !selection.edit && isEqual(selection.focusPath, path)}
+        {#if !readOnly && selectionObj && (selectionObj.type === SELECTION_TYPE.VALUE || selectionObj.type === SELECTION_TYPE.MULTI) && !selectionObj.edit && isEqual(selectionObj.focusPath, path)}
           <div class="context-menu-button-anchor">
             <ContextMenuButton selected={true} {onContextMenu} />
           </div>
@@ -485,38 +479,37 @@
             value={value[key]}
             path={path.concat(key)}
             state={state[key]}
-            {readOnly}
+            selection={selection ? selection[key] : undefined}
             searchResult={searchResult ? searchResult[key] : undefined}
             validationErrors={validationErrors ? validationErrors[key] : undefined}
+            {readOnly}
             {onPatch}
             {onInsert}
             {onExpand}
             {onSelect}
             {onPasteJson}
             {onExpandSection}
+            {onRenderValue}
             {onContextMenu}
             {onClassName}
             {onDrag}
             {onDragEnd}
-            {selection}
           >
             <div slot="identifier" class="identifier">
               <JSONKey
                 path={path.concat(key)}
                 {key}
                 {readOnly}
+                selection={selection?.[key]?.[STATE_SELECTION]}
+                searchResult={searchResult?.[key]?.[STATE_SEARCH_PROPERTY]}
                 onUpdateKey={handleUpdateKey}
-                {selection}
                 {onSelect}
-                searchResult={searchResult
-                  ? getIn(searchResult, [key, STATE_SEARCH_PROPERTY])
-                  : undefined}
               />
-              {#if !readOnly && selection && selection.type === SELECTION_TYPE.KEY && !selection.edit && isEqual(selection.focusPath, path.concat(key))}
+              {#if !readOnly && selectionObj && selectionObj.type === SELECTION_TYPE.KEY && !selectionObj.edit && isEqual(selectionObj.focusPath, path.concat(key))}
                 <ContextMenuButton selected={true} {onContextMenu} />
               {/if}
-            </div></svelte:self
-          >
+            </div>
+          </svelte:self>
         {/each}
       </div>
       <div class="footer-outer" style={indentationStyle}>
@@ -543,13 +536,14 @@
           {path}
           {value}
           {readOnly}
+          selection={selectionObj}
+          searchResult={searchResult ? searchResult[STATE_SEARCH_VALUE] : undefined}
           {onPatch}
-          {selection}
           {onSelect}
           {onPasteJson}
-          searchResult={searchResult ? searchResult[STATE_SEARCH_VALUE] : undefined}
+          {onRenderValue}
         />
-        {#if !readOnly && selection && (selection.type === SELECTION_TYPE.VALUE || selection.type === SELECTION_TYPE.MULTI) && !selection.edit && isEqual(selection.focusPath, path)}
+        {#if !readOnly && selectionObj && (selectionObj.type === SELECTION_TYPE.VALUE || selectionObj.type === SELECTION_TYPE.MULTI) && !selectionObj.edit && isEqual(selectionObj.focusPath, path)}
           <div class="context-menu-button-anchor">
             <ContextMenuButton selected={true} {onContextMenu} />
           </div>
diff --git a/src/lib/components/modes/treemode/JSONValue.svelte b/src/lib/components/modes/treemode/JSONValue.svelte
index d550feca..4f73a99a 100644
--- a/src/lib/components/modes/treemode/JSONValue.svelte
+++ b/src/lib/components/modes/treemode/JSONValue.svelte
@@ -1,141 +1,43 @@
 <svelte:options immutable={true} />
 
 <script>
-  import classnames from 'classnames'
+  import { SELECTION_TYPE } from '$lib/logic/selection.js'
   import { isEqual } from 'lodash-es'
-  import { SELECTION_TYPE } from '$lib/logic/selection'
-  import {
-    isBoolean,
-    isColor,
-    isObjectOrArray,
-    isTimestamp,
-    isUrl,
-    stringConvert,
-    valueType
-  } from '$lib/utils/typeUtils'
-  import BooleanToggle from './value/BooleanToggle.svelte'
-  import Timestamp from './value/Timestamp.svelte'
-  import Color from './value/Color.svelte'
-  import EditableDiv from './value/EditableDiv.svelte'
-  import SearchResultHighlighter from './highlight/SearchResultHighlighter.svelte'
-  import { compileJSONPointer } from 'immutable-json-patch'
-  import { escapeHTML } from '$lib/utils/domUtils'
 
   export let path
   export let value
   export let readOnly
-  export let onPatch
   export let selection
-  export let onSelect
-  export let onPasteJson
 
   /** @type {SearchResultItem | undefined} */
   export let searchResult
 
-  $: selectedValue =
+  export let onPatch
+  export let onPasteJson
+  export let onSelect
+  export let onRenderValue
+
+  $: isSelected =
     selection && selection.type === SELECTION_TYPE.VALUE
       ? isEqual(selection.focusPath, path)
       : false
-  $: editValue = !readOnly && selectedValue && selection && selection.edit === true
-  $: valueIsUrl = isUrl(value)
-
-  function getValueClass(value) {
-    const type = valueType(value)
-
-    return classnames(SELECTION_TYPE.VALUE, type, {
-      url: isUrl(value),
-      empty: typeof value === 'string' && value.length === 0
-    })
-  }
-
-  function handleValueClick(event) {
-    if (valueIsUrl && event.ctrlKey) {
-      event.preventDefault()
-      event.stopPropagation()
 
-      window.open(value, '_blank')
-    }
-  }
-
-  function handleValueDoubleClick(event) {
-    if (!readOnly && !editValue) {
-      event.preventDefault()
-      onSelect({ type: SELECTION_TYPE.VALUE, path, edit: true })
-    }
-  }
-
-  function handleChangeValue(newValue) {
-    onPatch([
-      {
-        op: 'replace',
-        path: compileJSONPointer(path),
-        value: stringConvert(newValue) // TODO: implement support for type "string"
-      }
-    ])
-
-    onSelect({ type: SELECTION_TYPE.VALUE, path, nextInside: true })
-  }
-
-  function handleCancelChange() {
-    onSelect({ type: SELECTION_TYPE.VALUE, path })
-  }
-
-  function handlePaste(pastedText) {
-    try {
-      const pastedJson = JSON.parse(pastedText)
-      if (isObjectOrArray(pastedJson)) {
-        onPasteJson({
-          path,
-          contents: pastedJson
-        })
-      }
-    } catch (err) {
-      // silently ignore: thee pasted text is no valid JSON object or array,
-      // no need to do anything
-    }
-  }
-
-  function handleOnValueClass(value) {
-    return getValueClass(stringConvert(value))
-  }
+  $: isEditing = !readOnly && isSelected && selection && selection.edit === true
+
+  $: renderers = onRenderValue({
+    path,
+    value,
+    readOnly,
+    isSelected,
+    isEditing,
+    selection,
+    searchResult,
+    onPatch,
+    onPasteJson,
+    onSelect
+  })
 </script>
 
-{#if editValue}
-  <EditableDiv
-    {value}
-    onChange={handleChangeValue}
-    onCancel={handleCancelChange}
-    onPaste={handlePaste}
-    onValueClass={handleOnValueClass}
-  />
-{:else}
-  <!-- TODO: create an API to customize rendering of a value -->
-
-  {#if isBoolean(value)}
-    <BooleanToggle {path} {value} {onPatch} />
-  {/if}
-  {#if isColor(value)}
-    <Color {path} {value} {onPatch} {readOnly} />
-  {/if}
-
-  <div
-    data-type="selectable-value"
-    class={getValueClass(value)}
-    on:click={handleValueClick}
-    on:dblclick={handleValueDoubleClick}
-    title={valueIsUrl ? 'Ctrl+Click or Ctrl+Enter to open url in new window' : null}
-  >
-    {#if searchResult}
-      <SearchResultHighlighter text={String(value)} {searchResult} />
-    {:else}
-      {escapeHTML(value)}
-    {/if}
-  </div>
-
-  <!-- TODO: create an API to customize rendering of a value -->
-  {#if isTimestamp(value)}
-    <Timestamp {value} />
-  {/if}
-{/if}
-
-<style src="./JSONValue.scss"></style>
+{#each renderers as renderer}
+  <svelte:component this={renderer.component} {...renderer.props} />
+{/each}
diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
index 5c203bfb..f958b36e 100644
--- a/src/lib/components/modes/treemode/TreeMode.svelte
+++ b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -52,6 +52,7 @@
     updateSearchResult
   } from '$lib/logic/search'
   import {
+    createRecursiveSelection,
     createSelection,
     createSelectionFromOperations,
     findRootPath,
@@ -130,6 +131,9 @@
 
   /** @type {(content: Content, previousContent: Content, patchResult: JSONPatchResult | null) => void} */
   export let onChange
+
+  /** @type {(props: RenderValueProps) => RenderValueConstructor[]} */
+  export let onRenderValue
   export let onRequestRepair = () => {}
   export let onRenderMenu = () => {}
 
@@ -169,6 +173,8 @@
 
   let selection = null
 
+  $: recursiveSelection = createRecursiveSelection(json, selection)
+
   let pastedJson
 
   function defaultExpand(path) {
@@ -1918,20 +1924,21 @@
           value={json}
           path={[]}
           {state}
-          {readOnly}
+          selection={recursiveSelection}
           searchResult={searchResult && searchResult.itemsWithActive}
           {validationErrors}
+          {readOnly}
           onPatch={handlePatch}
           onInsert={handleInsert}
           onExpand={handleExpand}
           onSelect={handleSelect}
           onPasteJson={handlePasteJson}
           onExpandSection={handleExpandSection}
+          {onRenderValue}
           onContextMenu={openContextMenu}
           onClassName={onClassName || noop}
           onDrag={autoScrollHandler.onDrag}
           onDragEnd={autoScrollHandler.onDragEnd}
-          {selection}
         />
       </div>
 
diff --git a/src/lib/constants.js b/src/lib/constants.js
index c5849fda..3b06dc49 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -9,6 +9,7 @@ export const STATE_VISIBLE_SECTIONS = Symbol('visible sections')
 export const STATE_KEYS = Symbol('keys')
 export const STATE_SEARCH_PROPERTY = Symbol('search:property')
 export const STATE_SEARCH_VALUE = Symbol('search:value')
+export const STATE_SELECTION = Symbol('selection')
 export const VALIDATION_ERROR = Symbol('validation:error')
 
 export const SCROLL_DURATION = 300 // ms
diff --git a/src/lib/index.js b/src/lib/index.js
index d11ed906..2ebb6228 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1,11 +1,29 @@
 import _JSONEditor from './components/JSONEditor.svelte'
 import _SortModal from './components/modals/SortModal.svelte'
 import _TransformModal from './components/modals/TransformModal.svelte'
+import _BooleanToggle from './plugins/value/components/BooleanToggle.svelte'
+import _ColorPicker from './plugins/value/components/ColorPicker.svelte'
+import _EditableValue from './plugins/value/components/EditableValue.svelte'
+import _EnumValue from './plugins/value/components/EnumValue.svelte'
+import _ReadonlyValue from './plugins/value/components/ReadonlyValue.svelte'
+import _TimestampTag from './plugins/value/components/TimestampTag.svelte'
 
 export const JSONEditor = _JSONEditor
 
-// plugins
-export { createAjvValidator } from './plugins/createAjvValidator.js'
+// value plugins
+export { renderValue } from './plugins/value/renderValue.js'
+export { renderJSONSchemaEnum } from './plugins/value/renderJSONSchemaEnum.js'
+export const BooleanToggle = _BooleanToggle
+export const ColorPicker = _ColorPicker
+export const EditableValue = _EditableValue
+export const EnumValue = _EnumValue
+export const ReadonlyValue = _ReadonlyValue
+export const TimestampTag = _TimestampTag
+
+// validator plugins
+export { createAjvValidator } from './plugins/validator/createAjvValidator.js'
+
+// query plugins
 export { lodashQueryLanguage } from './plugins/query/lodashQueryLanguage.js'
 export { javascriptQueryLanguage } from './plugins/query/javascriptQueryLanguage.js'
 export { jmespathQueryLanguage } from './plugins/query/jmespathQueryLanguage.js'
@@ -13,6 +31,7 @@ export { jmespathQueryLanguage } from './plugins/query/jmespathQueryLanguage.js'
 // utils
 export const SortModal = _SortModal
 export const TransformModal = _TransformModal
+export { getJSONSchemaOptions, findSchema, findEnum } from './utils/jsonSchemaUtils.js'
 export { parseJSONPointerWithArrayIndices } from './utils/jsonPointer.js'
 export {
   parseJSONPointer,
diff --git a/src/lib/logic/selection.js b/src/lib/logic/selection.js
index 6806cf03..6f255b33 100644
--- a/src/lib/logic/selection.js
+++ b/src/lib/logic/selection.js
@@ -1,6 +1,6 @@
-import { compileJSONPointer, getIn, setIn } from 'immutable-json-patch'
+import { compileJSONPointer, existsIn, getIn, setIn } from 'immutable-json-patch'
 import { first, initial, isEmpty, isEqual, last } from 'lodash-es'
-import { STATE_EXPANDED, STATE_KEYS } from '../constants.js'
+import { STATE_EXPANDED, STATE_KEYS, STATE_SELECTION } from '../constants.js'
 import { parseJSONPointerWithArrayIndices } from '../utils/jsonPointer.js'
 import { isObject, isObjectOrArray } from '../utils/typeUtils.js'
 import {
@@ -793,6 +793,38 @@ export function selectionToPartialJson(json, selection, indentation = 2) {
   return null
 }
 
+/**
+ * @param {JSON} referenceJson
+ * @param {Selection} selection
+ * @returns {{} | null}
+ */
+// TODO: write unit tests
+export function createRecursiveSelection(referenceJson, selection) {
+  if (!selection) {
+    return null
+  }
+
+  let result = {}
+
+  const paths = selection.type === SELECTION_TYPE.MULTI ? selection.paths : [selection.focusPath]
+
+  paths.forEach((path) => {
+    const selectionPath = path.concat(STATE_SELECTION)
+
+    // when the path is an array, we'll add a symbol on the array, but then
+    // setIn has no information to determine whether to create an array or an
+    // object, so we do that here explicitly based on referenceJson
+    if (!existsIn(result, selectionPath)) {
+      const item = getIn(referenceJson, selectionPath)
+      result = setIn(result, selectionPath, Array.isArray(item) ? [] : {}, true)
+    }
+
+    result = setIn(result, selectionPath, selection, true)
+  })
+
+  return result
+}
+
 /**
  * Create a selection which selects the whole document
  * @returns {Selection}
diff --git a/src/lib/plugins/createAjvValidator.js b/src/lib/plugins/validator/createAjvValidator.js
similarity index 91%
rename from src/lib/plugins/createAjvValidator.js
rename to src/lib/plugins/validator/createAjvValidator.js
index 1be8d5ff..879ae953 100644
--- a/src/lib/plugins/createAjvValidator.js
+++ b/src/lib/plugins/validator/createAjvValidator.js
@@ -1,10 +1,10 @@
 import Ajv from 'ajv'
-import { parseJSONPointerWithArrayIndices } from '../utils/jsonPointer.js'
+import { parseJSONPointerWithArrayIndices } from '../../utils/jsonPointer.js'
 
 /**
  * Create a JSON Schema validator powered by Ajv.
  * @param {JSON} schema
- * @param {Object} [schemaRefs=undefined]  An object containing JSON Schema references
+ * @param {JSON} [schemaRefs=undefined]  An object containing JSON Schema references
  * @return {function (json: JSON) : Array<Object>} Returns a valiation function
  */
 export function createAjvValidator(schema, schemaRefs) {
diff --git a/src/lib/plugins/createAjvValidator.test.js b/src/lib/plugins/validator/createAjvValidator.test.js
similarity index 100%
rename from src/lib/plugins/createAjvValidator.test.js
rename to src/lib/plugins/validator/createAjvValidator.test.js
diff --git a/src/lib/components/modes/treemode/value/BooleanToggle.scss b/src/lib/plugins/value/components/BooleanToggle.scss
similarity index 79%
rename from src/lib/components/modes/treemode/value/BooleanToggle.scss
rename to src/lib/plugins/value/components/BooleanToggle.scss
index be59414f..34bc342a 100644
--- a/src/lib/components/modes/treemode/value/BooleanToggle.scss
+++ b/src/lib/plugins/value/components/BooleanToggle.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles';
+@import '../../../styles';
 
 .boolean-toggle {
   color: $value-color-boolean;
diff --git a/src/lib/components/modes/treemode/value/BooleanToggle.svelte b/src/lib/plugins/value/components/BooleanToggle.svelte
similarity index 92%
rename from src/lib/components/modes/treemode/value/BooleanToggle.svelte
rename to src/lib/plugins/value/components/BooleanToggle.svelte
index 74d89287..74a5b6be 100644
--- a/src/lib/components/modes/treemode/value/BooleanToggle.svelte
+++ b/src/lib/plugins/value/components/BooleanToggle.svelte
@@ -5,13 +5,18 @@
   import { compileJSONPointer } from 'immutable-json-patch'
   import Icon from 'svelte-awesome'
 
-  export let onPatch
   export let path
   export let value
+  export let readOnly
+  export let onPatch
 
   function toggleBooleanValue(event) {
     event.stopPropagation()
 
+    if (readOnly) {
+      return
+    }
+
     onPatch(
       [
         {
diff --git a/src/lib/components/modes/treemode/value/Color.scss b/src/lib/plugins/value/components/ColorPicker.scss
similarity index 90%
rename from src/lib/components/modes/treemode/value/Color.scss
rename to src/lib/plugins/value/components/ColorPicker.scss
index 07db5e48..0db74bb7 100644
--- a/src/lib/components/modes/treemode/value/Color.scss
+++ b/src/lib/plugins/value/components/ColorPicker.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles';
+@import '../../../styles';
 
 .jse-color {
   $margin: 2px;
diff --git a/src/lib/components/modes/treemode/value/Color.svelte b/src/lib/plugins/value/components/ColorPicker.svelte
similarity index 89%
rename from src/lib/components/modes/treemode/value/Color.svelte
rename to src/lib/plugins/value/components/ColorPicker.svelte
index 867dec0c..2e786aaf 100644
--- a/src/lib/components/modes/treemode/value/Color.svelte
+++ b/src/lib/plugins/value/components/ColorPicker.svelte
@@ -1,16 +1,18 @@
+<svelte:options immutable={true} />
+
 <script>
   import { getColorCSS } from '$lib/utils/typeUtils'
   import { getWindow } from '$lib/utils/domUtils'
   import { compileJSONPointer } from 'immutable-json-patch'
   import { getContext } from 'svelte'
-  import ColorPickerPopup from '../../../../components/controls/ColorPickerPopup.svelte'
+  import ColorPickerPopup from '../../../components/controls/ColorPickerPopup.svelte'
 
   const { openAbsolutePopup } = getContext('absolute-popup')
 
-  export let onPatch
   export let path
   export let value
   export let readOnly
+  export let onPatch
 
   $: color = getColorCSS(value)
 
@@ -64,4 +66,4 @@
   on:click={openColorPicker}
 />
 
-<style src="./Color.scss"></style>
+<style src="./ColorPicker.scss"></style>
diff --git a/src/lib/plugins/value/components/EditableValue.svelte b/src/lib/plugins/value/components/EditableValue.svelte
new file mode 100644
index 00000000..0cef3804
--- /dev/null
+++ b/src/lib/plugins/value/components/EditableValue.svelte
@@ -0,0 +1,58 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { compileJSONPointer } from 'immutable-json-patch'
+  import { isObjectOrArray, stringConvert } from '$lib/utils/typeUtils'
+  import { SELECTION_TYPE } from '$lib/logic/selection'
+  import { getValueClass } from '$lib/plugins/value/components/utils/getValueClass'
+  import EditableDiv from '../../../components/controls/EditableDiv.svelte'
+
+  export let path
+  export let value
+  export let onPatch
+  export let onPasteJson
+  export let onSelect
+
+  function handleChangeValue(newValue) {
+    onPatch([
+      {
+        op: 'replace',
+        path: compileJSONPointer(path),
+        value: stringConvert(newValue) // TODO: implement support for type "string"
+      }
+    ])
+
+    onSelect({ type: SELECTION_TYPE.VALUE, path, nextInside: true })
+  }
+
+  function handleCancelChange() {
+    onSelect({ type: SELECTION_TYPE.VALUE, path })
+  }
+
+  function handlePaste(pastedText) {
+    try {
+      const pastedJson = JSON.parse(pastedText)
+      if (isObjectOrArray(pastedJson)) {
+        onPasteJson({
+          path,
+          contents: pastedJson
+        })
+      }
+    } catch (err) {
+      // silently ignore: thee pasted text is no valid JSON object or array,
+      // no need to do anything
+    }
+  }
+
+  function handleOnValueClass(value) {
+    return getValueClass(stringConvert(value))
+  }
+</script>
+
+<EditableDiv
+  {value}
+  onChange={handleChangeValue}
+  onCancel={handleCancelChange}
+  onPaste={handlePaste}
+  onValueClass={handleOnValueClass}
+/>
diff --git a/src/lib/plugins/value/components/EnumValue.scss b/src/lib/plugins/value/components/EnumValue.scss
new file mode 100644
index 00000000..8c83247d
--- /dev/null
+++ b/src/lib/plugins/value/components/EnumValue.scss
@@ -0,0 +1,30 @@
+@import '../../../styles';
+@import '../../../components/controls/EditableDivShared';
+
+.jse-enum-value {
+  background: $hovered-background-transparent;
+  border: none;
+  padding: 0;
+
+  font-family: $font-family-mono;
+  font-size: $font-size-mono;
+
+  cursor: pointer;
+  outline: none;
+
+  &.selected {
+    background: $selection-background;
+    color: $selection-color;
+  }
+
+  &.value:focus {
+    // override the color to black when editing
+    color: $black;
+  }
+}
+
+:global(.json-node.selected) {
+  .jse-enum-value {
+    background: transparent;
+  }
+}
diff --git a/src/lib/plugins/value/components/EnumValue.svelte b/src/lib/plugins/value/components/EnumValue.svelte
new file mode 100644
index 00000000..bfed0b53
--- /dev/null
+++ b/src/lib/plugins/value/components/EnumValue.svelte
@@ -0,0 +1,70 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { compileJSONPointer } from 'immutable-json-patch'
+  import { SELECTION_TYPE } from '$lib/logic/selection.js'
+  import { getValueClass } from '$lib/plugins/value/components/utils/getValueClass.js'
+
+  export let path
+  export let value
+  export let readOnly
+  export let isSelected
+  export let onPatch
+  export let onSelect
+
+  /** @type {Array<{value: any, text: string}>} */
+  export let options
+
+  let refSelect
+
+  let bindValue = value
+  $: bindValue = value
+
+  function applyFocus(isSelected) {
+    if (isSelected) {
+      if (refSelect) {
+        refSelect.focus()
+      }
+    }
+  }
+
+  $: applyFocus(isSelected)
+
+  function handleSelect(event) {
+    event.stopPropagation()
+
+    if (readOnly) {
+      return
+    }
+
+    onPatch([
+      {
+        op: 'replace',
+        path: compileJSONPointer(path),
+        value: bindValue
+      }
+    ])
+
+    onSelect({ type: SELECTION_TYPE.VALUE, path })
+  }
+
+  function handleMouseDown(event) {
+    // stop propagation to prevent selecting the whole line
+    event.stopPropagation()
+  }
+</script>
+
+<select
+  class={`jse-enum-value ${getValueClass(bindValue)}`}
+  class:selected={isSelected}
+  bind:value={bindValue}
+  bind:this={refSelect}
+  on:change={handleSelect}
+  on:mousedown={handleMouseDown}
+>
+  {#each options as option}
+    <option value={option.value}>{option.text}</option>
+  {/each}
+</select>
+
+<style src="./EnumValue.scss"></style>
diff --git a/src/lib/components/modes/treemode/JSONValue.scss b/src/lib/plugins/value/components/ReadonlyValue.scss
similarity index 81%
rename from src/lib/components/modes/treemode/JSONValue.scss
rename to src/lib/plugins/value/components/ReadonlyValue.scss
index 1901f7b3..7507ae2f 100644
--- a/src/lib/components/modes/treemode/JSONValue.scss
+++ b/src/lib/plugins/value/components/ReadonlyValue.scss
@@ -1,6 +1,7 @@
 @import '../../../styles';
-@import 'shared.scss';
+@import '../../../components/controls/EditableDivShared';
 
+// TODO: also share most of the following styling with EditableDiv
 .value {
   line-height: $line-height;
   min-width: 16px;
diff --git a/src/lib/plugins/value/components/ReadonlyValue.svelte b/src/lib/plugins/value/components/ReadonlyValue.svelte
new file mode 100644
index 00000000..dbfd711d
--- /dev/null
+++ b/src/lib/plugins/value/components/ReadonlyValue.svelte
@@ -0,0 +1,51 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { isUrl } from '$lib/utils/typeUtils.js'
+  import { SELECTION_TYPE } from '$lib/logic/selection.js'
+  import SearchResultHighlighter from '../../../components/modes/treemode/highlight/SearchResultHighlighter.svelte'
+  import { escapeHTML } from '$lib/utils/domUtils.js'
+  import { getValueClass } from './utils/getValueClass'
+
+  export let path
+  export let value
+  export let readOnly
+  export let onSelect
+
+  /** @type {SearchResultItem | undefined} */
+  export let searchResult
+
+  $: valueIsUrl = isUrl(value)
+
+  function handleValueClick(event) {
+    if (valueIsUrl && event.ctrlKey) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      window.open(value, '_blank')
+    }
+  }
+
+  function handleValueDoubleClick(event) {
+    if (!readOnly) {
+      event.preventDefault()
+      onSelect({ type: SELECTION_TYPE.VALUE, path, edit: true })
+    }
+  }
+</script>
+
+<div
+  data-type="selectable-value"
+  class={getValueClass(value)}
+  on:click={handleValueClick}
+  on:dblclick={handleValueDoubleClick}
+  title={valueIsUrl ? 'Ctrl+Click or Ctrl+Enter to open url in new window' : null}
+>
+  {#if searchResult}
+    <SearchResultHighlighter text={String(value)} {searchResult} />
+  {:else}
+    {escapeHTML(value)}
+  {/if}
+</div>
+
+<style src="./ReadonlyValue.scss"></style>
diff --git a/src/lib/components/modes/treemode/value/Timestamp.scss b/src/lib/plugins/value/components/TimestampTag.scss
similarity index 87%
rename from src/lib/components/modes/treemode/value/Timestamp.scss
rename to src/lib/plugins/value/components/TimestampTag.scss
index 240121cd..16209d9e 100644
--- a/src/lib/components/modes/treemode/value/Timestamp.scss
+++ b/src/lib/plugins/value/components/TimestampTag.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles';
+@import '../../../styles';
 
 .jse-timestamp {
   font-family: $font-family;
diff --git a/src/lib/components/modes/treemode/value/Timestamp.svelte b/src/lib/plugins/value/components/TimestampTag.svelte
similarity index 72%
rename from src/lib/components/modes/treemode/value/Timestamp.svelte
rename to src/lib/plugins/value/components/TimestampTag.svelte
index 3f5d2212..2280b338 100644
--- a/src/lib/components/modes/treemode/value/Timestamp.svelte
+++ b/src/lib/plugins/value/components/TimestampTag.svelte
@@ -1,8 +1,10 @@
+<svelte:options immutable={true} />
+
 <script>
   import Icon from 'svelte-awesome'
   import { faClock } from '@fortawesome/free-regular-svg-icons'
   import { getContext } from 'svelte'
-  import { tooltip } from '../../../controls/tooltip/tooltip'
+  import { tooltip } from '../../../components/controls/tooltip/tooltip'
 
   const absolutePopupContext = getContext('absolute-popup')
 
@@ -15,4 +17,4 @@
   <Icon data={faClock} />
 </div>
 
-<style src="Timestamp.scss"></style>
+<style src="TimestampTag.scss"></style>
diff --git a/src/lib/plugins/value/components/utils/getValueClass.js b/src/lib/plugins/value/components/utils/getValueClass.js
new file mode 100644
index 00000000..3395a8df
--- /dev/null
+++ b/src/lib/plugins/value/components/utils/getValueClass.js
@@ -0,0 +1,12 @@
+import { isUrl, valueType } from '../../../../utils/typeUtils.js'
+import classnames from 'classnames'
+import { SELECTION_TYPE } from '../../../../logic/selection.js'
+
+export function getValueClass(value) {
+  const type = valueType(value)
+
+  return classnames(SELECTION_TYPE.VALUE, type, {
+    url: isUrl(value),
+    empty: typeof value === 'string' && value.length === 0
+  })
+}
diff --git a/src/lib/plugins/value/renderJSONSchemaEnum.js b/src/lib/plugins/value/renderJSONSchemaEnum.js
new file mode 100644
index 00000000..e9216f2a
--- /dev/null
+++ b/src/lib/plugins/value/renderJSONSchemaEnum.js
@@ -0,0 +1,41 @@
+import EnumValue from './components/EnumValue.svelte'
+import { getJSONSchemaOptions } from '../../utils/jsonSchemaUtils.js'
+
+/**
+ * Search the JSON schema for enums defined at given props.path. If found,
+ * return an EnumValue renderer. If not found, return null. In that case you
+ * have to fallback on the default valueRender function
+ * @param {RenderValueProps} props
+ * @param {JSON} schema
+ * @param {JSON} schemaRefs
+ * @return {RenderValueConstructor[]}
+ */
+export function renderJSONSchemaEnum(props, schema, schemaRefs) {
+  const enumValues = getJSONSchemaOptions(schema, schemaRefs, props.path)
+
+  if (enumValues) {
+    const { value, path, readOnly, onPatch, onSelect, isSelected } = props
+
+    const options = enumValues.map((value) => ({
+      value,
+      text: value
+    }))
+
+    return [
+      {
+        component: EnumValue,
+        props: {
+          value,
+          path,
+          readOnly,
+          onPatch,
+          onSelect,
+          isSelected,
+          options
+        }
+      }
+    ]
+  }
+
+  return null
+}
diff --git a/src/lib/plugins/value/renderValue.js b/src/lib/plugins/value/renderValue.js
new file mode 100644
index 00000000..5b3b8c56
--- /dev/null
+++ b/src/lib/plugins/value/renderValue.js
@@ -0,0 +1,62 @@
+import { SELECTION_TYPE } from '../../logic/selection.js'
+import { isEqual } from 'lodash-es'
+import { isBoolean, isColor, isTimestamp } from '../../utils/typeUtils.js'
+import BooleanToggle from './components/BooleanToggle.svelte'
+import ColorPicker from './components/ColorPicker.svelte'
+import EditableValue from './components/EditableValue.svelte'
+import ReadonlyValue from './components/ReadonlyValue.svelte'
+import TimestampTag from './components/TimestampTag.svelte'
+
+/**
+ * @param {RenderValueProps} props
+ * @return {RenderValueConstructor[]}
+ */
+export function renderValue({
+  path,
+  value,
+  readOnly,
+  searchResult,
+  isEditing,
+  onPatch,
+  onPasteJson,
+  onSelect
+}) {
+  const renderers = []
+
+  if (!isEditing && isBoolean(value)) {
+    renderers.push({
+      component: BooleanToggle,
+      props: { path, value, readOnly, onPatch }
+    })
+  }
+
+  if (!isEditing && isColor(value)) {
+    renderers.push({
+      component: ColorPicker,
+      props: { path, value, readOnly, onPatch }
+    })
+  }
+
+  if (isEditing) {
+    renderers.push({
+      component: EditableValue,
+      props: { path, value, onPatch, onPasteJson, onSelect }
+    })
+  }
+
+  if (!isEditing) {
+    renderers.push({
+      component: ReadonlyValue,
+      props: { path, value, readOnly, searchResult, onSelect }
+    })
+  }
+
+  if (!isEditing && isTimestamp(value)) {
+    renderers.push({
+      component: TimestampTag,
+      props: { value }
+    })
+  }
+
+  return renderers
+}
diff --git a/src/lib/styles.scss b/src/lib/styles.scss
index 3563aaed..1dc11112 100644
--- a/src/lib/styles.scss
+++ b/src/lib/styles.scss
@@ -27,9 +27,9 @@ $dark-gray: #656565;
 $gray: rgb(157, 157, 157); // #9d9d9d
 $gray-transparent: rgba(0, 0, 0, 0.38); // #9d9d9d but with transparency
 $middle-gray: #d3d3d3; // #d3d3d3
-$light-gray: rgb(192, 192, 192); // #c0c0c0
+$light-gray: rgb(192, 192, 192);
 $very-light-gray: rgb(226, 226, 226);
-$light-gray-transparent: rgba(0, 0, 0, 0.25); // #c0c0c0
+$light-gray-transparent: rgba(0, 0, 0, 0.25);
 
 $value-color-string: #008000;
 $value-color-number: #ee422e;
@@ -39,7 +39,7 @@ $value-color-url: $value-color-string;
 
 $contents-background: $white;
 $selection-background: $middle-gray;
-$selection-color: $white;
+$selection-color: $black;
 $hovered-background: rgb(240, 240, 240); // #f0f0f0
 $hovered-background-transparent: rgba(0, 0, 0, 0.06); // #f0f0f0, with transparency
 $background-gray: #f5f5f5;
diff --git a/src/lib/types.js b/src/lib/types.js
index 415c4c66..3c211243 100644
--- a/src/lib/types.js
+++ b/src/lib/types.js
@@ -199,3 +199,23 @@
  *   paths?: string[][]
  * }} [projection]
  */
+
+/**
+ * @typedef {Object} RenderValueProps
+ * @property {Path} path
+ * @property {JSON} value
+ * @property {boolean} readOnly
+ * @property {Selection | undefined} selection
+ * @property {SearchResultItem | undefined} searchResult
+ * @property {boolean} isSelected
+ * @property {boolean} isEditing
+ * @property {(patch: JSONPatchDocument, newSelection: Selection | null) => void} onPatch
+ * @property {(pastedJson: { path: Path, contents: JSON }) => void} onPasteJson
+ * @property {(selection: Selection) => void} onSelect
+ */
+
+/**
+ * @typedef {Object} RenderValueConstructor
+ * @property {SvelteComponentConstructor} component
+ * @property {Object} props
+ */
diff --git a/src/lib/utils/jsonSchemaUtils.js b/src/lib/utils/jsonSchemaUtils.js
new file mode 100644
index 00000000..a76cde19
--- /dev/null
+++ b/src/lib/utils/jsonSchemaUtils.js
@@ -0,0 +1,142 @@
+/**
+ * Find enum options for given path in a JSONSchema
+ * @param {JSON} schema
+ * @param {JSON} schemaRefs
+ * @param {Path} path
+ * @returns {Array<any> | null}
+ */
+export function getJSONSchemaOptions(schema, schemaRefs, path) {
+  const schemaForPath = findSchema(schema, schemaRefs || {}, path)
+
+  return schemaForPath ? findEnum(schemaForPath) : null
+}
+
+/**
+ * find an enum definition in a JSON schema, as property `enum` or inside
+ * one of the schemas composites (`oneOf`, `anyOf`, `allOf`)
+ *
+ * Source: https://github.com/josdejong/jsoneditor/blob/develop/src/js/Node.js
+ *
+ * @param  {Object} schema
+ * @return {Array | null} Returns the enum when found, null otherwise.
+ * @private
+ */
+export function findEnum(schema) {
+  if (schema.enum) {
+    return schema.enum
+  }
+
+  const composite = schema.oneOf || schema.anyOf || schema.allOf
+  if (composite) {
+    const match = composite.filter((entry) => entry.enum)
+    if (match.length > 0) {
+      return match[0].enum
+    }
+  }
+
+  return null
+}
+
+/**
+ * Return the part of a JSON schema matching given path.
+ *
+ * Source: https://github.com/josdejong/jsoneditor/blob/develop/src/js/Node.js
+ *
+ * @param {JSON} topLevelSchema
+ * @param {JSON} schemaRefs
+ * @param {Array.<string | number>} path
+ * @param {Object} currentSchema
+ * @return {Object | null}
+ * @private
+ */
+export function findSchema(topLevelSchema, schemaRefs, path, currentSchema = topLevelSchema) {
+  const nextPath = path.slice(1, path.length)
+  const nextKey = path[0]
+
+  let possibleSchemas = [currentSchema]
+  for (const subSchemas of [currentSchema.oneOf, currentSchema.anyOf, currentSchema.allOf]) {
+    if (Array.isArray(subSchemas)) {
+      possibleSchemas = possibleSchemas.concat(subSchemas)
+    }
+  }
+
+  for (const schema of possibleSchemas) {
+    currentSchema = schema
+
+    if ('$ref' in currentSchema && typeof currentSchema.$ref === 'string') {
+      const ref = currentSchema.$ref
+      if (ref in schemaRefs) {
+        currentSchema = schemaRefs[ref]
+      } else if (ref.startsWith('#/')) {
+        const refPath = ref.substring(2).split('/')
+        currentSchema = topLevelSchema
+        for (const segment of refPath) {
+          if (segment in currentSchema) {
+            currentSchema = currentSchema[segment]
+          } else {
+            throw Error(`Unable to resovle reference ${ref}`)
+          }
+        }
+      } else if (ref.match(/#\//g)?.length === 1) {
+        const [schemaUrl, relativePath] = ref.split('#/')
+        if (schemaUrl in schemaRefs) {
+          const referencedSchema = schemaRefs[schemaUrl]
+          const reference = { $ref: '#/'.concat(relativePath) }
+          const auxNextPath = []
+          auxNextPath.push(nextKey)
+          if (nextPath.length > 0) {
+            auxNextPath.push(...nextPath)
+          }
+          return findSchema(referencedSchema, schemaRefs, auxNextPath, reference)
+        } else {
+          throw Error(`Unable to resolve reference ${ref}`)
+        }
+      } else {
+        throw Error(`Unable to resolve reference ${ref}`)
+      }
+    }
+
+    // We have no more path segments to resolve, return the currently found schema
+    // We do this here, after resolving references, in case of the leaf schema beeing a reference
+    if (nextKey === undefined) {
+      return currentSchema
+    }
+
+    if (typeof nextKey === 'string') {
+      if (
+        typeof currentSchema.properties === 'object' &&
+        currentSchema.properties !== null &&
+        nextKey in currentSchema.properties
+      ) {
+        currentSchema = currentSchema.properties[nextKey]
+        return findSchema(topLevelSchema, schemaRefs, nextPath, currentSchema)
+      }
+      if (
+        typeof currentSchema.patternProperties === 'object' &&
+        currentSchema.patternProperties !== null
+      ) {
+        for (const prop in currentSchema.patternProperties) {
+          if (nextKey.match(prop)) {
+            currentSchema = currentSchema.patternProperties[prop]
+            return findSchema(topLevelSchema, schemaRefs, nextPath, currentSchema)
+          }
+        }
+      }
+      if (typeof currentSchema.additionalProperties === 'object') {
+        currentSchema = currentSchema.additionalProperties
+        return findSchema(topLevelSchema, schemaRefs, nextPath, currentSchema)
+      }
+      continue
+    }
+    if (
+      typeof nextKey === 'number' &&
+      typeof currentSchema.items === 'object' &&
+      currentSchema.items !== null
+    ) {
+      currentSchema = currentSchema.items
+      return findSchema(topLevelSchema, schemaRefs, nextPath, currentSchema)
+    }
+  }
+
+  return null
+}
diff --git a/src/lib/utils/jsonSchemaUtils.test.js b/src/lib/utils/jsonSchemaUtils.test.js
new file mode 100644
index 00000000..e9e9d246
--- /dev/null
+++ b/src/lib/utils/jsonSchemaUtils.test.js
@@ -0,0 +1,658 @@
+import assert from 'assert'
+import { findEnum, findSchema, getJSONSchemaOptions } from './jsonSchemaUtils.js'
+
+describe('jsonSchemaUtils', () => {
+  describe('getJSONSchemaOptions', () => {
+    it('should get the schema options', () => {
+      const schema = {
+        properties: {
+          job: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                company: {
+                  enum: ['test1', 'test2']
+                }
+              }
+            }
+          }
+        }
+      }
+
+      const options = getJSONSchemaOptions(schema, null, ['job', 1, 'company'])
+      assert.deepStrictEqual(options, ['test1', 'test2'])
+    })
+  })
+
+  describe('findSchema', () => {
+    it('should find schema', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          child: {
+            type: 'string'
+          }
+        }
+      }
+      const path = ['child']
+      assert.strictEqual(findSchema(schema, {}, path), schema.properties.child)
+    })
+
+    it('should find schema inside an array item', () => {
+      const schema = {
+        properties: {
+          job: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                company: {
+                  enum: ['test1', 'test2']
+                }
+              }
+            }
+          }
+        }
+      }
+
+      assert.strictEqual(findSchema(schema, {}, []), schema)
+
+      assert.strictEqual(findSchema(schema, {}, ['job']), schema.properties.job)
+
+      assert.strictEqual(findSchema(schema, {}, ['job', 0]), schema.properties.job.items)
+
+      assert.strictEqual(
+        findSchema(schema, {}, ['job', 0, 'company']),
+        schema.properties.job.items.properties.company
+      )
+    })
+
+    it('should find schema within multi-level object properties', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          levelTwo: {
+            type: 'object',
+            properties: {
+              levelThree: {
+                type: 'object',
+                properties: {
+                  bool: {
+                    type: 'boolean'
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      let path = []
+      assert.strictEqual(findSchema(schema, {}, path), schema)
+      path = ['levelTwo']
+      assert.strictEqual(findSchema(schema, {}, path), schema.properties.levelTwo)
+      path = ['levelTwo', 'levelThree']
+      assert.strictEqual(
+        findSchema(schema, {}, path),
+        schema.properties.levelTwo.properties.levelThree
+      )
+      path = ['levelTwo', 'levelThree', 'bool']
+      assert.strictEqual(
+        findSchema(schema, {}, path),
+        schema.properties.levelTwo.properties.levelThree.properties.bool
+      )
+    })
+
+    it('should find referenced schema within multi-level object properties', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          aProperty: {
+            $ref: 'second_schema#/definitions/some_def'
+          }
+        }
+      }
+      const schemaRefs = {
+        second_schema: {
+          definitions: {
+            some_def: {
+              type: 'object',
+              properties: {
+                enumProp: {
+                  enum: [1, 2, 3]
+                }
+              }
+            }
+          }
+        }
+      }
+      const path = ['aProperty', 'enumProp']
+      const expectedSchema = {
+        enum: [1, 2, 3]
+      }
+      assert.deepStrictEqual(findSchema(schema, schemaRefs, path), expectedSchema)
+    })
+
+    it('should find array referenced schema within multi-level object properties', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          aProperty: {
+            type: 'array',
+            items: {
+              $ref: 'second_schema#/definitions/some_def'
+            }
+          }
+        }
+      }
+      const schemaRefs = {
+        second_schema: {
+          definitions: {
+            some_def: {
+              type: 'object',
+              properties: {
+                enumProp: {
+                  enum: [1, 2, 3]
+                }
+              }
+            }
+          }
+        }
+      }
+      const path = ['aProperty', 0, 'enumProp']
+      const expectedSchema = {
+        enum: [1, 2, 3]
+      }
+      assert.deepStrictEqual(findSchema(schema, schemaRefs, path), expectedSchema)
+    })
+
+    it('should return null for path that has no schema', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          foo: {
+            type: 'object',
+            properties: {
+              baz: {
+                type: 'number'
+              }
+            }
+          }
+        }
+      }
+      let path = ['bar']
+      assert.strictEqual(findSchema(schema, {}, path), null)
+      path = ['foo', 'bar']
+      assert.strictEqual(findSchema(schema, {}, path), null)
+    })
+
+    it('should find one of required properties', () => {
+      const schema = {
+        properties: {
+          company: {
+            type: 'string',
+            enum: ['1', '2']
+          },
+          worker: {
+            type: 'string',
+            enum: ['a', 'b']
+          },
+          manager: {
+            type: 'string',
+            enum: ['c', 'd']
+          }
+        },
+        additionalProperties: false,
+        oneOf: [
+          {
+            required: ['worker']
+          },
+          {
+            required: ['manager']
+          }
+        ]
+      }
+      let path = ['company']
+      assert.deepStrictEqual(findSchema(schema, {}, path), {
+        type: 'string',
+        enum: ['1', '2']
+      })
+      path = ['worker']
+      assert.deepStrictEqual(findSchema(schema, {}, path), {
+        type: 'string',
+        enum: ['a', 'b']
+      })
+    })
+
+    describe('with $ref', () => {
+      it('should find a referenced schema', () => {
+        const schema = {
+          type: 'object',
+          properties: {
+            foo: {
+              $ref: 'foo'
+            }
+          }
+        }
+        const fooSchema = {
+          type: 'number',
+          title: 'Foo'
+        }
+        const path = ['foo']
+        assert.strictEqual(findSchema(schema, { foo: fooSchema }, path), fooSchema)
+      })
+
+      it('should find a referenced schema property', () => {
+        const schema = {
+          type: 'object',
+          properties: {
+            foo: {
+              $ref: 'foo'
+            }
+          }
+        }
+        const fooSchema = {
+          type: 'object',
+          properties: {
+            levelTwo: {
+              type: 'string'
+            }
+          }
+        }
+        const path = ['foo', 'levelTwo']
+        assert.strictEqual(
+          findSchema(schema, { foo: fooSchema }, path),
+          fooSchema.properties.levelTwo
+        )
+      })
+
+      it('should find a referenced schema definition', () => {
+        const schema = {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'array',
+              items: {
+                $ref: 'foo#/definitions/some_def'
+              }
+            }
+          }
+        }
+        const fooSchema = {
+          definitions: {
+            some_def: {
+              type: 'object',
+              properties: {
+                propA: {
+                  type: 'string'
+                },
+                propB: {
+                  type: 'string'
+                }
+              }
+            }
+          }
+        }
+        const path = ['foo', 0]
+        assert.strictEqual(
+          findSchema(schema, { foo: fooSchema }, path),
+          fooSchema.definitions.some_def
+        )
+      })
+
+      it('should find a referenced schema definition 2', () => {
+        const schema = {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'array',
+              items: {
+                $ref: 'foo#/definitions/some_def'
+              }
+            }
+          }
+        }
+        const fooSchema = {
+          definitions: {
+            some_def: {
+              type: 'object',
+              properties: {
+                propA: {
+                  type: 'string'
+                },
+                propB: {
+                  type: 'string'
+                }
+              }
+            }
+          }
+        }
+        const path = ['foo', 0, 'propA']
+        assert.strictEqual(
+          findSchema(schema, { foo: fooSchema }, path),
+          fooSchema.definitions.some_def.properties.propA
+        )
+      })
+
+      it('should find a referenced schema definition 3', () => {
+        const schema = {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'array',
+              items: {
+                $ref: 'foo#/definitions/some_def'
+              }
+            }
+          }
+        }
+        const fooSchema = {
+          definitions: {
+            some_def: {
+              type: 'object',
+              properties: {
+                propA: {
+                  type: 'object',
+                  properties: {
+                    propA1: { type: 'boolean' }
+                  }
+                },
+                propB: { type: 'string' }
+              }
+            }
+          }
+        }
+        const path = ['foo', 0, 'propA', 'propA1']
+        assert.strictEqual(
+          findSchema(schema, { foo: fooSchema }, path),
+          fooSchema.definitions.some_def.properties.propA.properties.propA1
+        )
+      })
+    })
+
+    describe('with $ref to internal definition', () => {
+      it('should find a referenced schema', () => {
+        const schema = {
+          $schema: 'http://json-schema.org/draft-07/schema#',
+          type: 'object',
+          patternProperties: {
+            '^/[a-z0-9]*$': {
+              $ref: '#/definitions/component'
+            }
+          },
+          definitions: {
+            component: {
+              type: 'object',
+              properties: {
+                type: {
+                  type: 'string',
+                  minLength: 1
+                },
+                config: {
+                  type: 'object'
+                },
+                children: {
+                  type: 'object',
+                  patternProperties: {
+                    '^/[a-z0-9]+$': {
+                      $ref: '#/definitions/component'
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        const path = ['/status', 'children', '/bus', 'config']
+        const foundSchema = {
+          type: 'object'
+        }
+        assert.notStrictEqual(findSchema(schema, {}, path), foundSchema)
+      })
+    })
+
+    describe('with $ref to external definition', () => {
+      it('should find a referenced schema', () => {
+        const schema = {
+          type: 'object',
+          properties: {
+            address: {
+              $ref: 'definitions.json#/address'
+            }
+          }
+        }
+        const definitions = {
+          address: {
+            type: 'object',
+            properties: {
+              country: {
+                type: 'string'
+              },
+              city: {
+                type: 'string'
+              }
+            }
+          }
+        }
+        const path = ['address', 'city']
+        const foundSchema = { type: 'string' }
+        assert.notStrictEqual(
+          findSchema(schema, { 'definitions.json': definitions }, path),
+          foundSchema
+        )
+      })
+    })
+    describe('with pattern properties', () => {
+      it('should find schema', () => {
+        const schema = {
+          type: 'object',
+          properties: {
+            str: {
+              title: 'str',
+              type: 'boolean'
+            }
+          },
+          patternProperties: {
+            '^foo[0-9]': {
+              title: 'foo[0-] pattern property',
+              type: 'string'
+            }
+          }
+        }
+        let path = []
+        assert.strictEqual(findSchema(schema, {}, path), schema, 'top level')
+        path = ['str']
+        assert.strictEqual(findSchema(schema, {}, path), schema.properties.str, 'normal property')
+      })
+
+      it('should find schema within multi-level object properties', () => {
+        const schema = {
+          type: 'object',
+          properties: {
+            levelTwo: {
+              type: 'object',
+              properties: {
+                levelThree: {
+                  type: 'object',
+                  properties: {
+                    bool: {
+                      title: 'bool',
+                      type: 'boolean'
+                    }
+                  }
+                }
+              }
+            }
+          },
+          patternProperties: {
+            '^foo[0-9]': {
+              title: 'foo[0-9] pattern property',
+              type: 'string'
+            }
+          }
+        }
+        let path = []
+        assert.strictEqual(findSchema(schema, {}, path), schema, 'top level')
+        path = ['levelTwo']
+        assert.strictEqual(findSchema(schema, {}, path), schema.properties.levelTwo, 'level two')
+        path = ['levelTwo', 'levelThree']
+        assert.strictEqual(
+          findSchema(schema, {}, path),
+          schema.properties.levelTwo.properties.levelThree,
+          'level three'
+        )
+        path = ['levelTwo', 'levelThree', 'bool']
+        assert.strictEqual(
+          findSchema(schema, {}, path),
+          schema.properties.levelTwo.properties.levelThree.properties.bool,
+          'normal property'
+        )
+      })
+
+      it('should find schema for pattern properties', () => {
+        const schema = {
+          type: 'object',
+          patternProperties: {
+            '^foo[0-9]': {
+              title: 'foo[0-9] pattern property',
+              type: 'string'
+            },
+            '^bar[0-9]': {
+              title: 'bar[0-9] pattern property',
+              type: 'string'
+            }
+          }
+        }
+        let path = ['foo1']
+        assert.strictEqual(
+          findSchema(schema, {}, path),
+          schema.patternProperties['^foo[0-9]'],
+          'first pattern property'
+        )
+        path = ['bar5']
+        assert.strictEqual(
+          findSchema(schema, {}, path),
+          schema.patternProperties['^bar[0-9]'],
+          'second pattern property'
+        )
+      })
+
+      it('should find schema for multi-level pattern properties', () => {
+        const schema = {
+          type: 'object',
+          patternProperties: {
+            '^foo[0-9]': {
+              title: 'foo[0-9] pattern property',
+              type: 'object',
+              properties: {
+                fooChild: {
+                  type: 'object',
+                  properties: {
+                    fooChild2: {
+                      type: 'string'
+                    }
+                  }
+                }
+              }
+            },
+            '^bar[0-9]': {
+              title: 'bar[0-9] pattern property',
+              type: 'object',
+              properties: {
+                barChild: {
+                  type: 'string'
+                }
+              }
+            }
+          }
+        }
+        let path = ['foo1', 'fooChild', 'fooChild2']
+        assert.strictEqual(
+          findSchema(schema, {}, path),
+          schema.patternProperties['^foo[0-9]'].properties.fooChild.properties.fooChild2,
+          'first pattern property child of child'
+        )
+        path = ['bar5', 'barChild']
+        assert.strictEqual(
+          findSchema(schema, {}, path),
+          schema.patternProperties['^bar[0-9]'].properties.barChild,
+          'second pattern property child'
+        )
+      })
+
+      it('should return null for path that has no schema', () => {
+        const schema = {
+          type: 'object',
+          properties: {
+            levelTwo: {
+              type: 'object',
+              properties: {
+                levelThree: {
+                  type: 'number'
+                }
+              }
+            }
+          },
+          patternProperties: {
+            '^foo[0-9]': {
+              title: 'foo[0-9] pattern property',
+              type: 'string'
+            },
+            '^bar[0-9]': {
+              title: 'bar[0-9] pattern property',
+              type: 'string'
+            }
+          }
+        }
+        let path = ['not-in-schema']
+        assert.strictEqual(findSchema(schema, {}, path), null)
+        path = ['levelOne', 'not-in-schema']
+        assert.strictEqual(findSchema(schema, {}, path), null)
+      })
+
+      it('should return additionalProperties schema', () => {
+        const schema = {
+          type: 'object',
+          properties: {
+            company: {
+              type: 'string',
+              enum: ['1', '2']
+            },
+            nested: {
+              type: 'object',
+              additionalProperties: {
+                type: 'number'
+              }
+            }
+          },
+          additionalProperties: {
+            type: 'string',
+            enum: ['1', '2']
+          }
+        }
+        let path = ['company2']
+        assert.strictEqual(
+          findSchema(schema, {}, path),
+          schema.additionalProperties,
+          'additionalProperties schema'
+        )
+        path = ['nested', 'virtual']
+        assert.strictEqual(
+          findSchema(schema, {}, path),
+          schema.properties.nested.additionalProperties,
+          'additionalProperties schema'
+        )
+      })
+    })
+  })
+
+  describe('findEnum', () => {
+    it('should find enum', () => {
+      const schema = {
+        type: 'object',
+        enum: [1, 2, 3]
+      }
+      assert.strictEqual(findEnum(schema), schema.enum)
+    })
+  })
+})
diff --git a/src/routes/development.svelte b/src/routes/development.svelte
index 09ca0fbb..fa2b628b 100644
--- a/src/routes/development.svelte
+++ b/src/routes/development.svelte
@@ -9,7 +9,10 @@
     JSONEditor,
     jmespathQueryLanguage,
     lodashQueryLanguage,
-    javascriptQueryLanguage
+    javascriptQueryLanguage,
+    renderValue,
+    EditableValue,
+    ReadonlyValue
   } from '$lib'
   import { useLocalStorage } from '$lib/utils/localStorageUtils.js'
   import { range } from 'lodash-es'
@@ -73,6 +76,10 @@
   const readOnly = useLocalStorage('svelte-jsoneditor-demo-readOnly', false)
   const mainMenuBar = useLocalStorage('svelte-jsoneditor-demo-mainMenuBar', true)
   const navigationBar = useLocalStorage('svelte-jsoneditor-demo-navigationBar', true)
+  const useCustomValueRenderer = useLocalStorage(
+    'svelte-jsoneditor-demo-useCustomValueRenderer',
+    true
+  )
   const multipleQueryLanguages = useLocalStorage(
     'svelte-jsoneditor-demo-multipleQueryLanguages',
     true
@@ -83,6 +90,36 @@
     : [javascriptQueryLanguage]
   let queryLanguageId = javascriptQueryLanguage.id // TODO: store in local storage
 
+  // only editable/readonly div, no color picker, boolean toggle, timestamp
+  function customRenderValue({
+    path,
+    value,
+    readOnly,
+    searchResult,
+    isEditing,
+    onPatch,
+    onPasteJson,
+    onSelect
+  }) {
+    const renderers = []
+
+    if (isEditing) {
+      renderers.push({
+        component: EditableValue,
+        props: { path, value, onPatch, onPasteJson, onSelect }
+      })
+    }
+
+    if (!isEditing) {
+      renderers.push({
+        component: ReadonlyValue,
+        props: { path, value, readOnly, searchResult, onSelect }
+      })
+    }
+
+    return renderers
+  }
+
   function onRenderMenu(mode, items) {
     if (!import.meta.env.SSR) {
       console.log('onRenderMenu', mode, items)
@@ -136,6 +173,9 @@
     <label>
       <input type="checkbox" bind:checked={$readOnly} /> Read-only
     </label>
+    <label>
+      <input type="checkbox" bind:checked={$useCustomValueRenderer} /> Custom onRenderValue
+    </label>
   </p>
   <p>
     <label>
@@ -274,6 +314,7 @@
             bind:queryLanguageId
             {onRenderMenu}
             onChange={onChangeTree}
+            onRenderValue={$useCustomValueRenderer ? customRenderValue : renderValue}
             {onChangeMode}
           />
         {/if}
@@ -312,6 +353,7 @@
             {onChangeQueryLanguage}
             {onRenderMenu}
             onChange={onChangeCode}
+            onRenderValue={$useCustomValueRenderer ? customRenderValue : renderValue}
             {onChangeMode}
           />
         {/if}
@@ -331,6 +373,15 @@
   </div>
 </div>
 
+<!--
+Workaround for the console warning:
+
+ <Development> received an unexpected slot "default".
+
+See https://github.com/sveltejs/kit/issues/981
+-->
+{#if false}<slot />{/if}
+
 <style>
   .columns {
     display: flex;
diff --git a/src/routes/examples/basic_usage_one_way_binding.svelte b/src/routes/examples/basic_usage_one_way_binding.svelte
index fe38e16e..946392b0 100644
--- a/src/routes/examples/basic_usage_one_way_binding.svelte
+++ b/src/routes/examples/basic_usage_one_way_binding.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { JSONEditor } from '$lib' // replace this with 'svelte-jsoneditor'
+  import { JSONEditor } from 'svelte-jsoneditor'
 
   let content = {
     text: undefined, // used when in code mode
diff --git a/src/routes/examples/basic_usage_two_way_binding.svelte b/src/routes/examples/basic_usage_two_way_binding.svelte
index 3d3dd720..bbcba02f 100644
--- a/src/routes/examples/basic_usage_two_way_binding.svelte
+++ b/src/routes/examples/basic_usage_two_way_binding.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { JSONEditor } from '$lib' // replace this with 'svelte-jsoneditor'
+  import { JSONEditor } from 'svelte-jsoneditor'
 
   let content = {
     text: undefined, // used when in code mode
diff --git a/src/routes/examples/components/ReadonlyPassword.svelte b/src/routes/examples/components/ReadonlyPassword.svelte
new file mode 100644
index 00000000..f63c1b99
--- /dev/null
+++ b/src/routes/examples/components/ReadonlyPassword.svelte
@@ -0,0 +1,48 @@
+<svelte:options immutable={true} />
+
+<script>
+  import Icon from 'svelte-awesome'
+  import { faLock } from '@fortawesome/free-solid-svg-icons'
+
+  export let value
+  export let path
+  export let readOnly
+  export let isSelected
+  export let onSelect
+
+  $: hiddenValue = '*'.repeat(String(value).length)
+
+  function handleValueDoubleClick(event) {
+    if (!readOnly) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      // open in edit mode
+      onSelect({ type: 'value', path, edit: true })
+    }
+  }
+</script>
+
+<div
+  class="jse-readonly-password"
+  data-type="selectable-value"
+  class:selected={isSelected}
+  on:dblclick={handleValueDoubleClick}
+>
+  <Icon data={faLock} />
+  {hiddenValue}
+</div>
+
+<style>
+  .jse-readonly-password {
+    padding: 0 5px;
+  }
+
+  .jse-readonly-password:hover {
+    background: #ededed;
+  }
+
+  .jse-readonly-password.selected {
+    background: #d3d3d3;
+  }
+</style>
diff --git a/src/routes/examples/custom_dynamic_styling.svelte b/src/routes/examples/custom_dynamic_styling.svelte
index 3da2b58f..c5c8b820 100644
--- a/src/routes/examples/custom_dynamic_styling.svelte
+++ b/src/routes/examples/custom_dynamic_styling.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { JSONEditor } from '$lib' // replace this with 'svelte-jsoneditor'
+  import { JSONEditor } from 'svelte-jsoneditor'
 
   let content = {
     text: undefined, // used when in code mode
diff --git a/src/routes/examples/custom_menu_buttons.svelte b/src/routes/examples/custom_menu_buttons.svelte
index 89b2e0a0..4832243e 100644
--- a/src/routes/examples/custom_menu_buttons.svelte
+++ b/src/routes/examples/custom_menu_buttons.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { JSONEditor } from '$lib' // replace this with 'svelte-jsoneditor'
+  import { JSONEditor } from 'svelte-jsoneditor'
   import { faCopy } from '@fortawesome/free-regular-svg-icons'
 
   let content = {
diff --git a/src/routes/examples/custom_validation.svelte b/src/routes/examples/custom_validation.svelte
index 539cf051..48089a96 100644
--- a/src/routes/examples/custom_validation.svelte
+++ b/src/routes/examples/custom_validation.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { JSONEditor } from '$lib' // replace this with 'svelte-jsoneditor'
+  import { JSONEditor } from 'svelte-jsoneditor'
 
   /**
    * rules:
@@ -13,27 +13,27 @@
     if (json && Array.isArray(json.team)) {
       // check whether each team member has name and age filled in correctly
       json.team.forEach(function (member, index) {
-        if (typeof member !== 'object') {
-          errors.push({
-            path: ['team', index],
-            message: 'Member must be an object with properties "name" and "age"'
-          })
-        }
-
-        if ('name' in member) {
-          if (typeof member.name !== 'string') {
-            errors.push({ path: ['team', index, 'name'], message: 'Name must be a string' })
+        if (member && typeof member === 'object') {
+          if ('name' in member) {
+            if (typeof member.name !== 'string') {
+              errors.push({ path: ['team', index, 'name'], message: 'Name must be a string' })
+            }
+          } else {
+            errors.push({ path: ['team', index], message: 'Required property "name"" missing' })
           }
-        } else {
-          errors.push({ path: ['team', index], message: 'Required property "name"" missing' })
-        }
 
-        if ('age' in member) {
-          if (typeof member.age !== 'number') {
-            errors.push({ path: ['team', index, 'age'], message: 'Age must be a number' })
+          if ('age' in member) {
+            if (typeof member.age !== 'number') {
+              errors.push({ path: ['team', index, 'age'], message: 'Age must be a number' })
+            }
+          } else {
+            errors.push({ path: ['team', index], message: 'Required property "age" missing' })
           }
         } else {
-          errors.push({ path: ['team', index], message: 'Required property "age" missing' })
+          errors.push({
+            path: ['team', index],
+            message: 'Member must be an object with properties "name" and "age"'
+          })
         }
       })
 
diff --git a/src/routes/examples/custom_value_renderer.svelte b/src/routes/examples/custom_value_renderer.svelte
new file mode 100644
index 00000000..189b8baa
--- /dev/null
+++ b/src/routes/examples/custom_value_renderer.svelte
@@ -0,0 +1,85 @@
+<script>
+  import { EnumValue, JSONEditor, renderValue } from 'svelte-jsoneditor'
+  import ReadonlyPassword from './components/ReadonlyPassword.svelte'
+
+  let content = {
+    text: undefined, // used when in code mode
+    json: {
+      username: 'John',
+      password: 'secret...',
+      gender: 'male'
+    }
+  }
+
+  const genderOptions = [
+    { value: null, text: '-' },
+    { value: 'male', text: 'Male' },
+    { value: 'female', text: 'Female' },
+    { value: 'other', text: 'Other' }
+  ]
+
+  function onRenderValue(props) {
+    const { path, value, readOnly, isEditing, isSelected, onSelect, onPatch } = props
+
+    const key = props.path[props.path.length - 1]
+    if (key === 'password' && !isEditing) {
+      return [
+        {
+          component: ReadonlyPassword,
+          props: {
+            value,
+            path,
+            readOnly,
+            isSelected,
+            onSelect
+          }
+        }
+      ]
+    }
+
+    if (key === 'gender') {
+      return [
+        {
+          component: EnumValue,
+          props: {
+            value,
+            path,
+            readOnly,
+            onPatch,
+            onSelect,
+            isSelected,
+            options: genderOptions
+          }
+        }
+      ]
+    }
+
+    // fallback on the default render components
+    return renderValue(props)
+  }
+</script>
+
+<svelte:head>
+  <title>Custom value renderer (password, enum) | svelte-jsoneditor</title>
+</svelte:head>
+
+<h1>Custom value renderer (password, enum)</h1>
+
+<p>
+  Provide a custom <code>onRenderValue</code> method, which hides the value of all fields with the name
+  "password", and creates an enum for the fields with name "gender".
+</p>
+<p>
+  <i>EXPERIMENTAL! This API will most likely change in future versions.</i>
+</p>
+
+<div class="editor">
+  <JSONEditor bind:content {onRenderValue} />
+</div>
+
+<style>
+  .editor {
+    width: 700px;
+    height: 400px;
+  }
+</style>
diff --git a/src/routes/examples/json_schema_validation.svelte b/src/routes/examples/json_schema_validation.svelte
index 58c0dc42..1096380c 100644
--- a/src/routes/examples/json_schema_validation.svelte
+++ b/src/routes/examples/json_schema_validation.svelte
@@ -1,5 +1,10 @@
 <script>
-  import { JSONEditor, createAjvValidator } from '$lib' // replace this with 'svelte-jsoneditor'
+  import {
+    JSONEditor,
+    createAjvValidator,
+    renderValue,
+    renderJSONSchemaEnum
+  } from 'svelte-jsoneditor'
 
   const schema = {
     title: 'Employee',
@@ -67,8 +72,14 @@
     }
   }
 
+  // create a JSON schema validator powered by Ajv
   const validator = createAjvValidator(schema, schemaRefs)
 
+  // enable rendering a select box for enums
+  function onRenderValue(props) {
+    return renderJSONSchemaEnum(props, schema, schemaRefs) || renderValue(props)
+  }
+
   let content = {
     text: undefined, // used when in code mode
     json: {
@@ -98,11 +109,11 @@
   property <code>age</code> which must be a positive integer.
 </p>
 <p>
-  See <a href="http://json-schema.org/" target="_blank">http://json-schema.org/</a> for more information.
+  See <a href="https://json-schema.org/" target="_blank">https://json-schema.org/</a> for more information.
 </p>
 
 <div class="editor">
-  <JSONEditor bind:content {validator} />
+  <JSONEditor bind:content {validator} {onRenderValue} />
 </div>
 
 <style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 3868c1d3..b7109df9 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -23,6 +23,9 @@
     <li>
       <a href="examples/custom_validation">Custom validation</a>
     </li>
+    <li>
+      <a href="examples/custom_value_renderer">Custom value renderer (password, enum)</a>
+    </li>
     <li>
       <a href="examples/json_schema_validation">JSON Schema validation</a>
     </li>
diff --git a/svelte.config.js b/svelte.config.js
index 8f101519..88dd5093 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,3 +1,4 @@
+import path from 'path'
 import preprocess from 'svelte-preprocess'
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -12,6 +13,14 @@ const config = {
 
     package: {
       dir: 'package'
+    },
+
+    vite: {
+      resolve: {
+        alias: {
+          'svelte-jsoneditor': path.resolve('src/lib')
+        }
+      }
     }
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 4a0c2f69..15650c7b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,7 +24,8 @@
     "checkJs": false,
     "paths": {
       "$lib": ["src/lib"],
-      "$lib/*": ["src/lib/*"]
+      "$lib/*": ["src/lib/*"],
+      "svelte-jsoneditor": ["src/lib"]
     }
   },
   "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]