A web component for visualizing JSON data in a collapsible tree view.
npm install @components-1812/json-visualizerOverview
json attribute
custom icons
render deep
Changing themes
src attribute
bash
npm install @components-1812/json-visualizer
`
- JSON visualizer package
#### CDN
`html
`
- jsdelivr: JSON visualizer package
JSONVisualizer.js
JSONVisualizer.css
JSONTokenizer.js
- unpkg: JSON visualizer package
JSONVisualizer.js
JSONVisualizer.css
JSONTokenizer.js
Usage
If you use Vite or a framework based on Vite such as Astro, you can import the component in a client-side script file:
`js
import '@components-1812/json-visualizer';
`
and use it in your HTML:
`html
{
"name": "John Doe",
"age": null,
"isStudent": false,
"courses": ["Math", "Science"],
"address": {
"street": "123 Main St",
"city": "Anytown"
},
"grades": [ 85, 92, 78 ],
"contact": {
"email": "john.doe@example.com",
"phone": "123-456-7890"
}
}
`
> Note:
>
> If you are using a builder or framework that doesn't support import ?raw, you need to load the component and its stylesheets manually.
>
> see Adding CSS stylesheets manually
Adding CSS stylesheets manually
If you want to add custom stylesheets to the component or need to load stylesheets from a different path, you can do it like this:
- ### AdoptedStyleSheets (recommended)
Using your builder’s import raw method, CSSStyleSheet, and the component’s AdoptedStyleSheets property:
`js
import JSONVisualizer from "@components-1812/json-visualizer/JSONVisualizer.js";
import JSONVisualizerRawCSS from "@components-1812/json-visualizer/JSONVisualizer.css?raw";
//Add the stylesheets to the component
const JSONVisualizerCSS = new CSSStyleSheet();
JSONVisualizerCSS.replaceSync(JSONVisualizerRawCSS);
JSONVisualizer.stylesSheets.adopted.push(JSONVisualizerCSS);
//Define the component
import('@components-1812/json-visualizer/define');
`
- ### Raw CSS in a