svelte-tree-view

Copy-paste JSON objects to view them.

Available props

--tree-view-left-indent

--tree-view-li-line-height

--tree-view-font-family

--tree-view-font-size

--tree-view-key-margin-right

showLogButton

showCopyButton

valueComponent

See Example 2

recursionOpts

{
  maxDepth: 16,
  omitKeys: [],
  stopCircularRecursion: false,
  isCircularNode(node, iteratedValues) {
    if (node.type === 'object' || node.type === 'array') {
      const existingNodeWithValue = iteratedValues.get(node.value)
      if (existingNodeWithValue && node.id !== existingNodeWithValue.id) {
        node.circularOfId = existingNodeWithValue.id
        return false
      }
      iteratedValues.set(node.value, node)
    }
    return true
  },
  shouldExpandNode: (node) => {
    return true
  },
  mapChildren(value, type, parent) {
    switch (type) {
      case 'array':
        return value.map((v, i) => [i.toString(), v])
      case 'map':
        const entries = Array.from(value.entries())
        return entries.map(([key, value], i) => [
          `[map entry ${i}]`,
          {
            '[key]': key,
            '[value]': value
          }
        ])
      case 'set':
        return Array.from(value.values()).map((v, i) => [`[set entry ${i}]`, v])
      case 'object':
        return Object.entries(value)
      default:
        return []
    }
  }
}

valueFormatter

theme examples

0:

{} 22 keys
- _id:
  
  "6127d77c7d2ff4113f24ab5c"
- index:
  
  0
- guid:
  
  "6e72c4da-c871-4aa1-aa44-1465920b90ae"
- isActive:
  
  false
- balance:
  
  "$2,256.26"
- picture:
  
  "http://placehold.it/32x32"
- age:
  
  22
- eyeColor:
  
  "blue"
- name:
  
  "Branch Mcintosh"
- gender:
  
  "male"
- company:
  
  "ENTOGROK"
- email:
  
  "branchmcintosh@entogrok.com"
- phone:
  
  "+1 (843) 489-2199"
- address:
  
  "196 Gerry Street, Sylvanite, Colorado, 3630"
- about:
  
  "Deserunt et laborum proident commodo. Irure mollit voluptate minim ut eiusmod qui deserunt culpa est nostrud. Ex duis aute ad eu. Ex in culpa culpa nulla non voluptate velit ex sint pariatur exercitation labore. "
- registered:
  
  "2018-07-23T07:01:58 -03:00"
- latitude:
  
  -39.97877
- longitude:
  
  -61.667911
- tags:
  
  [] 7 items
- - 0:
    
    "tempor"
  - 1:
    
    "laboris"
  - 2:
    
    "reprehenderit"
  - 3:
    
    "veniam"
  - 4:
    
    "exercitation"
  - 5:
    
    "velit"
  - 6:
    
    "voluptate"
- friends:
  
  [] 3 items
- - 0:
    
    {} 2 keys
  - - id:
      
      0
    - name:
      
      "Shanna Shannon"
  - 1:
    
    {} 2 keys
  - - id:
      
      1
    - name:
      
      "Lindsey Reed"
  - 2:
    
    {} 2 keys
  - - id:
      
      2
    - name:
      
      "Elinor Hendricks"
- greeting:
  
  "Hello, Branch Mcintosh! You have 1 unread messages."
- favoriteFruit:
  
  "strawberry"
1:

{} 22 keys
- _id:
  
  "6127d77cdce2ef8b8b42aae8"
- index:
  
  1
- guid:
  
  "8e33bdb8-d5e6-49fb-b229-ea24501c9ba3"
- isActive:
  
  true
- balance:
  
  "$3,880.84"
- picture:
  
  "http://placehold.it/32x32"
- age:
  
  29
- eyeColor:
  
  "brown"
- name:
  
  "Amy Cannon"
- gender:
  
  "female"
- company:
  
  "QUILITY"
- email:
  
  "amycannon@quility.com"
- phone:
  
  "+1 (842) 547-2756"
- address:
  
  "564 Dahlgreen Place, Sims, Washington, 9571"
- about:
  
  "In enim aliqua sint dolor laboris. Sunt veniam officia elit magna Lorem nulla occaecat culpa anim enim. Irure velit labore dolore incididunt. Aute aliquip elit ut duis anim elit esse dolor esse in nisi eiusmod tempor eiusmod. Proident eiusmod id nulla voluptate fugiat dolore do tempor dolor sunt. Adipisicing culpa quis elit enim aliquip. Tempor exercitation aute excepteur in. "
