NbJsonTree renders any JSON-compatible value as an interactive, collapsible tree. It supports objects, arrays and primitives (string, number, boolean, null), and can optionally be made editable via v-model.
vue
<template>
<NbJsonTree v-model="payload" title="payload" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const payload = ref({
name: 'Ada Lovelace',
active: true,
score: 99,
tags: ['math', 'engineering'],
meta: null,
})
</script>Editable mode
Set editable to allow inline edits. Double-click a string or number value to edit it, click a boolean to toggle it. Updates are emitted through v-model.
vue
<template>
<NbJsonTree v-model="user" title="user" editable />
</template>Starting collapsed
Use start-collapsed when the payload is large and you want the user to expand nodes on demand.
Nested structures
Objects and arrays are recursively rendered. Each node shows a summary of its children, { N properties } for objects and [ N items ] for arrays.
vue
<template>
<NbJsonTree v-model="response" title="response" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const response = ref({
status: 'ok',
data: {
users: [
{ id: 1, name: 'Ada' },
{ id: 2, name: 'Grace' },
],
pagination: { page: 1, total: 2 },
},
})
</script>Read-only inspection
Without editable, NbJsonTree is a pure inspector, useful for debugging API responses, displaying configuration, or rendering log payloads.