svelte-tweakpane-ui

Overview

🎛️ Svelte Tweakpane UI wraps user-interface elements from the excellent Tweakpane library in a collection of 33 idiomatic, reactive, type-safe, carefully-crafted, and obsessively-documented Svelte components.

The library makes it easy to quickly and declaratively add knobs and dials to your projects using components that feel like they were made for Svelte. It also augments Tweakpane with a few extra features for your convenience and enjoyment.

The components should be useful for integrating controls and value monitoring in parametrically driven artworks, data visualizations, creative tools, simulations, etc.

The library is compatible with both Svelte 4 and Svelte 5.

Demo

Documentation

**Please see the documentation site for much more information:**
https://kitschpatrol.com/svelte-tweakpane-ui

Quick start

1. Add Svelte Tweakpane UI to your Svelte project:

npm install svelte-tweakpane-ui

2. Import and use Tweakpane components in your .svelte files:

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

<Button on:click={() => alert('🎛️')} />

Components

Core

• **Binding**
  Wraps the Tweakpane addBinding method.
• **Blade**
  Wraps the Tweakpane addBlade method.
• **Folder**
  Organize multiple controls into a collapsable folder.
• **Pane**
  The root <Pane> component, used for organizing controls into a single group and controlling how and where the Tweakpane is displayed.
• **Separator**
  A convenience component providing a subtle visual separator between controls, in the spirit of the HTML <hr> element.
• **TabGroup**
  Contains a collection of <TabPage> components to be presented as a tabs.
• **TabPage**
  Contains a collection of Tweakpane controls to be presented as a single group inside a <TabGroup> component.

Control

• **Button**
  A humble but effective push button.
• **ButtonGrid**
  A grid of <Button> components.
• **Checkbox**
  A checkbox.
• **Color**
  A color picker.
• **CubicBezier**
  A control for editing a bezier curve. Ideal for tweaking animation easing values.
• **File**
  A file input control.
• **Image**
  An image input control.
• **IntervalSlider**
  A twin-handled slider control for specifying range values.
• **List**
  An option list picker, similar to an HTML <select> element.
• **Point**
  Wraps the Tweakpane point bindings.
• **RadioGrid**
  A grid of radio buttons.
• **Ring**
  A control evoking the focus ring on a proper camera lens.
• **RotationEuler**
  Integrates the euler rotation control from 0b5vr's tweakpane-plugin-rotation.
• **RotationQuaternion**
  Integrates the quaternion rotation control from 0b5vr's tweakpane-plugin-rotation.
• **Slider**
  A slider component providing fine-grained control over numeric values.
• **Stepper**
  A control for simple incremental value changes.
• **Text**
  A text field, in the spirit of the HTML <input type="text"> element.
• **Textarea**
  A multi-line text input field, in the spirit of the HTML <textarea> element.
• **Wheel**
  A control evoking a dial on a proper camera body.

Monitor

• **FpsGraph**
  A control for monitoring and graphing frame rates over time.
• **Monitor**
  Wraps the Tweakpane monitor binding functionality for boolean, number, and string values.
• **Profiler**
  Measure and visualize multiple quantities over time.
• **WaveformMonitor**
  Visualize multiple numeric values as a waveform.

Extra

• **AutoObject**
  Rapid-development component which automatically creates a set of Tweakpane controls for an arbitrary object.
• **AutoValue**
  Rapid-development component which automatically creates a Tweakpane control for an arbitrary value.
• **Element**
  A component for embedding arbitrary HTML elements into a pane.

Maintainers

@kitschpatrol

Acknowledgments

Thank you to Hiroki Kokubun for creating the Tweakpane library.

Additional acknowledgments are listed on the documentation site.

Contributing

Issues and pull requests are welcome.

License

MIT © Eric Mika

Note: This library is not to be confused with Karl Moore's svelte-tweakpane.