- registered:
  
  "2020-09-23T10:54:44 -03:00"
- latitude:
  
  -73.399929
- longitude:
  
  55.693187
- tags:
  
  [] 7 items
- - 0:
    
    "commodo"
  - 1:
    
    "ex"
  - 2:
    
    "elit"
  - 3:
    
    "ad"
  - 4:
    
    "magna"
  - 5:
    
    "laboris"
  - 6:
    
    "veniam"
- friends:
  
  [] 3 items
- - 0:
    
    {} 2 keys
  - - id:
      
      0
    - name:
      
      "Barron Gonzales"
  - 1:
    
    {} 2 keys
  - - id:
      
      1
    - name:
      
      "Therese Ramos"
  - 2:
    
    {} 2 keys
  - - id:
      
      2
    - name:
      
      "Kirby Knight"
- greeting:
  
  "Hello, Amy Cannon! You have 9 unread messages."
- favoriteFruit:
  
  "apple"
2:

{} 22 keys
- _id:
  
  "6127d77c36bbb0fbc6f1e367"
- index:
  
  2
- guid:
  
  "75500a41-98ec-4050-854f-33dfef40297c"
- isActive:
  
  false
- balance:
  
  "$2,367.73"
- picture:
  
  "http://placehold.it/32x32"
- age:
  
  27
- eyeColor:
  
  "blue"
- name:
  
  "Whitley Zamora"
- gender:
  
  "male"
- company:
  
  "MEDALERT"
- email:
  
  "whitleyzamora@medalert.com"
- phone:
  
  "+1 (825) 435-2054"
- address:
  
  "619 Macon Street, Cresaptown, Rhode Island, 2046"
- about:
  
  "Reprehenderit velit cillum anim commodo est ex est deserunt quis consectetur ex proident do dolore. Pariatur minim enim ipsum nulla quis deserunt duis nisi. Excepteur occaecat quis dolor commodo consectetur. Officia laborum dolore tempor reprehenderit sit. Sit consectetur consequat aliquip qui. Est irure enim ex voluptate non aute. "
- registered:
  
  "2016-03-01T09:46:19 -02:00"
- latitude:
  
  -60.824874
- longitude:
  
  -22.249243
- tags:
  
  [] 7 items
- - 0:
    
    "minim"
  - 1:
    
    "consequat"
  - 2:
    
    "dolor"
  - 3:
    
    "duis"
  - 4:
    
    "consectetur"
  - 5:
    
    "et"
  - 6:
    
    "elit"
- friends:
  
  [] 3 items
- - 0:
    
    {} 2 keys
  - - id:
      
      0
    - name:
      
      "Wynn Foster"
  - 1:
    
    {} 2 keys
  - - id:
      
      1
    - name:
      
      "Gloria Saunders"
  - 2:
    
    {} 2 keys
  - - id:
      
      2
    - name:
      
      "Vega Mcclain"
- greeting:
  
  "Hello, Whitley Zamora! You have 9 unread messages."
- favoriteFruit:
  
  "strawberry"
3:

{} 22 keys
- _id:
  
  "6127d77cab3b02db4e3558ef"
- index:
  
  3
- guid:
  
  "3e68ae9a-4943-47ac-819f-2acf5f5267a9"
- isActive:
  
  true
- balance:
  
  "$3,167.93"
- picture:
  
  "http://placehold.it/32x32"
- age:
  
  20
- eyeColor:
  
  "blue"
- name:
  
  "Winters Kirk"
- gender:
  
  "male"
- company:
  
  "SIGNITY"
- email:
  
  "winterskirk@signity.com"
- phone:
  
  "+1 (820) 591-2943"
- address:
  
  "733 Mill Lane, Loma, Wyoming, 5006"
- about:
  
  "Magna nulla et in dolore anim aliqua occaecat aliqua pariatur. Ut commodo duis officia minim labore. Officia aliquip ad esse commodo ea nisi Lorem esse in. Ipsum nulla ea nisi ea magna tempor veniam. "
- registered:
  
  "2020-07-15T11:06:26 -03:00"
- latitude:
  
  -60.058287
- longitude:
  
  88.480295
- tags:
  
  [] 7 items
- - 0:
    
    "occaecat"
  - 1:
    
    "pariatur"
  - 2:
    
    "dolor"
  - 3:
    
    "irure"
  - 4:
    
    "sit"
  - 5:
    
    "eu"
  - 6:
    
    "et"
- friends:
  
  [] 3 items
