diff --git a/package-lock.json b/package-lock.json
index 31a4488..704571e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "naive-ui": "^2.34.4",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.27",
+        "prettier": "^3.0.1",
         "tailwindcss": "^3.3.3",
         "typescript": "~5.1.6",
         "vite": "^4.4.6",
@@ -3205,6 +3206,21 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prettier": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz",
+      "integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
diff --git a/package.json b/package.json
index 1b0d7cd..1427273 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "naive-ui": "^2.34.4",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.27",
+    "prettier": "^3.0.1",
     "tailwindcss": "^3.3.3",
     "typescript": "~5.1.6",
     "vite": "^4.4.6",
diff --git a/src/components/JsonEdit.vue b/src/components/JsonEdit.vue
index ea52753..1da70c0 100644
--- a/src/components/JsonEdit.vue
+++ b/src/components/JsonEdit.vue
@@ -1,22 +1,48 @@
 <script setup lang="ts">
 import { NButton, NCode, NInput, NIcon } from 'naive-ui'
 import { CheckOutlined, CloseOutlined, EditOutlined } from '@vicons/material'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+import * as prettier from 'prettier/standalone'
+import babel from 'prettier/plugins/babel'
+import estree from 'prettier/plugins/estree'
 
 const val = defineModel<unknown>('value', {
   required: true
 })
 
-function stringify(v: unknown) {
-  return JSON.stringify(v, null, 4)
+async function stringify(v: unknown) {
+  return await prettier.format(JSON.stringify(v), {
+    parser: 'json',
+    plugins: [babel, estree],
+    tabWidth: 4
+  })
 }
 
-const cache = ref(stringify(val.value))
+const cache = ref('')
+let counter = 0
+let version = 0
+
+watch(
+  val,
+  nv => {
+    let id = ++counter
+    stringify(nv).then(src => {
+      if (id > version) {
+        version = id
+        cache.value = src
+      }
+    })
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
 
 const editing = ref(false)
 
-function enterEdit() {
-  cache.value = stringify(val.value)
+async function enterEdit() {
+  cache.value = await stringify(val.value)
   editing.value = true
 }
 
@@ -33,7 +59,7 @@ function cancelEdit() {
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-2 p-2">
     <template v-if="editing">
       <div class="flex gap-2">
         <NButton @click="trySave">
@@ -70,7 +96,7 @@ function cancelEdit() {
           </template>
         </NButton>
       </div>
-      <NCode language="json" :code="stringify(val)"></NCode>
+      <NCode language="json" :code="cache" word-wrap></NCode>
     </template>
   </div>
 </template>