Getting Started

Add Svelte Tweakpane UI to your project:

npm install svelte-tweakpane-ui

Import and use Tweakpane components in your .svelte files:

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

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

If you’re starting completely from scratch and just want to test out the Svelte Tweakpane UI library, you can spin up a SvelteKit project like this — otherwise, skip to step 1.

Of course you can use Svelte Tweakpane UI anywhere Svelte works, including island frameworks like Astro or Eleventy (albeit with a caveat or two).

npm create svelte@latest svelte-tweakpane-sandbox

The Svelte project wizard will then grill you with a bunch of questions. The following answers are fine, but not mandatory:

Which Svelte app template?

• Skeleton project

Add type checking with TypeScript?

• Yes, using TypeScript syntax

Select additional options

• Add ESLint for code linting
• Add Prettier for code formatting

Then install dependencies:

cd svelte-tweakpane-sandbox
npm install

From the root of your project, run:

npm install svelte-tweakpane-ui

If you’re starting from an empty SvelteKit starter project, you can add a button to the default +page.svelte route like this:

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

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
 <Button on:click={() => alert('🎛️')} />

Then run the project:

npm run dev -- --open

And you should see:

You’ll notice a few things right away if you’re familiar with Tweakpane:

• The button is in the regular page flow, not fixed in the top-right corner?

  By default, Svelte Tweakpane UI components are added to the document flow, which makes them easy to integrate with your existing UI and to manipulate with Svelte’s template syntax. You can change this by wrapping your components in a <Pane> component and setting the position prop to 'draggable' or 'fixed'.

• I didn’t have to create a pane around the Button?

  Svelte Tweakpane UI components “bootstrap” themselves into a title-less Pane component if they’re used on their own. This is a convenience feature, but you can also wrap them in a <Pane> component yourself if you want to customize the title or other Pane properties.

• That’s a really wide button…

  Yes, inline Svelte Tweakpane UI components take the width of their container. You can use a <Pane> element to set a specific width, or nestle the component in an existing element with a defined width.

• Looks pretty straightforward, there’s nothing weird about the on:click syntax…

  Exactly, Svelte Tweakpane UI components are designed to leverage as many Svelte conventions as possible. Behind the scenes, the lifecycle and event listeners of the underlying vanilla JS Tweakpane components are managed for you.