A customizable, TypeScript-first JSON viewer with persistent expand/collapse, dark & light themes, typed events, and copy-to-clipboard.
Install the package:
npm install @anilkumarthakur/vue3-json-viewerUse it in a component:
<script setup lang="ts">
import { JsonViewer } from '@anilkumarthakur/vue3-json-viewer';
import '@anilkumarthakur/vue3-json-viewer/styles.css';
const data = {
name: 'John Doe',
age: 30,
hobbies: ['reading', 'coding'],
};
</script>
<template>
<JsonViewer
:data="data"
:dark-mode="true"
/>
</template>| Feature | Description |
|---|---|
| ðŊ Zero dependencies | Only Vue 3 as a peer dependency |
| ðą Responsive | The root container scrolls; works on any screen size |
| ð§ State that persists | Expand/collapse survives collapsing a parent node |
| ð Efficient | Collapsed subtrees aren't rendered at all |
| ð§ Customizable | Props for theme & initial state, CSS classes for the rest |