Json Tree View

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/json-tree-view.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/json-tree-view.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/json-tree-view.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/json-tree-view.json
    

Usage

      Copy
      <script setup lang="ts">
import { JsonTreeView } from "@/components/ui/json-tree-view";
import { ChevronRightIcon } from "@lucide/vue";

const data = { name: "John Doe", age: 30 };
</script>

<template>
  <JsonTreeView.Root :data="data" :default-expanded-depth="1">
    <JsonTreeView.Tree>
      <template #arrow>
        <ChevronRightIcon />
      </template>
    </JsonTreeView.Tree>
  </JsonTreeView.Root>
</template>
    

Composition

      Copy
      JsonTreeView.Root
├── JsonTreeView.RootProvider
└── JsonTreeView.Tree
    

Examples

Different Data Types

The JSON tree view can display various JavaScript data types including objects, arrays, primitives, and special values:

Functions and Methods

Display JavaScript functions, async functions, and generators in your JSON tree:

Regular Expressions

Regular expressions are displayed with their pattern and flags:

Error Objects

Error objects and their stack traces can be visualized:

Map and Set Objects

Native JavaScript Map and Set objects are supported:

Controlling Expand Level

Use the defaultExpandedDepth prop to control how many levels are expanded by default:

Custom Value Rendering

You can customize how specific values are rendered using the renderValue prop. This example shows how to make email addresses clickable:

Configuration Options

The JSON tree view supports several configuration options to customize the display:

      Copy
      <JsonTreeView.Root
  :data="data"
  :default-expanded-depth="2"
  :quotes-on-keys="true"
  :show-nonenumerable="true"
  :max-preview-items="5"
  :collapse-strings-after-length="50"
  :group-arrays-after-length="100"
>
  <JsonTreeView.Tree>
    <template #arrow>
      <ChevronRightIcon />
    </template>
  </JsonTreeView.Tree>
</JsonTreeView.Root>
    

Configuration Options:

• quotesOnKeys: Whether to show quotes around object keys
• showNonenumerable: Whether to show non-enumerable properties
• maxPreviewItems: Maximum number of items to show in object/array previews
• collapseStringsAfterLength: Collapse strings longer than this length
• groupArraysAfterLength: Group array items when array is longer than this length

Using the Root Provider

The RootProvider component provides a context for the JSON tree view. It accepts the value of the useJsonTreeView hook. You can leverage it to access the component state and methods from outside the JSON tree view.

If you're using the RootProvider component, you don't need to use the Root component.

API

See Ark UI Json Tree View docs for full props and examples.