its-frank-huang/json-view

jsonviewer

What?

jsonviewer is a blazingly fast component for creating cascade json view, written in solidjs.

Features:

• fast, using solidjs
• easy to use
• lazy rendering, only renders the cascade you opened
• easy copy, double click on property to copy value
• full control on styling, using css variables
• control preview length

Installation

yarn yarn add @frank-tomato/jsonviewer

npm npm install @frank-tomato/jsonviewer

Usage

Solid

import { JsonView } from '@frank-tomato/jsonviewer';

const data = {
  foo: 1,
  bar: 'text',
  arr: [
    'text in array',
    2,
    {}
  ],
  obj:{
    text: 'nested text',
    bool: true,
    null: null
  }
};

const json = JSON.stringify(data);

...

<JsonView json={json} {...props} />

javascript

import { renderJsonView } from '@frank-tomato/jsonviewer';

const data = {
  foo: 1,
  bar: 'text',
  arr: [
    'text in array',
    2,
    {}
  ],
  obj:{
    text: 'nested text',
    bool: true,
    null: null
  }
};

const json = JSON.stringify(data);

renderJsonView(
  document.getElementById('jsonviewer'), 
  { json: json, ...props }
);

Preview

Props

defaultOpen

type: boolean

Should the component open first cascade when mounted.

default: false

Solid

<JsonView json={json} defaultOpen />

JS

renderJsonView(
  document.getElementById('jsonviewer'), 
  { json: data, defaultOpen: true }
);

showcase

defaultOpen: false

defaultOpen: true

depthIndicator

type: boolean

Show depth indicator or not.

default: true

Solid

<JsonView json={json} depthIndicator={false} />

JS

renderJsonView(
  document.getElementById('jsonviewer'), 
  { json: data, depthIndicator: false }
);

showcase

depthIndicator: true

depthIndicator: false

maxLength

type: number

Control the length of the preivew text.

default: 100

Solid

<JsonView json={json} maxLength={50} />

JS

renderJsonView(
  document.getElementById('jsonviewer'), 
  { json: data, maxLength: 50 }
);

showcase

maxLength: 100

maxLength: 50

Styling

To change the colors, simply overide the css variables of .jsonView__details

Example

Change the marker color to red

.jsonView__container{
  --marker-color: red;
}

All css variables visualized

css variables default value

  --name-color: rgb(20 133 189);
  --preview-name-color: rgb(163, 163, 163);
  --preview-color: rgb(107, 107, 107);
  --marker-color: rgb(170, 170, 170);
  --marker-open-color: rgb(8, 200, 226);
  --content-string-color: rgb(7, 124, 1);
  --content-boolean-color: rgb(125, 13, 153);
  --content-number-color: rgb(125, 13, 153);
  --content-null-color: rgb(109, 109, 109);
  --left-border-indicator-color: rgb(184, 182, 182);

Font example

Change font

.jsonView__container{
  font-family: ...;
}