JSON Display: Render Nested JSON as a Collapsible Tree in the Browser
Interview Experience
Problem
You are given an arbitrary JSON object (potentially deeply nested) and asked to render it as an interactive, collapsible tree in the browser — similar to Chrome DevTools' JSON viewer.
js
// Signature
function renderJSON(container, data) {
// container: HTMLElement to mount into
// data: any valid JSON value (object, array, primitive)
}
Example input:
json
{"user": {"id": 1, "tags": ["admin", "beta"]}, "active": true}
Expected rendered output (collapsed):
> user: {2 keys}
active: true
Expanding user reveals id: 1 and > tags: [2 items].
Follow-ups
- How do you handle circular references in the JSON object without crashing?
- What changes are needed to support syntax highlighting (strings vs numbers vs booleans)?
- How would you make deeply nested paths copyable to the clipboard on click?
- If the JSON blob is 50 MB, how do you avoid blocking the main thread during render?
Full Details
Problem
You are given an arbitrary JSON object (potentially deeply nested) and asked to render it as an interactive, collapsible tree in the browser — similar to Chrome DevTools' JSON viewer.
js
// Signature
function renderJSON(container, data) {
// container: HTMLElement to mount into
// data: any valid JSON value (object, array, primitive)
}
Example input:
json
{"user": {"id": 1, "tags": ["admin", "beta"]}, "active": true}
Expected rendered output (collapsed):
> user: {2 keys}
active: true
Expanding user reveals id: 1 and > tags: [2 items].
Follow-ups
- How do you handle circular references in the JSON object without crashing?
- What changes are needed to support syntax highlighting (strings vs numbers vs booleans)?
- How would you make deeply nested paths copyable to the clipboard on click?
- If the JSON blob is 50 MB, how do you avoid blocking the main thread during render?
About This Question
This is a candidate experience report from a notion interview during the phone round.
It covers the following topics: Strings, Frontend, Phone, Coding, Arrays .