- - 0:
    
    {} 2 keys
  - - id:
      
      0
    - name:
      
      "Suarez Hale"
  - 1:
    
    {} 2 keys
  - - id:
      
      1
    - name:
      
      "Helen Pearson"
  - 2:
    
    {} 2 keys
  - - id:
      
      2
    - name:
      
      "Misty Rosario"
- greeting:
  
  "Hello, Winters Kirk! You have 3 unread messages."
- favoriteFruit:
  
  "banana"
4:

{} 22 keys
- _id:
  
  "6127d77cb75a6937b0cf29dc"
- index:
  
  4
- guid:
  
  "bbb12452-3b75-4d3e-b36b-6fcfff003537"
- isActive:
  
  true
- balance:
  
  "$2,406.91"
- picture:
  
  "http://placehold.it/32x32"
- age:
  
  26
- eyeColor:
  
  "green"
- name:
  
  "Hill Levine"
- gender:
  
  "male"
- company:
  
  "ZAJ"
- email:
  
  "hilllevine@zaj.com"
- phone:
  
  "+1 (987) 429-2624"
- address:
  
  "434 Cooke Court, Elfrida, Utah, 9346"
- about:
  
  "Pariatur elit est eiusmod aliquip eu ad consectetur velit qui proident sit. Elit irure magna ex voluptate occaecat. Amet veniam voluptate laboris Lorem minim id irure. Laborum eu proident qui est ex nulla deserunt commodo adipisicing qui irure ea cillum nulla. Ut culpa mollit Lorem fugiat laboris duis fugiat. Sint magna anim voluptate irure aliqua magna incididunt reprehenderit aute mollit reprehenderit quis mollit. "
- registered:
  
  "2015-11-20T07:07:25 -02:00"
- latitude:
  
  14.786267
- longitude:
  
  -28.163592
- tags:
  
  [] 7 items
- - 0:
    
    "id"
  - 1:
    
    "pariatur"
  - 2:
    
    "commodo"
  - 3:
    
    "laboris"
  - 4:
    
    "occaecat"
  - 5:
    
    "nulla"
  - 6:
    
    "nostrud"
- friends:
  
  [] 3 items
- - 0:
    
    {} 2 keys
  - - id:
      
      0
    - name:
      
      "Gladys Matthews"
  - 1:
    
    {} 2 keys
  - - id:
      
      1
    - name:
      
      "Pittman Lewis"
  - 2:
    
    {} 2 keys
  - - id:
      
      2
    - name:
      
      "Marci Pugh"
- greeting:
  
  "Hello, Hill Levine! You have 4 unread messages."
- favoriteFruit:
  
  "strawberry"
5:

{} 22 keys
- _id:
  
  "6127d77c8e3565e495329780"
- index:
  
  5
- guid:
  
  "e6b6f813-4081-4aae-a0bb-2dba74f15368"
- isActive:
  
  false
- balance:
  
  "$3,874.14"
- picture:
  
  "http://placehold.it/32x32"
- age:
  
  20
- eyeColor:
  
  "green"
- name:
  
  "Hawkins Benton"
- gender:
  
  "male"
- company:
  
  "COMVEYER"
- email:
  
  "hawkinsbenton@comveyer.com"
- phone:
  
  "+1 (863) 401-3632"
- address:
  
  "994 Havens Place, Cazadero, Arizona, 7731"
- about:
  
  "Deserunt culpa magna culpa sit aliqua eu ut enim ex aliquip quis sit ut qui. Id Lorem tempor Lorem do enim tempor tempor. Nisi proident commodo ea voluptate. Sint ad laborum proident nostrud incididunt deserunt quis amet. Anim exercitation do irure do eiusmod ad consequat aliqua et. "
- registered:
  
  "2016-12-24T11:40:01 -02:00"
- latitude:
  
  -74.812367
- longitude:
  
  161.825889
- tags:
  
  [] 7 items
- - 0:
    
    "irure"
  - 1:
    
    "velit"
  - 2:
    
    "excepteur"
  - 3:
    
    "cillum"
  - 4:
    
    "magna"
  - 5:
    
    "culpa"
  - 6:
    
    "ullamco"
- friends:
  
  [] 3 items
- - 0:
    
    {} 2 keys
  - - id:
      
      0
    - name:
      
      "Meyers Harrell"
  - 1:
    
    {} 2 keys
  - - id:
      
      1
    - name:
      
      "Rachael Rodriquez"
  - 2:
    
    {} 2 keys
  - - id:
      
      2
    - name:
      
      "Ila Vaughn"
- greeting:
  
  "Hello, Hawkins Benton! You have 10 unread messages."
- favoriteFruit:
  
  "strawberry"