Metadata viewer
JSON-aware key and value metadata.
Guidance
The metadata viewer shows the key and value metadata a plugin recorded for an asset: Snowflake
clustering keys and retention, dbt materialisation and dependencies, Kafka topic config. Top-level
keys read as a description list, keys in quiet mono (people copy them) and values beside them;
nested objects and lists of objects fold away behind a preview of their keys, and clicking anywhere
on such a row opens it. Every value uses the text face and ink: URLs as links (underlined on hover
and focus), ISO dates formatted with the raw value in a tooltip, numbers with tabular figures,
true and false as "Yes" and "No", null as "Not set". Lists of plain values read inline, comma
separated. Every row offers "Copy value" and "Copy path"
(e.g. metadata.config.materialized) on hover and focus. Search filters keys and values and
opens the path to each match. "View raw JSON" swaps the list for the pretty-printed JSON on the
code ground.
It is a tree (https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) with a roving tab stop: Down
and Up move, Right expands or moves to the first child, Left collapses or moves to the parent
(flipped in right-to-left), Home and End jump, Enter toggles a nested value or follows a link,
* expands siblings and typing a key name moves to it. Tab moves to the focused row's copy
buttons.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
metadata | unknown | {} | The metadata object (or any JSON value). | |
label | label | string | '' | Accessible name, e.g. "Metadata of shop.public.orders". |
rootPath | root-path | string | 'metadata' | Prefix for copied paths. |
raw | raw | boolean | false | Show the pretty-printed JSON instead of the list. |
search | search | string | '' | Search text that filters keys and values. |
hideToolbar | hide-toolbar | boolean | false | Hides the search, raw toggle and readout. |
emptyText | empty-text | string | '' | Sentence for the empty state. |
expandDepth | expand-depth | number | 0 | Nested values open on first render down to this depth (0 keeps everything folded). |
Events
| Event | Detail | Description |
|---|---|---|
mm-copy | CustomEvent<{ value: string, kind: 'value' | 'path' }> | A value or path was copied. |
mm-toggle-raw | CustomEvent<{ raw: boolean }> | The raw JSON view was turned on or off. |
CSS parts
| Part | Description |
|---|---|
toolbar | The search, raw toggle and key count row. |
tree | The element with role tree. |
row | Each row. |
raw | The raw JSON code sample. |
CSS custom properties
| Property | Description |
|---|---|
--mm-metadata-key-width | Width of the key column. Defaults to 12rem. |
Examples
Every state of mm-metadata-viewer in Storybook, with keyboard and screen reader tests.