Events

JsonViewer emits two events. Both payloads are exported as TypeScript types.

Event	Payload type	Fired when
toggle	ToggleEventPayload	a node is expanded or collapsed
copy	CopyEventPayload	a node's value is copied

toggle

Emitted when a user toggles an individual node (clicking its key, brackets, type badge, or count label).

Expand All / Collapse All don't emit

The root "Expand All" / "Collapse All" controls reset the shared baseline in one operation and do not emit a toggle for each node. Listen to those buttons separately if you need to react to them.

interface ToggleEventPayload {
  /** JSONPath-style path of the toggled node, e.g. `$.address` or `$.items[0]`. */
  path: string;
  /** Key/index of the toggled node within its parent (`''` for the root). */
  key: string;
  /** The node's new expanded state. */
  expanded: boolean;
}

<JsonViewer :data="data" @toggle="onToggle" />

function onToggle(payload: ToggleEventPayload) {
  // { path: '$.address', key: 'address', expanded: false }
}

copy

Emitted only after a value is successfully written to the clipboard.

interface CopyEventPayload {
  /** JSONPath-style path of the copied node. */
  path: string;
  /** Key/index of the copied node within its parent (`''` for the root). */
  key: string;
  /** The copied value (the same reference shown in the tree). */
  value: JsonValue;
}

<JsonViewer :data="data" @copy="onCopy" />

function onCopy(payload: CopyEventPayload) {
  // { path: '$.user.email', key: 'email', value: 'ada@example.com' }
}

The path Format

path is a stable, unique JSONPath-style identifier:

Node	path
Root	$
Object key address	$.address
Nested key city	$.address.city
Array item at index 0	$.items[0]
Non-identifier key order.id	$["order.id"]

Identifier-safe keys use dot notation; any other key is bracket-quoted so a key containing a . can never be confused with a nested path.

Typed Emits Interface

The combined emits signature is exported as JsonViewerEmits:

import type {
  JsonViewerEmits,
  ToggleEventPayload,
  CopyEventPayload,
} from '@anilkumarthakur/vue3-json-viewer';

interface JsonViewerEmits {
  (event: 'toggle', payload: ToggleEventPayload): void;
  (event: 'copy', payload: CopyEventPayload): void;
}

Live Example

obj{

"id": 1,

"user":obj{

"name": "Ada",

"email": "ada@example.com"

},

"tags":2[

"vue",

"json"

]

}

Interact with the viewer — toggle a node or copy a value — to see events here.

Notes

• The toggle event fires only for the specific node a user toggles. "Expand All" / "Collapse All" reset the shared baseline and clear per-node overrides in a single operation — they do not emit a toggle per node.
• copy does not fire on failure (e.g. a circular value that can't be serialized). See Copy to Clipboard.