HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Object InspectorView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA structured value shown as a tree, where you can close branches,
see how many entries each holds, and copy any part.StableSince 0.1.0DataUsageimport'@fusion.dev/helix/object-inspector'import'@fusion.dev/helix-headless/object-inspector'Preview
API ReferenceRoothelix-object-inspectorA structured value shown as a tree, where you can close branches,
see how many entries each holds, and copy any part.
PropTypeDescriptionactivestringThe active row's path, such as /meta/tags/0, and the empty string for the
root.copyLabelstringDefault"Copy {name}"The copy button's accessible name on a row with a key, with the key filled
in as {name}.copyValueLabelstringDefault"Copy value"The copy button's accessible name on a row without a key, such as the root.defaultDepthnumberDefault1How many levels start open.emptyLabelstringDefault"Nothing to show"What the tree says while there is no value to show, such as before a
fetch answers. The empty slot replaces it.expandedstring[]The open branches, by path, in no set order.filterstringDefault""Text the tree is narrowed to: the entries whose key or value holds it,
ignoring case, and the branches that lead to them. Empty shows everything.filterablebooleanDefaultfalseWhether to show a field that sets filter.filterLabelstringDefault"Filter"The filter field's placeholder and accessible name.forstringDefault""The id of a <script type="application/json"> holding the value.itemLabelstringHow an array of one entry counts it, where items-label should not say
it. {count} is the count.itemsLabelstringDefault"{count, plural, one {# item} other {# items}}"How an array counts its entries. {count} is the count, written in the
locale, and each language writes the forms it has: {count, plural, one {# element} few {# elementy} many {# elementów} other {# elementu}}.keyLabelstringHow an object of one key counts it, where keys-label should not say it.
{count} is the count.keysLabelstringDefault"{count, plural, one {# key} other {# keys}}"How an object counts its keys. {count} is the count, written in the
locale, and each language writes the forms it has: {count, plural, one {# klucz} few {# klucze} many {# kluczy} other {# klucza}}.labelstringDefault""Accessible name for the tree, and the text of the header where there is one.noCopybooleanDefaultfalseHides the copy button.noMatchesLabelstringDefault"No matches"What the tree says while a filter matched no entry. The empty slot
replaces it.renderValueObjectInspectorRendererDraws an entry's value your way, given the value and its entry. Set it as
a property.resultLabelstringWhat a screen reader hears when a filter matches one entry, where
results-label should not say it. {count} is the count.resultsLabelstringDefault"{count, plural, one {# result} other {# results}}"What a screen reader hears when a filter matches entries. {count} is
how many, written in the locale, and each language writes the forms it
has: {count, plural, one {# wynik} few {# wyniki} many {# wyników} other {# wyniku}}.treeLabelstringDefault"Value"The tree's accessible name when label is empty and the host names it
with neither aria-label nor aria-labelledby.valueunknownThe value to show, when your code already holds it as an object.windowedbooleanDefaultfalseWhether to draw only the rows in view.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionemptyShown in the tree while it has no entries to show. Defaults to empty-label, or no-matches-label while a filter matched none.
EventTypeDescriptionhelix-activateHelixActivateEventThe active row moved, by a key or a click. The detail's value is its path.helix-before-activateHelixBeforeActivateEventThe active row is about to move, with its new path. Cancelable: cancel it to keep the row where it is.helix-before-closeHelixBeforeCloseEventA reader is about to close the active branch. Cancelable: cancel it to keep the branch open.helix-before-openHelixBeforeOpenEventA reader is about to open the active branch, or * the branches beside it. Cancelable: cancel it to keep them closed.helix-copyHelixCopyEventA value was put on the clipboard, from the copy button or the keyboard.helix-filterHelixFilterEventText was typed in the filter field, with what it now holds. Cancelable: cancel it to keep the filter as it was.helix-filteredHelixFilteredEventThe filter field changed filter, which now holds the text.toggleToggleEventA reader opened or closed a branch, with newState and oldState. expanded holds every open branch.
MethodTypeDescriptionfocus(options: FocusOptions) => voidMoves focus to the row the keys move from, or to the tree while that row
is scrolled out of the window, as Tab reaches them.
PartDescriptionafterThe space the rows below the drawn rows would take, when windowed is set.beforeThe space the rows above the drawn rows would take, when windowed is set.booleanA true or false.copyThe copy button, which copies the active row.copy-buttonThe button inside the copy control.copy-liveThe live region inside the copy button, which says its pending-label when the copy becomes pending under focus.copy-markThe clipboard icon, and the confirmation icon that replaces it.copy-spinnerThe ring the copy button turns while it is pending.copy-textThe words on that button, trimmed to their capitals and baseline.copy-tooltip-arrowThe tooltip's arrow, pointing at the copy button.copy-tooltip-arrow-bottomThe arrow while the tooltip is below the copy button, on the tooltip's top edge. Set alongside copy-tooltip-arrow.copy-tooltip-arrow-leftThe arrow while the tooltip is left of the copy button, on the tooltip's right edge. Set alongside copy-tooltip-arrow.copy-tooltip-arrow-rightThe arrow while the tooltip is right of the copy button, on the tooltip's left edge. Set alongside copy-tooltip-arrow.copy-tooltip-arrow-topThe arrow while the tooltip is above the copy button, on the tooltip's bottom edge. Set alongside copy-tooltip-arrow.copy-tooltip-surfaceThe tooltip, forwarded from the copy button's tooltip.copy-tooltip-surface-bottomThe tooltip while it is below the copy button. Set alongside copy-tooltip-surface.copy-tooltip-surface-leftThe tooltip while it is left of the copy button. Set alongside copy-tooltip-surface.copy-tooltip-surface-rightThe tooltip while it is right of the copy button. Set alongside copy-tooltip-surface.copy-tooltip-surface-topThe tooltip while it is above the copy button. Set alongside copy-tooltip-surface.countThe number of entries a branch holds.emptyThe row shown in the tree while it has no entries to show: no value, or a filter that matched none. It holds the empty slot.frameThe tree and the copy button beside it.headerThe bar that holds the label, when there is one.keyA property name or an array index.labelThe label.liveHow many entries a filter matched, in a region that screen readers announce when it changes. Drawn from the first filter on. Visually hidden in the styled tier.nullA null.numberA number.rowOne entry, as a row of the tree grid, which takes focus.row-activeThe entry the keyboard is on, which holds the tab stop. Set alongside row.row-matchAn entry whose key or value holds the filter. Set alongside row.search-fieldThe field that sets filter, with filterable.stringA string, in quotes.summaryThe brackets that stand for a branch's contents.toggleThe caret on a branch. It points down when the branch is open and sideways when it is closed.treeThe tree grid that holds the rows.valueWhat renderValue drew for an entry, in place of its own drawing.
CSS PropertyDescription--object-inspector-background-colorThe background of the tree.--object-inspector-block-sizeThe height of the scrolling box when windowed is set.--object-inspector-border-colorThe color of the edge around the tree and its header.--object-inspector-header-background-colorThe background of the bar that holds the label.--object-inspector-levelHow deep a row is, from 0 at the root, for indenting it.--object-inspector-match-background-colorThe background of an entry a filter matched.--object-inspector-radiusThe corner radius of the tree.
Custom stateDescriptionemptyWhile the tree has no entries to show: no value, or a filter that matched none.filteredWhile filter holds text.matchedWhile filter holds text and matched at least one entry.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-object-inspectorA structured value shown as a tree, where you can close branches,
see how many entries each holds, and copy any part.
PropTypeDescriptionactivestringThe active row's path, such as /meta/tags/0, and the empty string for the
root.copyLabelstringDefault"Copy {name}"The copy button's accessible name on a row with a key, with the key filled
in as {name}.copyValueLabelstringDefault"Copy value"The copy button's accessible name on a row without a key, such as the root.defaultDepthnumberDefault1How many levels start open.emptyLabelstringDefault"Nothing to show"What the tree says while there is no value to show, such as before a
fetch answers. The empty slot replaces it.expandedstring[]The open branches, by path, in no set order.filterstringDefault""Text the tree is narrowed to: the entries whose key or value holds it,
ignoring case, and the branches that lead to them. Empty shows everything.filterablebooleanDefaultfalseWhether to show a field that sets filter.filterLabelstringDefault"Filter"The filter field's placeholder and accessible name.forstringDefault""The id of a <script type="application/json"> holding the value.itemLabelstringHow an array of one entry counts it, where items-label should not say
it. {count} is the count.itemsLabelstringDefault"{count, plural, one {# item} other {# items}}"How an array counts its entries. {count} is the count, written in the
locale, and each language writes the forms it has: {count, plural, one {# element} few {# elementy} many {# elementów} other {# elementu}}.keyLabelstringHow an object of one key counts it, where keys-label should not say it.
{count} is the count.keysLabelstringDefault"{count, plural, one {# key} other {# keys}}"How an object counts its keys. {count} is the count, written in the
locale, and each language writes the forms it has: {count, plural, one {# klucz} few {# klucze} many {# kluczy} other {# klucza}}.labelstringDefault""Accessible name for the tree, and the text of the header where there is one.noCopybooleanDefaultfalseHides the copy button.noMatchesLabelstringDefault"No matches"What the tree says while a filter matched no entry. The empty slot
replaces it.renderValueObjectInspectorRendererDraws an entry's value your way, given the value and its entry. Set it as
a property.resultLabelstringWhat a screen reader hears when a filter matches one entry, where
results-label should not say it. {count} is the count.resultsLabelstringDefault"{count, plural, one {# result} other {# results}}"What a screen reader hears when a filter matches entries. {count} is
how many, written in the locale, and each language writes the forms it
has: {count, plural, one {# wynik} few {# wyniki} many {# wyników} other {# wyniku}}.treeLabelstringDefault"Value"The tree's accessible name when label is empty and the host names it
with neither aria-label nor aria-labelledby.valueunknownThe value to show, when your code already holds it as an object.windowedbooleanDefaultfalseWhether to draw only the rows in view.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionemptyShown in the tree while it has no entries to show. Defaults to empty-label, or no-matches-label while a filter matched none.
EventTypeDescriptionhelix-activateHelixActivateEventThe active row moved, by a key or a click. The detail's value is its path.helix-before-activateHelixBeforeActivateEventThe active row is about to move, with its new path. Cancelable: cancel it to keep the row where it is.helix-before-closeHelixBeforeCloseEventA reader is about to close the active branch. Cancelable: cancel it to keep the branch open.helix-before-openHelixBeforeOpenEventA reader is about to open the active branch, or * the branches beside it. Cancelable: cancel it to keep them closed.helix-copyHelixCopyEventA value was put on the clipboard, from the copy button or the keyboard.helix-filterHelixFilterEventText was typed in the filter field, with what it now holds. Cancelable: cancel it to keep the filter as it was.helix-filteredHelixFilteredEventThe filter field changed filter, which now holds the text.toggleToggleEventA reader opened or closed a branch, with newState and oldState. expanded holds every open branch.
MethodTypeDescriptionfocus(options: FocusOptions) => voidMoves focus to the row the keys move from, or to the tree while that row
is scrolled out of the window, as Tab reaches them.
PartDescriptionafterThe space the rows below the drawn rows would take, when windowed is set.beforeThe space the rows above the drawn rows would take, when windowed is set.booleanA true or false.copyThe copy button, which copies the active row.copy-buttonThe button inside the copy control.copy-liveThe live region inside the copy button, which says its pending-label when the copy becomes pending under focus.copy-markThe clipboard icon, and the confirmation icon that replaces it.copy-spinnerThe ring the copy button turns while it is pending.copy-textThe words on that button, trimmed to their capitals and baseline.copy-tooltip-arrowThe tooltip's arrow, pointing at the copy button.copy-tooltip-arrow-bottomThe arrow while the tooltip is below the copy button, on the tooltip's top edge. Set alongside copy-tooltip-arrow.copy-tooltip-arrow-leftThe arrow while the tooltip is left of the copy button, on the tooltip's right edge. Set alongside copy-tooltip-arrow.copy-tooltip-arrow-rightThe arrow while the tooltip is right of the copy button, on the tooltip's left edge. Set alongside copy-tooltip-arrow.copy-tooltip-arrow-topThe arrow while the tooltip is above the copy button, on the tooltip's bottom edge. Set alongside copy-tooltip-arrow.copy-tooltip-surfaceThe tooltip, forwarded from the copy button's tooltip.copy-tooltip-surface-bottomThe tooltip while it is below the copy button. Set alongside copy-tooltip-surface.copy-tooltip-surface-leftThe tooltip while it is left of the copy button. Set alongside copy-tooltip-surface.copy-tooltip-surface-rightThe tooltip while it is right of the copy button. Set alongside copy-tooltip-surface.copy-tooltip-surface-topThe tooltip while it is above the copy button. Set alongside copy-tooltip-surface.countThe number of entries a branch holds.emptyThe row shown in the tree while it has no entries to show: no value, or a filter that matched none. It holds the empty slot.frameThe tree and the copy button beside it.headerThe bar that holds the label, when there is one.keyA property name or an array index.labelThe label.liveHow many entries a filter matched, in a region that screen readers announce when it changes. Drawn from the first filter on. Visually hidden in the styled tier.nullA null.numberA number.rowOne entry, as a row of the tree grid, which takes focus.row-activeThe entry the keyboard is on, which holds the tab stop. Set alongside row.row-matchAn entry whose key or value holds the filter. Set alongside row.search-fieldThe field that sets filter, with filterable.stringA string, in quotes.summaryThe brackets that stand for a branch's contents.toggleThe caret on a branch. It points down when the branch is open and sideways when it is closed.treeThe tree grid that holds the rows.valueWhat renderValue drew for an entry, in place of its own drawing.
CSS PropertyDescription--object-inspector-levelHow deep a row is, from 0 at the root, for indenting it.
Custom stateDescriptionemptyWhile the tree has no entries to show: no value, or a filter that matched none.filteredWhile filter holds text.matchedWhile filter holds text and matched at least one entry.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionFilterA filter field over the tree. Type part of a key or a value to see only the entries that hold it, with the branches around them open.PreviewAn API response with its first two levels open. Open a branch to read it, and copy the part you need.PreviewAn API response with its first two levels open. Open a branch to read it, and copy the part you need.WindowedTen thousand entries, with only the rows in view drawn. Screen readers still announce each row's position in the whole value.