Nested Objects
Deeply nested structures, with rainbow-colored bracket levels.
Deep Nesting
Bracket colors cycle by depth, making nesting easy to follow:
obj{
"level1":obj{
"level2":obj{
"level3":obj{
"level4":obj{
"level5":obj{
"message": "five levels deep",
"note": "watch the bracket colors"
}
}
}
}
}
}
Keys That Aren't Plain Identifiers
Keys with dots, spaces, or leading symbols are handled correctly — internally their path is bracket-quoted so they never collide with nested paths:
obj{
"normal": 1,
"with.dot": 2,
"has space": 3,
".config":obj{
"vscode":obj{
"settings.json": "{ }"
}
}
}
Mixed Nesting
Arrays inside objects inside arrays:
obj{
"projects":2[
obj{
"name": "Project Alpha",
"tasks":2[
obj{
"id": 1,
"subtasks":2[
obj{
"id": "1a",
"done": true
},
obj{
"id": "1b",
"done": false
}
]
},
obj{
"id": 2,
"subtasks":1[
obj{
"id": "2a",
"done": true
}
]
}
]
},
obj{
"name": "Project Beta",
"tasks":1[
obj{
"id": 3,
"subtasks":empty[]
}
]
}
]
}
Real-World Shapes
These patterns come up constantly:
vue
<script setup lang="ts">
import { JsonViewer } from '@anilkumarthakur/vue3-json-viewer';
import '@anilkumarthakur/vue3-json-viewer/styles.css';
// GraphQL response
const graphql = {
data: {
user: {
id: '1',
profile: { firstName: 'John', avatar: { url: '…', width: 200 } },
posts: { edges: [{ node: { id: 'p1', title: 'First' } }] },
},
},
};
// Redux / Pinia state
const state = {
auth: { isAuthenticated: true, user: { id: 1, permissions: ['read', 'write'] } },
ui: { theme: 'dark', sidebar: { isOpen: true } },
entities: { users: { byId: { 1: { id: 1, name: 'Alice' } }, allIds: [1] } },
};
</script>
<template>
<JsonViewer
:data="graphql"
:expanded="false"
/>
<JsonViewer
:data="state"
:expanded="false"
/>
</template>