jsonviewer/sample.html at main · neknaj/jsonviewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<html>
    <head>
        <meta charset="UTF-8">
        <script src="./jsonviewer.js"></script>
        <link href="./jsonviewer.css" rel="stylesheet">
            <meta property="og:title" content="JSON Viewer">
            <meta property="og:description" content="JSON Viewer">
            <meta property="description" content="JSON Viewer">
    </head>
    <body>
        <textarea id="editor" spellcheck="false" wrap="off">{
    "messages": [
        {
            "id": "@alice",
            "message": {"text":["Hey Bob!","I'm sleepy"],"file":[{"type":"image","url":"https://example.com/image.png"}]},
            "timestamp": 1705209265405
        },
        {
            "id": "@bob",
            "message": {"text":["OK"]},
            "timestamp": 1705209565405
        }
    ],
    "member": {
        "@alice": {
            "name": "Alice",
            "icon_url": "https://example.com/icon1.png",
            "bot": false
        },
        "@bob": {
            "name": "Bob",
            "icon_url": "https://example.com/icon2.png",
            "bot": true
        }
    }
}</textarea>
        <div id="output"></div>
    </body>
</html>
<script>
let editor = document.getElementById("editor");
function update() {
    let data;
    try {
        data = JSON.parse(editor.value);
    }
    catch (e) {
        data = {error: e.message};
    }
    showJSON(data,document.getElementById("output"),true);
}
window.onload = update;
editor.onchange = update;
editor.oninput = update;
</script>
<style>
    body {
        background-color: black;
        color: white;
        height: 100dvh;
        width: 100dvw;
        padding: 0;
        margin: 0;
        font-size: 1.2rem;
        display: flex;
    }
    body>div {
        width: 100%;
        border: 1px solid gray;
    }
    #editor {
        font-size: 1em;
        background: transparent;
        color: white;
        outline: none;
        border: 1px solid gray;
        resize: none;
        overflow: scroll;
        line-height: 1.1em;
        width: 100%;
        height: calc((100%-50px));
    }
</style>