diff --git a/src/lib/components/__snapshots__/JSONEditor.test.ts.snap b/src/lib/components/__snapshots__/JSONEditor.test.ts.snap
index cd46531e..2a2f2623 100644
--- a/src/lib/components/__snapshots__/JSONEditor.test.ts.snap
+++ b/src/lib/components/__snapshots__/JSONEditor.test.ts.snap
@@ -471,7 +471,7 @@ exports[`JSONEditor > render text mode 1`] = `
     class="jse-main svelte-ybuk0j"
   >
     <div
-      class="jse-text-mode svelte-a0poeb"
+      class="jse-text-mode svelte-1vwn58i"
     >
       <div
         class="jse-menu svelte-7deygj"
@@ -701,7 +701,7 @@ exports[`JSONEditor > render text mode 1`] = `
       </div>
        
       <div
-        class="jse-contents svelte-a0poeb"
+        class="jse-contents svelte-1vwn58i"
       >
         <div
           class="cm-editor ͼ1 ͼ2 ͼ4 ͼt"
diff --git a/src/lib/components/controls/SearchBox.svelte b/src/lib/components/controls/SearchBox.svelte
index 066120eb..b3892974 100644
--- a/src/lib/components/controls/SearchBox.svelte
+++ b/src/lib/components/controls/SearchBox.svelte
@@ -15,13 +15,13 @@
   import { DEBOUNCE_DELAY, MAX_SEARCH_RESULTS } from '$lib/constants.js'
   import { keyComboFromEvent } from '$lib/utils/keyBindings.js'
   import { createDebug } from '$lib/utils/debug.js'
-  import type { DocumentState, JSONParser, OnPatch, SearchResult } from '$lib/types.js'
+  import type { DocumentState, JSONParser, OnPatch, SearchResultDetails } from '$lib/types.js'
   import {
-    createSearchAndReplaceOperations,
     createSearchAndReplaceAllOperations,
+    createSearchAndReplaceOperations,
+    search,
     searchNext,
     searchPrevious,
-    search,
     updateSearchResult
   } from '$lib/logic/search.js'
   import type { JSONPath } from 'immutable-json-patch'
@@ -30,22 +30,22 @@
   const debug = createDebug('jsoneditor:SearchBox')
 
   export let json: unknown
-  export let documentState: DocumentState
+  export let documentState: DocumentState | undefined
   export let parser: JSONParser
   export let showSearch: boolean
   export let showReplace: boolean
   export let readOnly: boolean
   export let columns: JSONPath[] | undefined
-  export let onSearch: (result: SearchResult | undefined) => void
+  export let onSearch: (result: SearchResultDetails | undefined) => void
   export let onFocus: (path: JSONPath) => Promise<void>
   export let onPatch: OnPatch
   export let onClose: () => void
 
   let text = ''
-  let previousText = ''
+  let appliedText = ''
   let replaceText = ''
   let searching = false
-  let searchResult: SearchResult | undefined
+  let searchResult: SearchResultDetails | undefined
 
   $: resultCount = searchResult?.items?.length || 0
   $: activeIndex = searchResult?.activeIndex || 0
@@ -75,10 +75,9 @@
     if (combo === 'Enter') {
       event.preventDefault()
 
-      const pendingChanges = text !== previousText
+      const pendingChanges = text !== appliedText
       if (pendingChanges) {
         applyChangedSearchTextDebounced.flush()
-        previousText = text
       } else {
         handleNext()
       }
@@ -155,7 +154,8 @@
     )
 
     onPatch(operations, (_, patchedState) => ({
-      state: { ...patchedState, selection: newSelection }
+      state: patchedState,
+      selection: newSelection
     }))
 
     // immediately trigger updating the search results
@@ -182,7 +182,8 @@
     )
 
     onPatch(operations, (_, patchedState) => ({
-      state: { ...patchedState, selection: newSelection }
+      state: patchedState,
+      selection: newSelection
     }))
 
     await handleFocus()
@@ -249,13 +250,14 @@
       return
     }
 
+    appliedText = text
     searching = true
 
     return new Promise<void>((resolve) => {
       setTimeout(() => {
         // wait until the search icon has been rendered
         const newResultItems = search(text, json, { maxResults: MAX_SEARCH_RESULTS, columns })
-        searchResult = updateSearchResult(json, newResultItems, searchResult)
+        searchResult = updateSearchResult(newResultItems, searchResult)
 
         searching = false
         resolve()
diff --git a/src/lib/components/modes/tablemode/TableMode.svelte b/src/lib/components/modes/tablemode/TableMode.svelte
index 354c394f..fc75aca2 100644
--- a/src/lib/components/modes/tablemode/TableMode.svelte
+++ b/src/lib/components/modes/tablemode/TableMode.svelte
@@ -28,7 +28,8 @@
     OnTransformModal,
     ParseError,
     PastedJson,
-    SearchResult,
+    SearchResults,
+    SearchResultDetails,
     SortedColumn,
     TransformModalOptions,
     ValidationError,
@@ -39,7 +40,6 @@
   import TableMenu from './menu/TableMenu.svelte'
   import {
     compileJSONPointer,
-    compileJSONPointerProp,
     existsIn,
     getIn,
     immutableJSONPatch,
@@ -86,7 +86,9 @@
     expandMinimal,
     expandWithCallback,
     getEnforceString,
-    setEnforceString
+    getInRecursiveState,
+    setInDocumentState,
+    syncDocumentState
   } from '$lib/logic/documentState.js'
   import { isObjectOrArray, isUrl, stringConvert } from '$lib/utils/typeUtils.js'
   import InlineValue from './tag/InlineValue.svelte'
@@ -147,8 +149,7 @@
   import type { Context } from 'svelte-simple-modal'
   import createTableContextMenuItems from './contextmenu/createTableContextMenuItems'
   import ContextMenu from '../../controls/contextmenu/ContextMenu.svelte'
-  import { filterValueSearchResults } from '$lib/logic/search.js'
-  import { filterPointerOrUndefined } from 'svelte-jsoneditor/utils/jsonPointer'
+  import { flattenSearchResults, toRecursiveSearchResults } from '$lib/logic/search.js'
 
   const debug = createDebug('jsoneditor:TableMode')
   const { open } = getContext<Context>('simple-modal')
@@ -220,7 +221,8 @@
 
   let pastedJson: PastedJson
 
-  let searchResult: SearchResult | undefined
+  let searchResultDetails: SearchResultDetails | undefined
+  let searchResults: SearchResults | undefined
   let showSearch = false
   let showReplace = false
 
@@ -238,15 +240,15 @@
     })
   }
 
-  function handleSearch(result: SearchResult | undefined) {
-    searchResult = result
+  function handleSearch(result: SearchResultDetails | undefined) {
+    searchResultDetails = result
+    searchResults = searchResultDetails
+      ? toRecursiveSearchResults(json, searchResultDetails.items)
+      : undefined
   }
 
   async function handleFocusSearch(path: JSONPath) {
-    documentState = {
-      ...documentState,
-      selection: null // navigation path of current selection would be confusing
-    }
+    selection = null // navigation path of current selection would be confusing
     await scrollTo(path)
   }
 
@@ -306,56 +308,42 @@
     }
   }
 
