diff --git a/package.json b/package.json
index 9f97387..950766c 100644
--- a/package.json
+++ b/package.json
@@ -43,12 +43,12 @@
     "eslint-plugin-oxlint": "^0.11.0",
     "eslint-plugin-vue": "^9.30.0",
     "jsdom": "^25.0.1",
+    "json-formatter-js": "^2.5.18",
     "npm-run-all2": "^7.0.1",
     "oxlint": "^0.11.0",
     "pinia": "^2.3.0",
     "prettier": "^3.3.3",
     "quasar": "^2.17.5",
-    "renderjson": "^1.4.0",
     "rxjs": "^7.8.1",
     "sass": "^1.83.0",
     "sass-embedded": "^1.80.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c760e56..10a48a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,6 +74,9 @@ importers:
       jsdom:
         specifier: ^25.0.1
         version: 25.0.1
+      json-formatter-js:
+        specifier: ^2.5.18
+        version: 2.5.18
       npm-run-all2:
         specifier: ^7.0.1
         version: 7.0.2
@@ -89,9 +92,6 @@ importers:
       quasar:
         specifier: ^2.17.5
         version: 2.17.5
-      renderjson:
-        specifier: ^1.4.0
-        version: 1.4.0
       rxjs:
         specifier: ^7.8.1
         version: 7.8.1
@@ -2149,6 +2149,9 @@ packages:
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
+  json-formatter-js@2.5.18:
+    resolution: {integrity: sha512-1OF3PafvJRAZAhb3EZUjLBdG+HXSpdHytV3nOD19OLzbhQgc8q8J8F6ro9hSdbcG0rXeWq33dQ37HxQLp3y74A==}
+
   json-parse-even-better-errors@4.0.0:
     resolution: {integrity: sha512-lR4MXjGNgkJc7tkQ97kb2nuEMnNCyU//XYVH0MKTGcXEiSudQ5MKGKen3C5QubYy0vmq+JGitUg92uuywGEwIA==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -2463,9 +2466,6 @@ packages:
     resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
     engines: {node: '>= 14.16.0'}
 
-  renderjson@1.4.0:
-    resolution: {integrity: sha512-R0IZoxjWQP4XMJjLkPjNKSwjDyl20EiLohyu1Os7AvIvO4F4Vtar1N6IjJLPLjDN7OYOXTsqtIVJupQnQMvYQw==}
-
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -5089,6 +5089,8 @@ snapshots:
 
   json-buffer@3.0.1: {}
 
+  json-formatter-js@2.5.18: {}
+
   json-parse-even-better-errors@4.0.0: {}
 
   json-schema-traverse@0.4.1: {}
@@ -5372,8 +5374,6 @@ snapshots:
 
   readdirp@4.0.2: {}
 
-  renderjson@1.4.0: {}
-
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
diff --git a/src/pages/host/components/CoHostInfo.vue b/src/pages/host/components/CoHostInfo.vue
index 6a4d554..2f02dc0 100644
--- a/src/pages/host/components/CoHostInfo.vue
+++ b/src/pages/host/components/CoHostInfo.vue
@@ -3,11 +3,11 @@ import { onMounted, shallowRef } from 'vue'
 import { db, type ConnectionHost } from '@/db'
 import { useRoute } from 'vue-router'
 import { request } from '@/api'
-import renderjson from 'renderjson'
+import JSONFormatter from 'json-formatter-js'
 const route = useRoute()
 const ctxRef = shallowRef<HTMLElement | undefined>()
 const fetchInfo = async () => {
-  const resp = await db.hosts.get<ConnectionHost>(parseInt(route.params.id as string))
+  const resp = await db.hosts.get({ id: parseInt(route.params.id as string) })
   console.log(resp)
   const data = await request<string>({
     connectionInfo: resp!,
@@ -29,8 +29,8 @@ const fetchInfo = async () => {
         }
       }
     })
-  renderjson.set_show_to_level(1).set_icons('+', '-')
-  ctxRef.value?.appendChild(renderjson(cfg))
+  const formatter = new JSONFormatter(cfg)
+  ctxRef.value?.appendChild(formatter.render())
 }
 onMounted(() => {
   fetchInfo()