Custom Components

Svelte <Inspect {value} /> Custom components makes it possible to override how certain types are displayed.

Note

The API for “single line values” is pretty usable while the API for expandable / nested values is unfinished.

How to

Custom components are defined by setting customComponents either as a prop or using global options.

The value is an object in this format:

import {
  CustomDateComponent,
  CustomStringComponent,
  CustomNumberComponent
} from './components.js'

const customComponents = {
  // key is the "type view" component that is to be overriden (lowercase)
  // value is array with component as first value
  date: [CustomDateComponent],
  // custom component entry with optional props transform function
  string: [CustomStringComponent, (props) => ({ value: props.value.repeat(2) })],
  // custom component entry with optional props transform function and
  // optional predicate that will revert to default component if false is returned
  number: [
    CustomNumberComponent,
    (props) => props,
    (props) => props.value > 1000
  ]
}

Minimal Example

Here’s a minimal example that defines a custom component for number values. It simply displays numbers upside down.

App.svelte

<script lang="ts">
  import Inspect from 'svelte-inspect-value'
  import GoofyNumber from './GoofyNumber.svelte'

  const value = {
    oneBillion: 1000000000,
    oneTwoThreeFourEtc: 1234567890,
    etc: [Infinity, NaN],
  }
</script>

<Inspect
  {value}
  name="numbersAndColors"
  customComponents={{
    // passed as array
    number: [GoofyNumber]
  }}
/>

GoofyNumber.svelte

<script lang="ts">
  import { CustomLine, type CustomComponentProps } from 'svelte-inspect-value'

  let { value, ...rest }: CustomComponentProps<number> = $props()
</script>

<CustomLine {value} {...rest}>
  <!-- the "value" and "number" css classes are internally defined -->
  <span class="value number">{value}</span>
</CustomLine>

<style>
  span {
    rotate: 180deg;
  }
</style>

Result

numbersAndColors

:

obj

3 entries

oneBillion

:

num 1000000000

oneTwoThreeFourEtc

:

num 1234567890

etc

:

arr

[

Infinity

,

NaN

]

2 items

Svelte Playground

---

Helper Function

When using TypeScript, the helper function addComponent will ensure proper typing for the custom components props when using props transform functions and “revert to default” predicates.

App.svelte

<script lang="ts">
  import Inspect, { type CustomComponents, addComponent} from 'svelte-inspect-value'
  import HexString from './HexString.svelte'
  import CustomNumber from './CustomNumber.svelte'
  import CustomDate from './CustomDate.svelte'

  let showString = $state(false)
  let useDefault = $state(false)

  const components: CustomComponents = {
    // Second item of tuple is an optional function that enables
    // transforming props before they are passed to the custom component
    number: [CustomNumber, (props) => ({ value: props.value.toFixed(2) })],
    // if no transform is needed:
    date: [CustomDate],
    // Using the exported helper function enables proper typing for props
    // NOTE: the returned props can be considered overrides for props passed by Inspect
    // and does not need to be complete
    string: addComponent(
      HexString,
      // Optional props transform.
      // The custom prop `showString` will be reactive
      (props) => ({ showString, value: props.value }),
      // Optional predicate determines if custom component should be used (if true)
      // Uses default component if false
      (props) => props.value.startsWith('#') && !useDefault
    )
  }

  const value = {
    red: '#FF0000',
    pink: '#FF00FF',
    yella: '#FFFF00',
    notAColor: 'hello',
  }
</script>

<Inspect
  {value}
  name="colors"
  customComponents={components}
/>

<label>
  show string
  <input type="checkbox" bind:checked={showString} />
</label>
<label>
  use default
  <input type="checkbox" bind:checked={useDefault} />
</label>

HexString.svelte

<script lang="ts">
  import { CustomLine, type CustomComponentProps } from 'svelte-inspect-value'

  type Props = CustomComponentProps<string, 'string', { showString?: boolean }>

  let { value, showString = true, ...rest }: Props = $props()

  let isColor = $derived(value.startsWith('#'))
</script>

<CustomLine {value} {...rest}>
  <div class="color" style="background-color: {value};" title={value}>
    {#if showString}
      <div class="text">{value}</div>
    {/if}
  </div>
</CustomLine>

<style>
  .color {
    width: 3em;
    height: 1em;
    border: 1px solid var(--_border-color);
    border-radius: 2px;
    margin-inline: 0.25em;
  }
</style>

Result

colors

:

obj

4 entries

red

:

str

pink

:

str

yella

:

str

notAColor

:

str 'hello'

5 chars

show string value use default

Svelte Playground

Error Handling

If any component, built-in or custom, should throw an error it will be caught by a boundary on an entry-per-entry basis and render error details.

customString

:

obj

2 entries

'clickToError��'

:

str click me

hey

:

str dont click me i will error

The error value display component reverts to using default components to avoid further issues.