Katkat
Back

Render Nested JSON in a Code-Style Viewer

xAIFrontend Engineer · Onsite
MediumFrontend EngineerOnsiteSoftware Engineering Fundamentals

Last updated

Render nested JSON safely in React with indentation, type styling, collapsible containers, empty values, and explicit boundaries between a viewer and an editor.

Implement a React viewer that displays a supplied JSON object in a code-editor-like format. Show nested structure clearly without making the content executable.

Constraints & Assumptions

The source specifies a JSON object displayed in a style similar to a code editor, but no exact screenshot or editing behavior. For this practice version, support valid acyclic JSON values, indentation, type coloring, and expandable/collapsible arrays and objects. Editing, search, and line numbers are outside the stated replacement contract.

Clarifying Questions

Is the viewer read-only? How large or deeply nested can the input be? Must collapsed nodes preserve state across updates? Is exact source formatting available, or only a parsed value?

Follow-up questions

  • How would you add line numbers or virtualize a large document? Why should object values not be inserted with raw HTML? What changes if the input includes non-JSON values or cycles?