Data Visor

Appearance

Examples ​

Live examples for the data-visor-vue component. For installing the tree viewer as a browser extension, see Web extension.

Explore some practical examples using DataVisor with different formats and configurations.

Content & Language ​

The data prop is mandatory and must be a string. Set lang to 'json', 'yaml', or 'xml' so DataVisor parses and highlights the document correctly (json is the default).

The live demos below use the same sample dataset in three formats (see $examples in the docs theme). For static minified strings used in tests or demos, see $examples.ALL_MINIFIED (or JSON_MINIFIED, YAML_MINIFIED, XML_MINIFIED). For minified or fractured JSON source views, use the toolbar (Tree | Minified | Fractured for JSON), or v-model:display-mode from a parent. Fractured mode uses FracturedJson formatting. Without v-model, the toolbar still toggles the view internally (see playground).

vue
<script setup>
import { DataVisor } from 'data-visor-vue'

const jsonData = '{ "name": "Alice", "roles": ["admin"] }'
const yamlData = 'name: Alice\nroles:\n  - admin'
const xmlData = '<user><name>Alice</name><role>admin</role></user>'
</script>

<template>
  <DataVisor :data="jsonData" lang="json" />
  <DataVisor :data="yamlData" lang="yaml" />
  <DataVisor :data="xmlData" lang="xml" />
</template>

JSON Demo ​

YAML Demo ​

XML Demo ​

Themes & Dark Mode ​

DataVisor uses Shiki for syntax highlighting. You can specify any bundled Shiki theme for both light and dark modes.

vue
<script setup>
import { DataVisor } from 'data-visor-vue'

const data = JSON.stringify({ theme: 'custom' })
</script>

<template>
  <DataVisor 
    :data="data" 
    light-theme="vitesse-dark"
    dark-theme="vitesse-light"
  />
</template>

Demo ​

Initial Depth ​

Controls how many levels of the tree are expanded by default when the component is mounted.

vue
<template>
  <!-- Only top-level keys will be visible initially -->
  <DataVisor :data="data" :initial-depth="1" />
  
  <!-- Fully expanded up to 5 levels -->
  <DataVisor :data="data" :initial-depth="5" />
</template>

Demo ​

Sizing (Height) ​

By default, the viewer has a maximum height of 600px and will scroll internally if the content is longer. You can customize this using max-height and min-height with any CSS height value (e.g. '300px', 'none', 'auto', '100%').

vue
<template>
  <!-- Fixed height with scrolling -->
  <DataVisor 
    :data="data" 
    max-height="200px" 
  />

  <!-- Auto height (expands with content) -->
  <DataVisor 
    :data="data" 
    max-height="none"
  />

  <!-- Min and max in px: height follows content between both (internal scroll at max) -->
  <DataVisor 
    :data="data" 
    min-height="300px"
    max-height="500px"
  />
</template>

Demo ​

UI Elements ​

You can toggle various parts of the UI like line numbers, the top toolbar (which includes search and expand/collapse actions), and the breadcrumb trail.

vue
<template>
  <DataVisor 
    :data="data"
    :show-line-numbers="false"
    :show-toolbar="false"
    :show-breadcrumb="false"
  />
</template>

Demo ​