Skip to content

Commit 67e4085

Browse files
committed
Update README
1 parent fa7cf1b commit 67e4085

File tree

1 file changed

+64
-1
lines changed

1 file changed

+64
-1
lines changed

README.md

+64-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,65 @@
11
# 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

0 commit comments

Comments
 (0)