svelte-tweakpane

svelte components wrapping tweakpane

installation

npm i --save-dev @pierogis/svelte-tweakpane
# or
pnpm add -D @pierogis/svelte-tweakpane

usage

<script lang="ts">
	import { writable } from 'svelte/store';

	import { Binding, Blade, Button, Folder, Pane, Tab } from '@pierogis/svelte-tweakpane';

	const title = 'pane';

	function handleFold() {
		console.log('fold');
	}

	let container: HTMLElement;

	const key = 'key';
	const paramsStore = writable({ [key]: 50 });
	const monitorParams = {
		readonly: true,
		interval: 32
	};
	const inputParams = {};
</script>

<div bind:this={container}>
	{#if container}
		<Pane {title} {container} let:pane on:fold={handleFold}>
			<Tab parent={pane} pages={[{ title: 'input/monitor' }, { title: 'folder' }]} let:tab>
				<Binding
					parent={tab.pages[0]}
					{paramsStore}
					bindingParams={monitorParams}
					{key}
					let:bindingApi
				/>
				<Binding
					parent={tab.pages[0]}
					{paramsStore}
					bindingParams={inputParams}
					onChange={(ev) => console.log(ev.value)}
					{key}
					let:bindingApi
				/>
				<Blade
					parent={tab.pages[0]}
					bladeParams={{
						view: 'slider',
						label: 'brightness',
						min: 0,
						max: 1,
						value: 0.5
					}}
					let:bladeApi
				/>

				<Folder tab={{ api: tab, pageIndex: 1 }} title={'folder'} let:folder>
					<Button title={'button'} parent={folder} onClick={(ev) => console.log('click')} />
				</Folder>
			</Tab>
		</Pane>
	{/if}
</div>

the container (from bind:this) defines the size of the pane

exports

import { Blade, Binding, Button, Folder, Pane, Tab } from "@pierogis/svelte-tweakpane"

theming

style in a +layout.svelte like so (see theming for full list of observed css variables)

<style>
	:global(:root) {
		--tp-base-background-color: #color;
		--tp-base-shadow-color: #color;

		/* button */
		--tp-button-background-color: #color;
		--tp-button-background-color-active: #color;
		--tp-button-background-color-focus: #color;
		--tp-button-background-color-hover: #color;
		--tp-button-foreground-color: #color;

		/* label */
		--tp-label-background-color: #color;
		--tp-label-foreground-color: #color;

		/* input */
		--tp-input-background-color: #color;
		--tp-input-background-color-active: #color;
		--tp-input-background-color-focus: #color;
		--tp-input-background-color-hover: #color;
		--tp-input-foreground-color: #color;

		--tp-container-background-color: #color;
		--tp-container-background-color-active: #color;
		--tp-container-background-color-focus: #color;
		--tp-container-background-color-hover: #color;
		--tp-container-foreground-color: #color;
	}
</style>

development

clone the repo install dependencies with pnpm i start a development server with:

pnpm dev

release

• push with necessary changesets
• gh action will make a version PR
• create prerelease (if needed)

pnpm changeset pre enter next
pnpm changeset version
pnpm changeset publish

• merge changeset version pr and pull
• publish release

pnpm changeset publish