https://github.com/1602/json-viewer-vanilla
https://github.com/1602/json-viewer-vanilla
custom-elements devtools json-viewer vanilla-javascript webcomponent
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/1602/json-viewer-vanilla
- Owner: 1602
- Created: 2024-05-19T17:03:12.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-03T19:00:13.000Z (over 1 year ago)
- Last Synced: 2025-04-19T10:37:17.567Z (about 1 year ago)
- Topics: custom-elements, devtools, json-viewer, vanilla-javascript, webcomponent
- Language: TypeScript
- Homepage: https://1602.github.io/json-viewer-vanilla/?path=/story/jsonviewerwebcomponent--expanded-nodes
- Size: 567 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# json-viewer
This is a json-viewer custom element (a.k.a. web-component). Nothing fancy, just a copy of devtools json viewer you see in network panel when previewing json response.
Here’s a [demo](https://jsfiddle.net/1602/yh6pozmd/).
## Usage
### HTML
Load as module, and use
```html
```
Customize appearance in CSS
```css
json-viewer {
--jv-background-color: #fff;
--jv-color: rgb(31, 31, 31);
--jv-font-size: 11px;
--jv-font-family: monospace;
--jv-font-weight: 400;
--jv-expand-bullet-color: black;
--jv-expand-bullet-width: 14px;
--jv-expand-bullet-height: 14px;
--jv-key-color: rgb(142, 0, 75);
--jv-number-value-color: rgb(8, 66, 160);
--jv-bool-value-color: rgb(8, 66, 160);
--jv-null-value-color: rgba(31, 31, 31, 0.38);
--jv-string-value-color: rgb(220, 54, 46);
--jv-focused-node-background: #eee;
--jv-hovered-node-background: #eee;
}
```
To change toggle icon (‣):
```css
json-viewer {
--expand-bullet-mask-image: url('data:image/svg+xml;utf8,');
}
```
### React+TS
To use it in react create `declarations.d.ts` with
```typescript
declare namespace JSX {
interface IntrinsicElements {
'json-viewer': any;
}
}
```
And then use as like this
```jsx
export function JsonViewer({ value }: { value: string }) {
return ;
}
```
### Vue+Vite
In vite config, add to `vue()` plugin
```js
export default defineConfig({
// ...
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => ['json-viewer', ...].includes(tag),
},
},
}),
],
// ...
});
```