Vue JSON View

A Vue component to visualize JS objects as an interactive tree.

Forked from soc221b/object-visualizer:

• adds support for rendering Date objects (as ISO strings)
• ESM-only build
• improved rendering of empty arrays (as []) and empty objects (as {})
• improved colors for booleans

Features

• Customizable Keys: Use getKeys to control which keys are displayed for nested objects.
• Auto-Expansion: Use expandOnCreatedAndUpdated to determine which nodes should be expanded by default.
• Recursive Expansion: Meta+Click on an expander to recursively expand all child nodes.
• Recursive Collapse: Meta+Shift+Click on an expander to recursively collapse all child nodes.
• Dark Mode Support: Automatically adapts to light/dark mode based on prefers-color-scheme.

Props

| Prop | Type | Default | Description | | :-------------------------- | :-------------------------------------- | :------------ | :---------------------------------------------------------------------------- | | data | unknown | Required | The data to visualize (object, array, primitive, etc.). | | rootName | string | '' | The name displayed for the root node. | | expandOnCreatedAndUpdated | (path: Path) => boolean | () => false | Function to determine initial expansion state. Receives the path of the node. | | getKeys | (object: any, path: Path) => string[] | Object.keys | Function to filter or sort keys. Receives the object and its path. |

Installation

NPM

npm install vue-json-view

import { VueJsonView } from 'vue-json-view'
import 'vue-json-view/dist/vue-json-view.css'

Usage

<script setup lang="ts">
import { VueJsonView } from 'vue-json-view'
import 'vue-json-view/dist/vue-json-view.css'

const data = {
  foo: 'bar',
  baz: [1, 2, 3],
  nested: {
    a: 1,
    b: 2,
  },
}
</script>

<template>
  <VueJsonView
    :data="data"
    root-name="Data"
    :expand-on-created-and-updated="(path) => path.length < 2"
  />
</template>