A collapsable tree view for JSON. This package has some similarites with vue-json-tree-view so I'll address the differences below. I'm not contributing this back to that package because it would require breaking API changes, and the code is entirely different. Contributions welcome!
This package has a few major improvements over predecessors: builds, styles, and customization. For builds, this package ships CommonJS, Module, and UNPKG builds with no dependencies. vue-json-tree-view bundles in lots of dependencies -- including lodash. I also export global Vue imports, local Vue imports, and TypeScript declarations. The code itself is about as small as it can be while being easy to follow.
The styles in this package are all scoped, with key colors still being customizable. There are no extra margins or overflow rules and text properties are all inherited from the page. This makes the view much easier to integrate anywhere you need it.
The default color theme is based on solarized, and font weights are modified to increase readability. The component uses semantic HTML elements and tries to be fully keyboard accessible.
npm i vue-json-component
yarn add vue-json-componentimport { JSONView } from 'vue-json-component';
export default Vue.extend({
components: { 'json-view': JSONView }
});import JSONView from 'vue-json-component';
Vue.use(JSONView);<template>
<json-view :data="data" />
</template>The font size and font family are inherited from the page. The component now supports dark mode, and has switched to a CSS Variables based implementation.
- data (JSON): The valid JSON object you want rendered as a tree.
- rootKey (String): The name of the top level root key; defaults to root.
- maxDepth (Number): Depth of the tree that is open at first render; defaults to 1.
- colorScheme (New) (String): Setting to 'dark' enables dark mode.
--vjc-key-color: #0977e6;
--vjc-valueKey-color: #073642;
--vjc-string-color: #268bd2;
--vjc-number-color: #2aa198;
--vjc-boolean-color: #cb4b16;
--vjc-null-color: #6c71c4;
--vjc-arrow-size: 6px;
--vjc-arrow-color: #444;
--vjc-hover-color: rgba(0, 0, 0, 0.15);<template>
<json-view
:data="data"
rootKey="view"
:maxDepth="1"
class="customize"
/>
</template>
<style lang="scss" scoped>
.customize {
--vjc-valueKey-color: green;
}
.customize.dark {
--vjc-valueKey-color: red;
}
</style>Note: your styles will need to be scoped to override the scoped CSS Variables in the component.
You can allow users to click elements, and receive an event when this occurs. The selected event will pass you the key, value, and path of the selected value. If you do not listen for the event, the styles will not indicate that values are clickable.
<json-view
:data="data"
v-on:selected="itemSelected"
/>Event
- key: string
- value: string
- path: string
yarnyarn serveyarn buildyarn lintContributions are welcome via pull request. If you want to discuss your feature before committing development time, feel free to open an issue and we can refine the idea.
Thanks!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent