Monitor

Wraps the Tweakpane monitor binding functionality for boolean, number, and string values.

Technically, any unbound value on a normal Svelte Tweakpane UI component effectively acts as a monitor, but additional monitor-specific components are provided to expose additional view options (e.g. rows).

<Monitor> is a dynamic component, and the availability of additional props will vary depending on the type of the defined value

Note that interval is not exposed on boolean and string monitors because updates are driven by reactive changes in the value.

However, interval is exposed on number monitors Note to allow independent control over the reactive value's update rate and the graph's update rate.

See also the <Waveform> component for a more advanced number visualization.

Usage outside of a <Pane> component will implicitly wrap the monitor in a <Pane position="inline"> component.

<script lang="ts">
  import { Monitor } from 'svelte-tweakpane-ui'

  let booleanToMonitor = false
  let stringToMonitor = 'Reticulating'
  let numberToMonitor = 85

  setInterval(() => {
    numberToMonitor = Math.random() * 100
  }, 100)

  setInterval(() => {
    booleanToMonitor = !booleanToMonitor
    stringToMonitor = [...stringToMonitor].reverse().join('')
  }, 1000)
</script>

<Monitor value={numberToMonitor} graph={true} />
<Monitor value={booleanToMonitor} label="Boolean Monitor" />
<Monitor
  value={stringToMonitor}
  bufferSize={5}
  label="String Monitor"
  multiline={true}
/>