JSON viewer

<script setup>
import { reactive } from 'vue';
import { DomJsonViewer } from '@getdom/studio/vue';

const data = reactive({
	  "value": {
	    "ok": true,
	    "data": {
	      "id": "workspace_dom",
	      "status": "active",
	      "features": [
	        "docs",
	        "components",
	        "blocks"
	      ]
	    }
	  },
	  "title": "API response",
	  "description": "",
	  "filename": "response.json",
	  "mode": "tree",
	  "showModeToggle": true,
	  "showToolbar": true,
	  "copyable": true,
	  "parseStrings": true,
	  "indent": 2,
	  "expandedDepth": 2,
	  "previewLines": 0,
	  "density": "comfortable",
	  "framed": true,
	  "emptyText": "No JSON value."
	});
</script>

<template>
	<DomJsonViewer
		v-bind="data"
	/>
</template>

<script setup>
import { DomJsonViewer } from '../../../lib/vue';

const response = {
	ok: true,
	requestId: 'req_dom_7d91',
	data: {
		project: {
			id: 'proj_dom_studio',
			name: 'DOM Studio',
			plan: 'Team',
			features: ['components', 'blocks', 'themes', 'agent context'],
		},
		usage: {
			components: 68,
			blocks: 73,
			lastPublishedAt: '2026-07-05T09:30:00.000Z',
		},
	},
	meta: {
		source: 'api',
		durationMs: 42,
		cache: {
			hit: false,
			ttl: 60,
		},
	},
};
</script>

<template>
	<div class="w-full max-w-3xl">
		<DomJsonViewer
			:value="response"
			title="GET /api/projects/proj_dom_studio"
			description="Use tree mode to inspect nested data, or switch to highlighted source for copyable JSON."
			filename="project-response.json"
			:expanded-depth="3"
		/>
	</div>
</template>

<script setup>
import { DomJsonViewer } from '../../../lib/vue';

const webhookPayload = `{
	"event": "checkout.completed",
	"livemode": false,
	"created": "2026-07-05T09:42:13.000Z",
	"customer": {
		"id": "cus_1842",
		"email": "studio@example.com"
	},
	"items": [
		{
			"sku": "dom-source-access",
			"quantity": 1,
			"amount": 49900
		}
	],
	"metadata": {
		"workspace": "getdom.studio",
		"source": "docs-demo"
	}
}`;
</script>

<template>
	<div class="w-full max-w-3xl">
		<DomJsonViewer
			:value="webhookPayload"
			title="Webhook payload"
			description="String values are parsed and reformatted before rendering."
			filename="checkout.completed.json"
			mode="code"
			:preview-lines="14"
		/>
	</div>
</template>