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

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

  let number = 0;
  let color = '#ff00ff';
  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" />