AutoValue

Rapid-development component which automatically creates a Tweakpane control for an arbitrary value.

A (reasonably) appropriate Tweakpane control will be used for the value type.

This component is intended for quick tests where you don't want to fuss with component selection or customization.

See <AutoObject> for a variation that creates controls for multiple values in an object.

The value is generally mapped to controls according to the logic outlined in the Tweakpane input binding documentation.

Plugin component behavior is not available in <AutoValue>.

---

Example

Demo

Code

AutoValueExample.svelte

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

  let number = 0
  let color = { r: 255, g: 0, b: 255 }
  let point = { x: 0, y: 0 }
  let text = 'Cosmic manifold'
</script>

<AutoValue bind:value={number} label="Number" />
<AutoValue bind:value={color} label="Color" />
<AutoValue bind:value={point} label="Point" />
<AutoValue bind:value={text} label="Text" />

---

Props

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

theme optional
Description	Custom color scheme. If undefined, inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().
Type	Theme
Default	undefined

label optional
Description	Text displayed next to control.
Type	string
Default	undefined

value bindablerequired
Description	The value to control.
Type	string | number | boolean | object

---

Events

change
Description	Fires when value changes. This event is provided for advanced use cases. It's usually preferred to bind to the value prop instead. The event.details payload includes a copy of the value and an origin field to distinguish between user-interactive changes (internal) and changes resulting from programmatic manipulation of the value (external).
Extends	ValueChangeEvent
Type	AutoValueChangeEvent