🎛️ Svelte Tweakpane UI wraps user-interface elements from the excellent Tweakpane library in a collection of 31 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.
Please see the documentation site for much more information:\ https://kitschpatrol.com/svelte-tweakpane-ui
npm install svelte-tweakpane-ui
.svelte
files:<script lang="ts">
import { Button } from 'svelte-tweakpane-ui';
</script>
<Button on:click={() => alert('🎛️')} />
addBinding
method.addBlade
method.<Pane>
component, used for organizing controls into a single group and controlling how and where the Tweakpane is displayed.<hr>
element.<TabPage>
components to be presented as a tabs.<TabGroup>
component.<Button>
components.<select>
element.<input type="text">
element.<textarea>
element.boolean
, number
, and string
values.Thank you to Hiroki Kokubun for creating the Tweakpane library.
Additional acknowledgments are listed on the documentation site.
Issues and pull requests are welcome.
MIT © Eric Mika
Note: This library is not to be confused with Karl Moore's svelte-tweakpane
.