-  function clearSortedColumn() {
-    if (documentState.sortedColumn) {
-      documentState = {
-        ...documentState,
-        sortedColumn: null
-      }
-    }
-  }
-
   function updateSelection(
-    selection:
+    updatedSelection:
       | JSONSelection
       | null
       | ((selection: JSONSelection | null) => JSONSelection | null | void | undefined)
   ) {
-    debug('updateSelection', selection)
-
-    const updatedSelection =
-      typeof selection === 'function' ? selection(documentState.selection) || null : selection
+    debug('updateSelection', updatedSelection)
 
-    if (!isEqual(updatedSelection, documentState.selection)) {
-      documentState = {
-        ...documentState,
-        selection: updatedSelection
-      }
+    const appliedSelection =
+      typeof updatedSelection === 'function'
+        ? updatedSelection(selection) || null
+        : updatedSelection
 
-      onSelect(updatedSelection)
+    if (!isEqual(appliedSelection, selection)) {
+      selection = appliedSelection
+      onSelect(appliedSelection)
     }
   }
 
   function clearSelectionWhenNotExisting(json: unknown | undefined) {
-    if (!documentState.selection || json === undefined) {
+    if (!selection || json === undefined) {
       return
     }
 
-    if (
-      existsIn(json, getAnchorPath(documentState.selection)) &&
-      existsIn(json, getFocusPath(documentState.selection))
-    ) {
+    if (existsIn(json, getAnchorPath(selection)) && existsIn(json, getFocusPath(selection))) {
       return
     }
 
-    debug('clearing selection: path does not exist anymore', documentState.selection)
-    documentState = {
-      ...documentState,
-      selection: null // TODO: try find the closest cell that still exists (similar to getInitialSelection)
-    }
+    debug('clearing selection: path does not exist anymore', selection)
+    selection = null // TODO: try find the closest cell that still exists (similar to getInitialSelection)
   }
 
-  let documentState = createDocumentState()
+  let documentState: DocumentState | undefined =
+    json !== undefined ? createDocumentState({ json }) : undefined
+  let selection: JSONSelection | null = null
+  let sortedColumn: SortedColumn | null = null
   let textIsRepaired = false
 
   function onSortByHeader(newSortedColumn: SortedColumn) {
@@ -370,10 +358,8 @@
     const operations = sortJson(json, rootPath, newSortedColumn.path, direction)
     handlePatch(operations, (_, patchedState) => {
       return {
-        state: {
-          ...patchedState,
-          sortedColumn: newSortedColumn
-        }
+        state: patchedState,
+        sortedColumn: newSortedColumn
       }
     })
   }
@@ -415,26 +401,26 @@
       return
     }
 
-    const previousJson = json
-    const previousState = documentState
-    const previousText = text
-    const previousTextIsRepaired = textIsRepaired
+    const previousState = { json, documentState, selection, sortedColumn, text, textIsRepaired }
 
     if (isTextContent(content)) {
       try {
         json = parseMemoizeOne(content.text)
+        documentState = syncDocumentState(json, documentState)
         text = content.text
         textIsRepaired = false
         parseError = undefined
       } catch (err) {
         try {
           json = parseMemoizeOne(jsonrepair(content.text))
+          documentState = syncDocumentState(json, documentState)
           text = content.text
           textIsRepaired = true
           parseError = undefined
         } catch (repairError) {
           // no valid JSON, will show empty document or invalid json
           json = undefined
+          documentState = undefined
           text = content.text
           textIsRepaired = false
           parseError =
@@ -445,6 +431,7 @@
       }
     } else {
       json = content.json
+      documentState = syncDocumentState(json, documentState)
       text = undefined
       textIsRepaired = false
       parseError = undefined
@@ -454,18 +441,13 @@
     clearSelectionWhenNotExisting(json)
 
     // reset the sorting order (we don't know...)
-    clearSortedColumn()
+    sortedColumn = null
 
-    addHistoryItem({
-      previousJson,
-      previousState,
-      previousText,
-      previousTextIsRepaired
-    })
+    addHistoryItem(previousState)
   }
 
   function applyExternalSelection(externalSelection: JSONEditorSelection | null) {
-    if (!isEqual(documentState.selection, externalSelection)) {
+    if (!isEqual(selection, externalSelection)) {
       debug('applyExternalSelection', externalSelection)
 
       if (isJSONSelection(externalSelection) || externalSelection === null) {
@@ -474,82 +456,43 @@
     }
   }
 
-  // TODO: addHistoryItem is a duplicate of addHistoryItem in TreeMode.svelte. Can we extract and reuse this logic?
-  function addHistoryItem({
-    previousJson,
-    previousState,
-    previousText,
-    previousTextIsRepaired
-  }: {
-    previousJson: unknown | undefined
-    previousText: string | undefined
-    previousState: DocumentState
-    previousTextIsRepaired: boolean
-  }) {
-    if (previousJson === undefined && previousText === undefined) {
+  interface PreviousState {
+    json: unknown | undefined
+    text: string | undefined
+    documentState: DocumentState | undefined
+    selection: JSONSelection | null
+    textIsRepaired: boolean
+    sortedColumn: SortedColumn | null
+  }
+
+  function addHistoryItem(previous: PreviousState) {
+    if (previous.json === undefined && previous.text === undefined) {
       // initialization -> do not create a history item
       return
     }
 
-    if (json !== undefined) {
-      if (previousJson !== undefined) {
-        // regular undo/redo with JSON patch
-        history.add({
-          undo: {
-            patch: [{ op: 'replace', path: '', value: previousJson }],
-            state: removeEditModeFromSelection(previousState),
-            json: undefined,
-            text: previousText,
-            textIsRepaired: previousTextIsRepaired
-          },
-          redo: {
-            patch: [{ op: 'replace', path: '', value: json }],
-            state: removeEditModeFromSelection(documentState),
-            json: undefined,
-            text,
-            textIsRepaired
-          }
-        })
-      } else {
-        history.add({
-          undo: {
-            patch: undefined,
-            json: undefined,
-            text: previousText,
-            state: removeEditModeFromSelection(previousState),
-            textIsRepaired: previousTextIsRepaired
-          },
-          redo: {
-            patch: undefined,
-            json,
-            state: removeEditModeFromSelection(documentState),
-            text,
-            textIsRepaired
-          }
-        })
-      }
-    } else {
-      if (previousJson !== undefined) {
-        history.add({
-          undo: {
-            patch: undefined,
-            json: previousJson,
-            state: removeEditModeFromSelection(previousState),
-            text: previousText,
-            textIsRepaired: previousTextIsRepaired
-          },
-          redo: {
-            patch: undefined,
-            json: undefined,
-            text,
-            textIsRepaired,
-            state: removeEditModeFromSelection(documentState)
-          }
-        })
-      } else {
-        // this cannot happen. Nothing to do, no change
+    const canPatch = json !== undefined && previous.json !== undefined
+
+    history.add({
+      undo: {
+        patch: canPatch ? [{ op: 'replace', path: '', value: previous.json }] : undefined,
+        json: previous.json,
+        text: previous.text,
+        documentState: previous.documentState,
+        textIsRepaired: previous.textIsRepaired,
+        selection: removeEditModeFromSelection(previous.selection),
+        sortedColumn: previous.sortedColumn
+      },
+      redo: {
+        patch: canPatch ? [{ op: 'replace', path: '', value: json }] : undefined,
+        json,
+        text,
+        documentState,
+        textIsRepaired,
+        selection: removeEditModeFromSelection(selection),
+        sortedColumn
       }
-    }
+    })
   }
 
   let validationErrors: ValidationError[] = []
@@ -617,8 +560,14 @@
     }
 
     const previousJson = json
-    const previousState = documentState
-    const previousTextIsRepaired = textIsRepaired
+    const previousState: PreviousState = {
+      json: undefined, // not needed: we use patch to reconstruct the json
+      text,
+      documentState,
+      selection: removeEditModeFromSelection(selection),
+      sortedColumn,
+      textIsRepaired
+    }
 
     // execute the patch operations
     const undo: JSONPatchDocument = revertJSONPatchWithMoveOperations(
@@ -630,20 +579,22 @@
     // Clear the sorted column when needed. We need to do this before `afterPatch`,
     // else we clear any changed made in the callback. It is a bit odd that
     // afterPatch does not receive the actual previousDocumentState. Better ideas?
-    const patchedJson = patched.json
-    const patchedDocumentState = clearSortedColumnWhenAffectedByOperations(
-      documentState,
+    const patchedSortedColumn = clearSortedColumnWhenAffectedByOperations(
+      sortedColumn,
       operations,
       columns
     )
 
     const callback =
-      typeof afterPatch === 'function' ? afterPatch(patchedJson, patchedDocumentState) : undefined
-
-    json = callback && callback.json !== undefined ? callback.json : patchedJson
-    const newState =
-      callback && callback.state !== undefined ? callback.state : patchedDocumentState
-    documentState = newState
+      typeof afterPatch === 'function'
+        ? afterPatch(patched.json, patched.state, selection)
+        : undefined
+
+    json = callback?.json !== undefined ? callback.json : patched.json
+    documentState = callback?.state !== undefined ? callback.state : patched.state
+    selection = callback?.selection !== undefined ? callback.selection : selection
+    sortedColumn =
+      callback?.sortedColumn !== undefined ? callback.sortedColumn : patchedSortedColumn
     text = undefined
     textIsRepaired = false
     pastedJson = undefined
@@ -652,16 +603,15 @@
     history.add({
       undo: {
         patch: undo,
-        json: undefined,
-        text: undefined,
-        state: removeEditModeFromSelection(previousState),
-        textIsRepaired: previousTextIsRepaired
+        ...previousState
       },
       redo: {
         patch: operations,
-        json: undefined,
-        state: removeEditModeFromSelection(newState),
+        json: undefined, // not needed: we use patch to reconstruct the json
         text: undefined,
+        documentState,
+        selection: removeEditModeFromSelection(selection),
+        sortedColumn,
         textIsRepaired
       }
     })
@@ -761,10 +711,7 @@
     const path = getDataPathFromTarget(target)
     if (path) {
       // when clicking inside the current selection, editing a value, do nothing
-      if (
-        isEditingSelection(documentState.selection) &&
-        pathInSelection(json, documentState.selection, path)
-      ) {
+      if (isEditingSelection(selection) && pathInSelection(json, selection, path)) {
         return
       }
 
@@ -791,18 +738,15 @@
   }
 
   function createDefaultSelectionWhenUndefined() {
-    if (!documentState.selection) {
+    if (!selection) {
       updateSelection(createDefaultSelection())
     }
   }
 
   export function acceptAutoRepair() {
     if (textIsRepaired && json !== undefined) {
-      const previousState = documentState
-      const previousJson = json
-      const previousText = text
       const previousContent = { json, text }
-      const previousTextIsRepaired = textIsRepaired
+      const previousState = { json, documentState, selection, sortedColumn, text, textIsRepaired }
 
       // json stays as is
       text = undefined
@@ -810,12 +754,7 @@
 
       clearSelectionWhenNotExisting(json)
 
-      addHistoryItem({
-        previousJson,
-        previousState,
-        previousText,
-        previousTextIsRepaired
-      })
+      addHistoryItem(previousState)
 
       // we could work out a patchResult, or use patch(), but only when the previous and new
       // contents are both json and not text. We go for simplicity and consistency here and
@@ -964,6 +903,7 @@
     const defaultItems: ContextMenuItem[] = createTableContextMenuItems({
       json,
       documentState,
+      selection,
       readOnly,
       parser,
 
@@ -1020,7 +960,7 @@
   }
 
   function handleContextMenu(event: Event) {
-    if (isEditingSelection(documentState.selection)) {
+    if (isEditingSelection(selection)) {
       return
     }
 
@@ -1079,11 +1019,11 @@
   }
 
   function handleEditValue() {
-    if (readOnly || !documentState.selection) {
+    if (readOnly || !selection) {
       return
     }
 
-    const path = getFocusPath(documentState.selection)
+    const path = getFocusPath(selection)
     const value = getIn(json, path)
     if (isObjectOrArray(value)) {
       openJSONEditorModal(path)
@@ -1093,24 +1033,24 @@
   }
 
   function handleEditRow() {
-    if (readOnly || !documentState.selection) {
+    if (readOnly || !selection) {
       return
     }
 
-    const path = getFocusPath(documentState.selection)
+    const path = getFocusPath(selection)
     const pathRow = path.slice(0, 1)
     openJSONEditorModal(pathRow)
   }
 
   function handleToggleEnforceString() {
-    if (readOnly || !isValueSelection(documentState.selection)) {
+    if (readOnly || !isValueSelection(selection)) {
       return
     }
 
-    const path = documentState.selection.path
+    const path = selection.path
     const pointer = compileJSONPointer(path)
     const value = getIn(json, path)
-    const enforceString = !getEnforceString(value, documentState.enforceStringMap, pointer, parser)
+    const enforceString = !getEnforceString(json, documentState, path, parser)
     const updatedValue = enforceString ? String(value) : stringConvert(String(value), parser)
 
     debug('handleToggleEnforceString', { enforceString, value, updatedValue })
@@ -1125,7 +1065,7 @@
       ],
       (_, patchedState) => {
         return {
-          state: setEnforceString(patchedState, pointer, enforceString)
+          state: setInDocumentState(json, patchedState, path, { type: 'value', enforceString })
         }
       }
     )
@@ -1189,7 +1129,7 @@
   async function handleCut(indent: boolean) {
     await onCut({
       json,
-      documentState,
+      selection,
       indentation: indent ? indentation : undefined,
       readOnly,
       parser,
@@ -1204,7 +1144,7 @@
 
     await onCopy({
       json,
-      documentState,
+      selection,
       indentation: indent ? indentation : undefined,
       parser
     })
@@ -1214,7 +1154,7 @@
     onRemove({
       json,
       text,
-      documentState,
+      selection,
       keepSelection: true,
       readOnly,
       onChange,
@@ -1223,19 +1163,19 @@
   }
 
   function handleDuplicateRow() {
-    onDuplicateRow({ json, documentState, columns, readOnly, onPatch: handlePatch })
+    onDuplicateRow({ json, selection, columns, readOnly, onPatch: handlePatch })
   }
 
   function handleInsertBeforeRow() {
-    onInsertBeforeRow({ json, documentState, columns, readOnly, onPatch: handlePatch })
+    onInsertBeforeRow({ json, selection, columns, readOnly, onPatch: handlePatch })
   }
 
   function handleInsertAfterRow() {
-    onInsertAfterRow({ json, documentState, columns, readOnly, onPatch: handlePatch })
+    onInsertAfterRow({ json, selection, columns, readOnly, onPatch: handlePatch })
   }
 
   function handleRemoveRow() {
-    onRemoveRow({ json, documentState, columns, readOnly, onPatch: handlePatch })
+    onRemoveRow({ json, selection, columns, readOnly, onPatch: handlePatch })
   }
 
   async function handleInsertCharacter(char: string) {
@@ -1244,7 +1184,7 @@
       selectInside: false,
       refJsonEditor,
       json,
-      selection: documentState.selection,
+      selection: selection,
       readOnly,
       parser,
       onPatch: handlePatch,
@@ -1307,8 +1247,8 @@
 
       createDefaultSelectionWhenUndefined()
 
-      if (documentState.selection) {
-        const newSelection = selectPreviousColumn(columns, documentState.selection)
+      if (selection) {
+        const newSelection = selectPreviousColumn(columns, selection)
         updateSelection(newSelection)
         scrollIntoView(getFocusPath(newSelection))
       }
@@ -1319,8 +1259,8 @@
 
       createDefaultSelectionWhenUndefined()
 
-      if (documentState.selection) {
-        const newSelection = selectNextColumn(columns, documentState.selection)
+      if (selection) {
+        const newSelection = selectNextColumn(columns, selection)
         updateSelection(newSelection)
         scrollIntoView(getFocusPath(newSelection))
       }
@@ -1331,8 +1271,8 @@
 
       createDefaultSelectionWhenUndefined()
 
-      if (documentState.selection) {
-        const newSelection = selectPreviousRow(columns, documentState.selection)
+      if (selection) {
+        const newSelection = selectPreviousRow(columns, selection)
         updateSelection(newSelection)
         scrollIntoView(getFocusPath(newSelection))
       }
@@ -1343,18 +1283,18 @@
 
       createDefaultSelectionWhenUndefined()
 
-      if (documentState.selection) {
-        const newSelection = selectNextRow(json, columns, documentState.selection)
+      if (selection) {
+        const newSelection = selectNextRow(json, columns, selection)
         updateSelection(newSelection)
         scrollIntoView(getFocusPath(newSelection))
       }
     }
 
-    if (combo === 'Enter' && documentState.selection) {
-      if (isValueSelection(documentState.selection)) {
+    if (combo === 'Enter' && selection) {
+      if (isValueSelection(selection)) {
         event.preventDefault()
 
-        const path = documentState.selection.path
+        const path = selection.path
         const value = getIn(json, path)
         if (isObjectOrArray(value)) {
           // edit nested object/array
@@ -1362,14 +1302,14 @@
         } else {
           if (!readOnly) {
             // go to value edit mode
-            updateSelection({ ...documentState.selection, edit: true })
+            updateSelection({ ...selection, edit: true })
           }
         }
       }
     }
 
     const normalizedCombo = combo.replace(/^Shift\+/, '') // replace 'Shift+A' with 'A'
-    if (normalizedCombo.length === 1 && documentState.selection) {
+    if (normalizedCombo.length === 1 && selection) {
       // a regular key like a, A, _, etc is entered.
       // Replace selected contents with a new value having this first character as text
       event.preventDefault()
@@ -1377,8 +1317,8 @@
       return
     }
 
-    if (combo === 'Ctrl+Enter' && isValueSelection(documentState.selection)) {
-      const value = getIn(json, documentState.selection.path)
+    if (combo === 'Ctrl+Enter' && isValueSelection(selection)) {
+      const value = getIn(json, selection.path)
 
       if (isUrl(value)) {
         // open url in new page
@@ -1386,7 +1326,7 @@
       }
     }
 
-    if (combo === 'Escape' && documentState.selection) {
+    if (combo === 'Escape' && selection) {
       event.preventDefault()
       updateSelection(null)
     }
@@ -1425,7 +1365,7 @@
     onPaste({
       clipboardText,
       json,
-      selection: documentState.selection,
+      selection: selection,
       readOnly,
       parser,
       onPatch: handlePatch,
@@ -1436,19 +1376,25 @@
 
   // TODO: this function is duplicated from TreeMode. See if we can reuse the code instead
   function handleReplaceJson(updatedJson: unknown, afterPatch?: AfterPatchCallback) {
-    const previousState = documentState
-    const previousJson = json
-    const previousText = text
     const previousContent = { json, text }
-    const previousTextIsRepaired = textIsRepaired
+    const previousState = { json, documentState, selection, sortedColumn, text, textIsRepaired }
 
-    const updatedState = expandWithCallback(json, documentState, [], expandMinimal)
+    const updatedState = expandWithCallback(
+      json,
+      syncDocumentState(updatedJson, documentState),
+      [],
+      expandMinimal
+    )
 
     const callback =
-      typeof afterPatch === 'function' ? afterPatch(updatedJson, updatedState) : undefined
-
-    json = callback && callback.json !== undefined ? callback.json : updatedJson
-    documentState = callback && callback.state !== undefined ? callback.state : updatedState
+      typeof afterPatch === 'function'
+        ? afterPatch(updatedJson, updatedState, selection)
+        : undefined
+
+    json = callback?.json !== undefined ? callback.json : updatedJson
+    documentState = callback?.state !== undefined ? callback.state : updatedState
+    selection = callback?.selection !== undefined ? callback.selection : selection
+    sortedColumn = null // we can't know whether the new json is still sorted or not
     text = undefined
     textIsRepaired = false
     parseError = undefined
@@ -1456,12 +1402,7 @@
     // make sure the selection is valid
     clearSelectionWhenNotExisting(json)
 
-    addHistoryItem({
-      previousJson,
-      previousState,
-      previousText,
-      previousTextIsRepaired
-    })
+    addHistoryItem(previousState)
 
     // we could work out a patchResult, or use patch(), but only when the previous and new
     // contents are both json and not text. We go for simplicity and consistency here and
@@ -1475,29 +1416,36 @@
   function handleChangeText(updatedText: string, afterPatch?: AfterPatchCallback) {
     debug('handleChangeText')
 
-    const previousState = documentState
-    const previousJson = json
-    const previousText = text
     const previousContent = { json, text }
-    const previousTextIsRepaired = textIsRepaired
+    const previousState = { json, documentState, selection, sortedColumn, text, textIsRepaired }
 
     try {
       json = parseMemoizeOne(updatedText)
-      documentState = expandWithCallback(json, documentState, [], expandMinimal)
+      documentState = expandWithCallback(
+        json,
+        syncDocumentState(json, documentState),
+        [],
+        expandMinimal
+      )
       text = undefined
       textIsRepaired = false
       parseError = undefined
     } catch (err) {
       try {
         json = parseMemoizeOne(jsonrepair(updatedText))
-        documentState = expandWithCallback(json, documentState, [], expandMinimal)
+        documentState = expandWithCallback(
+          json,
+          syncDocumentState(json, documentState),
+          [],
+          expandMinimal
+        )
         text = updatedText
         textIsRepaired = true
         parseError = undefined
       } catch (repairError) {
         // no valid JSON, will show empty document or invalid json
         json = undefined
-        documentState = createDocumentState({ json, expand: expandMinimal })
+        documentState = undefined
         text = updatedText
         textIsRepaired = false
         parseError =
@@ -1508,21 +1456,17 @@
     }
 
     if (typeof afterPatch === 'function') {
-      const callback = afterPatch(json, documentState)
+      const callback = afterPatch(json, documentState, selection)
 
-      json = callback && callback.json ? callback.json : json
-      documentState = callback && callback.state ? callback.state : documentState
+      json = callback?.json !== undefined ? callback.json : json
+      documentState = callback?.state !== undefined ? callback.state : documentState
+      selection = callback?.selection !== undefined ? callback.selection : selection
     }
 
     // ensure the selection is valid
     clearSelectionWhenNotExisting(json)
 
-    addHistoryItem({
-      previousJson,
-      previousState,
-      previousText,
-      previousTextIsRepaired
-    })
+    addHistoryItem(previousState)
 
     // no JSON patch actions available in text mode
     const patchResult = null
@@ -1554,12 +1498,10 @@
 
         handlePatch(operations, (_, patchedState) => {
           return {
-            state: {
-              ...patchedState,
-              sortedColumn: {
-                path: itemPath,
-                sortDirection: direction === -1 ? SortDirection.desc : SortDirection.asc
-              }
+            state: patchedState,
+            sortedColumn: {
+              path: itemPath,
+              sortDirection: direction === -1 ? SortDirection.desc : SortDirection.asc
             }
           }
         })
@@ -1697,7 +1639,9 @@
     const previousContent = { json, text }
 
     json = item.undo.patch ? immutableJSONPatch(json, item.undo.patch) : item.undo.json
-    documentState = item.undo.state
+    documentState = item.undo.documentState
+    selection = item.undo.selection
+    sortedColumn = item.undo.sortedColumn
     text = item.undo.text
     textIsRepaired = item.undo.textIsRepaired
     parseError = undefined
@@ -1717,8 +1661,8 @@
     emitOnChange(previousContent, patchResult)
 
     focus()
-    if (documentState.selection) {
-      scrollTo(getFocusPath(documentState.selection), false)
+    if (selection) {
+      scrollTo(getFocusPath(selection), false)
     }
   }
 
@@ -1739,7 +1683,9 @@
     const previousContent = { json, text }
 
     json = item.redo.patch ? immutableJSONPatch(json, item.redo.patch) : item.redo.json
-    documentState = item.redo.state
+    documentState = item.redo.documentState
+    selection = item.redo.selection
+    sortedColumn = item.redo.sortedColumn
     text = item.redo.text
     textIsRepaired = item.redo.textIsRepaired
     parseError = undefined
@@ -1759,8 +1705,8 @@
     emitOnChange(previousContent, patchResult)
 
     focus()
-    if (documentState.selection) {
-      scrollTo(getFocusPath(documentState.selection), false)
+    if (selection) {
+      scrollTo(getFocusPath(selection), false)
     }
   }
 
@@ -1849,12 +1795,7 @@
               </th>
               {#each columns as column}
                 <th class="jse-table-cell jse-table-cell-header">
-                  <ColumnHeader
-                    path={column}
-                    sortedColumn={documentState.sortedColumn}
-                    {readOnly}
-                    onSort={onSortByHeader}
-                  />
+                  <ColumnHeader path={column} {sortedColumn} {readOnly} onSort={onSortByHeader} />
                 </th>
               {/each}
               {#if showRefreshButton}
@@ -1877,9 +1818,9 @@
                 [String(rowIndex)],
                 validationErrorsByRow?.row
               )}
-              {@const searchResultItemsByRow = searchResult?.itemsMap
-                ? filterPointerOrUndefined(searchResult?.itemsMap, compileJSONPointerProp(rowIndex))
-                : undefined}
+              {@const searchResultByRow = getInRecursiveState(json, searchResults, [
+                String(rowIndex)
+              ])}
               <tr class="jse-table-row">
                 {#key rowIndex}
                   <th
@@ -1894,11 +1835,9 @@
                 {/key}
                 {#each columns as column, columnIndex}
                   {@const path = [String(rowIndex)].concat(column)}
-                  {@const pointer = compileJSONPointer(path)}
                   {@const value = getIn(item, column)}
                   {@const isSelected =
-                    isValueSelection(documentState.selection) &&
-                    pathStartsWith(documentState.selection.path, path)}
+                    isValueSelection(selection) && pathStartsWith(selection.path, path)}
                   {@const validationErrorsByColumn = validationErrorsByRow?.columns[columnIndex]}
                   {@const validationError = mergeValidationErrors(path, validationErrorsByColumn)}
                   <td
@@ -1907,13 +1846,12 @@
                     class:jse-selected-value={isSelected}
                   >
                     {#if isObjectOrArray(value)}
-                      {@const searchResultItemsByCell = searchResultItemsByRow
-                        ? filterPointerOrUndefined(searchResultItemsByRow, pointer)
-                        : undefined}
-                      {@const containsActiveSearchResult = searchResultItemsByCell
-                        ? Object.values(searchResultItemsByCell).some((items) =>
-                            items.some((item) => item.active)
-                          )
+                      {@const searchResultsByCell = flattenSearchResults(
+                        getInRecursiveState(item, searchResultByRow, column)
+                      )}
+
+                      {@const containsActiveSearchResult = searchResultsByCell
+                        ? searchResultsByCell.some((item) => item.active)
                         : false}
 
                       <InlineValue
@@ -1921,27 +1859,24 @@
                         {value}
                         {parser}
                         {isSelected}
-                        containsSearchResult={!isEmpty(searchResultItemsByCell)}
+                        containsSearchResult={!isEmpty(searchResultsByCell)}
                         {containsActiveSearchResult}
                         onEdit={openJSONEditorModal}
                       />{:else}
-                      {@const searchResultItemsByCell = searchResult?.itemsMap
-                        ? filterValueSearchResults(searchResult?.itemsMap, pointer)
-                        : undefined}
+                      {@const searchResultItemsByCell = getInRecursiveState(
+                        json,
+                        searchResults,
+                        path
+                      )?.searchResults}
 
                       <JSONValueComponent
                         {path}
                         value={value !== undefined ? value : ''}
-                        enforceString={getEnforceString(
-                          value,
-                          documentState.enforceStringMap,
-                          pointer,
-                          context.parser
-                        )}
-                        selection={isSelected ? documentState.selection : null}
+                        enforceString={getEnforceString(json, documentState, path, context.parser)}
+                        selection={isSelected ? selection : null}
                         searchResultItems={searchResultItemsByCell}
                         {context}
-                      />{/if}{#if !readOnly && isSelected && !isEditingSelection(documentState.selection)}
+                      />{/if}{#if !readOnly && isSelected && !isEditingSelection(selection)}
                       <div class="jse-context-menu-anchor">
                         <ContextMenuPointer selected={true} onContextMenu={openContextMenu} />
                       </div>
diff --git a/src/lib/components/modes/tablemode/contextmenu/createTableContextMenuItems.ts b/src/lib/components/modes/tablemode/contextmenu/createTableContextMenuItems.ts
index f510f525..ac0369b8 100644
--- a/src/lib/components/modes/tablemode/contextmenu/createTableContextMenuItems.ts
+++ b/src/lib/components/modes/tablemode/contextmenu/createTableContextMenuItems.ts
@@ -1,4 +1,4 @@
-import type { ContextMenuItem, DocumentState, JSONParser } from 'svelte-jsoneditor'
+import type { ContextMenuItem, DocumentState, JSONParser, JSONSelection } from 'svelte-jsoneditor'
 import {
   faCheckSquare,
   faClone,
@@ -11,7 +11,7 @@ import {
   faTrashCan
 } from '@fortawesome/free-solid-svg-icons'
 import { isKeySelection, isMultiSelection, isValueSelection } from '$lib/logic/selection'
-import { compileJSONPointer, getIn } from 'immutable-json-patch'
+import { getIn } from 'immutable-json-patch'
 import { getFocusPath, singleItemSelected } from '$lib/logic/selection'
 import { isObjectOrArray } from '$lib/utils/typeUtils'
 import { getEnforceString } from '$lib/logic/documentState'
@@ -19,6 +19,7 @@ import { getEnforceString } from '$lib/logic/documentState'
 export default function ({
   json,
   documentState,
+  selection,
   readOnly,
   parser,
   onEditValue,
@@ -34,7 +35,8 @@ export default function ({
   onRemoveRow
 }: {
   json: unknown | undefined
-  documentState: DocumentState
+  documentState: DocumentState | undefined
+  selection: JSONSelection | null
   readOnly: boolean
   parser: JSONParser
   onEditValue: () => void
@@ -49,8 +51,6 @@ export default function ({
   onInsertAfterRow: () => void
   onRemoveRow: () => void
 }): ContextMenuItem[] {
-  const selection = documentState.selection
-
   const hasJson = json !== undefined
   const hasSelection = !!selection
   const focusValue =
@@ -66,13 +66,8 @@ export default function ({
   const canCut = !readOnly && hasSelectionContents
 
   const enforceString =
-    selection != null && focusValue !== undefined
-      ? getEnforceString(
-          focusValue,
-          documentState.enforceStringMap,
-          compileJSONPointer(getFocusPath(selection)),
-          parser
-        )
+    selection != null
+      ? getEnforceString(json, documentState, getFocusPath(selection), parser)
       : false
 
   return [
diff --git a/src/lib/components/modes/treemode/JSONKey.svelte b/src/lib/components/modes/treemode/JSONKey.svelte
index d53c4626..2458650c 100644
--- a/src/lib/components/modes/treemode/JSONKey.svelte
+++ b/src/lib/components/modes/treemode/JSONKey.svelte
@@ -13,11 +13,11 @@
   import { addNewLineSuffix } from '$lib/utils/domUtils.js'
   import type { ExtendedSearchResultItem, JSONSelection, TreeModeContext } from '$lib/types.js'
   import { UpdateSelectionAfterChange } from '$lib/types.js'
-  import type { JSONPath } from 'immutable-json-patch'
+  import { parseJSONPointer, type JSONPath, type JSONPointer } from 'immutable-json-patch'
   import ContextMenuPointer from '../../../components/controls/contextmenu/ContextMenuPointer.svelte'
   import { classnames } from '$lib/utils/cssUtils.js'
 
-  export let path: JSONPath
+  export let pointer: JSONPointer
   export let key: string
   export let selection: JSONSelection | null
   export let searchResultItems: ExtendedSearchResultItem[] | undefined
@@ -25,6 +25,9 @@
 
   export let context: TreeModeContext
 
+  let path: JSONPath
+  $: path = parseJSONPointer(pointer)
+
   $: isKeySelected = selection ? isKeySelection(selection) && isEqual(selection.path, path) : false
   $: isEditingKey = isKeySelected && isEditingSelection(selection)
 
diff --git a/src/lib/components/modes/treemode/JSONNode.svelte b/src/lib/components/modes/treemode/JSONNode.svelte
index 705463f6..c30887b3 100644
--- a/src/lib/components/modes/treemode/JSONNode.svelte
+++ b/src/lib/components/modes/treemode/JSONNode.svelte
@@ -3,8 +3,8 @@
 <script lang="ts">
   import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons'
   import type { JSONPath, JSONPointer } from 'immutable-json-patch'
-  import { appendToJSONPointer, compileJSONPointer, parseJSONPointer } from 'immutable-json-patch'
-  import { initial, isEqual, last } from 'lodash-es'
+  import { appendToJSONPointer, parseJSONPointer } from 'immutable-json-patch'
+  import { initial, isEqual, last, range } from 'lodash-es'
   import Icon from 'svelte-awesome'
   import {
     DEFAULT_VISIBLE_SECTIONS,
@@ -27,16 +27,15 @@
     getSelectionPaths,
     getStartPath,
     isAfterSelection,
+    isEditingSelection,
     isInsideSelection,
     isKeySelection,
     isMultiSelection,
     isValueSelection,
     pathInSelection,
-    isEditingSelection,
     selectionIfOverlapping
   } from '$lib/logic/selection.js'
   import {
-    encodeDataPath,
     getDataPathFromTarget,
     getSelectionTypeFromTarget,
     isChildOfAttribute,
@@ -54,33 +53,36 @@
   import type {
     AbsolutePopupOptions,
     CaretPosition,
+    DocumentState,
     DraggingState,
-    ExtendedSearchResultItem,
-    JSONNodeItem,
-    JSONNodeProp,
-    JSONPointerMap,
     JSONSelection,
     NestedValidationError,
+    SearchResults,
+    ValidationErrors,
     RenderedItem,
     TreeModeContext,
     VisibleSection
   } from '$lib/types'
   import { SelectionType } from '$lib/types.js'
-  import { filterPointerOrUndefined } from '$lib/utils/jsonPointer.js'
+  import {
+    isArrayRecursiveState,
+    isExpandableState,
+    isObjectRecursiveState
+  } from '$lib/typeguards.js'
   import { filterKeySearchResults, filterValueSearchResults } from '$lib/logic/search.js'
-  import { createMemoizePath } from '$lib/utils/pathUtils.js'
   import ValidationErrorIcon from './ValidationErrorIcon.svelte'
   import { isObject } from '$lib/utils/typeUtils.js'
   import { classnames } from '$lib/utils/cssUtils.js'
   import { isCtrlKeyDown } from 'svelte-jsoneditor/utils/keyBindings'
 
+  // We pass `pointer` instead of `path` because pointer (a string) is immutable.
+  // Without it, *all* nodes would re-render on *every* change in JSON or DocumentState,
+  // because the path changes every time by re-creating it.
+  export let pointer: JSONPointer
   export let value: unknown
-  export let path: JSONPath
-  export let expandedMap: JSONPointerMap<boolean> | undefined
-  export let enforceStringMap: JSONPointerMap<boolean> | undefined
-  export let visibleSectionsMap: JSONPointerMap<VisibleSection[]> | undefined
-  export let validationErrorsMap: JSONPointerMap<NestedValidationError> | undefined
-  export let searchResultItemsMap: JSONPointerMap<ExtendedSearchResultItem[]> | undefined
+  export let state: DocumentState | undefined
+  export let validationErrors: ValidationErrors | undefined
+  export let searchResults: SearchResults | undefined
   export let selection: JSONSelection | null
   export let context: TreeModeContext
   export let onDragSelectionStart: (
@@ -93,125 +95,71 @@
   let hoverTimer: number | undefined = undefined
   let dragging: DraggingState | undefined = undefined
 
-  // important to prevent creating a new path for all children with every re-render,
-  // that would force all children to re-render
-  const memoizePath = createMemoizePath()
-
-  let pointer: JSONPointer
-  $: pointer = compileJSONPointer(path)
+  let path: JSONPath
+  $: path = parseJSONPointer(pointer)
+  $: dataPath = encodeURIComponent(pointer) // This is the same as encodeDataPath(path) but faster
 
   let expanded: boolean
-  $: expanded = expandedMap ? expandedMap[pointer] === true : false
+  $: expanded = isExpandableState(state) ? state.expanded : false
 
-  let enforceString: boolean | undefined
-  $: enforceString = getEnforceString(value, enforceStringMap, pointer, context.parser)
+  let enforceString: boolean
+  $: enforceString = getEnforceString(value, state, [], context.parser)
 
   let visibleSections: VisibleSection[] | undefined
-  $: visibleSections = visibleSectionsMap ? visibleSectionsMap[pointer] : undefined
+  $: visibleSections = isArrayRecursiveState(state) ? state.visibleSections : undefined
 
   let validationError: NestedValidationError | undefined
-  $: validationError = validationErrorsMap ? validationErrorsMap[pointer] : undefined
+  $: validationError = validationErrors?.validationError
 
   let isNodeSelected: boolean
   $: isNodeSelected = pathInSelection(context.getJson(), selection, path)
 
   $: root = path.length === 0
 
-  // TODO: extract getProps into a separate function
-  function getProps(
-    path: JSONPath,
-    object: Record<string, unknown>,
-    expandedMap: JSONPointerMap<boolean> | undefined,
-    enforceStringMap: JSONPointerMap<boolean> | undefined,
-    visibleSectionsMap: JSONPointerMap<VisibleSection[]> | undefined,
-    validationErrorsMap: JSONPointerMap<NestedValidationError> | undefined,
-    searchResultItemsMap: JSONPointerMap<ExtendedSearchResultItem[]> | undefined,
-    selection: JSONSelection | null,
-    dragging: DraggingState | undefined
-  ): JSONNodeProp[] {
-    let props = Object.keys(object).map((key) => {
-      const keyPath = memoizePath(path.concat(key))
-      const keyPointer = appendToJSONPointer(pointer, key)
-      return {
-        key,
-        value: object[key],
-        path: keyPath,
-        expandedMap: filterPointerOrUndefined(expandedMap, keyPointer),
-        enforceStringMap: filterPointerOrUndefined(enforceStringMap, keyPointer),
-        visibleSectionsMap: filterPointerOrUndefined(visibleSectionsMap, keyPointer),
-        validationErrorsMap: filterPointerOrUndefined(validationErrorsMap, keyPointer),
-        keySearchResultItemsMap: filterKeySearchResults(searchResultItemsMap, keyPointer),
-        valueSearchResultItemsMap: filterPointerOrUndefined(searchResultItemsMap, keyPointer),
-        selection: selectionIfOverlapping(context.getJson(), selection, keyPath)
-      }
-    })
+  /**
+   * Get sorted keys, applying dragging order
+   */
+  function getKeys(object: Record<string, unknown>, dragging: DraggingState | undefined): string[] {
+    const keys = Object.keys(object)
 
-    // reorder the props when dragging
+    // reorder the keys whilst dragging
     if (dragging && dragging.offset !== 0) {
-      props = moveItems(
-        props,
+      return moveItems(
+        keys,
         dragging.selectionStartIndex,
         dragging.selectionItemsCount,
         dragging.offset
       )
     }
 
-    return props
+    return keys
+  }
+
+  interface ItemIndex {
+    index: number
+    gutterIndex: number
   }
 
-  // TODO: extract getItems into a separate function
   function getItems(
-    path: JSONPath,
     array: Array<unknown>,
     visibleSection: VisibleSection,
-    expandedMap: JSONPointerMap<boolean> | undefined,
-    enforceStringMap: JSONPointerMap<boolean> | undefined,
-    visibleSectionsMap: JSONPointerMap<VisibleSection[]> | undefined,
-    validationErrorsMap: JSONPointerMap<NestedValidationError> | undefined,
-    searchResultItemsMap: JSONPointerMap<ExtendedSearchResultItem[]> | undefined,
-    selection: JSONSelection | null,
     dragging: DraggingState | undefined
-  ): JSONNodeItem[] {
+  ): ItemIndex[] {
     const start = visibleSection.start
     const end = Math.min(visibleSection.end, array.length)
-    let items: JSONNodeItem[] = []
-
-    for (let index = start; index < end; index++) {
-      const itemPath = memoizePath(path.concat(String(index)))
-      const itemPointer = appendToJSONPointer(pointer, index)
-
-      items.push({
-        index,
-        value: array[index],
-        path: itemPath,
-        expandedMap: filterPointerOrUndefined(expandedMap, itemPointer),
-        enforceStringMap: filterPointerOrUndefined(enforceStringMap, itemPointer),
-        visibleSectionsMap: filterPointerOrUndefined(visibleSectionsMap, itemPointer),
-        validationErrorsMap: filterPointerOrUndefined(validationErrorsMap, itemPointer),
-        searchResultItemsMap: filterPointerOrUndefined(searchResultItemsMap, itemPointer),
-        selection: selectionIfOverlapping(context.getJson(), selection, itemPath)
-      })
-    }
+    const indices = range(start, end)
 
-    // reorder the items when dragging
+    // reorder the items whilst dragging
     if (dragging && dragging.offset !== 0) {
-      const originalIndexes = items.map((item) => item.index)
-
-      items = moveItems(
-        items,
+      return moveItems(
+        indices,
         dragging.selectionStartIndex,
         dragging.selectionItemsCount,
         dragging.offset
-      )
-
-      // maintain the original indexes. Indexes must keep the same order,
-      // note that the indexes can be a visible section from 200-300 for example
-      for (let i = 0; i < items.length; i++) {
-        items[i].index = originalIndexes[i]
-      }
+      ).map((index, gutterIndex) => ({ index, gutterIndex }))
     }
 
-    return items
+    return indices.map((index) => ({ index, gutterIndex: index }))
   }
 
   function toggleExpand(event: MouseEvent) {
@@ -290,7 +238,7 @@
 
     if (event.shiftKey) {
       // Shift+Click will select multiple entries
-      const fullSelection = context.getDocumentState().selection
+      const fullSelection = context.getSelection()
       if (fullSelection) {
         context.onSelect(createMultiSelection(getAnchorPath(fullSelection), path))
       }
@@ -409,10 +357,9 @@
     }
     const initialPath = getStartPath(json, selection)
     const selectionStartIndex = items.findIndex((item) => isEqual(item.path, initialPath))
-    const documentState = context.getDocumentState()
     const { offset } = onMoveSelection({
       json,
-      documentState,
+      selection: context.getSelection(),
       deltaY: 0,
       items
     })
@@ -439,12 +386,11 @@
       if (json === undefined) {
         return
       }
-      const documentState = context.getDocumentState()
 
       const deltaY = calculateDeltaY(dragging, event)
       const { offset } = onMoveSelection({
         json,
-        documentState,
+        selection: context.getSelection(),
         deltaY,
         items: dragging.items
       })
@@ -467,21 +413,18 @@
       if (json === undefined) {
         return
       }
-      const documentState = context.getDocumentState()
       const deltaY = calculateDeltaY(dragging, event)
       const { operations, updatedSelection } = onMoveSelection({
         json,
-        documentState,
+        selection: context.getSelection(),
         deltaY,
         items: dragging.items
       })
 
       if (operations) {
         context.onPatch(operations, (_, patchedState) => ({
-          state: {
-            ...patchedState,
-            selection: updatedSelection || selection
-          }
+          state: patchedState,
+          selection: updatedSelection ?? selection
         }))
       } else {
         // the user did click inside the selection and no contents have been dragged,
@@ -625,7 +568,7 @@
     { 'jse-expanded': expanded },
     context.onClassName(path, value)
   )}
-  data-path={encodeDataPath(path)}
+  data-path={dataPath}
   aria-selected={isNodeSelected}
   style:--level={path.length}
   class:jse-root={root}
@@ -722,21 +665,31 @@
           </div>
         {/if}
         {#each visibleSections || DEFAULT_VISIBLE_SECTIONS as visibleSection, sectionIndex (sectionIndex)}
-          {#each getItems(path, value, visibleSection, expandedMap, enforceStringMap, visibleSectionsMap, validationErrorsMap, searchResultItemsMap, selection, dragging) as item (item.index)}
+          {#each getItems(value, visibleSection, dragging) as item (item.index)}
+            {@const nestedValidationErrors = isArrayRecursiveState(validationErrors)
+              ? validationErrors.items[item.index]
+              : undefined}
+
+            {@const nestedSelection = selectionIfOverlapping(
+              context.getJson(),
+              selection,
+              path.concat(String(item.index))
+            )}
+
             <svelte:self
-              value={item.value}
-              path={item.path}
-              expandedMap={item.expandedMap}
-              enforceStringMap={item.enforceStringMap}
-              visibleSectionsMap={item.visibleSectionsMap}
-              validationErrorsMap={item.validationErrorsMap}
-              searchResultItemsMap={item.searchResultItemsMap}
-              selection={item.selection}
+              value={value[item.index]}
+              pointer={appendToJSONPointer(pointer, item.index)}
+              state={isArrayRecursiveState(state) ? state.items[item.index] : undefined}
+              validationErrors={nestedValidationErrors}
+              searchResults={isArrayRecursiveState(searchResults)
+                ? searchResults.items[item.index]
+                : undefined}
+              selection={nestedSelection}
               {context}
               onDragSelectionStart={handleDragSelectionStart}
             >
               <div slot="identifier" class="jse-identifier">
-                <div class="jse-index">{item.index}</div>
+                <div class="jse-index">{item.gutterIndex}</div>
               </div>
             </svelte:self>
           {/each}
@@ -842,25 +795,39 @@
             />
           </div>
         {/if}
-        {#each getProps(path, value, expandedMap, enforceStringMap, visibleSectionsMap, validationErrorsMap, searchResultItemsMap, selection, dragging) as prop}
+        {#each getKeys(value, dragging) as key}
+          {@const propPointer = appendToJSONPointer(pointer, key)}
+
+          {@const nestedSearchResults = isObjectRecursiveState(searchResults)
+            ? searchResults.properties[key]
+            : undefined}
+
+          {@const nestedValidationErrors = isObjectRecursiveState(validationErrors)
+            ? validationErrors.properties[key]
+            : undefined}
+
+          {@const nestedSelection = selectionIfOverlapping(
+            context.getJson(),
+            selection,
+            path.concat(key)
+          )}
+
           <svelte:self
-            value={prop.value}
-            path={prop.path}
-            expandedMap={prop.expandedMap}
-            enforceStringMap={prop.enforceStringMap}
-            visibleSectionsMap={prop.visibleSectionsMap}
-            validationErrorsMap={prop.validationErrorsMap}
-            searchResultItemsMap={prop.valueSearchResultItemsMap}
-            selection={prop.selection}
+            value={value[key]}
+            pointer={propPointer}
+            state={isObjectRecursiveState(state) ? state.properties[key] : undefined}
+            validationErrors={nestedValidationErrors}
+            searchResults={nestedSearchResults}
+            selection={nestedSelection}
             {context}
             onDragSelectionStart={handleDragSelectionStart}
           >
             <div slot="identifier" class="jse-identifier">
               <JSONKey
-                path={prop.path}
-                key={prop.key}
-                selection={prop.selection}
-                searchResultItems={prop.keySearchResultItemsMap}
+                pointer={propPointer}
+                {key}
+                selection={nestedSelection}
+                searchResultItems={filterKeySearchResults(nestedSearchResults)}
                 {context}
                 onUpdateKey={handleUpdateKey}
               />
@@ -892,9 +859,9 @@
         <JSONValue
           {path}
           {value}
-          enforceString={enforceString || false}
+          {enforceString}
           selection={isNodeSelected ? selection : null}
-          searchResultItems={filterValueSearchResults(searchResultItemsMap, pointer)}
+          searchResultItems={filterValueSearchResults(searchResults)}
           {context}
         />
         {#if !context.readOnly && isNodeSelected && selection && (isValueSelection(selection) || isMultiSelection(selection)) && !isEditingSelection(selection) && isEqual(getFocusPath(selection), path)}
diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
index 663468ae..25fcf51e 100644
--- a/src/lib/components/modes/treemode/TreeMode.svelte
+++ b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -4,8 +4,14 @@
   import { createAutoScrollHandler } from '../../controls/createAutoScrollHandler.js'
   import { faCheck, faCode, faWrench } from '@fortawesome/free-solid-svg-icons'
   import { createDebug } from '$lib/utils/debug.js'
-  import type { JSONPatchDocument, JSONPath } from 'immutable-json-patch'
-  import { compileJSONPointer, existsIn, getIn, immutableJSONPatch } from 'immutable-json-patch'
+  import {
+    compileJSONPointer,
+    existsIn,
+    getIn,
+    immutableJSONPatch,
+    type JSONPatchDocument,
+    type JSONPath
+  } from 'immutable-json-patch'
   import { jsonrepair } from 'jsonrepair'
   import { initial, isEmpty, isEqual, noop, uniqueId } from 'lodash-es'
   import { getContext, onDestroy, onMount, tick } from 'svelte'
@@ -30,7 +36,8 @@
     expandWithCallback,
     getDefaultExpand,
     getEnforceString,
-    setEnforceString
+    setInDocumentState,
+    syncDocumentState
   } from '$lib/logic/documentState.js'
   import { createHistory } from '$lib/logic/history.js'
   import { duplicate, extract, revertJSONPatchWithMoveOperations } from '$lib/logic/operations.js'
@@ -63,10 +70,9 @@
     isSelectionInsidePath,
     isValueSelection,
     removeEditModeFromSelection,
-    selectAll,
-    updateSelectionInDocumentState
+    selectAll
   } from '$lib/logic/selection.js'
-  import { mapValidationErrors, validateJSON } from '$lib/logic/validation.js'
+  import { toRecursiveValidationErrors, validateJSON } from '$lib/logic/validation.js'
   import {
     activeElementIsChildOf,
     createNormalizationFunctions,
@@ -113,9 +119,7 @@
     JSONParser,
     JSONPatchResult,
     JSONPathParser,
-    JSONPointerMap,
     JSONSelection,
-    NestedValidationError,
     OnBlur,
     OnChange,
     OnChangeMode,
@@ -132,7 +136,9 @@
     OnTransformModal,
     ParseError,
     PastedJson,
-    SearchResult,
+    SearchResults,
+    ValidationErrors,
+    SearchResultDetails,
     Section,
     TransformModalOptions,
     TreeModeContext,
@@ -155,6 +161,7 @@
   import type { Context } from 'svelte-simple-modal'
   import ContextMenu from '../../controls/contextmenu/ContextMenu.svelte'
   import createTreeContextMenuItems from './contextmenu/createTreeContextMenuItems'
+  import { toRecursiveSearchResults as toRecursiveSearchResults } from 'svelte-jsoneditor/logic/search.js'
 
   const debug = createDebug('jsoneditor:TreeMode')
 
@@ -228,41 +235,42 @@
   let text: string | undefined
   let parseError: ParseError | undefined = undefined
 
+  let documentStateInitialized = false
+  let documentState: DocumentState | undefined = createDocumentState({ json })
+  let selection: JSONSelection | null
+
   function updateSelection(
-    selection:
+    updatedSelection:
       | JSONSelection
       | null
       | ((selection: JSONSelection | null) => JSONSelection | null | undefined | void)
   ) {
-    debug('updateSelection', selection)
+    debug('updateSelection', updatedSelection)
 
-    const updatedSelection =
-      typeof selection === 'function' ? selection(documentState.selection) || null : selection
+    const appliedSelection =
+      typeof updatedSelection === 'function'
+        ? updatedSelection(selection) || null
+        : updatedSelection
 
-    if (!isEqual(updatedSelection, documentState.selection)) {
-      documentState = {
-        ...documentState,
-        selection: updatedSelection
-      }
+    if (!isEqual(appliedSelection, selection)) {
+      selection = appliedSelection
 
-      onSelect(updatedSelection)
+      onSelect(appliedSelection)
     }
   }
 
-  let documentStateInitialized = false
-  let documentState = createDocumentState()
-
   let normalization: ValueNormalization
   $: normalization = createNormalizationFunctions({
     escapeControlCharacters,
     escapeUnicodeCharacters
   })
 
-  $: debug('selection', documentState.selection)
+  $: debug('selection', selection)
 
   let pastedJson: PastedJson
 
-  let searchResult: SearchResult | undefined
+  let searchResultDetails: SearchResultDetails | undefined
+  let searchResults: SearchResults | undefined
   let showSearch = false
   let showReplace = false
 
@@ -287,15 +295,16 @@
     }
   }
 
-  function handleSearch(result: SearchResult | undefined) {
-    searchResult = result
+  function handleSearch(result: SearchResultDetails | undefined) {
+    searchResultDetails = result
+    searchResults = searchResultDetails
+      ? toRecursiveSearchResults(json, searchResultDetails.items)
+      : undefined
   }
 
   async function handleFocusSearch(path: JSONPath) {
-    documentState = {
-      ...expandPath(json, documentState, path),
-      selection: null // navigation path of current selection would be confusing
-    }
+    documentState = expandPath(json, documentState, path)
+    null // navigation path of current selection would be confusing
     await scrollTo(path)
   }
 
@@ -322,14 +331,8 @@
   export function expand(callback: OnExpand = expandAll) {
     debug('expand')
 
-    // clear the expanded state and visible sections (else you can't collapse anything)
-    const cleanDocumentState = {
-      ...documentState,
-      expandedMap: {},
-      visibleSectionsMap: {}
-    }
-
-    documentState = expandWithCallback(json, cleanDocumentState, [], callback)
+    // FIXME: clear the expanded state and visible sections (else you can't collapse anything using the callback)
+    documentState = expandWithCallback(json, documentState, [], callback)
   }
 
   // two-way binding of externalContent and internal json and text (
@@ -340,11 +343,10 @@
 
   let textIsRepaired = false
 
-  let validationErrors: ValidationError[] = []
-  $: updateValidationErrors(json, validator, parser, validationParser)
+  let validationErrorList: ValidationError[] = []
+  let validationErrors: ValidationErrors | undefined
 
-  let validationErrorsMap: JSONPointerMap<NestedValidationError>
-  $: validationErrorsMap = mapValidationErrors(validationErrors)
+  $: updateValidationErrors(json, validator, parser, validationParser)
 
   // because onChange returns the validation errors and there is also a separate listener,
   // we would execute validation twice. Memoizing the last result solves this.
@@ -358,11 +360,11 @@
   ) {
     measure(
       () => {
-        let newValidationErrors: ValidationError[]
+        let newValidationErrorList: ValidationError[]
         try {
-          newValidationErrors = memoizedValidate(json, validator, parser, validationParser)
+          newValidationErrorList = memoizedValidate(json, validator, parser, validationParser)
         } catch (err) {
-          newValidationErrors = [
+          newValidationErrorList = [
             {
               path: [],
               message: 'Failed to validate: ' + (err as Error).message,
@@ -371,9 +373,10 @@
           ]
         }
 
-        if (!isEqual(newValidationErrors, validationErrors)) {
-          debug('validationErrors changed:', newValidationErrors)
-          validationErrors = newValidationErrors
+        if (!isEqual(newValidationErrorList, validationErrorList)) {
+          debug('validationErrors changed:', newValidationErrorList)
+          validationErrorList = newValidationErrorList
+          validationErrors = toRecursiveValidationErrors(json, validationErrorList)
         }
       },
       (duration) => debug(`validationErrors updated in ${duration} ms`)
@@ -393,18 +396,24 @@
     // make sure the validation results are up-to-date
     // normally, they are only updated on the next tick after the json is changed
     updateValidationErrors(json, validator, parser, validationParser)
-    return !isEmpty(validationErrors) ? { validationErrors } : null
+    return !isEmpty(validationErrorList) ? { validationErrors: validationErrorList } : null
   }
 
   export function getJson() {
     return json
   }
 
-  function getDocumentState(): DocumentState {
+  function getDocumentState(): DocumentState | undefined {
     return documentState
   }
 
+  function getSelection(): JSONSelection | null {
+    return selection
+  }
+
   function applyExternalContent(updatedContent: Content) {
+    debug('applyExternalContent', { updatedContent })
+
     if (isJSONContent(updatedContent)) {
       applyExternalJson(updatedContent.json)
     } else if (isTextContent(updatedContent)) {
@@ -427,24 +436,17 @@
       return
     }
 
-    const previousState = documentState
-    const previousJson = json
-    const previousText = text
-    const previousTextIsRepaired = textIsRepaired
+    const previousState = { documentState, selection, json, text, textIsRepaired }
 
     json = updatedJson
+    documentState = syncDocumentState(updatedJson, documentState)
     expandWhenNotInitialized(json)
     text = undefined
     textIsRepaired = false
     parseError = undefined
     clearSelectionWhenNotExisting(json)
 
-    addHistoryItem({
-      previousJson,
-      previousState,
-      previousText,
-      previousTextIsRepaired
-    })
+    addHistoryItem(previousState)
   }
 
   function applyExternalText(updatedText: string | undefined) {
@@ -461,13 +463,11 @@
       return
     }
 
-    const previousJson = json
-    const previousState = documentState
-    const previousText = text
-    const previousTextIsRepaired = textIsRepaired
+    const previousState = { documentState, selection, json, text, textIsRepaired }
 
     try {
       json = parseMemoizeOne(updatedText)
+      documentState = syncDocumentState(json, documentState)
       expandWhenNotInitialized(json)
       text = updatedText
       textIsRepaired = false
@@ -475,6 +475,7 @@
     } catch (err) {
       try {
         json = parseMemoizeOne(jsonrepair(updatedText))
+        documentState = syncDocumentState(json, documentState)
         expandWhenNotInitialized(json)
         text = updatedText
         textIsRepaired = true
@@ -483,6 +484,7 @@
       } catch (repairError) {
         // no valid JSON, will show empty document or invalid json
         json = undefined
+        documentState = undefined
         text = externalContent['text']
         textIsRepaired = false
         parseError =
@@ -494,134 +496,83 @@
 
     clearSelectionWhenNotExisting(json)
 
-    addHistoryItem({
-      previousJson,
-      previousState,
-      previousText,
-      previousTextIsRepaired
-    })
+    addHistoryItem(previousState)
   }
 
   function applyExternalSelection(externalSelection: JSONEditorSelection | null) {
-    if (!isEqual(documentState.selection, externalSelection)) {
-      debug('applyExternalSelection', externalSelection)
+    if (isEqual(selection, externalSelection)) {
+      return
+    }
 
-      if (isJSONSelection(externalSelection) || externalSelection === null) {
-        updateSelection(externalSelection)
-      }
+    debug('applyExternalSelection', externalSelection)
+
+    if (isJSONSelection(externalSelection) || externalSelection === null) {
+      updateSelection(externalSelection)
     }
   }
 
   function expandWhenNotInitialized(json: unknown) {
     if (!documentStateInitialized) {
       documentStateInitialized = true
-      documentState = expandWithCallback(json, documentState, [], getDefaultExpand(json))
+      documentState = createDocumentState({ json, expand: getDefaultExpand(json) })
     }
   }
 
   function clearSelectionWhenNotExisting(json: unknown) {
-    if (!documentState.selection) {
+    if (!selection) {
       return
     }
 
-    if (
-      existsIn(json, getAnchorPath(documentState.selection)) &&
-      existsIn(json, getFocusPath(documentState.selection))
-    ) {
+    if (existsIn(json, getAnchorPath(selection)) && existsIn(json, getFocusPath(selection))) {
       return
     }
 
-    debug('clearing selection: path does not exist anymore', documentState.selection)
-    documentState = {
-      ...documentState,
-      selection: getInitialSelection(json, documentState)
-    }
+    debug('clearing selection: path does not exist anymore', selection)
+    selection = getInitialSelection(json, documentState)
+  }
+
+  interface PreviousState {
+    json: unknown | undefined
+    text: string | undefined
+    documentState: DocumentState | undefined
+    selection: JSONSelection | null
+    textIsRepaired: boolean
   }
 
-  function addHistoryItem({
-    previousJson,
-    previousState,
-    previousText,
-    previousTextIsRepaired
-  }: {
-    previousJson: unknown | undefined
-    previousText: string | undefined
-    previousState: DocumentState
-    previousTextIsRepaired: boolean
-  }) {
-    if (previousJson === undefined && previousText === undefined) {
+  function addHistoryItem(previous: PreviousState) {
+    if (previous.json === undefined && previous.text === undefined) {
       // initialization -> do not create a history item
       return
     }
 
-    if (json !== undefined) {
-      if (previousJson !== undefined) {
-        // regular undo/redo with JSON patch
-        history.add({
-          undo: {
-            patch: [{ op: 'replace', path: '', value: previousJson }],
-            state: removeEditModeFromSelection(previousState),
-            json: undefined,
-            text: previousText,
-            textIsRepaired: previousTextIsRepaired
-          },
-          redo: {
-            patch: [{ op: 'replace', path: '', value: json }],
-            state: removeEditModeFromSelection(documentState),
-            json: undefined,
-            text,
-            textIsRepaired
-          }
-        })
-      } else {
-        history.add({
-          undo: {
-            patch: undefined,
-            json: undefined,
-            text: previousText,
-            state: removeEditModeFromSelection(previousState),
-            textIsRepaired: previousTextIsRepaired
-          },
-          redo: {
-            patch: undefined,
-            json,
-            state: removeEditModeFromSelection(documentState),
-            text,
-            textIsRepaired
-          }
-        })
-      }
-    } else {
-      if (previousJson !== undefined) {
-        history.add({
-          undo: {
-            patch: undefined,
-            json: previousJson,
-            state: removeEditModeFromSelection(previousState),
-            text: previousText,
-            textIsRepaired: previousTextIsRepaired
-          },
-          redo: {
-            patch: undefined,
-            json: undefined,
-            text,
-            textIsRepaired,
-            state: removeEditModeFromSelection(documentState)
-          }
-        })
-      } else {
-        // this cannot happen. Nothing to do, no change
+    const canPatch = json !== undefined && previous.json !== undefined
+
+    history.add({
+      undo: {
+        patch: canPatch ? [{ op: 'replace', path: '', value: previous.json }] : undefined,
+        json: previous.json,
+        text: previous.text,
+        documentState: previous.documentState,
+        textIsRepaired: previous.textIsRepaired,
+        selection: removeEditModeFromSelection(previous.selection),
+        sortedColumn: null
+      },
+      redo: {
+        patch: canPatch ? [{ op: 'replace', path: '', value: json }] : undefined,
+        json,
+        text,
+        documentState,
+        textIsRepaired,
+        selection: removeEditModeFromSelection(selection),
+        sortedColumn: null
       }
-    }
+    })
   }
 
   function createDefaultSelection() {
     debug('createDefaultSelection')
 
-    documentState = {
-      ...documentState,
-      selection: createValueSelection([], false)
-    }
+    selection = createValueSelection([], false)
   }
 
   export function patch(
@@ -635,9 +586,14 @@
     }
 
     const previousJson = json
-    const previousState = documentState
-    const previousText = text
-    const previousTextIsRepaired = textIsRepaired
+    const previousState = {
+      json: undefined, // not needed: we use patch to reconstruct the json
+      text,
+      documentState,
+      selection: removeEditModeFromSelection(selection),
+      textIsRepaired,
+      sortedColumn: null
+    }
 
     // execute the patch operations
     const undo: JSONPatchDocument = revertJSONPatchWithMoveOperations(
@@ -647,21 +603,16 @@
     const patched = documentStatePatch(json, documentState, operations)
 
     // update the selection based on the operations
-    const updatedSelection = createSelectionFromOperations(json, operations)
-    const patchedDocumentState = updateSelectionInDocumentState(
-      patched.documentState,
-      updatedSelection,
-      false
-    )
-    debug('patch updatedSelection', updatedSelection)
+    const updatedSelection = createSelectionFromOperations(json, operations) ?? selection
 
     const callback =
-      typeof afterPatch === 'function' ? afterPatch(patched.json, patchedDocumentState) : undefined
+      typeof afterPatch === 'function'
+        ? afterPatch(patched.json, patched.state, updatedSelection)
+        : undefined
 
-    json = callback && callback.json !== undefined ? callback.json : patched.json
-    const newState =
-      callback && callback.state !== undefined ? callback.state : patchedDocumentState
-    documentState = newState
+    json = callback?.json !== undefined ? callback.json : patched.json
+    documentState = callback?.state !== undefined ? callback.state : patched.state
+    selection = callback?.selection !== undefined ? callback.selection : updatedSelection
     text = undefined
     textIsRepaired = false
     pastedJson = undefined
@@ -673,16 +624,15 @@
     history.add({
       undo: {
         patch: undo,
-        json: undefined,
-        text: previousText,
-        state: removeEditModeFromSelection(previousState),
-        textIsRepaired: previousTextIsRepaired
+        ...previousState
       },
       redo: {
         patch: operations,
-        json: undefined,
-        state: removeEditModeFromSelection(newState),
+        json: undefined, // not needed, we use patch to reconstruct
         text,
+        documentState,
+        selection: removeEditModeFromSelection(selection),
+        sortedColumn: null,
         textIsRepaired
       }
     })
@@ -703,19 +653,19 @@
   // $: debug('selection', selection)
 
   function handleEditKey() {
-    if (readOnly || !documentState.selection) {
+    if (readOnly || !selection) {
       return
     }
 
-    updateSelection(createKeySelection(getFocusPath(documentState.selection), true))
+    updateSelection(createKeySelection(getFocusPath(selection), true))
   }
 
   function handleEditValue() {
-    if (readOnly || !documentState.selection) {
+    if (readOnly || !selection) {
       return
     }
 
-    const path = getFocusPath(documentState.selection)
+    const path = getFocusPath(selection)
     const value = getIn(json, path)
     if (isObjectOrArray(value)) {
       openJSONEditorModal(path, value)
@@ -725,14 +675,14 @@
   }
 
   function handleToggleEnforceString() {
-    if (readOnly || !isValueSelection(documentState.selection)) {
+    if (readOnly || !isValueSelection(selection)) {
       return
     }
 
-    const path = getFocusPath(documentState.selection)
+    const path = getFocusPath(selection)
     const pointer = compileJSONPointer(path)
     const value = getIn(json, path)
-    const enforceString = !getEnforceString(value, documentState.enforceStringMap, pointer, parser)
+    const enforceString = !getEnforceString(json, documentState, path, parser)
     const updatedValue = enforceString ? String(value) : stringConvert(String(value), parser)
 
     debug('handleToggleEnforceString', { enforceString, value, updatedValue })
@@ -745,9 +695,9 @@
           value: updatedValue
         }
       ],
-      (patchedJson, patchedState) => {
+      (_, patchedState) => {
         return {
-          state: setEnforceString(patchedState, pointer, enforceString)
+          state: setInDocumentState(json, patchedState, path, { type: 'value', enforceString })
         }
       }
     )
@@ -764,7 +714,7 @@
   async function handleCut(indent = true) {
     await onCut({
       json,
-      documentState,
+      selection,
       indentation: indent ? indentation : undefined,
       readOnly,
       parser,
@@ -779,7 +729,7 @@
 
     await onCopy({
       json,
-      documentState,
+      selection,
       indentation: indent ? indentation : undefined,
       parser
     })
@@ -796,7 +746,7 @@
     onPaste({
       clipboardText,
       json,
-      selection: documentState.selection,
+      selection,
       readOnly,
       parser,
       onPatch: handlePatch,
@@ -851,7 +801,7 @@
     onRemove({
       json,
       text,
-      documentState,
+      selection,
       keepSelection: false,
       readOnly,
       onChange,
@@ -863,16 +813,16 @@
     if (
       readOnly ||
       json === undefined ||
-      !documentState.selection ||
+      !selection ||
       !hasSelectionContents ||
-      isEmpty(getFocusPath(documentState.selection)) // root selected, cannot duplicate
+      isEmpty(getFocusPath(selection)) // root selected, cannot duplicate
     ) {
       return
     }
 
-    debug('duplicate', { selection: documentState.selection })
+    debug('duplicate', { selection })
 
-    const operations = duplicate(json, getSelectionPaths(json, documentState.selection))
+    const operations = duplicate(json, getSelectionPaths(json, selection))
 
     handlePatch(operations)
   }
@@ -880,16 +830,16 @@
   function handleExtract() {
     if (
       readOnly ||
-      !documentState.selection ||
-      (!isMultiSelection(documentState.selection) && !isValueSelection(documentState.selection)) ||
-      isEmpty(getFocusPath(documentState.selection)) // root selected, cannot extract
+      !selection ||
+      (!isMultiSelection(selection) && !isValueSelection(selection)) ||
+      isEmpty(getFocusPath(selection)) // root selected, cannot extract
     ) {
       return
     }
 
-    debug('extract', { selection: documentState.selection })
+    debug('extract', { selection })
 
-    const operations = extract(json, documentState.selection)
+    const operations = extract(json, selection)
 
     handlePatch(operations, (patchedJson, patchedState) => {
       if (isObjectOrArray(patchedJson)) {
@@ -908,7 +858,7 @@
       selectInside: true,
       refJsonEditor,
       json,
-      selection: documentState.selection,
+      selection,
       readOnly,
       parser,
       onPatch: handlePatch,
@@ -917,12 +867,12 @@
   }
 
   function handleInsertFromContextMenu(type: InsertType) {
-    if (isKeySelection(documentState.selection)) {
+    if (isKeySelection(selection)) {
       // in this case, we do not want to rename the key, but replace the property
-      updateSelection(createValueSelection(documentState.selection.path, false))
+      updateSelection(createValueSelection(selection.path, false))
     }
 
-    if (!documentState.selection) {
+    if (!selection) {
       updateSelection(getInitialSelection(json, documentState))
     }
 
@@ -930,17 +880,17 @@
   }
 
   function handleConvert(type: ConvertType) {
-    if (readOnly || !documentState.selection) {
+    if (readOnly || !selection) {
       return
     }
 
-    if (!canConvert(documentState.selection)) {
+    if (!canConvert(selection)) {
       onError(new Error(`Cannot convert current selection to ${type}`))
       return
     }
 
     try {
-      const path = getAnchorPath(documentState.selection)
+      const path = getAnchorPath(selection)
       const currentValue: unknown = getIn(json, path)
       const convertedValue = convertValue(
         currentValue,
@@ -956,13 +906,13 @@
         { op: 'replace', path: compileJSONPointer(path), value: convertedValue }
       ]
 
-      debug('handleConvert', { selection: documentState.selection, path, type, operations })
+      debug('handleConvert', { selection, path, type, operations })
 
       handlePatch(operations, (patchedJson, patchedState) => {
         // expand converted object/array
         return {
-          state: documentState.selection
-            ? expandRecursive(patchedJson, patchedState, getFocusPath(documentState.selection))
+          state: selection
+            ? expandRecursive(patchedJson, patchedState, getFocusPath(selection))
             : documentState
         }
       })
@@ -972,12 +922,12 @@
   }
 
   function handleInsertBefore() {
-    if (!documentState.selection) {
+    if (!selection) {
       return
     }
 
-    const selectionBefore = getSelectionUp(json, documentState, false)
-    const parentPath = initial(getFocusPath(documentState.selection))
+    const selectionBefore = getSelectionUp(json, documentState, selection, false)
+    const parentPath = initial(getFocusPath(selection))
 
     if (
       selectionBefore &&
@@ -989,17 +939,17 @@
       updateSelection(createInsideSelection(parentPath))
     }
 
-    debug('insert before', { selection: documentState.selection, selectionBefore, parentPath })
+    debug('insert before', { selection, selectionBefore, parentPath })
 
     tick().then(() => handleContextMenu())
   }
 
   function handleInsertAfter() {
-    if (!documentState.selection) {
+    if (!selection) {
       return
     }
 
-    const path = getEndPath(json, documentState.selection)
+    const path = getEndPath(json, selection)
 
     debug('insert after', path)
 
@@ -1014,7 +964,7 @@
       selectInside: true,
       refJsonEditor,
       json,
-      selection: documentState.selection,
+      selection,
       readOnly,
       parser,
       onPatch: handlePatch,
@@ -1040,12 +990,13 @@
     const previousContent = { json, text }
 
     json = item.undo.patch ? immutableJSONPatch(json, item.undo.patch) : item.undo.json
-    documentState = item.undo.state
+    documentState = item.undo.documentState
+    selection = item.undo.selection
     text = item.undo.text
     textIsRepaired = item.undo.textIsRepaired
     parseError = undefined
 
-    debug('undo', { item, json, documentState })
+    debug('undo', { item, json, documentState, selection })
 
     const patchResult =
       item.undo.patch && item.redo.patch
@@ -1060,8 +1011,8 @@
     emitOnChange(previousContent, patchResult)
 
     focus()
-    if (documentState.selection) {
-      scrollTo(getFocusPath(documentState.selection), false)
+    if (selection) {
+      scrollTo(getFocusPath(selection), false)
     }
   }
 
@@ -1082,12 +1033,13 @@
     const previousContent = { json, text }
 
     json = item.redo.patch ? immutableJSONPatch(json, item.redo.patch) : item.redo.json
-    documentState = item.redo.state
+    documentState = item.redo.documentState
+    selection = item.redo.selection
     text = item.redo.text
     textIsRepaired = item.redo.textIsRepaired
     parseError = undefined
 
-    debug('redo', { item, json, documentState })
+    debug('redo', { item, json, documentState, selection })
 
     const patchResult =
       item.undo.patch && item.redo.patch
@@ -1102,8 +1054,8 @@
     emitOnChange(previousContent, patchResult)
 
     focus()
-    if (documentState.selection) {
-      scrollTo(getFocusPath(documentState.selection), false)
+    if (selection) {
+      scrollTo(getFocusPath(selection), false)
     }
   }
 
@@ -1123,10 +1075,8 @@
 
         handlePatch(operations, (patchedJson, patchedState) => ({
           // expand the newly replaced array and select it
-          state: {
-            ...expandRecursive(patchedJson, patchedState, rootPath),
-            selection: createValueSelection(rootPath, false)
-          }
+          state: expandRecursive(patchedJson, patchedState, rootPath),
+          selection: createValueSelection(rootPath, false)
         }))
       },
       onClose: () => {
@@ -1137,11 +1087,11 @@
   }
 
   function handleSortSelection() {
-    if (!documentState.selection) {
+    if (!selection) {
       return
     }
 
-    const rootPath = findRootPath(json, documentState.selection)
+    const rootPath = findRootPath(json, selection)
     openSortModal(rootPath)
   }
 
@@ -1179,10 +1129,8 @@
 
           handlePatch(operations, (patchedJson, patchedState) => ({
             // expand the newly replaced array and select it
-            state: {
-              ...expandRecursive(patchedJson, patchedState, rootPath),
-              selection: createValueSelection(rootPath, false)
-            }
+            state: expandRecursive(patchedJson, patchedState, rootPath),
+            selection: createValueSelection(rootPath, false)
           }))
         }
       },
@@ -1197,11 +1145,11 @@
   }
 
   function handleTransformSelection() {
-    if (!documentState.selection) {
+    if (!selection) {
       return
     }
 
-    const rootPath = findRootPath(json, documentState.selection)
+    const rootPath = findRootPath(json, selection)
     openTransformModal({
       rootPath
     })
@@ -1354,19 +1302,24 @@
   }
 
   function handleReplaceJson(updatedJson: unknown, afterPatch?: AfterPatchCallback) {
-    const previousState = documentState
-    const previousJson = json
-    const previousText = text
     const previousContent = { json, text }
-    const previousTextIsRepaired = textIsRepaired
+    const previousState = { documentState, selection, json, text, textIsRepaired }
 
-    const updatedState = expandWithCallback(json, documentState, [], expandMinimal)
+    const updatedState = expandWithCallback(
+      json,
+      syncDocumentState(updatedJson, documentState),
+      [],
+      expandMinimal
+    )
 
     const callback =
-      typeof afterPatch === 'function' ? afterPatch(updatedJson, updatedState) : undefined
+      typeof afterPatch === 'function'
+        ? afterPatch(updatedJson, updatedState, selection)
+        : undefined
 
-    json = callback && callback.json !== undefined ? callback.json : updatedJson
-    documentState = callback && callback.state !== undefined ? callback.state : updatedState
+    json = callback?.json !== undefined ? callback.json : updatedJson
+    documentState = callback?.state !== undefined ? callback.state : updatedState
+    selection = callback?.selection !== undefined ? callback.selection : selection
     text = undefined
     textIsRepaired = false
     parseError = undefined
@@ -1374,12 +1327,7 @@
     // make sure the selection is valid
     clearSelectionWhenNotExisting(json)
 
-    addHistoryItem({
-      previousJson,
-      previousState,
-      previousText,
-      previousTextIsRepaired
-    })
+    addHistoryItem(previousState)
 
     // we could work out a patchResult, or use patch(), but only when the previous and new
     // contents are both json and not text. We go for simplicity and consistency here and
@@ -1392,22 +1340,29 @@
   function handleChangeText(updatedText: string, afterPatch?: AfterPatchCallback) {
     debug('handleChangeText')
 
-    const previousState = documentState
-    const previousJson = json
-    const previousText = text
     const previousContent = { json, text }
-    const previousTextIsRepaired = textIsRepaired
+    const previousState = { documentState, selection, json, text, textIsRepaired }
 
     try {
       json = parseMemoizeOne(updatedText)
-      documentState = expandWithCallback(json, documentState, [], expandMinimal)
+      documentState = expandWithCallback(
+        json,
+        syncDocumentState(json, documentState),
+        [],
+        expandMinimal
+      )
       text = undefined
       textIsRepaired = false
       parseError = undefined
     } catch (err) {
       try {
         json = parseMemoizeOne(jsonrepair(updatedText))
-        documentState = expandWithCallback(json, documentState, [], expandMinimal)
+        documentState = expandWithCallback(
+          json,
+          syncDocumentState(json, documentState),
+          [],
+          expandMinimal
+        )
         text = updatedText
         textIsRepaired = true
         parseError = undefined
@@ -1425,21 +1380,17 @@
     }
 
     if (typeof afterPatch === 'function') {
-      const callback = afterPatch(json, documentState)
+      const callback = afterPatch(json, documentState, selection)
 
-      json = callback && callback.json ? callback.json : json
-      documentState = callback && callback.state ? callback.state : documentState
+      json = callback?.json !== undefined ? callback.json : json
+      documentState = callback?.state !== undefined ? callback.state : documentState
+      selection = callback?.selection !== undefined ? callback.selection : selection
     }
 
     // ensure the selection is valid
     clearSelectionWhenNotExisting(json)
 
-    addHistoryItem({
-      previousJson,
-      previousState,
-      previousText,
-      previousTextIsRepaired
-    })
+    addHistoryItem(previousState)
 
     // no JSON patch actions available in text mode
     const patchResult = null
@@ -1454,23 +1405,23 @@
    * @param [recursive=false]  Only applicable when expanding
    */
   function handleExpand(path: JSONPath, expanded: boolean, recursive = false): void {
-    debug('expand', { path, expanded, recursive })
+    debug('handleExpand', { path, expanded, recursive })
 
     if (expanded) {
       if (recursive) {
         documentState = expandWithCallback(json, documentState, path, expandAll)
       } else {
-        documentState = expandSingleItem(documentState, path)
+        documentState = expandSingleItem(json, documentState, path)
       }
     } else {
-      documentState = collapsePath(documentState, path)
-    }
+      documentState = collapsePath(json, documentState, path)
 
-    if (documentState.selection && !expanded) {
-      // check whether the selection is still visible and not collapsed
-      if (isSelectionInsidePath(documentState.selection, path)) {
-        // remove selection when not visible anymore
-        updateSelection(null)
+      if (selection) {
+        // check whether the selection is still visible and not collapsed
+        if (isSelectionInsidePath(selection, path)) {
+          // remove selection when not visible anymore
+          updateSelection(null)
+        }
       }
     }
 
@@ -1502,8 +1453,7 @@
   function handleExpandSection(path: JSONPath, section: Section) {
     debug('handleExpandSection', path, section)
 
-    const pointer = compileJSONPointer(path)
-    documentState = expandSection(json, documentState, pointer, section)
+    documentState = expandSection(json, documentState, path, section)
   }
 
   function handlePasteJson(newPastedJson: PastedJson) {
@@ -1563,8 +1513,8 @@
     if (combo === 'ArrowUp' || combo === 'Shift+ArrowUp') {
       event.preventDefault()
 
-      const newSelection = documentState.selection
-        ? getSelectionUp(json, documentState, keepAnchorPath) || documentState.selection
+      const newSelection = selection
+        ? getSelectionUp(json, documentState, selection, keepAnchorPath) || selection
         : getInitialSelection(json, documentState)
 
       updateSelection(newSelection)
@@ -1573,8 +1523,8 @@
     if (combo === 'ArrowDown' || combo === 'Shift+ArrowDown') {
       event.preventDefault()
 
-      const newSelection = documentState.selection
-        ? getSelectionDown(json, documentState, keepAnchorPath) || documentState.selection
+      const newSelection = selection
+        ? getSelectionDown(json, documentState, selection, keepAnchorPath) || selection
         : getInitialSelection(json, documentState)
 
       updateSelection(newSelection)
@@ -1583,9 +1533,8 @@
     if (combo === 'ArrowLeft' || combo === 'Shift+ArrowLeft') {
       event.preventDefault()
 
-      const newSelection = documentState.selection
-        ? getSelectionLeft(json, documentState, keepAnchorPath, !readOnly) ||
-          documentState.selection
+      const newSelection = selection
+        ? getSelectionLeft(json, documentState, selection, keepAnchorPath, !readOnly) || selection
         : getInitialSelection(json, documentState)
 
       updateSelection(newSelection)
@@ -1595,19 +1544,19 @@
       event.preventDefault()
 
       const newSelection =
-        documentState.selection && json !== undefined
-          ? getSelectionRight(json, documentState, keepAnchorPath, !readOnly) ||
-            documentState.selection
+        selection && json !== undefined
+          ? getSelectionRight(json, documentState, selection, keepAnchorPath, !readOnly) ||
+            selection
           : getInitialSelection(json, documentState)
 
       updateSelection(newSelection)
       scrollIntoView(getFocusPath(newSelection))
     }
 
-    if (combo === 'Enter' && documentState.selection) {
+    if (combo === 'Enter' && selection) {
       // when the selection consists of a single Array item, change selection to editing its value
-      if (isMultiSelectionWithOneItem(documentState.selection)) {
-        const path = documentState.selection.focusPath
+      if (isMultiSelectionWithOneItem(selection)) {
+        const path = selection.focusPath
         const parent = getIn(json, initial(path))
         if (Array.isArray(parent)) {
           // change into selection of the value
@@ -1615,28 +1564,28 @@
         }
       }
 
-      if (isKeySelection(documentState.selection)) {
+      if (isKeySelection(selection)) {
         // go to key edit mode
         event.preventDefault()
-        updateSelection({ ...documentState.selection, edit: true })
+        updateSelection({ ...selection, edit: true })
       }
 
-      if (isValueSelection(documentState.selection)) {
+      if (isValueSelection(selection)) {
         event.preventDefault()
 
-        const value = getIn(json, documentState.selection.path)
+        const value = getIn(json, selection.path)
         if (isObjectOrArray(value)) {
           // expand object/array
-          handleExpand(documentState.selection.path, true)
+          handleExpand(selection.path, true)
         } else {
           // go to value edit mode
-          updateSelection({ ...documentState.selection, edit: true })
+          updateSelection({ ...selection, edit: true })
         }
       }
     }
 
     const normalizedCombo = combo.replace(/^Shift\+/, '') // replace 'Shift+A' with 'A'
-    if (normalizedCombo.length === 1 && documentState.selection) {
+    if (normalizedCombo.length === 1 && selection) {
       // a regular key like a, A, _, etc is entered.
       // Replace selected contents with a new value having this first character as text
       event.preventDefault()
@@ -1644,18 +1593,15 @@
       return
     }
 
-    if (
-      combo === 'Enter' &&
-      (isAfterSelection(documentState.selection) || isInsideSelection(documentState.selection))
-    ) {
+    if (combo === 'Enter' && (isAfterSelection(selection) || isInsideSelection(selection))) {
       // Enter on an insert area -> open the area in edit mode
       event.preventDefault()
       handleInsertCharacter('')
       return
     }
 
-    if (combo === 'Ctrl+Enter' && isValueSelection(documentState.selection)) {
-      const value = getIn(json, documentState.selection.path)
+    if (combo === 'Ctrl+Enter' && isValueSelection(selection)) {
+      const value = getIn(json, selection.path)
 
       if (isUrl(value)) {
         // open url in new page
@@ -1663,7 +1609,7 @@
       }
     }
 
-    if (combo === 'Escape' && documentState.selection) {
+    if (combo === 'Escape' && selection) {
       event.preventDefault()
       updateSelection(null)
     }
@@ -1698,7 +1644,7 @@
       // for example when clicking on the empty area in the main menu
       focus()
 
-      if (!documentState.selection && json === undefined && (text === '' || text === undefined)) {
+      if (!selection && json === undefined && (text === '' || text === undefined)) {
         createDefaultSelection()
       }
     }
@@ -1717,6 +1663,7 @@
     const defaultItems: ContextMenuItem[] = createTreeContextMenuItems({
       json,
       documentState,
+      selection,
       readOnly,
       parser,
 
@@ -1776,7 +1723,7 @@
   }
 
   function handleContextMenu(event?: Event) {
-    if (isEditingSelection(documentState.selection)) {
+    if (isEditingSelection(selection)) {
       return
     }
 
@@ -1902,7 +1849,7 @@
       (element) => element === refJsonEditor
     )
     if (outsideEditor) {
-      if (isEditingSelection(documentState.selection)) {
+      if (isEditingSelection(selection)) {
         debug('click outside the editor, stop edit mode')
         updateSelection((selection) => {
           if (isKeySelection(selection)) {
@@ -1928,7 +1875,7 @@
   }
 
   function findNextInside(path: JSONPath): JSONSelection | null {
-    return getSelectionNextInside(json, documentState, path)
+    return getSelectionNextInside(json, documentState, selection, path)
   }
 
   $: autoScrollHandler = refContents ? createAutoScrollHandler(refContents) : undefined
@@ -1954,6 +1901,7 @@
     normalization,
     getJson,
     getDocumentState,
+    getSelection,
     findElement,
     findNextInside,
     focus,
@@ -1989,7 +1937,7 @@
   {#if mainMenuBar}
     <TreeMenu
       {json}
-      selection={documentState.selection}
+      {selection}
       {readOnly}
       {historyState}
       bind:showSearch
@@ -2006,13 +1954,7 @@
   {/if}
 
   {#if navigationBar}
-    <NavigationBar
-      {json}
-      selection={documentState.selection}
-      onSelect={handleNavigationBarSelect}
-      {onError}
-      {pathParser}
-    />
+    <NavigationBar {json} {selection} onSelect={handleNavigationBarSelect} {onError} {pathParser} />
   {/if}
 
   {#if !isSSR}
@@ -2080,13 +2022,11 @@
       <div class="jse-contents" data-jsoneditor-scrollable-contents={true} bind:this={refContents}>
         <JSONNode
           value={json}
-          path={[]}
-          expandedMap={documentState.expandedMap}
-          enforceStringMap={documentState.enforceStringMap}
-          visibleSectionsMap={documentState.visibleSectionsMap}
-          {validationErrorsMap}
-          searchResultItemsMap={searchResult?.itemsMap}
-          selection={documentState.selection}
+          pointer={''}
+          state={documentState}
+          {validationErrors}
+          {searchResults}
+          {selection}
           {context}
           onDragSelectionStart={noop}
         />
@@ -2142,7 +2082,10 @@
         />
       {/if}
 
-      <ValidationErrorsOverview {validationErrors} selectError={handleSelectValidationError} />
+      <ValidationErrorsOverview
+        validationErrors={validationErrorList}
+        selectError={handleSelectValidationError}
+      />
     {/if}
   {:else}
     <div class="jse-contents">
diff --git a/src/lib/components/modes/treemode/contextmenu/createTreeContextMenuItems.ts b/src/lib/components/modes/treemode/contextmenu/createTreeContextMenuItems.ts
index e8b6b749..9ec7434e 100644
--- a/src/lib/components/modes/treemode/contextmenu/createTreeContextMenuItems.ts
+++ b/src/lib/components/modes/treemode/contextmenu/createTreeContextMenuItems.ts
@@ -18,21 +18,30 @@ import {
 import {
   canConvert,
   getFocusPath,
+  isAfterSelection,
+  isInsideSelection,
   isKeySelection,
   isMultiSelection,
   isValueSelection,
   singleItemSelected
 } from '$lib/logic/selection'
-import type { ConvertType, DocumentState, InsertType, JSONParser } from '$lib/types'
+import type {
+  ConvertType,
+  DocumentState,
+  InsertType,
+  JSONParser,
+  JSONSelection,
+  ContextMenuItem
+} from '$lib/types'
 import { initial, isEmpty } from 'lodash-es'
-import { compileJSONPointer, getIn } from 'immutable-json-patch'
-import { isObjectOrArray, isObject } from '$lib/utils/typeUtils'
+import { getIn } from 'immutable-json-patch'
+import { isObject, isObjectOrArray } from '$lib/utils/typeUtils'
 import { getEnforceString } from '$lib/logic/documentState'
-import type { ContextMenuItem } from 'svelte-jsoneditor'
 
 export default function ({
   json,
   documentState,
+  selection,
   readOnly,
   parser,
   onEditKey,
@@ -52,7 +61,8 @@ export default function ({
   onTransform
 }: {
   json: unknown
-  documentState: DocumentState
+  documentState: DocumentState | undefined
+  selection: JSONSelection | null
   readOnly: boolean
   parser: JSONParser
   onEditKey: () => void
@@ -71,8 +81,6 @@ export default function ({
   onSort: () => void
   onTransform: () => void
 }): ContextMenuItem[] {
-  const selection = documentState.selection
-
   const hasJson = json !== undefined
   const hasSelection = !!selection
   const rootSelected = selection ? isEmpty(getFocusPath(selection)) : false
@@ -87,13 +95,11 @@ export default function ({
     hasJson &&
     (isMultiSelection(selection) || isKeySelection(selection) || isValueSelection(selection))
 
+  const parent =
+    selection && !rootSelected ? getIn(json, initial(getFocusPath(selection))) : undefined
+
   const canEditKey =
-    !readOnly &&
-    hasJson &&
-    selection != null &&
-    singleItemSelected(selection) &&
-    !rootSelected &&
-    !Array.isArray(getIn(json, initial(getFocusPath(selection))))
+    !readOnly && hasJson && singleItemSelected(selection) && !rootSelected && !Array.isArray(parent)
 
   const canEditValue = !readOnly && hasJson && selection != null && singleItemSelected(selection)
   const canEnforceString = canEditValue && !isObjectOrArray(focusValue)
@@ -112,7 +118,10 @@ export default function ({
   const convertMode = hasSelectionContents
   const insertOrConvertText = convertMode ? 'Convert to:' : 'Insert:'
 
-  const canInsertOrConvertStructure = readOnly || convertMode ? false : hasSelection
+  const canInsertOrConvertStructure =
+    !readOnly &&
+    ((isInsideSelection(selection) && Array.isArray(focusValue)) ||
+      (isAfterSelection(selection) && Array.isArray(parent)))
   const canInsertOrConvertObject =
     !readOnly && (convertMode ? canConvert(selection) && !isObject(focusValue) : hasSelection)
   const canInsertOrConvertArray =
@@ -121,13 +130,8 @@ export default function ({
     !readOnly && (convertMode ? canConvert(selection) && isObjectOrArray(focusValue) : hasSelection)
 
   const enforceString =
-    selection != null && focusValue
-      ? getEnforceString(
-          focusValue,
-          documentState.enforceStringMap,
-          compileJSONPointer(getFocusPath(selection)),
-          parser
-        )
+    selection != null
+      ? getEnforceString(json, documentState, getFocusPath(selection), parser)
       : false
 
   function handleInsertOrConvert(type: InsertType) {
@@ -316,7 +320,7 @@ export default function ({
               onClick: () => handleInsertOrConvert('structure'),
               icon: convertMode ? faArrowRightArrowLeft : faPlus,
               text: 'Structure',
-              title: insertOrConvertText + ' structure',
+              title: insertOrConvertText + ' structure like the first item in the array',
               disabled: !canInsertOrConvertStructure
             },
             {
@@ -324,7 +328,7 @@ export default function ({
               onClick: () => handleInsertOrConvert('object'),
               icon: convertMode ? faArrowRightArrowLeft : faPlus,
               text: 'Object',
-              title: insertOrConvertText + ' structure',
+              title: insertOrConvertText + ' object',
               disabled: !canInsertOrConvertObject
             },
             {
diff --git a/src/lib/logic/actions.ts b/src/lib/logic/actions.ts
index a310abd9..44e875b0 100644
--- a/src/lib/logic/actions.ts
+++ b/src/lib/logic/actions.ts
@@ -22,7 +22,6 @@ import {
 } from '$lib/logic/operations.js'
 import type {
   AfterPatchCallback,
-  DocumentState,
   InsertType,
   JSONParser,
   JSONSelection,
@@ -55,7 +54,7 @@ const debug = createDebug('jsoneditor:actions')
 
 export interface OnCutAction {
   json: unknown | undefined
-  documentState: DocumentState
+  selection: JSONSelection | null
   indentation: string | number | undefined
   readOnly: boolean
   parser: JSONParser
@@ -65,50 +64,43 @@ export interface OnCutAction {
 // TODO: write unit tests
 export async function onCut({
   json,
-  documentState,
+  selection,
   indentation,
   readOnly,
   parser,
   onPatch
 }: OnCutAction) {
-  if (
-    readOnly ||
-    json === undefined ||
-    !documentState.selection ||
-    !hasSelectionContents(documentState.selection)
-  ) {
+  if (readOnly || json === undefined || !selection || !hasSelectionContents(selection)) {
     return
   }
 
-  const clipboard = selectionToPartialJson(json, documentState.selection, indentation, parser)
+  const clipboard = selectionToPartialJson(json, selection, indentation, parser)
   if (clipboard == null) {
     return
   }
 
-  debug('cut', { selection: documentState.selection, clipboard, indentation })
+  debug('cut', { selection, clipboard, indentation })
 
   await copyToClipboard(clipboard)
 
-  const { operations, newSelection } = createRemoveOperations(json, documentState.selection)
+  const { operations, newSelection } = createRemoveOperations(json, selection)
 
-  onPatch(operations, (patchedJson, patchedState) => ({
-    state: {
-      ...patchedState,
-      selection: newSelection
-    }
+  onPatch(operations, (_, patchedState) => ({
+    state: patchedState,
+    selection: newSelection
   }))
 }
 
 export interface OnCopyAction {
   json: unknown
-  documentState: DocumentState
+  selection: JSONSelection | null
   indentation: string | number | undefined
   parser: JSONParser
 }
 
 // TODO: write unit tests
-export async function onCopy({ json, documentState, indentation, parser }: OnCopyAction) {
-  const clipboard = selectionToPartialJson(json, documentState.selection, indentation, parser)
+export async function onCopy({ json, selection, indentation, parser }: OnCopyAction) {
+  const clipboard = selectionToPartialJson(json, selection, indentation, parser)
   if (clipboard == null) {
     return
   }
@@ -181,7 +173,7 @@ export function onPaste({
         if (patchedJson) {
           const path: JSONPath = []
           return {
-            state: expandRecursive(patchedJson, patchedState, path) as DocumentState
+            state: expandRecursive(patchedJson, patchedState, path)
           }
         }
       })
@@ -201,7 +193,7 @@ export function onPaste({
 export interface OnRemoveAction {
   json: unknown | undefined
   text: string | undefined
-  documentState: DocumentState
+  selection: JSONSelection | null
   keepSelection: boolean
   readOnly: boolean
   onChange: OnChange
@@ -212,27 +204,26 @@ export interface OnRemoveAction {
 export function onRemove({
   json,
   text,
-  documentState,
+  selection,
   keepSelection,
   readOnly,
   onChange,
   onPatch
 }: OnRemoveAction) {
-  if (readOnly || !documentState.selection) {
+  if (readOnly || !selection) {
     return
   }
 
   // in case of a selected key or value, we change the selection to the whole
   // entry to remove this, we do not want to clear a key or value only.
   const removeSelection =
-    json !== undefined &&
-    (isKeySelection(documentState.selection) || isValueSelection(documentState.selection))
-      ? createMultiSelection(documentState.selection.path, documentState.selection.path)
-      : documentState.selection
+    json !== undefined && (isKeySelection(selection) || isValueSelection(selection))
+      ? createMultiSelection(selection.path, selection.path)
+      : selection
 
-  if (isEmpty(getFocusPath(documentState.selection))) {
+  if (isEmpty(getFocusPath(selection))) {
     // root selected -> clear complete document
-    debug('remove root', { selection: documentState.selection })
+    debug('remove root', { selection })
 
     if (onChange) {
       onChange(
@@ -249,13 +240,11 @@ export function onRemove({
     if (json !== undefined) {
       const { operations, newSelection } = createRemoveOperations(json, removeSelection)
 
-      debug('remove', { operations, selection: documentState.selection, newSelection })
+      debug('remove', { operations, selection, newSelection })
 
-      onPatch(operations, (patchedJson, patchedState) => ({
-        state: {
-          ...patchedState,
-          selection: keepSelection ? documentState.selection : newSelection
-        }
+      onPatch(operations, (_, patchedState) => ({
+        state: patchedState,
+        selection: keepSelection ? selection : newSelection
       }))
     }
   }
@@ -263,7 +252,7 @@ export function onRemove({
 
 export interface OnDuplicateRowAction {
   json: unknown | undefined
-  documentState: DocumentState
+  selection: JSONSelection | null
   columns: JSONPath[]
   readOnly: boolean
   onPatch: OnPatch
@@ -276,47 +265,37 @@ export interface OnDuplicateRowAction {
 // TODO: write unit tests
 export function onDuplicateRow({
   json,
-  documentState,
+  selection,
   columns,
   readOnly,
   onPatch
 }: OnDuplicateRowAction) {
-  if (
-    readOnly ||
-    json === undefined ||
-    !documentState.selection ||
-    !hasSelectionContents(documentState.selection)
-  ) {
+  if (readOnly || json === undefined || !selection || !hasSelectionContents(selection)) {
     return
   }
 
-  const { rowIndex, columnIndex } = toTableCellPosition(
-    getFocusPath(documentState.selection),
-    columns
-  )
+  const { rowIndex, columnIndex } = toTableCellPosition(getFocusPath(selection), columns)
 
   debug('duplicate row', { rowIndex })
 
   const rowPath = [String(rowIndex)]
   const operations = duplicate(json, [rowPath])
 
-  onPatch(operations, (patchedJson, patchedState) => {
+  onPatch(operations, (_, patchedState) => {
     const newRowIndex = rowIndex < (json as Array<unknown>).length ? rowIndex + 1 : rowIndex
     const newPath = fromTableCellPosition({ rowIndex: newRowIndex, columnIndex }, columns)
     const newSelection = createValueSelection(newPath, false)
 
     return {
-      state: {
-        ...patchedState,
-        selection: newSelection
-      }
+      state: patchedState,
+      selection: newSelection
     }
   })
 }
 
 export interface OnInsertBeforeRowAction {
   json: unknown | undefined
-  documentState: DocumentState
+  selection: JSONSelection | null
   columns: JSONPath[]
   readOnly: boolean
   onPatch: OnPatch
@@ -329,21 +308,16 @@ export interface OnInsertBeforeRowAction {
 // TODO: write unit tests
 export function onInsertBeforeRow({
   json,
-  documentState,
+  selection,
   columns,
   readOnly,
   onPatch
 }: OnInsertBeforeRowAction) {
-  if (
-    readOnly ||
-    json === undefined ||
-    !documentState.selection ||
-    !hasSelectionContents(documentState.selection)
-  ) {
+  if (readOnly || json === undefined || !selection || !hasSelectionContents(selection)) {
     return
   }
 
-  const { rowIndex } = toTableCellPosition(getFocusPath(documentState.selection), columns)
+  const { rowIndex } = toTableCellPosition(getFocusPath(selection), columns)
 
   debug('insert before row', { rowIndex })
 
@@ -357,7 +331,7 @@ export function onInsertBeforeRow({
 
 export interface OnInsertAfterRowAction {
   json: unknown | undefined
-  documentState: DocumentState
+  selection: JSONSelection | null
   columns: JSONPath[]
   readOnly: boolean
   onPatch: OnPatch
@@ -370,24 +344,16 @@ export interface OnInsertAfterRowAction {
 // TODO: write unit tests
 export function onInsertAfterRow({
   json,
-  documentState,
+  selection,
   columns,
   readOnly,
   onPatch
 }: OnInsertAfterRowAction) {
-  if (
-    readOnly ||
-    json === undefined ||
-    !documentState.selection ||
-    !hasSelectionContents(documentState.selection)
-  ) {
+  if (readOnly || json === undefined || !selection || !hasSelectionContents(selection)) {
     return
   }
 
-  const { rowIndex, columnIndex } = toTableCellPosition(
-    getFocusPath(documentState.selection),
-    columns
-  )
+  const { rowIndex, columnIndex } = toTableCellPosition(getFocusPath(selection), columns)
 
   debug('insert after row', { rowIndex })
 
@@ -401,22 +367,20 @@ export function onInsertAfterRow({
       ? insertBefore(json, nextRowPath, values)
       : append(json, [], values)
 
-  onPatch(operations, (patchedJson, patchedState) => {
+  onPatch(operations, (_, patchedState) => {
     const nextPath = fromTableCellPosition({ rowIndex: nextRowIndex, columnIndex }, columns)
     const newSelection = createValueSelection(nextPath, false)
 
     return {
-      state: {
-        ...patchedState,
-        selection: newSelection
-      }
+      state: patchedState,
+      selection: newSelection
     }
   })
 }
 
 export interface OnRemoveRowAction {
   json: unknown | undefined
-  documentState: DocumentState
+  selection: JSONSelection | null
   columns: JSONPath[]
   readOnly: boolean
   onPatch: OnPatch
@@ -427,26 +391,12 @@ export interface OnRemoveRowAction {
  * it cannot duplicate something in some nested array
  */
 // TODO: write unit tests
-export function onRemoveRow({
-  json,
-  documentState,
-  columns,
-  readOnly,
-  onPatch
-}: OnRemoveRowAction) {
-  if (
-    readOnly ||
-    json === undefined ||
-    !documentState.selection ||
-    !hasSelectionContents(documentState.selection)
-  ) {
+export function onRemoveRow({ json, selection, columns, readOnly, onPatch }: OnRemoveRowAction) {
+  if (readOnly || json === undefined || !selection || !hasSelectionContents(selection)) {
     return
   }
 
-  const { rowIndex, columnIndex } = toTableCellPosition(
-    getFocusPath(documentState.selection),
-    columns
-  )
+  const { rowIndex, columnIndex } = toTableCellPosition(getFocusPath(selection), columns)
 
   debug('remove row', { rowIndex })
 
@@ -472,10 +422,8 @@ export function onRemoveRow({
     debug('remove row new selection', { rowIndex, newRowIndex, newSelection })
 
     return {
-      state: {
-        ...patchedState,
-        selection: newSelection
-      }
+      state: patchedState,
+      selection: newSelection
     }
   })
 }
@@ -519,17 +467,15 @@ export function onInsert({
       operations.filter((operation) => operation.op === 'add' || operation.op === 'replace')
     )
 
-    onPatch(operations, (patchedJson, patchedState) => {
+    onPatch(operations, (patchedJson, patchedState, patchedSelection) => {
       // TODO: extract determining the newSelection in a separate function
       if (operation) {
         const path = parsePath(patchedJson, operation.path)
 
         if (isObjectOrArray(newValue)) {
           return {
-            state: {
-              ...expandWithCallback(patchedJson, patchedState, path, expandAll),
-              selection: selectInside ? createInsideSelection(path) : patchedState.selection
-            }
+            state: expandWithCallback(patchedJson, patchedState, path, expandAll),
+            selection: selectInside ? createInsideSelection(path) : patchedSelection
           }
         }
 
@@ -539,16 +485,10 @@ export function onInsert({
 
           return {
             // expandPath is invoked to make sure that visibleSections is extended when needed
-            state: expandPath(
-              patchedJson,
-              {
-                ...patchedState,
-                selection: isObject(parent)
-                  ? createKeySelection(path, true)
-                  : createValueSelection(path, true)
-              },
-              path
-            )
+            state: expandPath(patchedJson, patchedState, path),
+            selection: isObject(parent)
+              ? createKeySelection(path, true)
+              : createValueSelection(path, true)
           }
         }
 
@@ -570,12 +510,10 @@ export function onInsert({
 
     const path: JSONPath = []
     onReplaceJson(newValue, (patchedJson, patchedState) => ({
-      state: {
-        ...expandRecursive(patchedJson, patchedState, path),
-        selection: isObjectOrArray(newValue)
-          ? createInsideSelection(path)
-          : createValueSelection(path, true)
-      }
+      state: expandRecursive(patchedJson, patchedState, path),
+      selection: isObjectOrArray(newValue)
+        ? createInsideSelection(path)
+        : createValueSelection(path, true)
     }))
   }
 }
@@ -606,7 +544,7 @@ export async function onInsertCharacter({
   onReplaceJson,
   onSelect
 }: OnInsertCharacter) {
-  // a regular key like a, A, _, etc is entered.
+  // a regular key like a, A, _, etc. is entered.
   // Replace selected contents with a new value having this first character as text
   if (readOnly) {
     return
diff --git a/src/lib/logic/documentState.test.ts b/src/lib/logic/documentState.test.ts
index 359bd31c..ce1096a1 100644
--- a/src/lib/logic/documentState.test.ts
+++ b/src/lib/logic/documentState.test.ts
@@ -1,32 +1,36 @@
-import assert, { deepStrictEqual } from 'assert'
-import { describe, test } from 'vitest'
+import assert from 'assert'
+import { describe, expect, test } from 'vitest'
 import { flatMap, isEqual, range, times } from 'lodash-es'
-import { ARRAY_SECTION_SIZE } from '../constants.js'
+import { ARRAY_SECTION_SIZE, DEFAULT_VISIBLE_SECTIONS } from '../constants.js'
 import {
-  collapsePath,
+  createArrayDocumentState,
   createDocumentState,
-  deletePath,
+  createObjectDocumentState,
+  createValueDocumentState,
+  documentStateFactory,
   documentStatePatch,
+  ensureRecursiveState,
   expandPath,
   expandSection,
   expandWithCallback,
-  filterPath,
   forEachVisibleIndex,
   getEnforceString,
   getVisibleCaretPositions,
   getVisiblePaths,
-  shiftPath,
   shiftVisibleSections,
-  syncKeys
+  syncDocumentState,
+  syncKeys,
+  toRecursiveStatePath,
+  updateInDocumentState
 } from './documentState.js'
 import {
   CaretType,
+  type ArrayDocumentState,
   type DocumentState,
-  type JSONPointerMap,
   type VisibleSection
 } from '$lib/types.js'
-import type { JSONPatchDocument } from 'immutable-json-patch'
-import { compileJSONPointer, deleteIn, setIn } from 'immutable-json-patch'
+import { deleteIn, getIn, type JSONPatchDocument, setIn, updateIn } from 'immutable-json-patch'
+import { isArrayRecursiveState } from 'svelte-jsoneditor'
 
 describe('documentState', () => {
   test('syncKeys should append new keys and remove old keys', () => {
@@ -37,79 +41,505 @@ describe('documentState', () => {
     assert.deepStrictEqual(syncKeys(['a', 'b'], ['b', 'a']), ['b', 'a'])
   })
 
+  describe('ensureNestedDocumentState', () => {
+    test('should create nested state in an array', () => {
+      const expected: DocumentState = {
+        type: 'array',
+        expanded: false,
+        // eslint-disable-next-line no-sparse-arrays
+        items: [, { type: 'value' }],
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+
+      assert.deepStrictEqual(
+        ensureRecursiveState([1, 2, 3], undefined, ['1'], documentStateFactory),
+        expected
+      )
+    })
+
+    test('should maintain state when creating nested state in an array', () => {
+      const state: DocumentState = {
+        type: 'array',
+        expanded: true,
+        items: [],
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+
+      const expected: DocumentState = {
+        type: 'array',
+        expanded: true,
+        // eslint-disable-next-line no-sparse-arrays
+        items: [, { type: 'value' }],
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+
+      assert.deepStrictEqual(
+        ensureRecursiveState([1, 2, 3], state, ['1'], documentStateFactory),
+        expected
+      )
+    })
+
+    test('should create nested state in an object', () => {
+      const expected: DocumentState = {
+        type: 'object',
+        expanded: false,
+        properties: {
+          a: { type: 'value' }
+        }
+      }
+
+      assert.deepStrictEqual(
+        ensureRecursiveState({ a: 2, b: 3 }, undefined, ['a'], documentStateFactory),
+        expected
+      )
+    })
+
+    test('should maintain state when creating nested state in an object', () => {
+      const state: DocumentState = {
+        type: 'object',
+        expanded: true,
+        properties: {}
+      }
+
+      const expected: DocumentState = {
+        type: 'object',
+        expanded: true,
+        properties: {
+          a: { type: 'value' }
+        }
+      }
+
+      assert.deepStrictEqual(
+        ensureRecursiveState({ a: 2, b: 3 }, state, ['a'], documentStateFactory),
+        expected
+      )
+    })
+
+    test('should create nested state in an object and array', () => {
+      const expected: DocumentState = {
+        type: 'object',
+        expanded: false,
+        properties: {
+          array: {
+            type: 'array',
+            expanded: false,
+            // eslint-disable-next-line no-sparse-arrays
+            items: [, { type: 'value' }],
+            visibleSections: DEFAULT_VISIBLE_SECTIONS
+          }
+        }
+      }
+
+      assert.deepStrictEqual(
+        ensureRecursiveState({ array: [1, 2, 3] }, undefined, ['array', '1'], documentStateFactory),
+        expected
+      )
+    })
+
+    test('should maintain value state', () => {
+      const state: DocumentState = {
+        type: 'value',
+        enforceString: true
+      }
+
+      assert.deepStrictEqual(ensureRecursiveState(42, state, [], documentStateFactory), state)
+    })
+  })
+
+  describe('syncDocumentState', () => {
+    test('should maintain array documentState when no change is needed', () => {
+      const state: DocumentState = {
+        type: 'array',
+        expanded: true,
+        items: [{ type: 'value', enforceString: false }],
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+      assert.deepStrictEqual(syncDocumentState([1, 2, 3], state), state)
+    })
+
+    test('should maintain object documentState when no change is needed', () => {
+      const state: DocumentState = {
+        type: 'object',
+        expanded: true,
+        properties: {
+          c: { type: 'value', enforceString: false }
+        }
+      }
+      assert.deepStrictEqual(syncDocumentState({ a: 1, b: 2, c: 3 }, state), state)
+    })
+
+    test('should switch array, object, and value state', () => {
+      const arrayState = createArrayDocumentState()
+      const objectState = createObjectDocumentState()
+      const valueState = createValueDocumentState()
+
+      assert.deepStrictEqual(syncDocumentState(undefined, arrayState), undefined)
+      assert.deepStrictEqual(syncDocumentState(undefined, objectState), undefined)
+      assert.deepStrictEqual(syncDocumentState(undefined, valueState), undefined)
+      assert.deepStrictEqual(syncDocumentState(undefined, undefined), undefined)
+
+      assert.deepStrictEqual(syncDocumentState([], arrayState), arrayState)
+      assert.deepStrictEqual(syncDocumentState([], objectState), arrayState)
+      assert.deepStrictEqual(syncDocumentState([], valueState), arrayState)
+      assert.deepStrictEqual(syncDocumentState([], undefined), undefined)
+
+      assert.deepStrictEqual(syncDocumentState({}, arrayState), objectState)
+      assert.deepStrictEqual(syncDocumentState({}, objectState), objectState)
+      assert.deepStrictEqual(syncDocumentState({}, valueState), objectState)
+      assert.deepStrictEqual(syncDocumentState({}, undefined), undefined)
+
+      assert.deepStrictEqual(syncDocumentState(42, arrayState), undefined)
+      assert.deepStrictEqual(syncDocumentState(42, objectState), undefined)
+      assert.deepStrictEqual(syncDocumentState(42, valueState), valueState)
+      assert.deepStrictEqual(syncDocumentState(42, undefined), undefined)
+    })
+
+    test('should maintain expanded state when switching between array and object', () => {
+      const arrayState = createArrayDocumentState({ expanded: false })
+      const objectState = createObjectDocumentState({ expanded: false })
+      const arrayStateExpanded = createArrayDocumentState({ expanded: true })
+      const objectStateExpanded = createObjectDocumentState({ expanded: true })
+
+      assert.deepStrictEqual(syncDocumentState({}, arrayState), objectState)
+      assert.deepStrictEqual(syncDocumentState([], objectState), arrayState)
+
+      assert.deepStrictEqual(syncDocumentState({}, arrayStateExpanded), objectStateExpanded)
+      assert.deepStrictEqual(syncDocumentState([], objectStateExpanded), arrayStateExpanded)
+    })
+
+    test('should remove deleted properties', () => {
+      const state: DocumentState = {
+        type: 'object',
+        expanded: true,
+        properties: {
+          a: { type: 'value', enforceString: false },
+          b: { type: 'value', enforceString: false },
+          c: { type: 'value', enforceString: false }
+        }
+      }
+
+      const expected: DocumentState = {
+        type: 'object',
+        expanded: true,
+        properties: {
+          a: { type: 'value', enforceString: false },
+          c: { type: 'value', enforceString: false }
+        }
+      }
+
+      assert.deepStrictEqual(syncDocumentState({ a: 1, c: 3, d: 4 }, state), expected)
+    })
+
+    test('should remove deleted items', () => {
+      const state: DocumentState = {
+        type: 'array',
+        expanded: true,
+        // eslint-disable-next-line no-sparse-arrays
+        items: [, { type: 'value' }, { type: 'value' }],
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+
+      const expected: DocumentState = {
+        type: 'array',
+        expanded: true,
+        // eslint-disable-next-line no-sparse-arrays
+        items: [, { type: 'value' }],
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+
+      assert.deepStrictEqual(syncDocumentState([1, 2], state), expected)
+    })
+
+    test('should work on nested objects', () => {
+      const state: DocumentState = {
+        type: 'object',
+        expanded: true,
+        properties: {
+          nested: {
+            type: 'object',
+            expanded: true,
+            properties: {
+              c: { type: 'value', enforceString: false },
+              d: { type: 'value', enforceString: false }
+            }
+          }
+        }
+      }
+
+      const expected: DocumentState = {
+        type: 'object',
+        expanded: true,
+        properties: {
+          nested: {
+            type: 'object',
+            expanded: true,
+            properties: {
+              c: { type: 'value', enforceString: false }
+            }
+          }
+        }
+      }
+
+      assert.deepStrictEqual(syncDocumentState({ nested: { a: 1, b: 2, c: 3 } }, state), expected)
+
+      const expected2: DocumentState = {
+        type: 'object',
+        expanded: true,
+        properties: {}
+      }
+
+      assert.deepStrictEqual(syncDocumentState({ nested: 42 }, state), expected2)
+    })
+
+    test('should work on nested arrays', () => {
+      const state: DocumentState = {
+        type: 'array',
+        expanded: true,
+        items: [
+          {
+            type: 'array',
+            expanded: true,
+            visibleSections: DEFAULT_VISIBLE_SECTIONS,
+            // eslint-disable-next-line no-sparse-arrays
+            items: [{ type: 'value' }, { type: 'value' }, { type: 'value' }, { type: 'value' }]
+          }
+        ],
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+
+      const expected: DocumentState = {
+        type: 'array',
+        expanded: true,
+        items: [
+          {
+            type: 'array',
+            expanded: true,
+            visibleSections: DEFAULT_VISIBLE_SECTIONS,
+            // eslint-disable-next-line no-sparse-arrays
+            items: [{ type: 'value' }, { type: 'value' }, { type: 'value' }]
+          }
+        ],
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+
+      assert.deepStrictEqual(syncDocumentState([[1, 2, 3]], state), expected)
+
+      const expected2: DocumentState = {
+        type: 'array',
+        expanded: true,
+        // eslint-disable-next-line no-sparse-arrays
+        items: [],
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+
+      assert.deepStrictEqual(syncDocumentState([42], state), expected2)
+    })
+
+    test('objects should be handled in an immutable way', () => {
+      const json = {
+        nested: {
+          c: 2,
+          d: 3
+        }
+      }
+
+      const state: DocumentState = {
+        type: 'object',
+        expanded: true,
+        properties: {
+          nested: {
+            type: 'object',
+            expanded: true,
+            properties: {
+              c: { type: 'value' },
+              d: { type: 'value' }
+            }
+          }
+        }
+      }
+
+      const syncedState = syncDocumentState(json, state)
+      assert.deepStrictEqual(syncedState, state)
+      assert.strictEqual(syncedState, state)
+    })
+
+    test('arrays should be handled in an immutable way', () => {
+      const json = [1, 2, 3]
+      const state: DocumentState = {
+        type: 'array',
+        expanded: true,
+        items: [{ type: 'value' }, { type: 'value' }, { type: 'value' }],
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+
+      const syncedState = syncDocumentState(json, state)
+      assert.deepStrictEqual(syncedState, state)
+      assert.strictEqual(syncedState, state)
+    })
+
+    test('should handle a change in an immutable way', () => {
+      const items: DocumentState[] = [{ type: 'value' }, { type: 'value' }, { type: 'value' }]
+      const state: ArrayDocumentState = {
+        type: 'array',
+        expanded: true,
+        items,
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+
+      const updatedJson = [1, 2]
+
+      const syncedState = syncDocumentState(updatedJson, state) as ArrayDocumentState
+
+      const expected: DocumentState = {
+        type: 'array',
+        expanded: true,
+        items: items.slice(0, 2),
+        visibleSections: DEFAULT_VISIBLE_SECTIONS
+      }
+
+      assert.deepStrictEqual(syncedState, expected)
+      assert.strictEqual(syncedState.items[0], expected.items[0])
+      assert.strictEqual(syncedState.items[1], expected.items[1])
+    })
+  })
+
+  test('toRecursiveStatePath', () => {
+    const json = {
+      foo: { a: 42 },
+      bar: [1, 2, 3]
+    }
+
+    expect(toRecursiveStatePath(json, [])).toEqual([])
+    expect(toRecursiveStatePath(json, ['foo'])).toEqual(['properties', 'foo'])
+    expect(toRecursiveStatePath(json, ['bar'])).toEqual(['properties', 'bar'])
+    expect(toRecursiveStatePath(json, ['bar', '2'])).toEqual(['properties', 'bar', 'items', '2'])
+  })
+
   describe('expandWithCallback', () => {
     const json = {
       array: [1, 2, { c: 6 }],
       object: { a: 4, b: 5 },
       value: 'hello'
     }
-    const state = createDocumentState()
+    const expandedState = createDocumentState({ json })
 
     test('should fully expand a json document', () => {
-      assert.deepStrictEqual(expandWithCallback(json, state, [], () => true).expandedMap, {
-        '': true,
-        '/array': true,
-        '/array/2': true,
-        '/object': true
-      })
+      assert.deepStrictEqual(
+        expandWithCallback(json, expandedState, [], () => true),
+        {
+          type: 'object',
+          expanded: true,
+          properties: {
+            array: {
+              type: 'array',
+              expanded: true,
+              visibleSections: DEFAULT_VISIBLE_SECTIONS,
+              // eslint-disable-next-line no-sparse-arrays
+              items: [, , { type: 'object', expanded: true, properties: {} }]
+            },
+            object: {
+              type: 'object',
+              expanded: true,
+              properties: {}
+            }
+          }
+        }
+      )
     })
 
     test('should expand a nested item of a json document', () => {
       assert.deepStrictEqual(
-        expandWithCallback(json, state, ['array'], (path) => isEqual(path, ['array'])).expandedMap,
+        expandWithCallback(json, expandedState, ['array'], (path) => isEqual(path, ['array'])),
         {
-          '/array': true
+          expanded: false,
+          properties: {
+            array: {
+              type: 'array',
+              expanded: true,
+              visibleSections: DEFAULT_VISIBLE_SECTIONS,
+              items: []
+            }
+          },
+          type: 'object'
         }
       )
     })
 
-    test('should expand a part of a json document recursively', () => {
-      assert.deepStrictEqual(expandWithCallback(json, state, ['array'], () => true).expandedMap, {
-        '/array': true,
-        '/array/2': true
-      })
+    test('should expand a nested item of a json document starting without state', () => {
+      assert.deepStrictEqual(
+        expandWithCallback(json, undefined, ['array'], (path) => isEqual(path, ['array'])),
+        {
+          expanded: false,
+          properties: {
+            array: {
+              type: 'array',
+              expanded: true,
+              visibleSections: DEFAULT_VISIBLE_SECTIONS,
+              items: []
+            }
+          },
+          type: 'object'
+        }
+      )
     })
 
-    test('should partially expand a json document', () => {
+    test('should expand a part of a json document recursively', () => {
       assert.deepStrictEqual(
-        expandWithCallback(json, state, [], (path) => path.length <= 1).expandedMap,
+        expandWithCallback(json, expandedState, ['array'], () => true),
         {
-          '': true,
-          '/array': true,
-          '/object': true
+          expanded: false,
+          properties: {
+            array: {
+              type: 'array',
+              expanded: true,
+              visibleSections: DEFAULT_VISIBLE_SECTIONS,
+              // eslint-disable-next-line no-sparse-arrays
+              items: [, , { expanded: true, properties: {}, type: 'object' }]
+            }
+          },
+          type: 'object'
         }
       )
     })
 
-    test('should expand the root of a json document', () => {
+    test('should partially expand a json document', () => {
       assert.deepStrictEqual(
-        expandWithCallback(json, state, [], (path) => path.length === 0).expandedMap,
+        expandWithCallback(json, expandedState, [], (path) => path.length <= 1),
         {
-          '': true
+          expanded: true,
+          properties: {
+            array: {
+              type: 'array',
+              expanded: true,
+              visibleSections: DEFAULT_VISIBLE_SECTIONS,
+              items: []
+            },
+            object: { type: 'object', expanded: true, properties: {} }
+          },
+          type: 'object'
         }
       )
     })
 
-    test('should not traverse non-expanded nodes', () => {
+    test('should expand the root of a json document', () => {
       assert.deepStrictEqual(
-        expandWithCallback(json, state, [], (path) => path.length > 0).expandedMap,
-        {}
+        expandWithCallback(json, expandedState, [], (path) => path.length === 0),
+        {
+          expanded: true,
+          properties: {},
+          type: 'object'
+        }
       )
     })
 
-    test('should leave already expanded nodes as is', () => {
-      const expandedMap = {
-        '': true,
-        '/array': true
-      }
-      const stateWithExpanded = {
-        ...state,
-        expandedMap
-      }
-
+    test('should not traverse non-expanded nodes', () => {
       assert.deepStrictEqual(
-        expandWithCallback(json, stateWithExpanded, [], () => false).expandedMap,
-        expandedMap
+        expandWithCallback(json, expandedState, [], (path) => path.length > 0),
+        {
+          expanded: false,
+          properties: {},
+          type: 'object'
+        }
       )
     })
   })
@@ -121,7 +551,7 @@ describe('documentState', () => {
       value: 'hello'
     }
 
-    const documentState = createDocumentState()
+    const documentState = createDocumentState({ json })
     assert.deepStrictEqual(getVisiblePaths(json, documentState), [[]])
 
     const documentState0 = createDocumentState({ json, expand: (path) => path.length <= 0 })
@@ -167,7 +597,7 @@ describe('documentState', () => {
     }
 
     // by default, should have a visible section from 0-100 only (so 100-500 is invisible)
-    const documentState1 = createDocumentState({ json, expand: (path) => path.length <= 1 })
+    const documentState1 = createDocumentState({ json, expand: () => true })
     assert.deepStrictEqual(getVisiblePaths(json, documentState1), [
       [],
       ['array'],
@@ -177,10 +607,7 @@ describe('documentState', () => {
     // create a visible section from 200-300 (in addition to the visible section 0-100)
     const start = 2 * ARRAY_SECTION_SIZE
     const end = 3 * ARRAY_SECTION_SIZE
-    const documentState2 = expandSection(json, documentState1, compileJSONPointer(['array']), {
-      start,
-      end
-    })
+    const documentState2 = expandSection(json, documentState1, ['array'], { start, end })
     assert.deepStrictEqual(getVisiblePaths(json, documentState2), [
       [],
       ['array'],
@@ -320,10 +747,7 @@ describe('documentState', () => {
     // create a visible section from 200-300 (in addition to the visible section 0-100)
     const start = 2 * ARRAY_SECTION_SIZE
     const end = 3 * ARRAY_SECTION_SIZE
-    const documentState2 = expandSection(json, documentState1, compileJSONPointer(['array']), {
-      start,
-      end
-    })
+    const documentState2 = expandSection(json, documentState1, ['array'], { start, end })
     assert.deepStrictEqual(
       getVisibleCaretPositions(json, documentState2),
       flatMap([
@@ -354,22 +778,16 @@ describe('documentState', () => {
 
   test('should keep/update enforce string', () => {
     const json1 = 42
-    const documentState1 = createDocumentState()
-    assert.strictEqual(
-      getEnforceString(json1, documentState1.enforceStringMap, compileJSONPointer([]), JSON),
-      false
-    )
+    const documentState1 = createDocumentState({ json: json1 })
+    assert.strictEqual(getEnforceString(json1, documentState1, [], JSON), false)
 
     const json2 = '42'
-    const documentState2 = createDocumentState()
-    assert.strictEqual(
-      getEnforceString(json2, documentState2.enforceStringMap, compileJSONPointer([]), JSON),
-      true
-    )
+    const documentState2 = createDocumentState({ json: json2 })
+    assert.strictEqual(getEnforceString(json2, documentState2, [], JSON), true)
   })
 
   describe('documentStatePatch', () => {
-    function createJsonAndState(): { json: unknown; documentState: DocumentState } {
+    function createJsonAndState(): { json: unknown; documentState: DocumentState | undefined } {
       const json = {
         members: [
           { id: 1, name: 'Joe' },
@@ -385,54 +803,45 @@ describe('documentState', () => {
         }
       }
 
-      const documentState: DocumentState = {
-        ...createDocumentState({ json, expand: () => true }),
-        visibleSectionsMap: {
-          '/members': [{ start: 0, end: 3 }]
-        }
-      }
+      let documentState = createDocumentState({ json, expand: () => true })
+
+      documentState = updateInDocumentState(json, documentState, ['members'], (_value, state) => {
+        return isArrayRecursiveState(state)
+          ? { ...state, visibleSections: [{ start: 0, end: 3 }] }
+          : state
+      })
 
       return { json, documentState }
     }
 
     test('add: should add a value to an object', () => {
       const json = { a: 2, b: 3 }
-      const documentState = createDocumentState()
+      const documentState = createDocumentState({ json })
 
       const res = documentStatePatch(json, documentState, [{ op: 'add', path: '/c', value: 4 }])
 
       assert.deepStrictEqual(res.json, { a: 2, b: 3, c: 4 })
-      assert.deepStrictEqual(res.documentState, documentState)
+      assert.deepStrictEqual(res.state, documentState)
     })
 
     test('add: should add a value to an object (expanded)', () => {
       const json = { a: 2, b: 3 }
-      const documentState: DocumentState = {
-        ...createDocumentState(),
-        expandedMap: {
-          '': true
-        }
-      }
+      const documentState = createDocumentState({ json, expand: () => true })
 
       const res = documentStatePatch(json, documentState, [{ op: 'add', path: '/c', value: 42 }])
 
       assert.deepStrictEqual(res.json, { a: 2, b: 3, c: 42 })
-      assert.deepStrictEqual(res.documentState, documentState)
+      assert.deepStrictEqual(res.state, documentState)
     })
 
     test('add: should override a value in an object', () => {
       const json = { a: 2, b: 3 }
-      const documentState: DocumentState = {
-        ...createDocumentState(),
-        expandedMap: {
-          '': true
-        }
-      }
+      const documentState = createDocumentState({ json, expand: () => true })
 
       const res = documentStatePatch(json, documentState, [{ op: 'add', path: '/a', value: 42 }])
 
       assert.deepStrictEqual(res.json, { a: 42, b: 3 })
-      assert.deepStrictEqual(res.documentState, {
+      assert.deepStrictEqual(res.state, {
         ...documentState
       })
     })
@@ -451,20 +860,30 @@ describe('documentState', () => {
         { id: 3, name: 'Mark' }
       ])
 
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: {
-          '': true,
-          '/group': true,
-          '/group/details': true,
-          '/members': true,
-          '/members/0': true,
-          '/members/2': true,
-          '/members/3': true
+      assert.deepStrictEqual(res.state, {
+        expanded: true,
+        properties: {
+          group: {
+            expanded: true,
+            properties: {
+              details: { expanded: true, properties: {}, type: 'object' }
+            },
+            type: 'object'
+          },
+          members: {
+            expanded: true,
+            // eslint-disable-next-line no-sparse-arrays
+            items: [
+              { expanded: true, properties: {}, type: 'object' },
+              undefined, // ideally, this should be an empty item, not undefined
+              { expanded: true, properties: {}, type: 'object' },
+              { expanded: true, properties: {}, type: 'object' }
+            ],
+            type: 'array',
+            visibleSections: [{ start: 0, end: 4 }]
+          }
         },
-        visibleSectionsMap: {
-          '/members': [{ start: 0, end: 4 }]
-        }
+        type: 'object'
       })
     })
 
@@ -481,51 +900,41 @@ describe('documentState', () => {
         { id: 3, name: 'Mark' },
         { id: 4, name: 'John' }
       ])
-      assert.deepStrictEqual(res.documentState, documentState)
+      assert.deepStrictEqual(res.state, documentState)
     })
 
     test('add: extend the visibleSection when appending a value to an array', () => {
       const json = [0, 1, 2, 3]
-      const documentState = {
-        ...createDocumentState(),
-        expandedMap: {
-          '': true
-        },
-        visibleSectionsMap: {
-          '': [{ start: 0, end: 5 }]
-        }
+      const documentState: DocumentState = {
+        type: 'array',
+        expanded: true,
+        items: [],
+        visibleSections: [{ start: 0, end: 5 }]
       }
 
       const res = documentStatePatch(json, documentState, [{ op: 'add', path: '/4', value: 4 }])
 
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        visibleSectionsMap: {
-          '': [{ start: 0, end: 6 }]
-        }
+      assert.deepStrictEqual(res.state, {
+        type: 'array',
+        expanded: true,
+        items: [],
+        visibleSections: [{ start: 0, end: 6 }]
       })
     })
 
     test('replace: should keep enforceString state', () => {
       const json = '42'
-      const documentState = {
-        ...createDocumentState(),
-        enforceStringMap: {
-          '': true
-        }
+      const documentState: DocumentState = {
+        type: 'value',
+        enforceString: true
       }
-      const pointer = compileJSONPointer([])
-      assert.strictEqual(
-        getEnforceString(json, documentState.enforceStringMap, pointer, JSON),
-        true
-      )
 
       const operations: JSONPatchDocument = [{ op: 'replace', path: '', value: 'forty two' }]
       const res = documentStatePatch(json, documentState, operations)
-      assert.deepStrictEqual(
-        getEnforceString(res.json, res.documentState.enforceStringMap, pointer, JSON),
-        true
-      )
+      assert.deepStrictEqual(res.state, {
+        type: 'value',
+        enforceString: true
+      })
     })
 
     test('remove: should remove a value from an object', () => {
@@ -536,7 +945,7 @@ describe('documentState', () => {
       ])
 
       assert.deepStrictEqual(res.json, deleteIn(json, ['group', 'location']))
-      assert.deepStrictEqual(res.documentState, documentState)
+      assert.deepStrictEqual(res.state, documentState)
     })
 
     test('remove: should remove a value from an array', () => {
@@ -544,30 +953,36 @@ describe('documentState', () => {
       const res = documentStatePatch(json, documentState, [{ op: 'remove', path: '/members/1' }])
 
       assert.deepStrictEqual(res.json, deleteIn(json, ['members', '1']))
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: deleteIn(documentState.expandedMap, ['/members/2']), // [2] is moved to [1]
-        visibleSectionsMap: {
-          '/members': [{ start: 0, end: 2 }]
-        }
-      })
+      assert.deepStrictEqual(
+        res.state,
+        updateIn(documentState, ['properties', 'members'], (state: DocumentState) => ({
+          ...state,
+          items: state.type === 'array' ? state.items.slice(0, 2) : null,
+          visibleSections: [{ start: 0, end: 2 }]
+        }))
+      )
     })
 
     test('remove: should remove a value from an array (2)', () => {
       // verify that the maps indices are shifted
       const { json, documentState } = createJsonAndState()
-      const documentState2 = collapsePath(documentState, ['members', '1'])
+      const documentState2 = setIn<DocumentState>(
+        documentState,
+        ['properties', 'members', 'items', '1', 'expanded'],
+        false
+      )
 
       const res = documentStatePatch(json, documentState2, [{ op: 'remove', path: '/members/1' }])
 
       assert.deepStrictEqual(res.json, deleteIn(json, ['members', '1']))
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: deleteIn(documentState.expandedMap, ['/members/2']), // [2] is moved to [1]
-        visibleSectionsMap: {
-          '/members': [{ start: 0, end: 2 }]
-        }
-      })
+      assert.deepStrictEqual(
+        res.state,
+        updateIn(documentState, ['properties', 'members'], (state: DocumentState) => ({
+          ...state,
+          items: state.type === 'array' ? [state.items[0], state.items[2]] : null,
+          visibleSections: [{ start: 0, end: 2 }]
+        }))
+      )
     })
 
     test('replace: should replace a an object with a value', () => {
@@ -578,16 +993,7 @@ describe('documentState', () => {
       ])
 
       assert.deepStrictEqual(res.json, setIn(json, ['group'], 42))
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: {
-          '': true,
-          '/members': true,
-          '/members/0': true,
-          '/members/1': true,
-          '/members/2': true
-        }
-      })
+      assert.deepStrictEqual(res.state, deleteIn(documentState, ['properties', 'group']))
     })
 
     test('replace: should replace a an object with a new object', () => {
@@ -598,15 +1004,21 @@ describe('documentState', () => {
       ])
 
       assert.deepStrictEqual(res.json, setIn(json, ['group'], { groupId: '1234' }))
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: {
-          '': true,
-          '/group': true,
-          '/members': true,
-          '/members/0': true,
-          '/members/1': true,
-          '/members/2': true
+      assert.deepStrictEqual(res.state, {
+        type: 'object',
+        expanded: true,
+        properties: {
+          group: { expanded: true, properties: {}, type: 'object' },
+          members: {
+            type: 'array',
+            expanded: true,
+            items: [
+              { expanded: true, properties: {}, type: 'object' },
+              { expanded: true, properties: {}, type: 'object' },
+              { expanded: true, properties: {}, type: 'object' }
+            ],
+            visibleSections: [{ end: 3, start: 0 }]
+          }
         }
       })
     })
@@ -618,11 +1030,13 @@ describe('documentState', () => {
         { op: 'replace', path: '/members/1', value: 42 }
       ])
 
+      const items = getIn(documentState, ['properties', 'members', 'items']) as DocumentState[]
       assert.deepStrictEqual(res.json, setIn(json, ['members', '1'], 42))
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: deleteIn(documentState.expandedMap, ['/members/1'])
-      })
+      assert.deepStrictEqual(
+        res.state,
+        // eslint-disable-next-line no-sparse-arrays
+        setIn(documentState, ['properties', 'members', 'items'], [items[0], , items[2]])
+      )
     })
 
     test('replace: should replace an array with a value', () => {
@@ -633,36 +1047,22 @@ describe('documentState', () => {
       ])
 
       assert.deepStrictEqual(res.json, setIn(json, ['members'], 42))
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: {
-          '': true,
-          '/group': true,
-          '/group/details': true
-        },
-        visibleSectionsMap: {}
-      })
+      assert.deepStrictEqual(res.state, deleteIn(documentState, ['properties', 'members']))
     })
 
     test('replace: should replace the root document itself', () => {
       const json = {
-        c: {
-          cc: 4
-        },
-        b: {
-          bb: 3
-        },
-        a: 2
-      }
-      const documentState = {
-        ...createDocumentState({ json, expand: () => true })
+        c: { cc: 4 },
+        b: { bb: 3 },
+        a: { aa: 222 }
       }
+      const documentState = createDocumentState({ json, expand: () => true })
 
       const operations: JSONPatchDocument = [
         {
           op: 'replace',
           path: '',
-          value: { a: 22, b: 33, d: 55 }
+          value: { a: { aa: 22 }, b: 33, d: 55 }
         }
       ]
       const res = documentStatePatch(json, documentState, operations)
@@ -670,12 +1070,14 @@ describe('documentState', () => {
       // check order of keys
       assert.deepStrictEqual(Object.keys(res.json as Record<string, unknown>), ['a', 'b', 'd'])
 
-      // keep expanded state of existing keys
-      assert.strictEqual(res.documentState.expandedMap[compileJSONPointer([])], true)
-      assert.strictEqual(res.documentState.expandedMap[compileJSONPointer(['b'])], true)
-
-      // remove expanded state of removed keys
-      assert.strictEqual(res.documentState.expandedMap[compileJSONPointer(['c'])], undefined)
+      // keep expanded state of existing keys, and remove expanded state of removed keys
+      assert.deepStrictEqual(res.state, {
+        type: 'object',
+        expanded: true,
+        properties: {
+          a: { type: 'object', expanded: true, properties: {} }
+        }
+      })
     })
 
     test('copy: should copy a value into an object', () => {
@@ -687,48 +1089,56 @@ describe('documentState', () => {
 
       assert.deepStrictEqual(
         res.json,
-        setIn(
-          json,
-          ['group', 'user'],
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[1]
-        )
+        setIn(json, ['group', 'user'], getIn(json, ['members', '1']))
+      )
+      assert.deepStrictEqual(
+        res.state,
+        setIn(documentState, ['properties', 'group', 'properties', 'user'], {
+          type: 'object',
+          expanded: true,
+          properties: {}
+        })
       )
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: {
-          ...documentState.expandedMap,
-          '/group/user': true
-        }
-      })
     })
 
     test('copy: should copy a value into an array', () => {
       const { json, documentState } = createJsonAndState()
+      const documentState2 = setIn<DocumentState>(
+        documentState,
+        ['properties', 'group', 'properties', 'details', 'expanded'],
+        false
+      )
 
-      const res = documentStatePatch(json, documentState, [
+      const res = documentStatePatch(json, documentState2, [
         { op: 'copy', from: '/group/details', path: '/members/1' }
       ])
 
       assert.deepStrictEqual(res.json, {
-        group: (json as Record<string, unknown>)['group'],
+        group: getIn(json, ['group']),
         members: [
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[0],
-          ((json as Record<string, unknown>)['group'] as Record<string, unknown>)['details'],
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[1],
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[2]
+          getIn(json, ['members', '0']),
+          getIn(json, ['group', 'details']),
+          getIn(json, ['members', '1']),
+          getIn(json, ['members', '2'])
         ]
       })
 
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: {
-          ...documentState.expandedMap,
-          '/members/3': true
-        },
-        visibleSectionsMap: {
-          '/members': [{ start: 0, end: 4 }]
-        }
-      })
+      assert.deepStrictEqual(
+        res.state,
+        updateIn(documentState2, ['properties', 'members'], (state: DocumentState) => ({
+          ...state,
+          items:
+            state.type === 'array'
+              ? [
+                  state.items[0],
+                  getIn(documentState2, ['properties', 'group', 'properties', 'details']),
+                  state.items[1],
+                  state.items[2]
+                ]
+              : null,
+          visibleSections: [{ start: 0, end: 4 }]
+        }))
+      )
     })
 
     test('move: should move a value from object to object', () => {
@@ -748,18 +1158,14 @@ describe('documentState', () => {
           description: 'The first group'
         }
       })
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: {
-          '': true,
-          '/group': true,
-          '/details': true,
-          '/members': true,
-          '/members/0': true,
-          '/members/1': true,
-          '/members/2': true
-        }
-      })
+
+      let expectedDocumentState = documentState
+      const fromPathRecursive = ['properties', 'group', 'properties', 'details']
+      const value = getIn(expectedDocumentState, fromPathRecursive)
+      expectedDocumentState = deleteIn(expectedDocumentState, fromPathRecursive)
+      expectedDocumentState = setIn(expectedDocumentState, ['properties', 'details'], value)
+
+      assert.deepStrictEqual(res.state, expectedDocumentState)
     })
 
     test('move: moving a value inside the object itself should move it to the end of keys', () => {
@@ -770,14 +1176,18 @@ describe('documentState', () => {
       ])
 
       assert.deepStrictEqual(res.json, json)
-      assert.deepStrictEqual(res.documentState, documentState)
+      assert.deepStrictEqual(res.state, documentState)
     })
 
     test('move: should move a value from array to array (up)', () => {
       // we collapse the member we're going to move, so we can see whether the state is correctly switched
       const jsonAndState = createJsonAndState()
       const json = jsonAndState.json
-      const documentState = collapsePath(jsonAndState.documentState, ['members', '1'])
+      const documentState = setIn<DocumentState>(
+        jsonAndState.documentState,
+        ['properties', 'members', 'items', '1', 'expanded'],
+        false
+      )
 
       const res = documentStatePatch(json, documentState, [
         { op: 'move', from: '/members/1', path: '/members/0' }
@@ -786,31 +1196,33 @@ describe('documentState', () => {
       assert.deepStrictEqual(res.json, {
         group: (json as Record<string, unknown>)['group'],
         members: [
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[1],
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[0],
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[2]
+          getIn(json, ['members', '1']),
+          getIn(json, ['members', '0']),
+          getIn(json, ['members', '2'])
         ]
       })
 
       // we have collapsed members[1], and after that moved it from index 1 to 0, so now members[0] should be collapsed
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: {
-          '': true,
-          '/group': true,
-          '/group/details': true,
-          '/members': true,
-          '/members/1': true,
-          '/members/2': true
-        }
-      })
+      assert.deepStrictEqual(
+        res.state,
+        updateIn(documentState, ['properties', 'members'], (state: DocumentState | undefined) => {
+          return {
+            ...state,
+            items: state?.type === 'array' ? [state.items[1], state.items[0], state.items[2]] : null
+          }
+        })
+      )
     })
 
     test('move: should move a value from array to array (down)', () => {
       // we collapse the member we're going to move, so we can see whether the state is correctly switched
       const jsonAndState = createJsonAndState()
       const json = jsonAndState.json
-      const documentState = collapsePath(jsonAndState.documentState, ['members', '0'])
+      const documentState = setIn<DocumentState>(
+        jsonAndState.documentState,
+        ['properties', 'members', 'items', '0', 'expanded'],
+        false
+      )
 
       const res = documentStatePatch(json, documentState, [
         { op: 'move', from: '/members/0', path: '/members/1' }
@@ -819,30 +1231,32 @@ describe('documentState', () => {
       assert.deepStrictEqual(res.json, {
         group: (json as Record<string, unknown>)['group'],
         members: [
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[1],
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[0],
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[2]
+          getIn(json, ['members', '1']),
+          getIn(json, ['members', '0']),
+          getIn(json, ['members', '2'])
         ]
       })
 
       // we have collapsed members[0], and after that moved it from index 0 to 1, so now members[1] should be collapsed
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: {
-          '': true,
-          '/group': true,
-          '/group/details': true,
-          '/members': true,
-          '/members/0': true,
-          '/members/2': true
-        }
-      })
+      assert.deepStrictEqual(
+        res.state,
+        updateIn(documentState, ['properties', 'members'], (state: DocumentState | undefined) => {
+          return {
+            ...state,
+            items: state?.type === 'array' ? [state.items[1], state.items[0], state.items[2]] : null
+          }
+        })
+      )
     })
 
     test('move: should move a value from object to array', () => {
       const jsonAndState = createJsonAndState()
       const json = jsonAndState.json
-      const documentState = collapsePath(jsonAndState.documentState, ['members', '1'])
+      const documentState = setIn<DocumentState>(
+        jsonAndState.documentState,
+        ['properties', 'members', 'items', '1', 'expanded'],
+        false
+      )
 
       const res = documentStatePatch(json, documentState, [
         { op: 'move', from: '/group/details', path: '/members/1' }
@@ -854,30 +1268,33 @@ describe('documentState', () => {
           location: 'Block C'
         },
         members: [
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[0],
-          {
-            description: 'The first group'
-          },
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[1],
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[2]
+          getIn(json, ['members', '0']),
+          { description: 'The first group' },
+          getIn(json, ['members', '1']),
+          getIn(json, ['members', '2'])
         ]
       })
 
-      // we have collapsed members[0], and after that moved it from index 0 to 1, so now members[1] should be collapsed
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: {
-          '': true,
-          '/group': true,
-          '/members': true,
-          '/members/0': true,
-          '/members/1': true,
-          '/members/3': true
-        },
-        visibleSectionsMap: {
-          '/members': [{ start: 0, end: 4 }]
-        }
-      })
+      const fromPathRecursive = ['properties', 'group', 'properties', 'details']
+      let expectedDocumentState = deleteIn(documentState, fromPathRecursive)
+      expectedDocumentState = updateIn(
+        expectedDocumentState,
+        ['properties', 'members'],
+        (state: DocumentState) => ({
+          ...state,
+          items:
+            state.type === 'array'
+              ? [
+                  state.items[0],
+                  getIn(documentState, fromPathRecursive),
+                  state.items[1],
+                  state.items[2]
+                ]
+              : null,
+          visibleSections: [{ start: 0, end: 4 }]
+        })
+      )
+      assert.deepStrictEqual(res.state, expectedDocumentState)
     })
 
     test('move: should move a value from array to object', () => {
@@ -889,31 +1306,28 @@ describe('documentState', () => {
 
       assert.deepStrictEqual(res.json, {
         group: {
-          ...((json as Record<string, unknown>)['group'] as Record<string, unknown>),
-          user: ((json as Record<string, unknown>)['members'] as Array<unknown>)[1]
+          ...(getIn(json, ['group']) as Record<string, unknown>),
+          user: getIn(json, ['members', '1'])
         },
-        members: [
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[0],
-          ((json as Record<string, unknown>)['members'] as Array<unknown>)[2]
-        ]
+        members: [getIn(json, ['members', '0']), getIn(json, ['members', '2'])]
       })
 
-      // we have collapsed members[0], and after that moved it from index 0 to 1, so now members[1] should be collapsed
-      assert.deepStrictEqual(res.documentState, {
-        ...documentState,
-        expandedMap: {
-          '': true,
-          '/group': true,
-          '/group/details': true,
-          '/group/user': true,
-          '/members': true,
-          '/members/0': true,
-          '/members/1': true
-        },
-        visibleSectionsMap: {
-          '/members': [{ start: 0, end: 2 }]
-        }
+      const pathRecursive = ['properties', 'group', 'properties', 'user']
+      let expectedDocumentState = setIn(documentState, pathRecursive, {
+        type: 'object',
+        expanded: true,
+        properties: {}
       })
+      expectedDocumentState = updateIn(
+        expectedDocumentState,
+        ['properties', 'members'],
+        (state: DocumentState) => ({
+          ...state,
+          items: state.type === 'array' ? [state.items[0], state.items[2]] : null,
+          visibleSections: [{ start: 0, end: 2 }]
+        })
+      )
+      assert.deepStrictEqual(res.state, expectedDocumentState)
     })
   })
 
@@ -1004,41 +1418,72 @@ describe('documentState', () => {
     }
 
     test('should expand root path', () => {
-      assert.deepStrictEqual(expandPath(json, createDocumentState(), []).expandedMap, {})
+      assert.deepStrictEqual(expandPath(json, createDocumentState({ json }), []), {
+        type: 'object',
+        expanded: false,
+        properties: {}
+      })
     })
 
     test('should expand an array', () => {
-      assert.deepStrictEqual(expandPath(json, createDocumentState(), ['array']).expandedMap, {
-        '': true
+      assert.deepStrictEqual(expandPath(json, createDocumentState({ json }), ['array']), {
+        type: 'object',
+        expanded: true,
+        properties: {}
       })
     })
 
     test('should expand an object inside an array', () => {
-      assert.deepStrictEqual(expandPath(json, createDocumentState(), ['array', '2']).expandedMap, {
-        '': true,
-        '/array': true
+      assert.deepStrictEqual(expandPath(json, createDocumentState({ json }), ['array', '2']), {
+        type: 'object',
+        expanded: true,
+        properties: {
+          array: {
+            type: 'array',
+            expanded: true,
+            items: [],
+            visibleSections: DEFAULT_VISIBLE_SECTIONS
+          }
+        }
       })
     })
 
     test('should not expand a value (only objects and arrays)', () => {
-      assert.deepStrictEqual(expandPath(json, createDocumentState(), ['array', '0']).expandedMap, {
-        '': true,
-        '/array': true
+      assert.deepStrictEqual(expandPath(json, createDocumentState({ json }), ['array', '0']), {
+        type: 'object',
+        expanded: true,
+        properties: {
+          array: {
+            type: 'array',
+            expanded: true,
+            items: [],
+            visibleSections: DEFAULT_VISIBLE_SECTIONS
+          }
+        }
       })
     })
 
     test('should expand an object', () => {
-      assert.deepStrictEqual(expandPath(json, createDocumentState(), ['object']).expandedMap, {
-        '': true
+      assert.deepStrictEqual(expandPath(json, createDocumentState({ json }), ['object']), {
+        type: 'object',
+        expanded: true,
+        properties: {}
       })
     })
 
     test('should expand a nested object', () => {
       assert.deepStrictEqual(
-        expandPath(json, createDocumentState(), ['object', 'nested']).expandedMap,
+        expandPath(json, createDocumentState({ json }), ['object', 'nested']),
         {
-          '': true,
-          '/object': true
+          type: 'object',
+          expanded: true,
+          properties: {
+            object: {
+              type: 'object',
+              expanded: true,
+              properties: {}
+            }
+          }
         }
       )
     })
@@ -1048,129 +1493,21 @@ describe('documentState', () => {
         largeArray: range(0, 500).map((index) => ({ id: index }))
       }
 
-      assert.deepStrictEqual(expandPath(json, createDocumentState(), ['largeArray', '120']), {
-        ...createDocumentState(),
-        expandedMap: {
-          '': true,
-          '/largeArray': true
-        },
-        visibleSectionsMap: {
-          '/largeArray': [{ start: 0, end: 200 }]
+      assert.deepStrictEqual(
+        expandPath(json, createDocumentState({ json }), ['largeArray', '120']),
+        {
+          type: 'object',
+          expanded: true,
+          properties: {
+            largeArray: {
+              type: 'array',
+              expanded: true,
+              items: [],
+              visibleSections: [{ start: 0, end: 200 }]
+            }
+          }
         }
-      })
-    })
-  })
-
-  describe('shiftPath', () => {
-    const expandedPaths: JSONPointerMap<number> = {
-      '/array': 1,
-      '/array/0': 2,
-      '/array/0/name': 3,
-      '/array/2': 4,
-      '/array/2/name': 5,
-      '/array/3': 6,
-      '/array/3/name': 7,
-      '/obj': 8
-    }
-
-    test('should shift entries one up', () => {
-      deepStrictEqual(shiftPath(expandedPaths, ['array'], 2, -1), {
-        '/array': 1,
-        '/array/0': 2,
-        '/array/0/name': 3,
-        '/array/1': 4,
-        '/array/1/name': 5,
-        '/array/2': 6,
-        '/array/2/name': 7,
-        '/obj': 8
-      })
-    })
-
-    test('should shift entries one down', () => {
-      deepStrictEqual(shiftPath(expandedPaths, ['array'], 2, 1), {
-        '/array': 1,
-        '/array/0': 2,
-        '/array/0/name': 3,
-        '/array/3': 4,
-        '/array/3/name': 5,
-        '/array/4': 6,
-        '/array/4/name': 7,
-        '/obj': 8
-      })
-    })
-
-    test('should shift entries an offset 0 (do nothing)', () => {
-      deepStrictEqual(shiftPath(expandedPaths, ['array'], 2, 0), expandedPaths)
-    })
-  })
-
-  describe('deletePath', () => {
-    const myStateMap: JSONPointerMap<number> = {
-      '/array': 1,
-      '/array/0': 2,
-      '/array/1': 3,
-      '/array/2': 4,
-      '/array/2/name': 5,
-      '/obj': 6
-    }
-
-    test('should delete an object path from a PathsMap', () => {
-      deepStrictEqual(deletePath(myStateMap, ['obj']), {
-        '/array': 1,
-        '/array/0': 2,
-        '/array/1': 3,
-        '/array/2': 4,
-        '/array/2/name': 5
-      })
-    })
-
-    test('should delete an array item from a PathsMap', () => {
-      deepStrictEqual(deletePath(myStateMap, ['array', '1']), {
-        '/array': 1,
-        '/array/0': 2,
-        '/array/2': 4,
-        '/array/2/name': 5,
-        '/obj': 6
-      })
-    })
-
-    test('should delete nested paths from a PathsMap', () => {
-      deepStrictEqual(deletePath(myStateMap, ['array']), {
-        '/obj': 6
-      })
-    })
-  })
-
-  describe('filterPath', () => {
-    const expandedPaths: JSONPointerMap<number> = {
-      '/array': 1,
-      '/array/0': 2,
-      '/array/1': 3,
-      '/array/2': 4,
-      '/array/2/name': 5,
-      '/obj': 6
-    }
-
-    test('should filter an object path from a PathsMap', () => {
-      deepStrictEqual(filterPath(expandedPaths, '/obj'), {
-        '/obj': 6
-      })
-    })
-
-    test('should filter an array item from a PathsMap', () => {
-      deepStrictEqual(filterPath(expandedPaths, '/array/1'), {
-        '/array/1': 3
-      })
-    })
-
-    test('should delete nested paths from a PathsMap', () => {
-      deepStrictEqual(filterPath(expandedPaths, '/array'), {
-        '/array': 1,
-        '/array/0': 2,
-        '/array/1': 3,
-        '/array/2': 4,
-        '/array/2/name': 5
-      })
+      )
     })
   })
 })
diff --git a/src/lib/logic/documentState.ts b/src/lib/logic/documentState.ts
index 26394356..20559264 100644
--- a/src/lib/logic/documentState.ts
+++ b/src/lib/logic/documentState.ts
@@ -1,6 +1,6 @@
 import {
   compileJSONPointer,
-  existsIn,
+  deleteIn,
   getIn,
   immutableJSONPatch,
   isJSONArray,
@@ -15,17 +15,15 @@ import {
   type JSONPatchDocument,
   type JSONPatchMove,
   type JSONPatchRemove,
-  type JSONPatchReplace,
   type JSONPath,
-  type JSONPointer,
-  parseJSONPointer,
   parsePath,
-  startsWithJSONPointer
+  setIn,
+  updateIn
 } from 'immutable-json-patch'
-import { initial, isEqual, last } from 'lodash-es'
+import { initial, last } from 'lodash-es'
 import { DEFAULT_VISIBLE_SECTIONS, MAX_DOCUMENT_SIZE_EXPAND_ALL } from '../constants.js'
-import { forEachIndex } from '../utils/arrayUtils.js'
-import { isObject, isObjectOrArray, isStringContainingPrimitiveValue } from '../utils/typeUtils.js'
+import { forEachIndex, insertItemsAt, strictShallowEqual } from '../utils/arrayUtils.js'
+import { isObject, isStringContainingPrimitiveValue } from '../utils/typeUtils.js'
 import {
   currentRoundNumber,
   inVisibleSection,
@@ -33,55 +31,192 @@ import {
   nextRoundNumber
 } from './expandItemsSections.js'
 import type {
+  ArrayDocumentState,
   CaretPosition,
   DocumentState,
   JSONParser,
-  JSONPointerMap,
-  JSONSelection,
+  ObjectDocumentState,
   OnExpand,
+  ArrayRecursiveState,
+  RecursiveState,
+  RecursiveStateFactory,
   Section,
+  ValueDocumentState,
   VisibleSection
 } from '$lib/types'
 import { CaretType } from '$lib/types.js'
 import { int } from '../utils/numberUtils.js'
 import { isLargeContent } from '$lib/utils/jsonUtils.js'
+import {
+  isArrayRecursiveState,
+  isExpandableState,
+  isObjectRecursiveState,
+  isValueRecursiveState
+} from '$lib/typeguards.js'
+
+export type CreateRecursiveStateProps = {
+  json: unknown | undefined
+  factory: RecursiveStateFactory
+}
 
-type OnCreateSelection = (json: unknown, documentState: DocumentState) => JSONSelection
+export function createRecursiveState({
+  json,
+  factory
+}: CreateRecursiveStateProps): RecursiveState | undefined {
+  return Array.isArray(json)
+    ? factory.createArrayDocumentState()
+    : isObject(json)
+      ? factory.createObjectDocumentState()
+      : json !== undefined
+        ? factory.createValueDocumentState()
+        : undefined
+}
 
 export type CreateDocumentStateProps = {
   json: unknown | undefined
   expand?: OnExpand
-  select?: OnCreateSelection
 }
 
-export function createDocumentState(props?: CreateDocumentStateProps): DocumentState {
-  let documentState: DocumentState = {
-    expandedMap: {},
-    enforceStringMap: {},
-    visibleSectionsMap: {},
-    selection: null,
-    sortedColumn: null
+export function createDocumentState({
+  json,
+  expand
+}: CreateDocumentStateProps): DocumentState | undefined {
+  let documentState = createRecursiveState({ json, factory: documentStateFactory }) as DocumentState
+
+  if (expand && documentState) {
+    documentState = expandWithCallback(json, documentState, [], expand)
   }
 
-  if (props?.select && props.json !== undefined) {
-    documentState = {
-      ...documentState,
-      selection: props.select(props.json, documentState)
+  return documentState
+}
+
+export function createArrayDocumentState({ expanded } = { expanded: false }): ArrayDocumentState {
+  return { type: 'array', expanded, visibleSections: DEFAULT_VISIBLE_SECTIONS, items: [] }
+}
+
+export function createObjectDocumentState({ expanded } = { expanded: false }): ObjectDocumentState {
+  return { type: 'object', expanded, properties: {} }
+}
+
+export function createValueDocumentState(): ValueDocumentState {
+  return { type: 'value' }
+}
+
+export const documentStateFactory: RecursiveStateFactory = {
+  createObjectDocumentState,
+  createArrayDocumentState,
+  createValueDocumentState
+}
+
+export function ensureRecursiveState<T extends RecursiveState>(
+  json: unknown,
+  documentState: T | undefined,
+  path: JSONPath,
+  {
+    createObjectDocumentState,
+    createArrayDocumentState,
+    createValueDocumentState
+  }: RecursiveStateFactory
+): T {
+  function recurse(value: unknown, state: T | undefined, path: JSONPath): T {
+    if (Array.isArray(value)) {
+      const arrayState: ArrayRecursiveState = isArrayRecursiveState(state)
+        ? state
+        : createArrayDocumentState()
+      if (path.length === 0) {
+        return arrayState as T
+      }
+
+      const index = int(path[0])
+      const itemState = recurse(value[index], arrayState.items[index] as T, path.slice(1))
+      return setIn(arrayState, ['items', path[0]], itemState)
+    }
+
+    if (isObject(value)) {
+      const objectState = isObjectRecursiveState(state) ? state : createObjectDocumentState()
+      if (path.length === 0) {
+        return objectState as T
+      }
+
+      const key = path[0]
+      const itemState = recurse(value[key], objectState.properties[key] as T, path.slice(1))
+      return setIn(objectState, ['properties', key], itemState)
     }
+
+    return isValueRecursiveState(state) ? state : (createValueDocumentState() as T)
   }
 
-  if (props?.expand) {
-    documentState = expandWithCallback(props.json, documentState, [], props.expand)
+  return recurse(json, documentState, path)
+}
+
+export function syncDocumentState(
+  json: unknown,
+  documentState: DocumentState | undefined
+): DocumentState | undefined {
+  if (json === undefined || documentState === undefined) {
+    return undefined
   }
 
-  return documentState
+  if (Array.isArray(json)) {
+    if (!isArrayRecursiveState(documentState)) {
+      const expanded = isExpandableState(documentState) ? documentState.expanded : false
+      return createArrayDocumentState({ expanded })
+    }
+
+    const items: DocumentState[] = []
+    for (let i = 0; i < Math.min(documentState.items.length, json.length); i++) {
+      const itemState = syncDocumentState(json[i], documentState.items[i])
+      if (itemState !== undefined) {
+        items[i] = itemState
+      }
+    }
+
+    const changed = !strictShallowEqual(items, documentState.items)
+
+    return changed ? { ...documentState, items } : documentState
+  }
+
+  if (isObject(json)) {
+    if (!isObjectRecursiveState(documentState)) {
+      const expanded = isExpandableState(documentState) ? documentState.expanded : false
+      return createObjectDocumentState({ expanded })
+    }
+
+    const properties: ObjectDocumentState['properties'] = {}
+    Object.keys(documentState.properties).forEach((key) => {
+      const value = json[key]
+      if (value !== undefined) {
+        const propertyState = syncDocumentState(value, documentState.properties[key])
+        if (propertyState !== undefined) {
+          properties[key] = propertyState
+        }
+      }
+    })
+
+    const changed = !strictShallowEqual(
+      Object.values(properties),
+      Object.values(documentState.properties)
+    )
+
+    return changed ? { ...documentState, properties } : documentState
+  }
+
+  // json is of type value
+  if (isValueRecursiveState(documentState)) {
+    return documentState
+  }
+
+  return undefined
 }
 
 export function getVisibleSections(
-  documentState: DocumentState,
-  pointer: JSONPointer
+  json: unknown,
+  documentState: DocumentState | undefined,
+  path: JSONPath
 ): VisibleSection[] {
-  return documentState.visibleSectionsMap[pointer] || DEFAULT_VISIBLE_SECTIONS
+  const valueState = getInRecursiveState(json, documentState, path)
+
+  return isArrayRecursiveState(valueState) ? valueState.visibleSections : DEFAULT_VISIBLE_SECTIONS
 }
 
 /**
@@ -103,41 +238,68 @@ export function forEachVisibleIndex(
  */
 export function expandPath(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
   path: JSONPath
-): DocumentState {
-  const expandedMap: JSONPointerMap<boolean> = { ...documentState.expandedMap }
-  const visibleSectionsMap = { ...documentState.visibleSectionsMap }
+): DocumentState | undefined {
+  let updatedState = documentState
 
   for (let i = 0; i < path.length; i++) {
     const partialPath = path.slice(0, i)
-    const partialPointer = compileJSONPointer(partialPath)
+    updatedState = expandSingleItem(json, updatedState, partialPath)
+
+    if (i < path.length) {
+      updatedState = updateInDocumentState(
+        json,
+        updatedState,
+        partialPath,
+        (_value, nestedState) => {
+          if (!isArrayRecursiveState(nestedState)) {
+            return nestedState
+          }
+
+          const index = int(path[i])
+          if (inVisibleSection(nestedState.visibleSections, index)) {
+            return nestedState
+          }
 
-    const value = getIn(json, partialPath)
+          const start = currentRoundNumber(index)
+          const end = nextRoundNumber(start)
+          const newVisibleSection = { start, end }
 
-    if (isObjectOrArray(value)) {
-      expandedMap[partialPointer] = true
+          return {
+            ...nestedState,
+            visibleSections: mergeSections(nestedState.visibleSections.concat(newVisibleSection))
+          }
+        }
+      )
     }
+  }
+
+  return updatedState
+}
 
-    // if needed, enlarge the expanded sections such that the search result becomes visible in the array
-    if (Array.isArray(value) && i < path.length) {
-      const sections = visibleSectionsMap[partialPointer] || DEFAULT_VISIBLE_SECTIONS
-      const index = int(path[i])
+export function toRecursiveStatePath(json: unknown, path: JSONPath): JSONPath {
+  let value = json
+  const recursiveStatePath: JSONPath = []
 
-      if (!inVisibleSection(sections, index)) {
-        const start = currentRoundNumber(index)
-        const end = nextRoundNumber(start)
-        const newSection = { start, end }
-        visibleSectionsMap[partialPointer] = mergeSections(sections.concat(newSection))
-      }
+  let i = 0
+  while (i < path.length) {
+    if (Array.isArray(value)) {
+      const index = path[i]
+      recursiveStatePath.push('items', index)
+      value = value[int(index)]
+    } else if (isObject(value)) {
+      const key = path[i]
+      recursiveStatePath.push('properties', key)
+      value = (value as Record<string, unknown>)[key]
+    } else {
+      throw new Error(`Cannot convert path: Object or Array expected at index ${i}`)
     }
-  }
 
-  return {
-    ...documentState,
-    expandedMap,
-    visibleSectionsMap
+    i++
   }
+
+  return recursiveStatePath
 }
 
 /**
@@ -146,113 +308,117 @@ export function expandPath(
  */
 export function expandWithCallback(
   json: unknown | undefined,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
   path: JSONPath,
   expandedCallback: OnExpand
 ): DocumentState {
-  const expandedMap = { ...documentState.expandedMap }
+  // FIXME: updateInDocumentState and ensureNestedDocumentState here
+  let updatedState = ensureRecursiveState(json, documentState, path, documentStateFactory)
+
+  // FIXME: simplify this function
 
   function recurse(value: unknown) {
     const pathIndex = currentPath.length
+    const pathStateIndex = currentStatePath.length + 1
 
     if (Array.isArray(value)) {
       if (expandedCallback(currentPath)) {
-        const pointer = compileJSONPointer(currentPath)
-        expandedMap[pointer] = true
+        updatedState = updateIn(
+          updatedState,
+          currentStatePath,
+          (value: DocumentState | undefined) => {
+            return value
+              ? { ...value, expanded: true }
+              : createArrayDocumentState({ expanded: true })
+          }
+        )
 
         if (value.length > 0) {
-          const visibleSections = getVisibleSections(documentState, pointer)
+          currentStatePath.push('items')
+
+          const visibleSections = getVisibleSections(json, documentState, path)
 
           forEachVisibleIndex(value, visibleSections, (index) => {
-            currentPath[pathIndex] = String(index)
+            const indexStr = String(index)
+            currentPath[pathIndex] = indexStr
+            currentStatePath[pathStateIndex] = indexStr
+
             recurse(value[index])
           })
 
           currentPath.pop()
+          currentPath.pop()
+          currentStatePath.pop()
+          currentStatePath.pop()
         }
       }
     } else if (isObject(value)) {
       if (expandedCallback(currentPath)) {
-        expandedMap[compileJSONPointer(currentPath)] = true
+        updatedState = updateIn(
+          updatedState,
+          currentStatePath,
+          (value: DocumentState | undefined) => {
+            return value
+              ? { ...value, expanded: true }
+              : createObjectDocumentState({ expanded: true })
+          }
+        )
 
         const keys = Object.keys(value)
         if (keys.length > 0) {
+          currentStatePath.push('properties')
+
           for (const key of keys) {
             currentPath[pathIndex] = key
+            currentStatePath[pathStateIndex] = key
+
             recurse(value[key])
           }
 
           currentPath.pop()
+          currentPath.pop()
+          currentStatePath.pop()
+          currentStatePath.pop()
         }
       }
     }
   }
 
   const currentPath = path.slice()
+  const currentStatePath = toRecursiveStatePath(json, currentPath)
   const value = json !== undefined ? getIn(json, path) : json
   if (value !== undefined) {
     recurse(value)
   }
 
-  return {
-    ...documentState,
-    expandedMap
-  }
-}
-
-// TODO: write unit tests
-export function expandSingleItem(documentState: DocumentState, path: JSONPath): DocumentState {
-  return {
-    ...documentState,
-    expandedMap: {
-      ...documentState.expandedMap,
-      [compileJSONPointer(path)]: true
-    }
-  }
+  return updatedState
 }
 
 // TODO: write unit tests
-export function collapsePath(documentState: DocumentState, path: JSONPath): DocumentState {
-  // delete the expanded state of the path and all it's nested paths
-  const expandedMap = deletePath(documentState.expandedMap, path)
-  const enforceStringMap = deletePath(documentState.enforceStringMap, path)
-  const visibleSectionsMap = deletePath(documentState.visibleSectionsMap, path)
-
-  return {
-    ...documentState,
-    expandedMap,
-    enforceStringMap,
-    visibleSectionsMap
-  }
+export function expandSingleItem(
+  json: unknown,
+  documentState: DocumentState | undefined,
+  path: JSONPath
+): DocumentState | undefined {
+  return updateInDocumentState(json, documentState, path, (_value, state) => {
+    return isExpandableState(state) ? { ...state, expanded: true } : state
+  })
 }
 
 // TODO: write unit tests
-export function setEnforceString(
-  documentState: DocumentState,
-  pointer: JSONPointer,
-  enforceString: boolean
-): DocumentState {
-  if (enforceString) {
-    const updatedEnforceString = { ...documentState.enforceStringMap }
-    updatedEnforceString[pointer] = enforceString
-
-    return {
-      ...documentState,
-      enforceStringMap: updatedEnforceString
-    }
-  } else {
-    // remove if defined
-    if (typeof documentState.enforceStringMap[pointer] === 'boolean') {
-      const updatedEnforceString = { ...documentState.enforceStringMap }
-      delete updatedEnforceString[pointer]
-      return {
-        ...documentState,
-        enforceStringMap: updatedEnforceString
-      }
-    } else {
-      return documentState
-    }
-  }
+export function collapsePath(
+  json: unknown,
+  documentState: DocumentState | undefined,
+  path: JSONPath
+): DocumentState | undefined {
+  return updateInDocumentState(json, documentState, path, (_value, state) => {
+    // clear the state of nested objects/arrays
+    return isObjectRecursiveState(state)
+      ? createObjectDocumentState({ expanded: false })
+      : isArrayRecursiveState(state)
+        ? createArrayDocumentState({ expanded: false })
+        : state
+  })
 }
 
 /**
@@ -260,17 +426,19 @@ export function setEnforceString(
  */
 export function expandSection(
   json: unknown,
-  documentState: DocumentState,
-  pointer: JSONPointer,
+  documentState: DocumentState | undefined,
+  path: JSONPath,
   section: Section
-): DocumentState {
-  return {
-    ...documentState,
-    visibleSectionsMap: {
-      ...documentState.visibleSectionsMap,
-      [pointer]: mergeSections(getVisibleSections(documentState, pointer).concat(section))
+): DocumentState | undefined {
+  return updateInDocumentState(json, documentState, path, (_value, state) => {
+    if (!isArrayRecursiveState(state)) {
+      return state
     }
-  }
+
+    const visibleSections = mergeSections(state.visibleSections.concat(section))
+
+    return { ...state, visibleSections }
+  })
 }
 
 export function syncKeys(actualKeys: string[], prevKeys?: string[]): string[] {
@@ -294,14 +462,14 @@ export function syncKeys(actualKeys: string[], prevKeys?: string[]): string[] {
  */
 export function documentStatePatch(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
   operations: JSONPatchDocument
-): { json: unknown; documentState: DocumentState } {
+): { json: unknown; state: DocumentState | undefined } {
   const updatedJson: unknown = immutableJSONPatch(json, operations)
 
   const updatedDocumentState = operations.reduce((updatingState, operation) => {
     if (isJSONPatchAdd(operation)) {
-      return documentStateAdd(updatedJson, updatingState, operation)
+      return documentStateAdd(updatedJson, updatingState, operation, undefined)
     }
 
     if (isJSONPatchRemove(operation)) {
@@ -309,7 +477,8 @@ export function documentStatePatch(
     }
 
     if (isJSONPatchReplace(operation)) {
-      return documentStateReplace(updatedJson, updatingState, operation)
+      // nothing special to do (all is handled by syncDocumentState)
+      return updatingState
     }
 
     if (isJSONPatchCopy(operation) || isJSONPatchMove(operation)) {
@@ -321,316 +490,171 @@ export function documentStatePatch(
 
   return {
     json: updatedJson,
-    documentState: updatedDocumentState
+    state: syncDocumentState(updatedJson, updatedDocumentState) // sync to cleanup leftover state
   }
 }
 
-export function documentStateAdd(
+export function getInRecursiveState<T extends RecursiveState>(
   json: unknown,
-  documentState: DocumentState,
-  operation: JSONPatchAdd
-): DocumentState {
-  const path = parsePath(json, operation.path)
-  const parentPath = initial(path)
-  const parentPointer = compileJSONPointer(parentPath)
-  const parent = getIn(json, parentPath)
+  documentState: T | undefined,
+  path: JSONPath
+): T | undefined {
+  return getIn(documentState, toRecursiveStatePath(json, path))
+}
 
-  if (isJSONArray(parent)) {
-    const index = int(last(path) as string)
+export function setInRecursiveState<T extends RecursiveState>(
+  json: unknown,
+  recursiveState: T | undefined,
+  path: JSONPath,
+  value: unknown,
+  factory: RecursiveStateFactory
+): T | undefined {
+  const ensuredState = ensureRecursiveState(json, recursiveState, path, factory)
+  return setIn(ensuredState, toRecursiveStatePath(json, path), value)
+}
 
-    // shift all paths of the relevant parts of the state
-    const expandedMap = shiftPath(documentState.expandedMap, parentPath, index, 1)
-    const enforceStringMap = shiftPath(documentState.enforceStringMap, parentPath, index, 1)
-    let visibleSectionsMap = shiftPath(documentState.visibleSectionsMap, parentPath, index, 1)
+export function updateInRecursiveState<T extends RecursiveState>(
+  json: unknown,
+  documentState: T | undefined,
+  path: JSONPath,
+  transform: (value: unknown, state: T) => T,
+  factory: RecursiveStateFactory
+): T {
+  const ensuredState: T = ensureRecursiveState(json, documentState, path, factory)
+  return updateIn(ensuredState, toRecursiveStatePath(json, path), (nestedState: T) => {
+    const value = getIn(json, path)
+    return transform(value, nestedState)
+  })
+}
 
-    // shift visible sections of array
-    visibleSectionsMap = updateInPathsMap(visibleSectionsMap, parentPointer, (sections) =>
-      shiftVisibleSections(sections, index, 1)
-    )
+export function setInDocumentState(
+  json: unknown,
+  documentState: DocumentState | undefined,
+  path: JSONPath,
+  value: unknown
+): DocumentState | undefined {
+  return setInRecursiveState(json, documentState, path, value, documentStateFactory)
+}
 
-    return {
-      ...documentState,
-      expandedMap,
-      enforceStringMap,
-      visibleSectionsMap
-    }
-  }
+export function updateInDocumentState<T extends RecursiveState>(
+  json: unknown,
+  documentState: T | undefined,
+  path: JSONPath,
+  transform: (value: unknown, state: T) => T
+): T {
+  return updateInRecursiveState(json, documentState, path, transform, documentStateFactory)
+}
 
-  // object, nothing to do
-  return documentState
+export function deleteInDocumentState<T extends RecursiveState>(
+  json: unknown,
+  documentState: T | undefined,
+  path: JSONPath
+): T | undefined {
+  return deleteIn(documentState, toRecursiveStatePath(json, path))
 }
 
-export function documentStateRemove(
+export function documentStateAdd(
   updatedJson: unknown,
-  documentState: DocumentState,
-  operation: JSONPatchRemove
-): DocumentState {
+  documentState: DocumentState | undefined,
+  operation: JSONPatchAdd,
+  stateValue: DocumentState | undefined
+): DocumentState | undefined {
   const path = parsePath(updatedJson, operation.path)
   const parentPath = initial(path)
-  const parentPointer = compileJSONPointer(parentPath)
-  const parent = getIn(updatedJson, parentPath)
-
-  let { expandedMap, enforceStringMap, visibleSectionsMap } = documentState
 
-  // delete the path itself and its children
-  expandedMap = deletePath(expandedMap, path)
-  enforceStringMap = deletePath(enforceStringMap, path)
-  visibleSectionsMap = deletePath(visibleSectionsMap, path)
-
-  if (isJSONArray(parent)) {
-    const index = int(last(path) as string)
+  let updatedState = documentState
 
-    // shift all paths of the relevant parts of the state
-    expandedMap = shiftPath(expandedMap, parentPath, index, -1)
-    enforceStringMap = shiftPath(enforceStringMap, parentPath, index, -1)
-    visibleSectionsMap = shiftPath(visibleSectionsMap, parentPath, index, -1)
+  updatedState = updateInDocumentState(
+    updatedJson,
+    updatedState,
+    parentPath,
+    (_parent, arrayState) => {
+      if (!isArrayRecursiveState(arrayState)) {
+        return arrayState
+      }
 
-    // shift visible sections of array
-    visibleSectionsMap = updateInPathsMap(visibleSectionsMap, parentPointer, (sections) =>
-      shiftVisibleSections(sections, index, -1)
-    )
-  }
+      const index = int(last(path) as string)
+      const { items, visibleSections } = arrayState
+      return {
+        ...arrayState,
+        items:
+          index < items.length
+            ? // eslint-disable-next-line no-sparse-arrays
+              insertItemsAt(items, index, stateValue !== undefined ? [stateValue] : [,])
+            : items,
+        visibleSections: shiftVisibleSections(visibleSections, index, 1)
+      }
+    }
+  )
 
-  return {
-    ...documentState,
-    expandedMap,
-    enforceStringMap,
-    visibleSectionsMap
-  }
+  // object property added, nothing to do
+  return setInDocumentState(updatedJson, updatedState, path, stateValue)
 }
 
-export function documentStateReplace(
+export function documentStateRemove(
   updatedJson: unknown,
-  documentState: DocumentState,
-  operation: JSONPatchReplace
-): DocumentState {
-  const pointer = operation.path
+  documentState: DocumentState | undefined,
+  operation: JSONPatchRemove
+): DocumentState | undefined {
+  const path = parsePath(updatedJson, operation.path)
+  const parentPath = initial(path)
+  const parent = getIn(updatedJson, parentPath)
 
-  // cleanup state from paths that are removed now
-  const expandedMap = cleanupNonExistingPaths(updatedJson, documentState.expandedMap)
-  const enforceStringMap = cleanupNonExistingPaths(updatedJson, documentState.enforceStringMap)
-  const visibleSectionsMap = cleanupNonExistingPaths(updatedJson, documentState.visibleSectionsMap)
+  if (Array.isArray(parent)) {
+    return updateInDocumentState(updatedJson, documentState, parentPath, (_parent, arrayState) => {
+      if (!isArrayRecursiveState(arrayState)) {
+        return arrayState
+      }
 
-  // cleanup props of the object/array/value itself that are not applicable anymore
-  if (!isJSONObject(operation.value) && !isJSONArray(operation.value)) {
-    delete expandedMap[pointer]
-  }
-  if (!isJSONArray(operation.value)) {
-    delete visibleSectionsMap[pointer]
-  }
-  if (isJSONObject(operation.value) || isJSONArray(operation.value)) {
-    delete enforceStringMap[pointer]
-  }
+      const index = int(last(path) as string)
+      const { items, visibleSections } = arrayState
 
-  return {
-    ...documentState,
-    expandedMap,
-    enforceStringMap,
-    visibleSectionsMap
+      return {
+        ...arrayState,
+        items: items.slice(0, index).concat(items.slice(index + 1)),
+        visibleSections: shiftVisibleSections(visibleSections, index, -1)
+      }
+    })
   }
+
+  return deleteInDocumentState(updatedJson, documentState, path)
 }
 
 export function documentStateMoveOrCopy(
   updatedJson: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
   operation: JSONPatchCopy | JSONPatchMove
-): DocumentState {
+): DocumentState | undefined {
   if (isJSONPatchMove(operation) && operation.from === operation.path) {
     // nothing to do
     return documentState
   }
 
-  // get the state that we will move or copy, and move it to the new location
-  const renamePointer = (pointer: JSONPointer) =>
-    operation.path + pointer.substring(operation.from.length)
-  const expandedMapCopy = movePath(
-    filterPath(documentState.expandedMap, operation.from),
-    renamePointer
-  )
-  const enforceStringMapCopy = movePath(
-    filterPath(documentState.enforceStringMap, operation.from),
-    renamePointer
-  )
-  const visibleSectionsMapCopy = movePath(
-    filterPath(documentState.visibleSectionsMap, operation.from),
-    renamePointer
-  )
-
-  // patch the document state: use the remove and add operations to apply a move or copy
-  // note that `value` is just a fake value, we do not use this for real
   let updatedState = documentState
+
+  // get the state that we will move or copy
+  const from = parsePath(updatedJson, operation.from)
+  const stateValue = getInRecursiveState(updatedJson, updatedState, from)
+
   if (isJSONPatchMove(operation)) {
     updatedState = documentStateRemove(updatedJson, updatedState, {
       op: 'remove',
       path: operation.from
     })
   }
-  updatedState = documentStateAdd(updatedJson, updatedState, {
-    op: 'add',
-    path: operation.path,
-    value: null
-  })
-
-  // merge the original and the copied state
-  const expandedMap = mergePaths(updatedState.expandedMap, expandedMapCopy)
-  const enforceStringMap = mergePaths(updatedState.enforceStringMap, enforceStringMapCopy)
-  const visibleSectionsMap = mergePaths(updatedState.visibleSectionsMap, visibleSectionsMapCopy)
-
-  return {
-    ...documentState,
-    expandedMap,
-    enforceStringMap,
-    visibleSectionsMap
-  }
-}
-
-/**
- * Delete a path from a PathsMap. Will delete the path and its child paths
- * IMPORTANT: will NOT shift array items when an array item is removed, use shiftPath for that
- */
-export function deletePath<T>(map: JSONPointerMap<T>, path: JSONPath): JSONPointerMap<T> {
-  const updatedMap: JSONPointerMap<T> = {}
-  const pointer = compileJSONPointer(path)
-
-  // partition the contents of the map
-  Object.keys(map).forEach((itemPointer) => {
-    if (!startsWithJSONPointer(itemPointer, pointer)) {
-      updatedMap[itemPointer] = map[itemPointer]
-    }
-  })
-
-  return updatedMap
-}
-
-// TODO: unit test
-export function filterPath<T>(map: JSONPointerMap<T>, pointer: JSONPointer): JSONPointerMap<T> {
-  const filteredMap: JSONPointerMap<T> = {}
-
-  Object.keys(map).forEach((itemPointer) => {
-    if (startsWithJSONPointer(itemPointer, pointer)) {
-      filteredMap[itemPointer] = map[itemPointer]
-    }
-  })
-
-  return filteredMap
-}
-
-// TODO: unit test
-export function mergePaths<T>(a: JSONPointerMap<T>, b: JSONPointerMap<T>): JSONPointerMap<T> {
-  return { ...a, ...b }
-}
-
-// TODO: unit test
-export function movePath<T>(
-  map: JSONPointerMap<T>,
-  changePointer: (pointer: JSONPointer) => JSONPointer
-): JSONPointerMap<T> {
-  const movedMap: JSONPointerMap<T> = {}
-
-  Object.keys(map).forEach((oldPointer) => {
-    const newPointer = changePointer(oldPointer)
-    movedMap[newPointer] = map[oldPointer]
-  })
-
-  return movedMap
-}
-
-export function shiftPath<T>(
-  map: JSONPointerMap<T>,
-  path: JSONPath,
-  index: number,
-  offset: number
-): JSONPointerMap<T> {
-  const indexPathPos = path.length
-  const pointer = compileJSONPointer(path)
-
-  // collect all paths that need to be shifted, with their old path, new path, and value
-  const matches: { oldPointer: JSONPointer; newPointer: JSONPointer; value: T }[] = []
-  for (const itemPointer of Object.keys(map)) {
-    if (startsWithJSONPointer(itemPointer, pointer)) {
-      const itemPath: JSONPath = parseJSONPointer(itemPointer)
-      const pathIndex = int(itemPath[indexPathPos])
-
-      if (pathIndex >= index) {
-        itemPath[indexPathPos] = String(pathIndex + offset)
-
-        matches.push({
-          oldPointer: itemPointer,
-          newPointer: compileJSONPointer(itemPath),
-          value: map[itemPointer]
-        })
-      }
-    }
-  }
-
-  // if there are no changes, just return the original map
-  if (matches.length === 0) {
-    return map
-  }
-
-  const updatedMap = { ...map }
-
-  // delete all old paths from the map
-  // we do this *before* inserting new paths to prevent deleting a math that is already moved
-  matches.forEach((match) => {
-    delete updatedMap[match.oldPointer]
-  })
-
-  // insert shifted paths in the map
-  matches.forEach((match) => {
-    updatedMap[match.newPointer] = match.value
-  })
-
-  return updatedMap
-}
 
-// TODO: unit test
-export function cleanupNonExistingPaths<T>(
-  json: unknown,
-  map: JSONPointerMap<T>
-): JSONPointerMap<T> {
-  const updatedMap: JSONPointerMap<T> = {}
-
-  // TODO: for optimization, we could pass a filter callback which allows you to filter paths
-  //  starting with a specific, so you don't need to invoke parseJSONPointer and existsIn for largest part
-
-  Object.keys(map)
-    .filter((pointer) => existsIn(json, parsePath(json, pointer)))
-    .forEach((pointer) => {
-      updatedMap[pointer] = map[pointer]
-    })
-
-  return updatedMap
-}
-
-/**
- * Update a value in a PathsMap.
- * When the path exists, the callback will be invoked.
- * When the path does not exist, the callback is not invoked.
- */
-export function updateInPathsMap<T>(
-  map: JSONPointerMap<T>,
-  pointer: JSONPointer,
-  callback: (value: T) => T
-) {
-  const value = map[pointer]
-
-  if (pointer in map) {
-    const updatedValue = callback(value)
-    if (!isEqual(value, updatedValue)) {
-      const updatedMap = { ...map }
-
-      if (updatedValue === undefined) {
-        delete updatedMap[pointer]
-      } else {
-        updatedMap[pointer] = updatedValue
-      }
-
-      return updatedMap
-    }
-  }
+  updatedState = documentStateAdd(
+    updatedJson,
+    updatedState,
+    {
+      op: 'add',
+      path: operation.path,
+      value: null // note that the value is not actually used, so we just use null instead of getting the actual value from the json
+    },
+    stateValue
+  )
 
-  return map
+  return updatedState
 }
 
 /**
@@ -671,12 +695,14 @@ function mergeAdjacentSections(visibleSections: VisibleSection[]): VisibleSectio
 }
 
 export function getEnforceString(
-  value: unknown,
-  enforceStringMap: JSONPointerMap<boolean> | undefined,
-  pointer: JSONPointer,
+  json: unknown,
+  documentState: DocumentState | undefined,
+  path: JSONPath,
   parser: JSONParser
 ): boolean {
-  const enforceString = enforceStringMap ? enforceStringMap[pointer] : undefined
+  const value = getIn(json, path)
+  const nestedState = getInRecursiveState(json, documentState, path)
+  const enforceString = isValueRecursiveState(nestedState) ? nestedState.enforceString : undefined
 
   if (typeof enforceString === 'boolean') {
     return enforceString
@@ -699,30 +725,29 @@ export function getNextKeys(keys: string[], key: string, includeKey = false): st
  * Get all paths which are visible and rendered
  */
 // TODO: create memoized version of getVisiblePaths which remembers just the previous result if json and state are the same
-export function getVisiblePaths(json: unknown, documentState: DocumentState): JSONPath[] {
+export function getVisiblePaths(
+  json: unknown,
+  documentState: DocumentState | undefined
+): JSONPath[] {
   const paths: JSONPath[] = []
 
-  function _recurse(value: unknown, path: JSONPath) {
+  function _recurse(value: unknown, state: DocumentState | undefined, path: JSONPath) {
     paths.push(path)
-    const pointer = compileJSONPointer(path)
 
-    if (value && documentState.expandedMap[pointer] === true) {
-      if (isJSONArray(value)) {
-        const visibleSections = getVisibleSections(documentState, pointer)
-        forEachVisibleIndex(value, visibleSections, (index) => {
-          _recurse(value[index], path.concat(String(index)))
-        })
-      }
+    if (isJSONArray(value) && isArrayRecursiveState(state) && state.expanded) {
+      forEachVisibleIndex(value, state.visibleSections, (index) => {
+        _recurse(value[index], state.items[index], path.concat(String(index)))
+      })
+    }
 
-      if (isJSONObject(value)) {
-        Object.keys(value).forEach((key) => {
-          _recurse(value[key], path.concat(key))
-        })
-      }
+    if (isJSONObject(value) && isObjectRecursiveState(state) && state.expanded) {
+      Object.keys(value).forEach((key) => {
+        _recurse(value[key], state.properties[key], path.concat(key))
+      })
     }
   }
 
-  _recurse(json, [])
+  _recurse(json, documentState, [])
 
   return paths
 }
@@ -734,7 +759,7 @@ export function getVisiblePaths(json: unknown, documentState: DocumentState): JS
 // TODO: create memoized version of getVisibleCaretPositions which remembers just the previous result if json and state are the same
 export function getVisibleCaretPositions(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
   includeInside = true
 ): CaretPosition[] {
   const paths: CaretPosition[] = []
@@ -742,14 +767,16 @@ export function getVisibleCaretPositions(
   function _recurse(value: unknown, path: JSONPath) {
     paths.push({ path, type: CaretType.value })
 
-    const pointer = compileJSONPointer(path)
-    if (value && documentState.expandedMap[pointer] === true) {
+    const valueState = getInRecursiveState(json, documentState, path)
+    if (value && isExpandableState(valueState) && valueState.expanded) {
       if (includeInside) {
         paths.push({ path, type: CaretType.inside })
       }
 
       if (isJSONArray(value)) {
-        const visibleSections = getVisibleSections(documentState, pointer)
+        const visibleSections = isArrayRecursiveState(valueState)
+          ? valueState.visibleSections
+          : DEFAULT_VISIBLE_SECTIONS
         forEachVisibleIndex(value, visibleSections, (index) => {
           const itemPath = path.concat(String(index))
 
@@ -790,7 +817,7 @@ export function getVisibleCaretPositions(
 // TODO: write tests for getPreviousVisiblePath
 export function getPreviousVisiblePath(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
   path: JSONPath
 ): JSONPath | null {
   const visiblePaths = getVisiblePaths(json, documentState)
@@ -812,7 +839,7 @@ export function getPreviousVisiblePath(
 // TODO: write tests for getNextVisiblePath
 export function getNextVisiblePath(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
   path: JSONPath
 ): JSONPath | null {
   const visiblePaths = getVisiblePaths(json, documentState)
@@ -833,9 +860,9 @@ export function getNextVisiblePath(
 // TODO: write unit test
 export function expandRecursive(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
   path: JSONPath
-): DocumentState {
+): DocumentState | undefined {
   const expandContents: unknown | undefined = getIn(json, path)
   if (expandContents === undefined) {
     return documentState
diff --git a/src/lib/logic/dragging.test.ts b/src/lib/logic/dragging.test.ts
index cc406802..0c501a0b 100644
--- a/src/lib/logic/dragging.test.ts
+++ b/src/lib/logic/dragging.test.ts
@@ -4,7 +4,6 @@ import { onMoveSelection } from './dragging.js'
 import type { MoveSelectionResult } from './dragging.js'
 import { deepStrictEqual, strictEqual } from 'assert'
 import { isEqual } from 'lodash-es'
-import { createDocumentState } from './documentState.js'
 import type { RenderedItem } from '../types'
 import { immutableJSONPatch } from 'immutable-json-patch'
 
@@ -14,11 +13,7 @@ describe('dragging', () => {
     const json = {
       array: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
     }
-    let documentState = createDocumentState({ json, expand: () => true })
-    documentState = {
-      ...documentState,
-      selection: createMultiSelection(['array', '3'], ['array', '5'])
-    }
+    const selection = createMultiSelection(['array', '3'], ['array', '5'])
 
     const allItems: RenderedItem[] = json.array.map((item, index) => ({
       path: ['array', String(index)],
@@ -34,7 +29,7 @@ describe('dragging', () => {
     }): MoveSelectionResult {
       return onMoveSelection({
         json,
-        documentState,
+        selection,
         deltaY,
         items
       })
@@ -148,11 +143,7 @@ describe('dragging', () => {
     const json = {
       object: { a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6 }
     }
-    const documentState = createDocumentState({
-      json,
-      expand: () => true,
-      select: () => createMultiSelection(['object', 'c'], ['object', 'e'])
-    })
+    const selection = createMultiSelection(['object', 'c'], ['object', 'e'])
     const allItems = Object.keys(json.object).map((key) => ({
       path: ['object', key],
       height: itemHeight
@@ -167,7 +158,7 @@ describe('dragging', () => {
     }) {
       return onMoveSelection({
         json,
-        documentState,
+        selection,
         deltaY,
         items
       })
diff --git a/src/lib/logic/dragging.ts b/src/lib/logic/dragging.ts
index b5fcba86..5e34a670 100644
--- a/src/lib/logic/dragging.ts
+++ b/src/lib/logic/dragging.ts
@@ -4,7 +4,6 @@ import type { JSONPatchDocument } from 'immutable-json-patch'
 import { getIn } from 'immutable-json-patch'
 import { moveInsideParent } from './operations.js'
 import type {
-  DocumentState,
   DragInsideAction,
   DragInsideProps,
   JSONSelection,
@@ -14,7 +13,7 @@ import type {
 
 export interface MoveSelectionProps {
   json: unknown
-  documentState: DocumentState
+  selection: JSONSelection | null
   deltaY: number
   items: RenderedItem[]
 }
@@ -27,11 +26,11 @@ export interface MoveSelectionResult {
 
 export function onMoveSelection({
   json,
-  documentState,
+  selection,
   deltaY,
   items
 }: MoveSelectionProps): MoveSelectionResult {
-  if (!documentState.selection) {
+  if (!selection) {
     return {
       operations: undefined,
       updatedSelection: null,
@@ -39,7 +38,6 @@ export function onMoveSelection({
     }
   }
 
-  const selection = documentState.selection
   const dragInsideAction =
     deltaY < 0
       ? findSwapPathUp({ json, selection, deltaY, items })
diff --git a/src/lib/logic/operations.test.ts b/src/lib/logic/operations.test.ts
index 8950afe8..91622a2a 100644
--- a/src/lib/logic/operations.test.ts
+++ b/src/lib/logic/operations.test.ts
@@ -112,12 +112,10 @@ describe('operations', () => {
   describe('moveInsideParent', () => {
     test('should move a selection up inside an array', () => {
       const json = { array: [0, 1, 2, 3, 4, 5] }
-      const documentState = createDocumentState({
-        json,
-        select: () => createMultiSelection(['array', '3'], ['array', '4'])
-      })
+      const documentState = createDocumentState({ json, expand: () => true })
+      const selection = createMultiSelection(['array', '3'], ['array', '4'])
       const path = ['array', '1']
-      const operations = moveInsideParent(json, documentState.selection, {
+      const operations = moveInsideParent(json, selection, {
         beforePath: path,
         offset: 0
       })
@@ -132,12 +130,10 @@ describe('operations', () => {
 
     test('should move a selection down inside an array', () => {
       const json = { array: [0, 1, 2, 3, 4, 5] }
-      const documentState = createDocumentState({
-        json,
-        select: () => createMultiSelection(['array', '1'], ['array', '2'])
-      })
+      const documentState = createDocumentState({ json, expand: () => true })
+      const selection = createMultiSelection(['array', '1'], ['array', '2'])
       const path = ['array', '4']
-      const operations = moveInsideParent(json, documentState.selection, {
+      const operations = moveInsideParent(json, selection, {
         beforePath: path,
         offset: 0
       })
@@ -152,13 +148,10 @@ describe('operations', () => {
 
     test('should move a selection up inside an object', () => {
       const json = { object: { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e' } }
-      const documentState = createDocumentState({
-        json,
-        select: () => createMultiSelection(['object', 'c'], ['object', 'd']),
-        expand: () => true
-      })
+      const documentState = createDocumentState({ json, expand: () => true })
+      const selection = createMultiSelection(['object', 'c'], ['object', 'd'])
       const path = ['object', 'b']
-      const operations = moveInsideParent(json, documentState.selection, {
+      const operations = moveInsideParent(json, selection, {
         beforePath: path,
         offset: 0
       })
@@ -167,7 +160,7 @@ describe('operations', () => {
         { op: 'move', from: '/object/e', path: '/object/e' }
       ])
 
-      const { json: updatedJson, documentState: updatedDocumentState } = documentStatePatch(
+      const { json: updatedJson, state: updatedDocumentState } = documentStatePatch(
         json,
         documentState,
         operations
@@ -179,13 +172,10 @@ describe('operations', () => {
 
     test('should move a selection down inside an object', () => {
       const json = { object: { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e' } }
-      const documentState = createDocumentState({
-        json,
-        select: () => createMultiSelection(['object', 'b'], ['object', 'c']),
-        expand: () => true
-      })
+      const documentState = createDocumentState({ json, expand: () => true })
+      const selection = createMultiSelection(['object', 'b'], ['object', 'c'])
       const path = ['object', 'e']
-      const operations = moveInsideParent(json, documentState.selection, {
+      const operations = moveInsideParent(json, selection, {
         beforePath: path,
         offset: 0
       })
@@ -195,7 +185,7 @@ describe('operations', () => {
         { op: 'move', from: '/object/e', path: '/object/e' }
       ])
 
-      const { json: updatedJson, documentState: updatedDocumentState } = documentStatePatch(
+      const { json: updatedJson, state: updatedDocumentState } = documentStatePatch(
         json,
         documentState,
         operations
diff --git a/src/lib/logic/search.test.ts b/src/lib/logic/search.test.ts
index 38ba8837..8b588c9b 100644
--- a/src/lib/logic/search.test.ts
+++ b/src/lib/logic/search.test.ts
@@ -1,4 +1,4 @@
-import { test, describe } from 'vitest'
+import { describe, test } from 'vitest'
 import assert from 'assert'
 import type { JSONPath } from 'immutable-json-patch'
 import { immutableJSONPatch } from 'immutable-json-patch'
@@ -7,11 +7,18 @@ import {
   createSearchAndReplaceAllOperations,
   createSearchAndReplaceOperations,
   findCaseInsensitiveMatches,
+  flattenSearchResults,
   replaceText,
   search,
-  splitValue
+  splitValue,
+  toRecursiveSearchResults
 } from './search.js'
-import type { ExtendedSearchResultItem, SearchOptions, SearchResultItem } from '$lib/types.js'
+import type {
+  ExtendedSearchResultItem,
+  SearchResults,
+  SearchOptions,
+  SearchResultItem
+} from '$lib/types.js'
 import { SearchField } from '$lib/types.js'
 import { createKeySelection, createValueSelection } from './selection.js'
 
@@ -591,6 +598,156 @@ describe('search', () => {
       value: 4
     })
   })
+
+  describe('toRecursiveSearchResult', () => {
+    const json = {
+      b: { c: 'a' },
+      a: [{ a: 'b', c: 'a' }, 'e', 'a']
+    }
+
+    const expectedSearchResults: ExtendedSearchResultItem[] = [
+      {
+        path: ['b', 'c'],
+        field: SearchField.value,
+        fieldIndex: 0,
+        start: 0,
+        end: 1,
+        active: false
+      },
+      {
+        path: ['a'],
+        field: SearchField.key,
+        fieldIndex: 0,
+        start: 0,
+        end: 1,
+        active: true
+      },
+      {
+        path: ['a', '0', 'a'],
+        field: SearchField.key,
+        fieldIndex: 0,
+        start: 0,
+        end: 1,
+        active: false
+      },
+      {
+        path: ['a', '0', 'c'],
+        field: SearchField.value,
+        fieldIndex: 0,
+        start: 0,
+        end: 1,
+        active: false
+      },
+      {
+        path: ['a', '2'],
+        field: SearchField.value,
+        fieldIndex: 0,
+        start: 0,
+        end: 1,
+        active: false
+      }
+    ]
+
+    const expectedRecursiveSearchResult: SearchResults = {
+      type: 'object',
+      properties: {
+        b: {
+          type: 'object',
+          properties: {
+            c: { type: 'value', searchResults: [expectedSearchResults[0]] }
+          }
+        },
+        a: {
+          type: 'array',
+          searchResults: [expectedSearchResults[1]],
+          // eslint-disable-next-line no-sparse-arrays
+          items: [
+            {
+              type: 'object',
+              properties: {
+                a: { type: 'value', searchResults: [expectedSearchResults[2]] },
+                c: { type: 'value', searchResults: [expectedSearchResults[3]] }
+              }
+            },
+            ,
+            { type: 'value', searchResults: [expectedSearchResults[4]] }
+          ]
+        }
+      }
+    }
+
+    test('should create recursive search result', () => {
+      const activeIndex = 1
+      const results = search('a', json).map((item, index) => ({
+        ...item,
+        active: index === activeIndex
+      }))
+
+      assert.deepStrictEqual(results, expectedSearchResults)
+
+      const recursiveResults = toRecursiveSearchResults(json, results)
+
+      assert.deepStrictEqual(recursiveResults, expectedRecursiveSearchResult)
+    })
+
+    test('should flatten recursive search result', () => {
+      const flatResults = flattenSearchResults(expectedRecursiveSearchResult)
+
+      assert.deepStrictEqual(flatResults, expectedSearchResults)
+    })
+
+    test('should merge recursive search results in a single object', () => {
+      const json = {
+        a: 'aha'
+      }
+
+      const activeIndex = 1
+      const results = search('a', json).map((item, index) => ({
+        ...item,
+        active: index === activeIndex
+      }))
+
+      const expected = [
+        {
+          path: ['a'],
+          field: SearchField.key,
+          fieldIndex: 0,
+          start: 0,
+          end: 1,
+          active: false
+        },
+        {
+          path: ['a'],
+          field: SearchField.value,
+          fieldIndex: 0,
+          start: 0,
+          end: 1,
+          active: true
+        },
+        {
+          path: ['a'],
+          field: SearchField.value,
+          fieldIndex: 1,
+          start: 2,
+          end: 3,
+          active: false
+        }
+      ]
+
+      assert.deepStrictEqual(results, expected)
+
+      const recursiveResults = toRecursiveSearchResults(json, results)
+      assert.deepStrictEqual(recursiveResults, {
+        type: 'object',
+        properties: {
+          a: {
+            type: 'value',
+            searchResults: [expected[0], expected[1], expected[2]]
+          }
+        }
+      })
+    })
+  })
 })
 
 // helper function to collect matches
diff --git a/src/lib/logic/search.ts b/src/lib/logic/search.ts
index 662042c4..64860391 100644
--- a/src/lib/logic/search.ts
+++ b/src/lib/logic/search.ts
@@ -1,12 +1,7 @@
-import type {
-  JSONPatchDocument,
-  JSONPatchOperation,
-  JSONPath,
-  JSONPointer
-} from 'immutable-json-patch'
+import type { JSONPatchDocument, JSONPatchOperation, JSONPath } from 'immutable-json-patch'
 import { compileJSONPointer, getIn, isJSONArray, isJSONObject } from 'immutable-json-patch'
-import { forEachRight, groupBy, initial, isEqual, last } from 'lodash-es'
-import { getEnforceString } from './documentState.js'
+import { forEachRight, initial, isEqual, last } from 'lodash-es'
+import { createRecursiveState, getEnforceString, updateInRecursiveState } from './documentState.js'
 import { createSelectionFromOperations } from './selection.js'
 import { rename } from './operations.js'
 import { stringConvert } from '../utils/typeUtils.js'
@@ -14,21 +9,26 @@ import type {
   DocumentState,
   ExtendedSearchResultItem,
   JSONParser,
-  JSONPointerMap,
   JSONSelection,
   SearchOptions,
-  SearchResult,
-  SearchResultItem
+  SearchResultDetails,
+  SearchResultItem,
+  SearchResults,
+  RecursiveStateFactory
 } from '$lib/types'
 import { SearchField } from '$lib/types.js'
+import {
+  hasSearchResults,
+  isArrayRecursiveState,
+  isObjectRecursiveState
+} from 'svelte-jsoneditor/typeguards.js'
 
 // TODO: comment
 // TODO: unit test
 export function updateSearchResult(
-  json: unknown,
   newResultItems: SearchResultItem[],
-  previousResult: SearchResult | undefined
-): SearchResult {
+  previousResult: SearchResultDetails | undefined
+): SearchResultDetails {
   const activePath = previousResult?.activeItem
     ? getSearchResultPath(previousResult.activeItem)
     : undefined
@@ -55,14 +55,13 @@ export function updateSearchResult(
 
   return {
     items,
-    itemsMap: groupBy(items, (item) => compileJSONPointer(item.path)),
     activeItem,
     activeIndex
   }
 }
 
 // TODO: unit test
-export function searchNext(searchResult: SearchResult): SearchResult {
+export function searchNext(searchResult: SearchResultDetails): SearchResultDetails {
   const nextActiveIndex =
     searchResult.activeIndex < searchResult.items.length - 1
       ? searchResult.activeIndex + 1
@@ -79,14 +78,13 @@ export function searchNext(searchResult: SearchResult): SearchResult {
   return {
     ...searchResult,
     items,
-    itemsMap: groupBy(items, (item) => compileJSONPointer(item.path)),
     activeItem: nextActiveItem,
     activeIndex: nextActiveIndex
   }
 }
 
 // TODO: unit test
-export function searchPrevious(searchResult: SearchResult): SearchResult {
+export function searchPrevious(searchResult: SearchResultDetails): SearchResultDetails {
   const previousActiveIndex =
     searchResult.activeIndex > 0 ? searchResult.activeIndex - 1 : searchResult.items.length - 1
 
@@ -99,7 +97,6 @@ export function searchPrevious(searchResult: SearchResult): SearchResult {
   return {
     ...searchResult,
     items,
-    itemsMap: groupBy(items, (item) => compileJSONPointer(item.path)),
     activeItem: previousActiveItem,
     activeIndex: previousActiveIndex
   }
@@ -276,7 +273,7 @@ export function replaceAllText(
 
 export function createSearchAndReplaceOperations(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
   replacementText: string,
   searchResultItem: SearchResultItem,
   parser: JSONParser
@@ -306,14 +303,7 @@ export function createSearchAndReplaceOperations(
     }
     const currentValueText = typeof currentValue === 'string' ? currentValue : String(currentValue)
 
-    const pointer = compileJSONPointer(path)
-    const enforceString = getEnforceString(
-      currentValue,
-      documentState.enforceStringMap,
-      pointer,
-      parser
-    )
-
+    const enforceString = getEnforceString(json, documentState, path, parser)
     const value = replaceText(currentValueText, replacementText, start, end)
 
     const operations: JSONPatchOperation[] = [
@@ -337,7 +327,7 @@ export function createSearchAndReplaceOperations(
 
 export function createSearchAndReplaceAllOperations(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
   searchText: string,
   replacementText: string,
   parser: JSONParser
@@ -412,15 +402,7 @@ export function createSearchAndReplaceAllOperations(
       }
       const currentValueText =
         typeof currentValue === 'string' ? currentValue : String(currentValue)
-
-      const pointer = compileJSONPointer(path)
-      const enforceString = getEnforceString(
-        currentValue,
-        documentState.enforceStringMap,
-        pointer,
-        parser
-      )
-
+      const enforceString = getEnforceString(json, documentState, path, parser)
       const value = replaceAllText(currentValueText, replacementText, items)
 
       const operations: JSONPatchOperation[] = [
@@ -500,28 +482,69 @@ function getSearchResultPath(searchResultItem: SearchResultItem): JSONPath {
 
 // TODO: write unit tests
 export function filterKeySearchResults(
-  map: JSONPointerMap<ExtendedSearchResultItem[]> | undefined,
-  pointer: JSONPointer
+  searchResult: SearchResults | undefined
 ): ExtendedSearchResultItem[] | undefined {
-  const items = map?.[pointer]?.filter((item: SearchResultItem) => item.field === SearchField.key)
-
-  if (!items || items.length === 0) {
-    return undefined
-  }
-
-  return items
+  return hasSearchResults(searchResult)
+    ? searchResult.searchResults.filter((result) => result.field === SearchField.key)
+    : undefined
 }
 
 // TODO: write unit tests
 export function filterValueSearchResults(
-  map: JSONPointerMap<ExtendedSearchResultItem[]> | undefined,
-  pointer: JSONPointer
+  searchResult: SearchResults | undefined
 ): ExtendedSearchResultItem[] | undefined {
-  const items = map?.[pointer]?.filter((item: SearchResultItem) => item.field === SearchField.value)
+  return hasSearchResults(searchResult)
+    ? searchResult.searchResults.filter((result) => result.field === SearchField.value)
+    : undefined
+}
 
-  if (!items || items.length === 0) {
-    return undefined
-  }
+export function createSearchResults({ json }: { json: unknown }): SearchResults | undefined {
+  return createRecursiveState({
+    json,
+    factory: searchResultsFactory
+  }) as SearchResults
+}
+
+export const searchResultsFactory: RecursiveStateFactory = {
+  createObjectDocumentState: () => ({ type: 'object', properties: {} }),
+  createArrayDocumentState: () => ({ type: 'array', items: [] }),
+  createValueDocumentState: () => ({ type: 'value' })
+}
+
+export function updateInSearchResults(
+  json: unknown,
+  searchResults: SearchResults | undefined,
+  path: JSONPath,
+  transform: (value: unknown, state: SearchResults) => SearchResults
+): SearchResults {
+  return updateInRecursiveState(json, searchResults, path, transform, searchResultsFactory)
+}
+
+export function toRecursiveSearchResults(
+  json: unknown,
+  searchResultItems: ExtendedSearchResultItem[]
+): SearchResults | undefined {
+  return searchResultItems.reduce(
+    (recursiveState, searchResult) => {
+      return updateInSearchResults(json, recursiveState, searchResult.path, (_, nestedState) => ({
+        ...nestedState,
+        searchResults: nestedState.searchResults
+          ? nestedState.searchResults.concat(searchResult)
+          : [searchResult]
+      }))
+    },
+    undefined as SearchResults | undefined
+  )
+}
+
+export function flattenSearchResults(node: SearchResults | undefined): ExtendedSearchResultItem[] {
+  const self = node?.searchResults ?? []
+
+  const nested = isObjectRecursiveState(node)
+    ? Object.values(node.properties).flatMap(flattenSearchResults)
+    : isArrayRecursiveState(node)
+      ? node.items.flatMap(flattenSearchResults)
+      : []
 
-  return items
+  return self.concat(nested)
 }
diff --git a/src/lib/logic/selection.test.ts b/src/lib/logic/selection.test.ts
index 2ceb9223..6066641a 100644
--- a/src/lib/logic/selection.test.ts
+++ b/src/lib/logic/selection.test.ts
@@ -7,20 +7,20 @@ import {
   createMultiSelection,
   createSelectionFromOperations,
   createValueSelection,
-  getSelectionPaths,
   findRootPath,
   getInitialSelection,
   getParentPath,
   getSelectionDown,
   getSelectionLeft,
+  getSelectionPaths,
   getSelectionRight,
   getSelectionUp,
+  pathInSelection,
   selectionIfOverlapping,
-  selectionToPartialJson,
-  pathInSelection
+  selectionToPartialJson
 } from './selection.js'
 import { createDocumentState } from './documentState.js'
-import { type DocumentState, type JSONSelection, SelectionType } from '$lib/types.js'
+import { SelectionType } from '$lib/types.js'
 
 describe('selection', () => {
   const json = {
@@ -159,45 +159,29 @@ describe('selection', () => {
       expand: () => true
     })
 
-    function withSelection(documentState: DocumentState, selection: JSONSelection): DocumentState {
-      return {
-        ...documentState,
-        selection
-      }
-    }
-
     test('getSelectionLeft', () => {
       assert.deepStrictEqual(
-        getSelectionLeft(json2, {
-          ...documentState2,
-          selection: createValueSelection(['path'], false)
-        }),
+        getSelectionLeft(json2, documentState2, createValueSelection(['path'], false)),
         createKeySelection(['path'], false)
       )
 
       assert.deepStrictEqual(
-        getSelectionLeft(
-          json2,
-          withSelection(documentState2, createKeySelection(['path1'], false))
-        ),
+        getSelectionLeft(json2, documentState2, createKeySelection(['path1'], false)),
         createAfterSelection(['path'])
       )
 
       assert.deepStrictEqual(
-        getSelectionLeft(json2, withSelection(documentState2, createAfterSelection(['path']))),
+        getSelectionLeft(json2, documentState2, createAfterSelection(['path'])),
         createValueSelection(['path'], false)
       )
 
       assert.deepStrictEqual(
-        getSelectionLeft(json2, withSelection(documentState2, createInsideSelection([]))),
+        getSelectionLeft(json2, documentState2, createInsideSelection([])),
         createValueSelection([], false)
       )
 
       assert.deepStrictEqual(
-        getSelectionLeft(
-          json2,
-          withSelection(documentState2, createMultiSelection(['path1'], ['path2']))
-        ),
+        getSelectionLeft(json2, documentState2, createMultiSelection(['path1'], ['path2'])),
         createKeySelection(['path2'], false)
       )
     })
@@ -206,12 +190,12 @@ describe('selection', () => {
       const json2 = [1, 2, 3]
       const documentState2 = createDocumentState({
         json: json2,
-        expand: () => false,
-        select: () => createValueSelection(['1'], false)
+        expand: () => false
       })
+      const selection = createValueSelection(['1'], false)
 
       assert.deepStrictEqual(
-        getSelectionLeft(json2, documentState2),
+        getSelectionLeft(json2, documentState2, selection),
         createMultiSelection(['1'], ['1'])
       )
     })
@@ -221,7 +205,8 @@ describe('selection', () => {
       assert.deepStrictEqual(
         getSelectionLeft(
           json2,
-          withSelection(documentState2, createValueSelection(['path'], false)),
+          documentState2,
+          createValueSelection(['path'], false),
           keepAnchorPath
         ),
         {
@@ -234,41 +219,32 @@ describe('selection', () => {
 
     test('getSelectionRight', () => {
       assert.deepStrictEqual(
-        getSelectionRight(
-          json2,
-          withSelection(documentState2, createKeySelection(['path'], false))
-        ),
+        getSelectionRight(json2, documentState2, createKeySelection(['path'], false)),
         createValueSelection(['path'], false)
       )
 
       assert.deepStrictEqual(
-        getSelectionRight(json2, withSelection(documentState2, createValueSelection([], false))),
+        getSelectionRight(json2, documentState2, createValueSelection([], false)),
         createInsideSelection([])
       )
 
       assert.deepStrictEqual(
-        getSelectionRight(
-          json2,
-          withSelection(documentState2, createValueSelection(['path'], false))
-        ),
+        getSelectionRight(json2, documentState2, createValueSelection(['path'], false)),
         createAfterSelection(['path'])
       )
 
       assert.deepStrictEqual(
-        getSelectionRight(json2, withSelection(documentState2, createAfterSelection(['path']))),
+        getSelectionRight(json2, documentState2, createAfterSelection(['path'])),
         createKeySelection(['path1'], false)
       )
 
       assert.deepStrictEqual(
-        getSelectionRight(json2, withSelection(documentState2, createInsideSelection(['path']))),
+        getSelectionRight(json2, documentState2, createInsideSelection(['path'])),
         null
       )
 
       assert.deepStrictEqual(
-        getSelectionRight(
-          json2,
-          withSelection(documentState2, createMultiSelection(['path1'], ['path2']))
-        ),
+        getSelectionRight(json2, documentState2, createMultiSelection(['path1'], ['path2'])),
         createValueSelection(['path2'], false)
       )
     })
@@ -278,7 +254,8 @@ describe('selection', () => {
       assert.deepStrictEqual(
         getSelectionRight(
           json2,
-          withSelection(documentState2, createKeySelection(['path'], false)),
+          documentState2,
+          createKeySelection(['path'], false),
           keepAnchorPath
         ),
         {
@@ -302,136 +279,102 @@ describe('selection', () => {
 
       test('should get selection up from KEY selection', () => {
         assert.deepStrictEqual(
-          getSelectionUp(json2, withSelection(documentState2, createKeySelection(['obj'], false))),
+          getSelectionUp(json2, documentState2, createKeySelection(['obj'], false)),
           createKeySelection(['a'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionUp(
-            json2,
-            withSelection(documentState2, createKeySelection(['obj', 'c'], false))
-          ),
+          getSelectionUp(json2, documentState2, createKeySelection(['obj', 'c'], false)),
           createKeySelection(['obj'], false)
         )
 
         // jump from key to array value
         assert.deepStrictEqual(
-          getSelectionUp(json2, withSelection(documentState2, createKeySelection(['d'], false))),
+          getSelectionUp(json2, documentState2, createKeySelection(['d'], false)),
           createValueSelection(['arr', '1'], false)
         )
       })
 
       test('should get selection up from VALUE selection', () => {
         assert.deepStrictEqual(
-          getSelectionUp(
-            json2,
-            withSelection(documentState2, createValueSelection(['obj'], false))
-          ),
+          getSelectionUp(json2, documentState2, createValueSelection(['obj'], false)),
           createValueSelection(['a'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionUp(
-            json2,
-            withSelection(documentState2, createValueSelection(['obj', 'c'], false))
-          ),
+          getSelectionUp(json2, documentState2, createValueSelection(['obj', 'c'], false)),
           createValueSelection(['obj'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionUp(json2, withSelection(documentState2, createValueSelection(['d'], false))),
+          getSelectionUp(json2, documentState2, createValueSelection(['d'], false)),
           createValueSelection(['arr', '1'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionUp(
-            json2,
-            withSelection(documentState2, createValueSelection(['arr', '1'], false))
-          ),
+          getSelectionUp(json2, documentState2, createValueSelection(['arr', '1'], false)),
           createValueSelection(['arr', '0'], false)
         )
       })
 
       test('should get selection up from AFTER selection', () => {
         assert.deepStrictEqual(
-          getSelectionUp(json2, withSelection(documentState2, createAfterSelection(['arr', '1']))),
+          getSelectionUp(json2, documentState2, createAfterSelection(['arr', '1'])),
           createValueSelection(['arr', '1'], false)
         )
 
         // FIXME: this should return a value selection of /obj/c instead of /obj
         assert.deepStrictEqual(
-          getSelectionUp(json2, withSelection(documentState2, createAfterSelection(['obj']))),
+          getSelectionUp(json2, documentState2, createAfterSelection(['obj'])),
           createValueSelection(['obj'], false)
         )
       })
 
       test('should get selection up from INSIDE selection', () => {
         assert.deepStrictEqual(
-          getSelectionUp(json2, withSelection(documentState2, createInsideSelection(['arr']))),
+          getSelectionUp(json2, documentState2, createInsideSelection(['arr'])),
           createValueSelection(['arr'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionUp(json2, withSelection(documentState2, createInsideSelection(['obj']))),
+          getSelectionUp(json2, documentState2, createInsideSelection(['obj'])),
           createValueSelection(['obj'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionUp(json2, withSelection(documentState2, createInsideSelection([]))),
+          getSelectionUp(json2, documentState2, createInsideSelection([])),
           createValueSelection([], false)
         )
       })
 
       test('should get selection up from MULTI selection', () => {
         assert.deepStrictEqual(
-          getSelectionUp(
-            json2,
-            withSelection(documentState2, createMultiSelection(['d'], ['obj']))
-          ),
+          getSelectionUp(json2, documentState2, createMultiSelection(['d'], ['obj'])),
           createValueSelection(['a'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionUp(
-            json2,
-            withSelection(documentState2, createMultiSelection(['d'], ['obj'])),
-            true
-          ),
+          getSelectionUp(json2, documentState2, createMultiSelection(['d'], ['obj']), true),
           createMultiSelection(['d'], ['a'])
         )
 
         assert.deepStrictEqual(
-          getSelectionUp(
-            json2,
-            withSelection(documentState2, createMultiSelection(['obj'], ['d']))
-          ),
+          getSelectionUp(json2, documentState2, createMultiSelection(['obj'], ['d'])),
           createValueSelection(['a'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionUp(
-            json2,
-            withSelection(documentState2, createMultiSelection(['obj'], ['d'])),
-            false
-          ),
+          getSelectionUp(json2, documentState2, createMultiSelection(['obj'], ['d']), false),
           createValueSelection(['a'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionUp(
-            json2,
-            withSelection(documentState2, createMultiSelection(['obj'], ['d'])),
-            true
-          ),
+          getSelectionUp(json2, documentState2, createMultiSelection(['obj'], ['d']), true),
           createMultiSelection(['obj'], ['arr'])
         )
 
         assert.deepStrictEqual(
-          getSelectionUp(
-            json2,
-            withSelection(documentState2, createMultiSelection(['a'], ['a'])),
-            false
-          ),
+          getSelectionUp(json2, documentState2, createMultiSelection(['a'], ['a']), false),
           createValueSelection([], false)
         )
       })
@@ -450,160 +393,106 @@ describe('selection', () => {
 
       test('should get selection down from KEY selection', () => {
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createKeySelection(['obj'], false))
-          ),
+          getSelectionDown(json2, documentState2, createKeySelection(['obj'], false)),
           createKeySelection(['obj', 'c'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createKeySelection(['obj', 'c'], false))
-          ),
+          getSelectionDown(json2, documentState2, createKeySelection(['obj', 'c'], false)),
           createKeySelection(['arr'], false)
         )
 
         // jump from key to array value
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createKeySelection(['arr'], false))
-          ),
+          getSelectionDown(json2, documentState2, createKeySelection(['arr'], false)),
           createValueSelection(['arr', '0'], false)
         )
       })
 
       test('should get selection down from VALUE selection', () => {
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createValueSelection(['obj'], false))
-          ),
+          getSelectionDown(json2, documentState2, createValueSelection(['obj'], false)),
           createValueSelection(['obj', 'c'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createValueSelection(['obj', 'c'], false))
-          ),
+          getSelectionDown(json2, documentState2, createValueSelection(['obj', 'c'], false)),
           createValueSelection(['arr'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createValueSelection(['arr', '1'], false))
-          ),
+          getSelectionDown(json2, documentState2, createValueSelection(['arr', '1'], false)),
           createValueSelection(['d'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createValueSelection(['arr', '0'], false))
-          ),
+          getSelectionDown(json2, documentState2, createValueSelection(['arr', '0'], false)),
           createValueSelection(['arr', '1'], false)
         )
       })
 
       test('should get selection down from AFTER selection', () => {
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createAfterSelection(['arr', '0']))
-          ),
+          getSelectionDown(json2, documentState2, createAfterSelection(['arr', '0'])),
           createValueSelection(['arr', '1'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createAfterSelection(['arr', '1']))
-          ),
+          getSelectionDown(json2, documentState2, createAfterSelection(['arr', '1'])),
           createValueSelection(['d'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(json2, withSelection(documentState2, createAfterSelection(['obj']))),
+          getSelectionDown(json2, documentState2, createAfterSelection(['obj'])),
           createValueSelection(['arr'], false)
         )
       })
 
       test('should get selection down from INSIDE selection', () => {
         assert.deepStrictEqual(
-          getSelectionDown(json2, withSelection(documentState2, createInsideSelection(['arr']))),
+          getSelectionDown(json2, documentState2, createInsideSelection(['arr'])),
           createValueSelection(['arr', '0'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(json2, withSelection(documentState2, createInsideSelection(['obj']))),
+          getSelectionDown(json2, documentState2, createInsideSelection(['obj'])),
           createValueSelection(['obj', 'c'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createInsideSelection(['arr'])),
-            true
-          ),
+          getSelectionDown(json2, documentState2, createInsideSelection(['arr']), true),
           createMultiSelection(['arr', '0'], ['arr', '0'])
         )
       })
 
       test('should get selection down from MULTI selection', () => {
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createMultiSelection(['arr'], ['a']))
-          ),
+          getSelectionDown(json2, documentState2, createMultiSelection(['arr'], ['a'])),
           createValueSelection(['d'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createMultiSelection(['arr'], ['a'])),
-            false
-          ),
+          getSelectionDown(json2, documentState2, createMultiSelection(['arr'], ['a']), false),
           createValueSelection(['d'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createMultiSelection(['arr'], ['a'])),
-            true
-          ),
+          getSelectionDown(json2, documentState2, createMultiSelection(['arr'], ['a']), true),
           createMultiSelection(['arr'], ['obj'])
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createMultiSelection(['a'], ['arr'])),
-            false
-          ),
+          getSelectionDown(json2, documentState2, createMultiSelection(['a'], ['arr']), false),
           createValueSelection(['d'], false)
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createMultiSelection(['a'], ['arr'])),
-            true
-          ),
+          getSelectionDown(json2, documentState2, createMultiSelection(['a'], ['arr']), true),
           createMultiSelection(['a'], ['d'])
         )
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json2,
-            withSelection(documentState2, createMultiSelection(['arr'], ['arr'])),
-            false
-          ),
+          getSelectionDown(json2, documentState2, createMultiSelection(['arr'], ['arr']), false),
           createValueSelection(['d'], false)
         )
       })
@@ -619,11 +508,7 @@ describe('selection', () => {
         const documentState3 = createDocumentState({ json: json3, expand: () => true })
 
         assert.deepStrictEqual(
-          getSelectionDown(
-            json3,
-            withSelection(documentState3, createAfterSelection(['arr'])),
-            false
-          ),
+          getSelectionDown(json3, documentState3, createAfterSelection(['arr']), false),
           null
         )
       })
diff --git a/src/lib/logic/selection.ts b/src/lib/logic/selection.ts
index fdd79753..78fc4604 100644
--- a/src/lib/logic/selection.ts
+++ b/src/lib/logic/selection.ts
@@ -215,10 +215,10 @@ export function isSelectionInsidePath(selection: JSONSelection, path: JSONPath):
 
 export function getSelectionUp(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
+  selection: JSONSelection | null,
   keepAnchorPath = false
 ): JSONSelection | null {
-  const selection = documentState.selection
   if (!selection) {
     return null
   }
@@ -276,10 +276,10 @@ export function getSelectionUp(
 
 export function getSelectionDown(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
+  selection: JSONSelection | null,
   keepAnchorPath = false
 ): JSONSelection | null {
-  const selection = documentState.selection
   if (!selection) {
     return null
   }
@@ -288,7 +288,7 @@ export function getSelectionDown(
   // if the focusPath is an Array or object, we must not step into it but
   // over it, we pass state with this array/object collapsed
   const collapsedState = isObjectOrArray(getIn(json, focusPath))
-    ? collapsePath(documentState, focusPath)
+    ? collapsePath(json, documentState, focusPath)
     : documentState
 
   const nextPath = getNextVisiblePath(json, documentState, focusPath)
@@ -354,7 +354,8 @@ export function getSelectionDown(
  */
 export function getSelectionNextInside(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
+  selection: JSONSelection | null,
   path: JSONPath
 ): JSONSelection | null {
   // TODO: write unit tests for getSelectionNextInside
@@ -377,10 +378,10 @@ export function getSelectionNextInside(
 // TODO: unit test
 export function findCaretAndSiblings(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
+  selection: JSONSelection | null,
   includeInside: boolean
 ): { next: CaretPosition | null; caret: CaretPosition | null; previous: CaretPosition | null } {
-  const selection = documentState.selection
   if (!selection) {
     return { caret: null, previous: null, next: null }
   }
@@ -406,16 +407,16 @@ export function findCaretAndSiblings(
 
 export function getSelectionLeft(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
+  selection: JSONSelection | null,
   keepAnchorPath = false,
   includeInside = true
 ): JSONSelection | null {
-  const selection = documentState.selection
   if (!selection) {
     return null
   }
 
-  const { caret, previous } = findCaretAndSiblings(json, documentState, includeInside)
+  const { caret, previous } = findCaretAndSiblings(json, documentState, selection, includeInside)
 
   if (keepAnchorPath) {
     if (!isMultiSelection(selection)) {
@@ -445,16 +446,16 @@ export function getSelectionLeft(
 
 export function getSelectionRight(
   json: unknown,
-  documentState: DocumentState,
+  documentState: DocumentState | undefined,
+  selection: JSONSelection | null,
   keepAnchorPath = false,
   includeInside = true
 ): JSONSelection | null {
-  const selection = documentState.selection
   if (!selection) {
     return null
   }
 
-  const { caret, next } = findCaretAndSiblings(json, documentState, includeInside)
+  const { caret, next } = findCaretAndSiblings(json, documentState, selection, includeInside)
 
   if (keepAnchorPath) {
     if (!isMultiSelection(selection)) {
@@ -478,7 +479,10 @@ export function getSelectionRight(
 /**
  * Get a proper initial selection based on what is visible
  */
-export function getInitialSelection(json: unknown, documentState: DocumentState): JSONSelection {
+export function getInitialSelection(
+  json: unknown,
+  documentState: DocumentState | undefined
+): JSONSelection {
   const visiblePaths = getVisiblePaths(json, documentState)
 
   // find the first, deepest nested entry (normally a value, not an Object/Array)
@@ -594,20 +598,12 @@ export function pathStartsWith(path: JSONPath, parentPath: JSONPath): boolean {
 }
 
 // TODO: write unit tests
-export function removeEditModeFromSelection(documentState: DocumentState): DocumentState {
-  const selection = documentState.selection
-
+export function removeEditModeFromSelection(selection: JSONSelection | null): JSONSelection | null {
   if ((isKeySelection(selection) || isValueSelection(selection)) && selection.edit) {
-    return {
-      ...documentState,
-      selection: {
-        ...selection,
-        edit: false
-      }
-    }
+    return { ...selection, edit: false }
   }
 
-  return documentState
+  return selection
 }
 
 export function createKeySelection(path: JSONPath, edit: boolean): KeySelection {
@@ -711,21 +707,6 @@ export function isEditingSelection(selection: JSONSelection | null): boolean {
   return (isKeySelection(selection) || isValueSelection(selection)) && selection.edit === true
 }
 
-export function updateSelectionInDocumentState(
-  documentState: DocumentState,
-  selection: JSONSelection | null,
-  replaceIfUndefined = true
-): DocumentState {
-  if (!selection && !replaceIfUndefined) {
-    return documentState
-  }
-
-  return {
-    ...documentState,
-    selection
-  }
-}
-
 /**
  * Create a selection which selects the root of the document
  */
diff --git a/src/lib/logic/table.ts b/src/lib/logic/table.ts
index c27135ca..f70bdefe 100644
--- a/src/lib/logic/table.ts
+++ b/src/lib/logic/table.ts
@@ -6,13 +6,7 @@ import {
   parseJSONPointer
 } from 'immutable-json-patch'
 import { groupBy, isEmpty, isEqual, mapValues, partition } from 'lodash-es'
-import type {
-  DocumentState,
-  JSONSelection,
-  SortedColumn,
-  TableCellIndex,
-  ValidationError
-} from '$lib/types.js'
+import type { JSONSelection, SortedColumn, TableCellIndex, ValidationError } from '$lib/types.js'
 import { ValidationSeverity } from '$lib/types.js'
 import { createValueSelection, getFocusPath, pathStartsWith } from './selection.js'
 import { isNumber } from '../utils/numberUtils.js'
@@ -438,22 +432,15 @@ function findColumnIndex(error: ValidationError, columns: JSONPath[]): number {
  * Clear the sorted column from the documentState when it is affected by the operations
  */
 export function clearSortedColumnWhenAffectedByOperations(
-  documentState: DocumentState,
+  sortedColumn: SortedColumn | null,
   operations: JSONPatchOperation[],
   columms: JSONPath[]
-): DocumentState {
+): SortedColumn | null {
   const mustBeCleared = operations.some((operation) =>
-    operationAffectsSortedColumn(documentState.sortedColumn, operation, columms)
+    operationAffectsSortedColumn(sortedColumn, operation, columms)
   )
 
-  if (mustBeCleared) {
-    return {
-      ...documentState,
-      sortedColumn: null
-    }
-  }
-
-  return documentState
+  return mustBeCleared ? null : sortedColumn
 }
 
 export function operationAffectsSortedColumn(
diff --git a/src/lib/logic/validation.test.ts b/src/lib/logic/validation.test.ts
index d8f45959..1531211d 100644
--- a/src/lib/logic/validation.test.ts
+++ b/src/lib/logic/validation.test.ts
@@ -1,6 +1,6 @@
 import { test, describe } from 'vitest'
 import { deepStrictEqual } from 'assert'
-import { mapValidationErrors, validateJSON, validateText } from './validation.js'
+import { toRecursiveValidationErrors, validateJSON, validateText } from './validation.js'
 import type { ValidationError } from '$lib/types'
 import { ValidationSeverity } from '$lib/types.js'
 import { stringify, parse, isLosslessNumber } from 'lossless-json'
@@ -10,44 +10,53 @@ const LosslessJSONParser = { parse, stringify }
 
 describe('validation', () => {
   test('should create a map from a list with validation errors', () => {
+    const json = {
+      year: 2084,
+      pupils: [{ age: 23 }, { age: 26 }, { age: '42' }]
+    }
+
+    const severity = ValidationSeverity.warning
     const message1 = 'Number expected'
     const message2 = 'Year in the past expected'
     const message3 = 'Contains invalid data'
 
-    const error1: ValidationError = {
-      path: ['pupils', '2', 'age'],
-      message: message1,
-      severity: ValidationSeverity.warning
-    }
-    const error2: ValidationError = {
-      path: ['year'],
-      message: message2,
-      severity: ValidationSeverity.warning
-    }
+    const error1: ValidationError = { path: ['pupils', '2', 'age'], message: message1, severity }
+    const error2: ValidationError = { path: ['year'], message: message2, severity }
+
+    const childErrorA = { isChildError: true, path: [], message: message3, severity }
+    const childErrorB = { isChildError: true, path: ['pupils'], message: message3, severity }
+    const childErrorC = { isChildError: true, path: ['pupils', '2'], message: message3, severity }
 
     const validationErrors = [error1, error2]
 
-    deepStrictEqual(mapValidationErrors(validationErrors), {
-      '': {
-        isChildError: true,
-        path: [],
-        message: message3,
-        severity: ValidationSeverity.warning
-      },
-      '/pupils': {
-        isChildError: true,
-        path: ['pupils'],
-        message: message3,
-        severity: ValidationSeverity.warning
-      },
-      '/pupils/2': {
-        isChildError: true,
-        path: ['pupils', '2'],
-        message: message3,
-        severity: ValidationSeverity.warning
-      },
-      '/pupils/2/age': error1,
-      '/year': error2
+    deepStrictEqual(toRecursiveValidationErrors(json, validationErrors), {
+      type: 'object',
+      validationError: childErrorA,
+      properties: {
+        year: {
+          type: 'value',
+          validationError: error2
+        },
+        pupils: {
+          type: 'array',
+          validationError: childErrorB,
+          // eslint-disable-next-line no-sparse-arrays
+          items: [
+            ,
+            ,
+            {
+              type: 'object',
+              validationError: childErrorC,
+              properties: {
+                age: {
+                  type: 'value',
+                  validationError: error1
+                }
+              }
+            }
+          ]
+        }
+      }
     })
   })
 
diff --git a/src/lib/logic/validation.ts b/src/lib/logic/validation.ts
index 368a0e7f..f3d94735 100644
--- a/src/lib/logic/validation.ts
+++ b/src/lib/logic/validation.ts
@@ -2,35 +2,55 @@ import { initial, isEmpty } from 'lodash-es'
 import type {
   ContentErrors,
   JSONParser,
-  JSONPointerMap,
-  NestedValidationError,
+  RecursiveStateFactory,
+  ValidationErrors,
   ValidationError,
   Validator
 } from '$lib/types.js'
 import { ValidationSeverity } from '$lib/types.js'
-import { compileJSONPointer, type JSONPointer } from 'immutable-json-patch'
 import { MAX_AUTO_REPAIRABLE_SIZE, MAX_VALIDATABLE_SIZE } from '../constants.js'
 import { measure } from '../utils/timeUtils.js'
 import { normalizeJsonParseError } from '../utils/jsonUtils.js'
 import { createDebug } from '../utils/debug.js'
 import { jsonrepair } from 'jsonrepair'
+import { updateInRecursiveState } from './documentState.js'
+import type { JSONPath } from 'immutable-json-patch'
 
 const debug = createDebug('validation')
 
+export const validationErrorsFactory: RecursiveStateFactory = {
+  createObjectDocumentState: () => ({ type: 'object', properties: {} }),
+  createArrayDocumentState: () => ({ type: 'array', items: [] }),
+  createValueDocumentState: () => ({ type: 'value' })
+}
+
+export function updateInValidationErrors(
+  json: unknown,
+  errors: ValidationErrors | undefined,
+  path: JSONPath,
+  transform: (value: unknown, state: ValidationErrors) => ValidationErrors
+): ValidationErrors {
+  return updateInRecursiveState(json, errors, path, transform, validationErrorsFactory)
+}
+
 /**
  * Create a flat map with validation errors, where the key is the stringified path
  * and also create error messages for the parent nodes of the nodes having an error.
  *
  * Returns a nested object containing the validation errors
  */
-export function mapValidationErrors(
+export function toRecursiveValidationErrors(
+  json: unknown,
   validationErrors: ValidationError[]
-): JSONPointerMap<NestedValidationError> {
-  const map: Record<JSONPointer, ValidationError | NestedValidationError> = {}
+): ValidationErrors | undefined {
+  let output: ValidationErrors | undefined
 
-  // first generate a map with the errors themselves
+  // first generate the errors themselves
   validationErrors.forEach((validationError) => {
-    map[compileJSONPointer(validationError.path)] = validationError
+    output = updateInValidationErrors(json, output, validationError.path, (_, state) => ({
+      ...state,
+      validationError
+    }))
   })
 
   // create error entries for all parent nodes (displayed when the node is collapsed)
@@ -39,20 +59,24 @@ export function mapValidationErrors(
 
     while (parentPath.length > 0) {
       parentPath = initial(parentPath)
-      const parentPointer: JSONPointer = compileJSONPointer(parentPath)
-
-      if (!(parentPointer in map)) {
-        map[parentPointer] = {
-          isChildError: true,
-          path: parentPath,
-          message: 'Contains invalid data',
-          severity: ValidationSeverity.warning
-        }
-      }
+
+      output = updateInValidationErrors(json, output, parentPath, (_, state) => {
+        return state.validationError
+          ? state
+          : {
+              ...state,
+              validationError: {
+                isChildError: true,
+                path: parentPath,
+                message: 'Contains invalid data',
+                severity: ValidationSeverity.warning
+              }
+            }
+      })
     }
   })
 
-  return map
+  return output
 }
 
 export function validateJSON(
diff --git a/src/lib/plugins/value/components/EditableValue.svelte b/src/lib/plugins/value/components/EditableValue.svelte
index 7f580a9c..285285b9 100644
--- a/src/lib/plugins/value/components/EditableValue.svelte
+++ b/src/lib/plugins/value/components/EditableValue.svelte
@@ -44,11 +44,11 @@
           value: convert(normalization.unescapeValue(newValue))
         }
       ],
-      (patchedJson, patchedState) => {
+      (_, patchedState, patchedSelection) => {
         // Leave the selection as is when it is no longer the path that we were editing here
         // This happens for example when the user clicks or double-clicks on another value
         // whilst editing a value
-        if (patchedState.selection && !isEqual(path, getFocusPath(patchedState.selection))) {
+        if (patchedSelection && !isEqual(path, getFocusPath(patchedSelection))) {
           return undefined
         }
 
@@ -58,10 +58,8 @@
             : createValueSelection(path, false)
 
         return {
-          state: {
-            ...patchedState,
-            selection
-          }
+          state: patchedState,
+          selection
         }
       }
     )
diff --git a/src/lib/themes/defaults.scss b/src/lib/themes/defaults.scss
index 31c4d1cd..0be331d4 100644
--- a/src/lib/themes/defaults.scss
+++ b/src/lib/themes/defaults.scss
@@ -139,9 +139,9 @@ $collapsed-items-link-color-highlight: var(--jse-collapsed-items-link-color-high
 
 /* contents: highlighting of search matches */
 $search-match-color: var(--jse-search-match-color, #ffe665);
-$search-match-outline: var(--jse-search-match-outline, (1px solid #ffd700));
-$search-match-active-color: var(--jse-search-match-active-color, #ffd700);
-$search-match-active-outline: var(--jse-search-match-active-outline, (1px solid #e1be00));
+$search-match-outline: var(--jse-search-match-outline, none);
+$search-match-active-color: var(--jse-search-match-active-color, $search-match-color);
+$search-match-active-outline: var(--jse-search-match-outline, (2px solid #e0be00));
 
 /* contents: inline tags inside the JSON document */
 $tag-background: var(--jse-tag-background, rgba(0, 0, 0, 0.2));
diff --git a/src/lib/typeguards.ts b/src/lib/typeguards.ts
index c82a3905..38776edd 100644
--- a/src/lib/typeguards.ts
+++ b/src/lib/typeguards.ts
@@ -11,7 +11,13 @@ import type {
   ValidationError,
   NestedValidationError,
   SvelteActionRenderer,
-  SvelteComponentRenderer
+  SvelteComponentRenderer,
+  RecursiveState,
+  ArrayRecursiveState,
+  ObjectRecursiveState,
+  ValueRecursiveState,
+  SearchResults,
+  WithSearchResults
 } from './types.js'
 import { isObject } from '$lib/utils/typeUtils.js'
 
@@ -98,3 +104,34 @@ export function isSvelteComponentRenderer(value: unknown): value is SvelteCompon
 export function isSvelteActionRenderer(value: unknown): value is SvelteActionRenderer {
   return isObject(value) && typeof value.action === 'function' && isObject(value.props)
 }
+
+export function isObjectRecursiveState(
+  state: RecursiveState | undefined
+): state is ObjectRecursiveState {
+  return state !== undefined && state.type === 'object'
+}
+
+export function isArrayRecursiveState(
+  state: RecursiveState | undefined
+): state is ArrayRecursiveState {
+  return state !== undefined && state.type === 'array'
+}
+
+export function isValueRecursiveState(
+  state: RecursiveState | undefined
+): state is ValueRecursiveState {
+  return state !== undefined && state.type === 'value'
+}
+
+export function isExpandableState(
+  state: RecursiveState | undefined
+): state is ObjectRecursiveState | ArrayRecursiveState {
+  return isObjectRecursiveState(state) || isArrayRecursiveState(state)
+}
+
+export function hasSearchResults(state: SearchResults | undefined): state is WithSearchResults {
+  return (
+    state !== undefined &&
+    Array.isArray((state as unknown as Record<string, unknown>).searchResults)
+  )
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
index fcc5c9ef..ae2d2f2f 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,4 +1,4 @@
-import type { JSONPatchDocument, JSONPath, JSONPointer } from 'immutable-json-patch'
+import type { JSONPatchDocument, JSONPath } from 'immutable-json-patch'
 import type { SvelteComponent } from 'svelte'
 import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import type { Action } from 'svelte/action'
@@ -75,14 +75,93 @@ export interface CaretPosition {
   type: CaretType // TODO: refactor this to use SelectionType here, then we can simplify the util functions to turn this into a selection
 }
 
-export interface DocumentState {
-  expandedMap: JSONPointerMap<boolean>
-  enforceStringMap: JSONPointerMap<boolean>
-  visibleSectionsMap: JSONPointerMap<VisibleSection[]>
-  selection: JSONSelection | null
-  sortedColumn: SortedColumn | null
+export interface ObjectRecursiveState {
+  type: 'object'
+  properties: Record<string, RecursiveState | undefined>
+}
+
+export interface ArrayRecursiveState {
+  type: 'array'
+  items: Array<RecursiveState | undefined>
+}
+
+export interface ValueRecursiveState {
+  type: 'value'
+}
+
+export type RecursiveState = ObjectRecursiveState | ArrayRecursiveState | ValueRecursiveState
+
+export interface RecursiveStateFactory {
+  createObjectDocumentState: () => ObjectRecursiveState
+  createArrayDocumentState: () => ArrayRecursiveState
+  createValueDocumentState: () => ValueRecursiveState
+}
+
+export interface ObjectDocumentState extends ObjectRecursiveState {
+  type: 'object'
+  properties: Record<string, DocumentState | undefined>
+  expanded: boolean
+}
+
+export interface ArrayDocumentState extends ArrayRecursiveState {
+  type: 'array'
+  items: Array<DocumentState | undefined>
+  expanded: boolean
+  visibleSections: VisibleSection[]
+}
+
+export interface ValueDocumentState extends ValueRecursiveState {
+  type: 'value'
+  enforceString?: boolean
+}
+
+export type DocumentState = ObjectDocumentState | ArrayDocumentState | ValueDocumentState
+
+export interface ObjectSearchResults extends ObjectRecursiveState {
+  type: 'object'
+  properties: Record<string, SearchResults | undefined>
+  searchResults?: ExtendedSearchResultItem[]
+}
+
+export interface ArraySearchResults extends ArrayRecursiveState {
+  type: 'array'
+  items: Array<SearchResults | undefined>
+  searchResults?: ExtendedSearchResultItem[]
+}
+
+export interface ValueSearchResults extends ValueRecursiveState {
+  type: 'value'
+  searchResults?: ExtendedSearchResultItem[]
 }
 
+export type SearchResults = ObjectSearchResults | ArraySearchResults | ValueSearchResults
+
+export type WithSearchResults = SearchResults & {
+  searchResults: ExtendedSearchResultItem[]
+}
+
+export interface ObjectValidationErrors extends ObjectRecursiveState {
+  type: 'object'
+  properties: Record<string, ValidationErrors | undefined>
+  validationError?: NestedValidationError
+}
+
+export interface ArrayValidationErrors extends ArrayRecursiveState {
+  type: 'array'
+  items: Array<ValidationErrors | undefined>
+  validationError?: NestedValidationError
+}
+
+export interface ValueValidationErrors extends ValueRecursiveState {
+  type: 'value'
+  validationError?: NestedValidationError
+}
+
+export type ValidationErrors =
+  | ObjectValidationErrors
+  | ArrayValidationErrors
+  | ValueValidationErrors
+
 export interface JSONPatchResult {
   json: unknown
   previousJson: unknown
@@ -92,8 +171,16 @@ export interface JSONPatchResult {
 
 export type AfterPatchCallback = (
   patchedJson: unknown,
-  patchedState: DocumentState
-) => { json?: unknown; state?: DocumentState } | undefined
+  patchedState: DocumentState | undefined,
+  patchedSelection: JSONSelection | null
+) =>
+  | {
+      json?: unknown
+      state?: DocumentState | undefined
+      selection?: JSONSelection | null
+      sortedColumn?: SortedColumn | null
+    }
+  | undefined
 
 export interface MultiSelection {
   type: SelectionType.multi
@@ -140,8 +227,6 @@ export interface TextSelection {
 
 export type JSONEditorSelection = JSONSelection | TextSelection
 
-export type JSONPointerMap<T> = Record<JSONPointer, T>
-
 export type ClipboardValues = Array<{ key: string; value: unknown }>
 
 export interface MenuButton {
@@ -325,9 +410,8 @@ export type OnTransformModal = (props: TransformModalCallback) => void
 export type OnJSONEditorModal = (props: JSONEditorModalCallback) => void
 export type FindNextInside = (path: JSONPath) => JSONSelection | null
 
-export interface SearchResult {
+export interface SearchResultDetails {
   items: ExtendedSearchResultItem[]
-  itemsMap: JSONPointerMap<ExtendedSearchResultItem[]>
   activeItem: ExtendedSearchResultItem | undefined
   activeIndex: number | -1
 }
@@ -386,15 +470,19 @@ export interface HistoryItem {
     patch: JSONPatchDocument | undefined
     json: unknown | undefined
     text: string | undefined
-    state: DocumentState
+    documentState: DocumentState | undefined
+    selection: JSONSelection | null
     textIsRepaired: boolean
+    sortedColumn: SortedColumn | null
   }
   redo: {
     patch: JSONPatchDocument | undefined
     json: unknown | undefined
     text: string | undefined
-    state: DocumentState
+    documentState: DocumentState | undefined
+    selection: JSONSelection | null
     textIsRepaired: boolean
+    sortedColumn: SortedColumn | null
   }
 }
 
@@ -470,7 +558,7 @@ export interface JSONEditorContext {
   parser: JSONParser
   normalization: ValueNormalization
   getJson: () => unknown | undefined
-  getDocumentState: () => DocumentState
+  getDocumentState: () => DocumentState | undefined
   findElement: (path: JSONPath) => Element | null
   findNextInside: FindNextInside
   focus: () => void
@@ -483,7 +571,8 @@ export interface JSONEditorContext {
 
 export interface TreeModeContext extends JSONEditorContext {
   getJson: () => unknown | undefined
-  getDocumentState: () => DocumentState
+  getDocumentState: () => DocumentState | undefined
+  getSelection: () => JSONSelection | null
   findElement: (path: JSONPath) => Element | null
   onInsert: (type: InsertType) => void
   onExpand: (path: JSONPath, expanded: boolean, recursive?: boolean) => void
@@ -514,31 +603,6 @@ export interface RenderValueProps {
 
 export type RenderValuePropsOptional = Partial<RenderValueProps>
 
-export interface JSONNodeProp {
-  key: string
-  value: unknown
-  path: JSONPath
-  expandedMap: JSONPointerMap<boolean> | undefined
-  enforceStringMap: JSONPointerMap<boolean> | undefined
-  visibleSectionsMap: JSONPointerMap<VisibleSection[]> | undefined
-  validationErrorsMap: JSONPointerMap<NestedValidationError> | undefined
-  keySearchResultItemsMap: ExtendedSearchResultItem[] | undefined
-  valueSearchResultItemsMap: JSONPointerMap<ExtendedSearchResultItem[]> | undefined
-  selection: JSONSelection | null
-}
-
-export interface JSONNodeItem {
-  index: number
-  value: unknown
-  path: JSONPath
-  expandedMap: JSONPointerMap<boolean> | undefined
-  enforceStringMap: JSONPointerMap<boolean> | undefined
-  visibleSectionsMap: JSONPointerMap<VisibleSection[]> | undefined
-  validationErrorsMap: JSONPointerMap<NestedValidationError> | undefined
-  searchResultItemsMap: JSONPointerMap<ExtendedSearchResultItem[]> | undefined
-  selection: JSONSelection | null
-}
-
 export interface DraggingState {
   initialTarget: Element
   initialClientY: number
diff --git a/src/lib/utils/arrayUtils.ts b/src/lib/utils/arrayUtils.ts
index 275c291b..d1cb95b5 100644
--- a/src/lib/utils/arrayUtils.ts
+++ b/src/lib/utils/arrayUtils.ts
@@ -185,3 +185,7 @@ export function forEachSample<T>(
     }
   }
 }
+
+export function insertItemsAt<T>(array: T[], index: number, items: T[]): T[] {
+  return array.slice(0, index).concat(items).concat(array.slice(index))
+}
diff --git a/src/lib/utils/jsonPointer.test.ts b/src/lib/utils/jsonPointer.test.ts
deleted file mode 100644
index c9d1e83c..00000000
--- a/src/lib/utils/jsonPointer.test.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { test, describe } from 'vitest'
-import assert from 'assert'
-import { compileJSONPointer, parseJSONPointer } from 'immutable-json-patch'
-
-describe('jsonPointer', () => {
-  test('parseJSONPointer', () => {
-    assert.deepStrictEqual(parseJSONPointer('/obj/a'), ['obj', 'a'])
-    assert.deepStrictEqual(parseJSONPointer('/arr/-'), ['arr', '-'])
-    assert.deepStrictEqual(parseJSONPointer('/foo/~1~0 ~0~1'), ['foo', '/~ ~/'])
-    assert.deepStrictEqual(parseJSONPointer('/obj'), ['obj'])
-    assert.deepStrictEqual(parseJSONPointer('/'), [''])
-    assert.deepStrictEqual(parseJSONPointer(''), [])
-  })
-
-  test('compileJSONPointer', () => {
-    assert.deepStrictEqual(compileJSONPointer(['foo', 'bar']), '/foo/bar')
-    assert.deepStrictEqual(compileJSONPointer(['foo', '/~ ~/']), '/foo/~1~0 ~0~1')
-    assert.deepStrictEqual(compileJSONPointer(['']), '/')
-    assert.deepStrictEqual(compileJSONPointer([]), '')
-  })
-})
diff --git a/src/lib/utils/jsonPointer.ts b/src/lib/utils/jsonPointer.ts
deleted file mode 100644
index d2aadc55..00000000
--- a/src/lib/utils/jsonPointer.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { JSONPointerMap } from '$lib/types'
-import type { JSONPointer } from 'immutable-json-patch'
-import { startsWithJSONPointer } from 'immutable-json-patch'
-
-// TODO: write unit tests
-export function filterMapOrUndefined<T>(
-  map: JSONPointerMap<T> | undefined,
-  filter: (pointer: JSONPointer, value: T) => boolean
-): JSONPointerMap<T> | undefined {
-  if (!map) {
-    return undefined
-  }
-
-  const filteredMap: JSONPointerMap<T> = {}
-
-  for (const p of Object.keys(map)) {
-    if (filter(p, map[p])) {
-      filteredMap[p] = map[p]
-    }
-  }
-
-  return Object.keys(filteredMap).length > 0 ? filteredMap : undefined
-}
-
-// TODO: write unit tests
-export function filterPointerOrUndefined<T>(
-  map: JSONPointerMap<T> | undefined,
-  pointer: JSONPointer
-): JSONPointerMap<T> | undefined {
-  return filterMapOrUndefined(map, (p) => startsWithJSONPointer(p, pointer))
-}
diff --git a/src/lib/utils/pathUtils.test.ts b/src/lib/utils/pathUtils.test.ts
index ae4f6b67..3f526aef 100644
--- a/src/lib/utils/pathUtils.test.ts
+++ b/src/lib/utils/pathUtils.test.ts
@@ -1,8 +1,7 @@
 import { describe, test } from 'vitest'
-import { deepStrictEqual, notStrictEqual, strictEqual, throws } from 'assert'
+import { deepStrictEqual, strictEqual, throws } from 'assert'
 import {
   createLodashPropertySelector,
-  createMemoizePath,
   createPropertySelector,
   parseJSONPath,
   pathToOption,
@@ -90,20 +89,4 @@ describe('pathUtils', () => {
     strictEqual(createPropertySelector(['Hello World', 'b']), '?.["Hello World"]?.b')
     strictEqual(createPropertySelector(['a', '2']), '?.a?.[2]')
   })
-
-  test('createMemoizePath', () => {
-    const memoizePath = createMemoizePath()
-
-    const path1 = ['a', 'b']
-    strictEqual(memoizePath(path1), path1)
-
-    const path2 = path1.slice(0)
-    strictEqual(memoizePath(path2), path1)
-
-    const memoizePath2 = createMemoizePath()
-    const path3 = path1.slice(0)
-    strictEqual(memoizePath2(path3), path3) // must NOT be path1, must be isolated from memoizePath
-
-    notStrictEqual(path1, path1.slice(0)) // just to validate that strictEqual works the way I think
-  })
 })
diff --git a/src/lib/utils/pathUtils.ts b/src/lib/utils/pathUtils.ts
index 8c725357..a92eb1ea 100644
--- a/src/lib/utils/pathUtils.ts
+++ b/src/lib/utils/pathUtils.ts
@@ -1,4 +1,4 @@
-import { isEmpty, memoize } from 'lodash-es'
+import { isEmpty } from 'lodash-es'
 import type { JSONPath } from 'immutable-json-patch'
 import type { PathOption } from '$lib/types.js'
 
@@ -159,11 +159,3 @@ export function createPropertySelector(path: JSONPath): string {
 // I'm too lazy to figure that out right now
 const javaScriptPropertyRegex = /^[a-zA-Z$_][a-zA-Z$_\d]*$/
 const integerNumberRegex = /^\d+$/
-
-/**
- * Create a memoized function that will memoize the input path, and return
- * the memoized instance of the path when the stringified version is the same.
- */
-export function createMemoizePath(): (path: JSONPath) => JSONPath {
-  return memoize((path) => path, stringifyJSONPath)
-}
diff --git a/src/routes/components/EvaluatorAction.ts b/src/routes/components/EvaluatorAction.ts
index 8aeb0ca4..2fcc9d44 100644
--- a/src/routes/components/EvaluatorAction.ts
+++ b/src/routes/components/EvaluatorAction.ts
@@ -10,8 +10,8 @@ export interface EvaluatorActionProps {
 }
 
 export const EvaluatorAction: Action<HTMLDivElement, Record<string, unknown>> = (
-  node,
-  initialProps
+  node: HTMLDivElement,
+  initialProps: Record<string, unknown>
 ) => {
   let props = toEvaluatorProps(initialProps as Record<string, unknown>)