<script> // container element: add class `jid` // import 'json-in-details/styles.css'; import { generate_HTML } from 'json-in-details';  const json_object = JSON.parse('{"hello":"world"}'); const html = generate_HTML(json_object, { escape_HTML: false, show_newline_chars: false }); // console.log(html) </script> <div class="jid">{@html html}</div>

<script> // import 'json-in-details/styles.css'; import init from 'json-in-details'; import { get_path, generate_HTML, handle_keymaps } from 'json-in-details';  let path = '?';  const container_id = 'my-jid'; const container_selector = `#${container_id}`;  const { collapse, expand, filter } = init(container_selector);  const json_object = JSON.parse('{"hello":"world","foo":{"bar":123}}'); const html = generate_HTML(json_object, { escape_HTML: true, show_newline_chars: false,  clickable_link: 0 // default // 0 = no // 1 = str starts with "/" or "http(s)://" // 2 = srt starts with "http(s)://" // 3 = str is a valid URL }); // console.log(html) </script> <button on:click={collapse}>collapse</button> <button on:click={expand}>expand</button> <label>	<span>Filter</span>	<input type="text" on:input={(ev) => filter(ev.currentTarget.value)} /> </label> <p>Path: {path}</p> <code id={container_id} class="jid" on:keydown={handle_keymaps} on:focusin={(ev) => (path = get_path(ev))} on:click={(ev) => { /** @type {HTMLElement } */ const elem = ev.target; if (elem.className === 'jid--dtl') { elem.querySelector('summary').focus();	}	}} >	{@html html} </code>