JSON Tree View, JSONPath, JSON to TypeScript & SQL — Advanced JSON Exploration
Formatting JSON is just the start. Complex API responses with deep nesting, large arrays, and mixed types need more than indentation — you need a tree view to navigate the structure, JSONPath to query specific values, TypeScript interface generation to use the data safely in code, and SQL generation when you need to store it in a relational database. This guide covers all four advanced workflows with the JSON workbench.
Tree view
Expand/collapse any node — navigate deep nesting without scrolling
JSONPath
Query specific values from large responses — like XPath for JSON
TypeScript
Generate interfaces from JSON — skip writing types by hand
JSON Tree View — Navigate Deep Nesting Without Getting Lost
A tree view renders JSON as a collapsible hierarchy. Each object is a node you can expand or collapse independently. This is critical for large API responses with 5+ levels of nesting — scrolling through formatted text is far slower than navigating a tree.
Expand/collapse individual nodes
Click any object or array to collapse it to a single line, hiding its children. Focus on the top-level structure first, then drill into specific sections.
See value types at a glance
Tree views color-code values by type: strings (green), numbers (blue), booleans (orange), null (gray). No need to guess types from raw text in a deeply nested structure.
Count array elements instantly
Arrays show their element count when collapsed: [12 items]. No need to scroll the entire array or write code to check length during debugging.
Copy paths for code use
Hover any tree node to copy its full path (e.g., response.data.users[0].address.city). Use the path directly in code or as a JSONPath expression.
{
"status": "success",
"data": {
"pagination": { "page": 1, "perPage": 25, "total": 847, "pages": 34 },
"users": [
{
"id": "usr_01HX",
"name": "Alice Smith",
"email": "alice@example.com",
"profile": {
"avatar": "https://cdn.example.com/avatars/01HX.jpg",
"bio": "Senior Developer",
"location": { "city": "London", "country": "UK", "timezone": "Europe/London" }
},
"permissions": { "read": true, "write": true, "admin": false, "billing": false },
"createdAt": "2023-03-15T09:00:00Z"
}
]
},
"meta": { "requestId": "req_abc123", "duration": 143, "version": "v2.1" }
}Navigate this response in seconds with tree view
data.users[0].profile to focus on permissions, or collapse the entire data.users array to check pagination and meta. Much faster than scrolling 50+ lines of formatted text.JSONPath — Query JSON Like a Database
JSONPath is a query language for JSON — like XPath for XML or CSS selectors for HTML. It extracts specific values from any JSON structure without writing JavaScript.
$ — root of the document
.key — child property named 'key'
['key'] — same as .key (use for keys with special characters or spaces)
[0] — array element at index 0
[*] — all array elements (wildcard)
..key — recursive descent — find 'key' at any depth in the tree
[0,2,4] — multiple specific indices
[1:5] — array slice — elements at index 1, 2, 3, 4
[?(@.price > 50)] — filter — array elements where price > 50
@ — current element (used inside filter expressions)// Get all user names from the array
$.data.users[*].name
→ ["Alice Smith"]
// Get the first user's city
$.data.users[0].profile.location.city
→ "London"
// Get users with admin permissions
$.data.users[?(@.permissions.admin == true)]
→ [] (none in this example — Alice has admin: false)
// Get total user count from pagination
$.data.pagination.total
→ 847
// Recursive search for all email fields at any depth
$..email
→ ["alice@example.com"]
// Get the API request duration
$.meta.duration
→ 143Use JSONPath in production code — not just in tools
Libraries like jsonpath-plus (npm), jmespath (AWS SDK), and jsonpath-ng (Python) let you use JSONPath expressions in application code to extract values from API responses — without manually traversing nested properties with response?.data?.users?.[0]?.profile.
JSON to TypeScript — Generate Interfaces Automatically
Writing TypeScript interfaces for API responses by hand is tedious and error-prone. The JSON-to-TypeScript generator reads the JSON structure and produces accurate interface definitions — handling nested objects, arrays, and primitive types.
{
"id": 42,
"name": "Alice Smith",
"email": "alice@example.com",
"role": "admin",
"permissions": ["read", "write", "delete"],
"profile": {
"avatar": "https://cdn.example.com/avatars/42.jpg",
"bio": "Senior Developer",
"timezone": "Europe/London"
},
"settings": {
"theme": "dark",
"notifications": true,
"language": "en"
},
"lastLogin": "2024-11-15T10:30:00Z",
"createdAt": "2023-03-15T09:00:00Z"
}export interface Profile {
avatar: string;
bio: string;
timezone: string;
}
export interface Settings {
theme: string;
notifications: boolean;
language: string;
}
export interface User {
id: number;
name: string;
email: string;
role: string;
permissions: string[];
profile: Profile;
settings: Settings;
lastLogin: string;
createdAt: string;
}
// Ready to use in your API client
const fetchUser = async (id: number): Promise<User> => {
const res = await fetch(`/api/users/${id}`);
return res.json() as Promise<User>;
};Generated interfaces are a starting point — review before using
null in some responses but not in the sample, the interface won't reflect that. Review generated interfaces and mark fields as optional (field?: Type) or nullable (field: Type | null) based on your actual API contract.JSON to SQL — Generate INSERT Statements from JSON Arrays
When you have a JSON array of records to import into a relational database, the JSON-to-SQL generator saves hours of manual work. It infers column types and produces ready-to-run CREATE TABLE and INSERT statements.
[
{ "id": 1, "name": "Wireless Mouse", "price": 29.99, "category": "electronics", "inStock": true },
{ "id": 2, "name": "Mechanical Keyboard", "price": 89.99, "category": "electronics", "inStock": true },
{ "id": 3, "name": "USB-C Hub", "price": 49.99, "category": "accessories", "inStock": false },
{ "id": 4, "name": "Monitor Stand", "price": 35.00, "category": "accessories", "inStock": true }
]CREATE TABLE products (
id INTEGER,
name TEXT,
price NUMERIC,
category TEXT,
inStock BOOLEAN
);
INSERT INTO products (id, name, price, category, inStock) VALUES
(1, 'Wireless Mouse', 29.99, 'electronics', TRUE),
(2, 'Mechanical Keyboard', 89.99, 'electronics', TRUE),
(3, 'USB-C Hub', 49.99, 'accessories', FALSE),
(4, 'Monitor Stand', 35.00, 'accessories', TRUE);Full Workflow — API Response to TypeScript + Database
Paste your API response JSON
Go to unblockdevs.com/json-beautifier. Paste the raw API response — the tool formats it, validates it, and shows the tree view immediately.
Explore the structure in Tree View
Click the Tree tab. Expand and collapse nodes to understand the response shape. Note arrays, nested objects, and nullable fields before writing any code.
Query specific values with JSONPath
Use the JSONPath panel to test extraction queries. Find exact paths to the values your code needs and copy them for use in your data access layer.
Generate TypeScript interfaces
Switch to the TypeScript tab. Copy the generated interfaces into your project. Adjust optional and nullable fields based on your API documentation.
Generate SQL for database import
For JSON arrays to store in a database, use the SQL tab to get CREATE TABLE and INSERT statements. Run in your database client to import the data.