Components
JSON Viewer
A collapsible, syntax-highlighted JSON tree with per-node expand/collapse and copy.
php artisan blatui:add json-viewer
user
{
"id": 1042,
"name": "Ada Lovelace",
"active": true,
"roles": [
"admin",
"editor"
],
"profile": {
"age": 36,
"verified": false,
"website": null
}
}
"id":
1042,
"name":
"Ada Lovelace",
"active":
true,
0:
"admin",
1:
"editor"
],
"age":
36,
"verified":
false,
"website":
null
}
}
{{-- A nested object, expanded by default. Pass a PHP array or a JSON string. --}}
@php
$payload = [
'id' => 1042,
'name' => 'Ada Lovelace',
'active' => true,
'roles' => ['admin', 'editor'],
'profile' => [
'age' => 36,
'verified' => false,
'website' => null,
],
];
@endphp
<x-ui.json-viewer :data="$payload" root-label="user" class="w-full max-w-md" />Array
products
[
{
"sku": "BLT-001",
"title": "Keyboard",
"price": 89.99,
"inStock": true
},
{
"sku": "BLT-002",
"title": "Mouse",
"price": 39,
"inStock": false
},
{
"sku": "BLT-003",
"title": "Monitor",
"price": 249.5,
"inStock": true
}
]
"sku":
"BLT-001",
"title":
"Keyboard",
"price":
89.99,
"inStock":
true
},
"sku":
"BLT-002",
"title":
"Mouse",
"price":
39,
"inStock":
false
},
"sku":
"BLT-003",
"title":
"Monitor",
"price":
249.5,
"inStock":
true
}
]
{{-- A top-level array of objects, supplied as a JSON string (auto-decoded). --}}
@php
$json = <<<'JSON'
[
{ "sku": "BLT-001", "title": "Keyboard", "price": 89.99, "inStock": true },
{ "sku": "BLT-002", "title": "Mouse", "price": 39, "inStock": false },
{ "sku": "BLT-003", "title": "Monitor", "price": 249.5, "inStock": true }
]
JSON;
@endphp
<x-ui.json-viewer :data="$json" root-label="products" class="w-full max-w-md" />Collapsed
config.json
{
"theme": "dark",
"features": {
"search": true,
"analytics": false
},
"limits": {
"maxUploads": 25,
"sizeMb": 10.5
}
}
"theme":
"dark",
"search":
true,
"analytics":
false
},
"maxUploads":
25,
"sizeMb":
10.5
}
}
{{-- Start fully collapsed with :expanded="false"; click any node to drill in. --}}
@php
$config = [
'theme' => 'dark',
'features' => [
'search' => true,
'analytics' => false,
],
'limits' => [
'maxUploads' => 25,
'sizeMb' => 10.5,
],
];
@endphp
<x-ui.json-viewer :data="$config" :expanded="false" root-label="config.json" class="w-full max-w-md" />