diff --git a/example/Basic.vue b/example/Basic.vue
index f3fd514..ffe8823 100644
--- a/example/Basic.vue
+++ b/example/Basic.vue
@@ -93,7 +93,9 @@ import VueJsonPretty from 'src';
 
 const defaultData = {
   status: 200,
-  error: '',
+  text: '',
+  error: null,
+  config: undefined,
   data: [
     {
       news_id: 51184,
diff --git a/example/Editable.vue b/example/Editable.vue
index 6a2e268..ea7d17e 100644
--- a/example/Editable.vue
+++ b/example/Editable.vue
@@ -55,7 +55,9 @@ import VueJsonPretty from 'src';
 
 const defaultData = {
   status: 200,
-  error: '',
+  text: '',
+  error: null,
+  config: undefined,
   data: [
     {
       news_id: 51184,
diff --git a/example/SelectControl.vue b/example/SelectControl.vue
index 4fcf2d7..5d4f5a9 100644
--- a/example/SelectControl.vue
+++ b/example/SelectControl.vue
@@ -105,7 +105,9 @@ import VueJsonPretty from 'src';
 
 const defaultData = {
   status: 200,
-  error: '',
+  text: '',
+  error: null,
+  config: undefined,
   data: [
     {
       news_id: 51184,
diff --git a/example/VirtualList.vue b/example/VirtualList.vue
index b03faa1..9c3f7d1 100644
--- a/example/VirtualList.vue
+++ b/example/VirtualList.vue
@@ -47,7 +47,9 @@ import VueJsonPretty from 'src';
 
 const defaultData = {
   status: 200,
-  error: '',
+  text: '',
+  error: null,
+  config: undefined,
   data: Array.from(Array(1000)).map((item, index) => ({
     news_id: index,
     title: 'iPhone X Review: Innovative future with real black technology',
diff --git a/src/components/TreeNode/index.vue b/src/components/TreeNode/index.vue
index a08e593..ab38e23 100644
--- a/src/components/TreeNode/index.vue
+++ b/src/components/TreeNode/index.vue
@@ -175,9 +175,11 @@ export default {
     },
 
     defaultValue() {
-      const str = (this.node?.content ?? '') + '';
-      const text = this.dataType === 'string' ? `"${str}"` : str;
-      return text;
+      let value = this.node?.content;
+      if(value === null || value === undefined) {
+        value += '';
+      }
+      return this.dataType === 'string' ? `"${value}"` : value
     },
   },
   methods: {
diff --git a/src/components/TreeNode/styles.less b/src/components/TreeNode/styles.less
index bb38f61..ea3881d 100644
--- a/src/components/TreeNode/styles.less
+++ b/src/components/TreeNode/styles.less
@@ -55,6 +55,10 @@
   .gen-value-style(@color-null);
 }
 
+.@{css-prefix}-value-undefined {
+  .gen-value-style(@color-undefined);
+}
+
 .@{css-prefix}-value-number {
   .gen-value-style(@color-number);
 }
diff --git a/src/themes.less b/src/themes.less
index e187a67..d857ba0 100644
--- a/src/themes.less
+++ b/src/themes.less
@@ -6,12 +6,14 @@
 @color-info: #1d8ce0;
 @color-error: #ff4949;
 @color-success: #13ce66;
+@color-nil: #D55FDE;
 
 /* field values color */
 @color-string: @color-success;
 @color-number: @color-info;
 @color-boolean: @color-info;
-@color-null: @color-error;
+@color-null: @color-nil;
+@color-undefined: @color-nil;
 
 /* highlight */
 @highlight-bg-color: #e6f7ff;
diff --git a/src/utils/index.js b/src/utils/index.js
index 36275de..fafd953 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -84,7 +84,7 @@ export function arrFlat(arr) {
 }
 
 export function cloneDeep(source, hash = new WeakMap()) {
-  if (source === null) return source;
+  if (source === null || source === undefined) return source;
   if (source instanceof Date) return new Date(source);
   if (source instanceof RegExp) return new RegExp(source);
   if (typeof source !== 'object') return source;