File tree 1 file changed +64
-1
lines changed
1 file changed +64
-1
lines changed Original file line number Diff line number Diff line change 1
1
# svelte-json-view
2
- View JSON data prettily
2
+
3
+ > View JSON data prettily.
4
+
5
+ Display JSON data in a tree-like expandable view. Use as a Svelte component or in Vanilla JS.
6
+
7
+ ## Usage
8
+
9
+ Install the package:
10
+
11
+ ` $ npm i -D @zerodevx/svelte-json-view `
12
+
13
+ ### Svelte
14
+
15
+ If you're this in a Svelte app:
16
+
17
+ ``` html
18
+ <script >
19
+ import { JsonView } from ' @zerodevx/svelte-json-view'
20
+
21
+ const json = { foo: ' bar' }
22
+ </script >
23
+
24
+ <JsonView {json} />
25
+ ```
26
+
27
+ ### Vanilla JS
28
+
29
+ For other applications with a bundler:
30
+
31
+ ``` js
32
+ import { JsonView } from ' @zerodevx/svelte-json-view'
33
+
34
+ const app = new JsonView ({
35
+ target: document .body , // node to render into
36
+ props: {
37
+ json: { foo: ' bar' } // data to prettify
38
+ }
39
+ })
40
+ ```
41
+
42
+ ## Props
43
+
44
+ ` json ` : Un-stringified object to pass in
45
+
46
+ ` depth ` : Initial expansion depth (defaults to ` Infinity ` )
47
+
48
+ ## CSS vars
49
+
50
+ ``` css
51
+ ul {
52
+ padding-left : var (--nodePaddingLeft ,1rem );
53
+ border-left : var (--nodeBorderLeft ,1px dotted #9CA3AF );
54
+ color : var (--nodeColor ,#374151 )
55
+ }
56
+ .bracket :hover { background : var (--bracketHoverBackground ,#D1D5DB ); }
57
+ .val { color : var (--leafDefaultColor ,#9CA3AF ) }
58
+ .val.string { color : var (--leafStringColor , #059669 ); }
59
+ .val.number { color : var (--leafNumberColor , #D97706 ); }
60
+ .val.boolean { color : var (--leafBooleanColor , #2563EB ); }
61
+ ```
62
+
63
+ ## License
64
+
65
+ ISC
You can’t perform that action at this time.
0 commit comments