Vue JSON Viewer Component

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

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,
		"themeMode": "inherit",
		"emptyText": "No JSON value."
	});
</script>

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

<script setup>
import '@getdom/studio/style.css';
import { DomJsonViewer } from '@getdom/studio';

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 '@getdom/studio/style.css';
import { DomJsonViewer } from '@getdom/studio';

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>