---
url: https://docs.youcan.shop/components/FancyJsonViewer/README.md
---
# Json Viwer Component

This component is used to display a JSON object in a tree view.

## Params

* data: {Object} => The JSON object to display.

## Usage

```html
<script lang="ts" setup>
  import FancyJsonViewer from '~/components/FancyJsonViewer/FancyJsonViewer.vue';
  import { product } from './data';
</script>

<template>
  <FancyJsonViewer :data='product' />
</template>
```

## Result

It will display the JSON object in a tree view.