Skip to content
Svelte Inspect Value Svelte Inspect Value Svelte <Inspect {value} />

Changelog

v0.8.3

0.8.3 (2025-06-16)

Bug Fixes

  • update svelte version in README playground link (5d7c133)

v0.8.2

0.8.2 (2025-06-16)

Bug Fixes

  • remove some unused code (8c66df2)

v0.8.1

0.8.1 (2025-06-16)

Changes

  • Make collapse-buttons of Promise values flash when their state changes
  • Fix: remove unused Icons to reduce package size
  • Fix: made bigint values “copy to clipboard”-able
  • Fix: Properly forward attachments to root element of Inspect(.Values) and Inspect.Panel
    • For Inspect.Values, spreading an object with a non-attachment Symbol key will still inspect it, e.g. <Inspect.Values {...{ [Symbol('foo')]: 'hi' }} />
    • Since Svelte 5.29, using attachments with Inspect.Values will only have inspected the attachments as values.
  • Internal actions have all been ported to attachments
  • Fix / New: Export inspectElement attachment (previously unexported action)
    • Utility for quickly inspecting elements with Inspect.Panel
  • Perf: Ensure all Svelte {#each}-blocks are keyed across the library

v0.8.0

0.8.0 (2025-06-07)

This update largely focuses on improving user-interactions of the Inspect-component as well as improving its look and feel.

🔎 Search / Filter

Suggested by @cycle4passion (#29)

If the option / prop search is set to 'highlight', true | 'filter' or 'filter-strict', a search bar will be visible in the heading of the Inspect-component. This feature is disabled by default for now.

Typing a query and hitting the enter key (or clicking the magnifying glass) performs a deep indexed search of inspected values, and depending on the value of the search option will display search results in one of three ways:

  • 'highlight' — matching value-nodes (and their parents)will be expanded and highlighted with their “bullets” or expand-buttons set to a different color.
  • 'filter' | true — non-matching value-nodes will be hidden, except for their siblings and parents
  • 'filter-strict' — only matching value-nodes and parent nodes will be displayed

By default, a query can match paths, types and the value itself. You can narrow/expand searches with multiple terms, and/or-mode and field-prefixes like path:, key:, type: and value:.

Look for all the details on how the search-functionality works in the documentation (look for the “usage”-page.)

🔦 Text Highlighting

The search-bar will also result in matching text being highlighted as you type queries. This is enabled by default and can be disabled by setting the option / prop highlightMatches to false.

While Text Highlighting also supports narrowing with multiple terms and field-prefixes, searching and text highlighting is not 1:1 and you might not see highlighted values count as matches. This is mostly dependent on “and/or”-mode and whether or not a value was indexable.

⌨ Keyboard Controls

Value-nodes are now focusable and keyboard-control for controlling focus and expandable nodes have been implemented.

Some examples:

  • ↑ / ↓ — focuses previous/next nodes
  • → / ← — expands / collapses expandable nodes or jumps in and out of an expandable “scope”
  • Enter — expand a node and focus its first child node.
  • ctrl / cmd + f — focus the search bar
  • ctrl / cmd + e — expand all top-level nodes
  • ctrl / cmd + c — collapse all top-level nodes

See the full list of keyboard-shortcuts in the documentation.

🔤 Type to Focus

While a node is focused, type anything and any visible node with matching text will be focused.

⚡️ Animation / transition speed changes

Suggested by @braebo (#40)

The transition speed for expanding / collapsing nodes was set to 600ms, which was too many milliseconds when a quick google search suggests between 100 and 500ms for interactivity on the web.

The new default speed has been lowered 250ms, but can be increased/decreased with the new option / prop animRate. Setting animRate to 0.5 will double transition speeds and setting it to 2 will halve them. By default it is set to 1. This setting controls both Svelte in/out transitions as well as CSS-animations like hover-effects, opening/closing panels, etc.

The new easing-prop takes any easing function with the same signature as easings imported from svelte/easing. This can be used to control expand/collapse transitions further.

⚙️ Inspect.Panel onSettingsChange callback

Suggested by @mifopen (#38)

A callback that runs if any Panel-settings are changed using the UI. This can be used for persisting Panel-settings.

🐛 Bugs fixed

  • Values added to Inspect.Panel from other Inspect-instances are no longer removed if their parent nodes were collapsed, but “cleaned up” when the Inspect-instance unmounts.
  • Internally, not all nodes had all props forwarded, meaning they wouldn’t have notes displayed among other things.

🗞️ Other

  • Inspect.Values or Inspect(.Panel) with the values-prop set now have an expand/collapse and “log to console”-buttons in its heading (if enabled)
  • The heading-prop is now considered an option-prop meaning it can be configured via option-providers (and Inspect.Values can have a heading)
  • The heading-prop can now be set to true to simply display it. It will also render if search is enabled
  • If heading is a Snippet, it now has a boolean parameter indicating if the instance is collapsed
  • New, nicer and more consistent icons for icon-buttons in node-toolbar and headings.
  • Removed default inline/left/right padding
    • The CSS-variables --padding and --padding-compact can be used to restore the original 0.25em padding if desired
  • New CSS-variable: --text-search-highlight-color — sets the background-color for highlighted text and bullet/collapse-button of matching nodes. Set to var(--base0A) by default (string color)
  • Removed unique styling for node tool-buttons when borderless was active (Just one less thing to maintain)

v0.7.2

0.7.2 (2025-04-28)

Bug Fixes

  • dont expand / collapse on row doubleclick / key click if collapsebutton also disabled (4708f2c)
  • vastly reduce amount of properties with transitions (css) (17fcb33)

v0.7.1

0.7.1 (2025-04-26)

Bug Fixes

  • use smaller image in readme (4bea692)
    • also dont use “readme” for image file name to prevent it to be bundled in npm package

v0.7.0

0.7.0 (2025-04-26)

Features

  • Inspect.Panel - a fixed position drawer/panel version of Inspect (506a81f)
  • new option for displaying stores - 'value-only' - simply shows store value, skipping extra properties on store / observable. Displays a note that it’s a store. (6a649ff)
  • new prop values - like Inspect.Values will list all enumerable properties of passed value (781331a)
  • Move position of node notes (“json” / “store” etc.)

Bug Fixes

  • object view could error if value went from object to undefined or null (6946c57)
  • pass restprops to promiseview (c931d0e)

v0.6.2

0.6.2 (2025-04-07)

Bug Fixes

v0.6.1

0.6.1 (2025-04-07)

Bug Fixes

v0.6.0

0.6.0 (2025-04-07)

Bug Fixes

  • handle asyncgenerator and asyncIterator (9c05a4b)
  • InspectErrorView now hides error-value behind a getter as to avoid recursive erroring (0f9b949)
  • make max initial expandLevel 30 to avoid range error (b169660)

Features

  • “plain” theme now uses currentColor and css color-mix to make what should be a readable theme (74eb078)
  • Inspect.Values, a version of Inspect that will inspect any value passed to it. It inherits options set via setGlobalInspectOptions / InspectOptionsProvider but can also be configured using Inspect.Values.withOptions or chainable inline configurations in the template, like so: <Inspect.Values.Config.DarkTheme.Ok /> (7598ce1)
  • add “none” alternative to quotes prop (7574fb0)