Vue Json Pretty

Vue Json Pretty is a Vue 3 (and Vue 2, via a separate branch) component that renders arbitrary JSON data as a formatted, collapsible tree instead of a flat code block. It handles large payloads through optional virtual scrolling, supports collapsing nodes past a configurable depth or length threshold, and can render line numbers, brackets, and type-aware value styling out of the box.

Beyond passive display, it supports interactive path selection (single or multiple) and an editable mode so users can modify values directly in the rendered tree, making it a fit for admin panels, API response inspectors, and JSON-editing UIs where a raw <pre> block isn’t enough.

What You Get

• A drop-in <vue-json-pretty> component that renders any JSON value as a formatted tree
• Configurable collapsing by node depth or child-count threshold, with optional length badges on collapsed nodes
• Virtual scroll support (virtual, height, itemHeight, dynamicHeight) for rendering very large JSON payloads without performance loss
• Single- or multiple-path selection via selectableType/selectedValue, with highlightable selected nodes
• An editable mode that lets users modify values directly in the tree, with v-model binding on the underlying data
• Custom render slots/props (renderNodeKey, renderNodeValue, renderNodeActions) for overriding how keys, values, and actions are displayed

Common Use Cases

• Displaying API response payloads in an admin dashboard or internal debugging tool
• Building a JSON editor UI where users browse and edit nested config or data structures directly in the tree
• Rendering large JSON documents (logs, exports) efficiently via virtual scrolling instead of dumping raw text
• Letting users select and copy a specific path/value out of a large nested JSON object in a data-exploration tool

Under The Hood

Architecture - The component is organized around a root index.ts entry that composes tree-node rendering out of smaller pieces under src/components, with shared logic factored into src/hooks (state such as expand/collapse and selection) and src/utils (path handling, type detection, formatting). Each JSON node is rendered recursively as a component, with expand/collapse state and selection state threaded through composition-API hooks rather than a global store, which keeps the component tree self-contained and embeddable without external state management.

Tech Stack - Written in TypeScript against Vue 3’s Composition API, styled with Less (themes.less) for light/dark theming, built via a custom Webpack-based build/ pipeline that produces CommonJS (lib), ESM (esm), and .d.ts type declaration outputs. End-to-end behavior (traversal, selection, editing) is tested with Cypress component/integration tests rather than a unit-test framework, exercising the component in a real browser context.

Code Quality - The codebase is modest in size and cleanly split between rendering components, reusable hooks, and utility functions, which keeps individual files focused. Test coverage leans entirely on Cypress integration specs (traversal, actions, files, network requests) rather than isolated unit tests for the utils/hooks layer, so correctness is validated end-to-end but individual helper functions have less direct coverage. TypeScript typings are shipped for the public props/component API, giving consumers compile-time checking of props like data, selectedValue, and render-slot signatures.

API Design - The component exposes a large, well-documented set of props (documented in a props table in the README) covering display (indent, showLine, showIcon), performance (virtual, height, itemHeight), selection (selectableType, nodeSelectable), and editing (editable, editableTrigger), which makes common customization possible via props alone rather than requiring wrapper components. v-model support on both data (when editable) and selectedValue follows standard Vue conventions, keeping integration idiomatic for Vue developers; the tradeoff is a fairly large prop surface to learn for full customization.