diff --git a/src/lib/components/modes/JSONEditorRoot.svelte b/src/lib/components/modes/JSONEditorRoot.svelte
index 076b3020..cd72957c 100644
--- a/src/lib/components/modes/JSONEditorRoot.svelte
+++ b/src/lib/components/modes/JSONEditorRoot.svelte
@@ -28,6 +28,7 @@
     TransformModalOptions,
     Validator
   } from '$lib/types'
+  import DEFAULT_PROPERTIES from '../../utils/DEFAULT_PROPERTIES'
   import { Mode } from '$lib/types.js'
   import TextMode from './textmode/TextMode.svelte'
   import TableMode from './tablemode/TableMode.svelte'
@@ -42,7 +43,7 @@
   export let readOnly: boolean
   export let indentation: number | string
   export let tabSize: number
-  export let mode: Mode
+  export let mode: Mode | undefined
   export let mainMenuBar: boolean
   export let navigationBar: boolean
   export let statusBar: boolean
@@ -84,21 +85,27 @@
       // check for 'code' mode is here for backward compatibility (deprecated since v0.4.0)
       className:
         'jse-group-button jse-first' +
-        (mode === Mode.text || (mode as string) === 'code' ? ' jse-selected' : ''),
+        ((mode || DEFAULT_PROPERTIES.mode) === Mode.text || (mode as string) === 'code'
+          ? ' jse-selected'
+          : ''),
       onClick: () => onChangeMode(Mode.text)
     },
     {
       type: 'button',
       text: 'tree',
       title: `Switch to tree mode (current mode: ${mode})`,
-      className: 'jse-group-button ' + (mode === Mode.tree ? ' jse-selected' : ''),
+      className:
+        'jse-group-button ' +
+        ((mode || DEFAULT_PROPERTIES.mode) === Mode.tree ? ' jse-selected' : ''),
       onClick: () => onChangeMode(Mode.tree)
     },
     {
       type: 'button',
       text: 'table',
       title: `Switch to table mode (current mode: ${mode})`,
-      className: 'jse-group-button jse-last' + (mode === Mode.table ? ' jse-selected' : ''),
+      className:
+        'jse-group-button jse-last' +
+        ((mode || DEFAULT_PROPERTIES.mode) === Mode.table ? ' jse-selected' : ''),
       onClick: () => onChangeMode(Mode.table)
     }
   ]
diff --git a/src/lib/utils/DEFAULT_PROPERTIES.ts b/src/lib/utils/DEFAULT_PROPERTIES.ts
new file mode 100644
index 00000000..a36f0f89
--- /dev/null
+++ b/src/lib/utils/DEFAULT_PROPERTIES.ts
@@ -0,0 +1,6 @@
+import { Mode } from '$lib/types.js'
+
+export default {
+  mode: Mode.tree
+  // ...others
+}
diff --git a/src/routes/development/+page.svelte b/src/routes/development/+page.svelte
index 83fd5d5d..3b9f39cb 100644
--- a/src/routes/development/+page.svelte
+++ b/src/routes/development/+page.svelte
@@ -747,6 +747,7 @@
           <input type="checkbox" bind:checked={$showTreeEditor} /> Show tree editor
         </label>
         <select class="mode-toggle" bind:value={leftEditorMode}>
+          <option value={undefined}>undefined</option>
           <option value="tree">tree</option>
           <option value="text">text</option>
           <option value="table">table</option>