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

All versions since v0.3.1
All versions

v0.3.1

0.3.1 (2025-03-04)

Bug Fixes

  • avoid nested hover effect in preview (ed84629)
  • ensure keys have no hover effect when in preview scope (92fc262)
  • indent border-color for string, error and function (broken in previous release) (b56df83)
  • update function syntax highlight to properly use new css-var name introduced in the previous release (0a635d4)

v0.4.0

0.4.0 (2025-03-09)

Bug Fixes

Avoid any derived / effect using any option to be re-run when changing any (unrelated) option prop. This results in a big performance boost when changing options. (0b00ad3)

Features

Added new props onCopy, canCopy and onLog allowing implementing custom functionality for the “copy” and “log”-buttons. (875b1d3)

Example:

<Inspect
   onCopy={(value, type, path) => { /* custom copy function */ }}
   canCopy={(value, type, path) => { /* show / hide copy button if returns true */ }}
   onLog={(value, type, path) => { /* custom log function */ }}
/>

v0.4.1

0.4.1 (2025-03-11)

Bug Fixes

  • Fixed caret button not displaying correctly in safari (fb7a9b8)
  • Handle --indent css var without calculations (7e9eeed)
    • Add --padding and --padding-compact css vars
    • Add --indent-compact css var
  • Make buttons not trigger expand/collapse doubleclick when clicking fast (5e4d1db)

v0.5.0

0.5.0 (2025-03-17)

Bug Fixes

  • also display name of object constructor as type when the constructor does not start with “class” (dfad305)
  • avoid passing non html elements to html view. inspecting document should now work. (a5b87e5)
  • don’t display name, length and prototype as “static” when inspecting class constructors (f7093b8)
  • enable undefined to be displayed when previewing single values (e.g. promise results, getters, stores) (ab4c000)

Features

  • support for stores and observables. enable/disable with stores prop. enabled by default. (10980ff)

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)

v0.6.1

0.6.1 (2025-04-07)

Bug Fixes

v0.6.2

0.6.2 (2025-04-07)

Bug Fixes

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.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.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.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.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.2

0.8.2 (2025-06-16)

Bug Fixes

  • remove some unused code (8c66df2)

v0.8.3

0.8.3 (2025-06-16)

Bug Fixes

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

v0.8.4

0.8.4 (2025-06-17)

Bug Fixes

v0.8.5

0.8.5 (2025-08-03)

Bug Fixes

  • properly enumerate members of class instances (d43dc8b)

v0.9.0

0.9.0 (2025-08-19)

Persistence

  • Inspect.Panel can now be configured to persist changes to state / settings made through the UI (open state, appearance, alignment) (d970455)
    • Added width and height props to Inspect.Panel. These will be persisted when resizing the Panel.

Usage

<!-- Use default persist settings -->
<Inspect.Panel persist />
<!-- Use default persist settings with tab syncing enabled -->
<Inspect.Panel persistSync />
<!-- Use default persist settings with alternative key -->
<Inspect.Panel persist="todo-app-panel" />
<!-- Use default persist settings tab syncing enabled and alternative key -->
<Inspect.Panel persistSync="todo-app-panel" />
<!-- Use custom persist settings -->
<Inspect.Panel persist={{ key: 'todo-app-panel', storage: 'local', syncTabs: true }} />

v0.9.1

0.9.1 (2025-08-23)

Bug Fixes

  • rework resize logic and add reset resize-button (#44) (d999f32)

v0.9.2

0.9.2 (2025-09-05)

Bug Fixes

  • call onSettingsChange callback after retrieving persisted settings (e03a5f7)
  • make width and height-props of Inspect.Panel bindable (cc53a1b)
  • supress slide transition warning (1a82ed7)

v0.10.0

0.10.0 (2025-10-07)

Bug Fixes

  • add explicit search highlight styles to plain theme to work around hard-to-read overlapping transparent colors (30f6de9)

Features

  • add css vars to increase customization of text highlighting (81d2475)

Text highlight CSS vars:

--text-search-highlight-color
--text-search-highlight-fg-color
--text-search-highlight-border-top
--text-search-highlight-border-bottom
--text-search-highlight-border-left
--text-search-highlight-border-right
--text-search-highlight-outline
--text-search-highlight-decoration

v0.10.1

0.10.1 (2026-02-26)

Bug Fixes

  • invalid CSS var def for Vite 8 (50) (#51) (df36bff)
    • Fixes invalid CSS syntax that broke text search highlight color

v0.11.0

0.11.0 (2026-03-03)

Bug Fixes

  • invalid variable assignment breaking text search highlight color (457c669)
  • search hotkey should not trigger / prevent default if search is disabled (6f342de)

Features

  • make keyboard shortcuts configurable, disable-able, and change defaults to not collide with browser defaults. also make keyboard navigation and type-to-focus disable-able (120253f)

v0.11.1

0.11.1 (2026-04-25)

Bug Fixes

  • clicking setter input field could expand a row (e28aff2)
  • handle object prototype can be null (87e2e17)

v0.11.2 Latest

0.11.2 (2026-04-26)

Bug Fixes