Debug JSON with json.pub for Astro

README.md

StackBlitz Demo

Explainer Video

How to use:

save DebugJSON.astro file in your project and use like this:

---
import DebugJSON from './DebugJSON.astro';
---

<DebugJSON json={{myThing: 123}} />

It will look like a normal <pre> tag with json in it.

But if you click on it it's going to open that json in https://json.pub/ by @levelsio.

Because data is sent over hash part of the URL the author of that service promises not to store your json in their logs (you can trust in that as much as you want I guess).

DebugJSON.astro

---
type Props = {
	json: unknown;
};
---

<view-as-json><pre data-target="view-as-json:pre" set:text={JSON.stringify(Astro.props.json, null, 2)} /></view-as-json>
<script is:inline type="module">
	// @ts-ignore
	import { liftHtml } from 'https://esm.sh/@lift-html/[email protected]';
	// @ts-ignore
	import { findTarget } from 'https://esm.sh/@lift-html/[email protected]';
	// @ts-ignore
	import { compressToEncodedURIComponent } from 'https://esm.sh/[email protected]';

	liftHtml('view-as-json', {
		init() {
			const pre = findTarget(this, 'pre');
			pre.onclick = async () => {
				const url = new URL('https://json.pub/');
				url.hash = new URLSearchParams({ d: compressToEncodedURIComponent(pre.textContent ?? '') }).toString();
				window.open(url, '_blank');
			};
		},
	});
</script>
<style>
	view-as-json:defined pre {
		opacity: 0.7;

		&:hover {
			opacity: 1;
			cursor: pointer;
		}
	}
</style>