Note: in this fork of svelte-knobby, I added a select, radio button and the ability to drag your window around
Add knobs to your Svelte apps. Demo
<script>
import * as knobby from 'svelte-knobby';
const message = knobby.text('message', 'Hello world!');
</script>
<h1>{$message}</h1>The following functions create a readable store:
const text = knobby.text('my text control', 'text');
const checked = knobby.checkbox('my checkbox control', true);
const color = knobby.color('my color control', '#ff3e00');
const number = knobby.range('my range control', 50, { min: 0, max: 100, step: 1 });
const radio = knobby.radio('my radio control', 'one', { options: ['one','two','three'] });
const select = knobby.select('my select control', 'a', { options: ['a','b','c'] });Controls are added to the control panel when their stores are subscribed to, and removed when there are no more subscribers.
You can also add an action, which adds a button to the control panel but does not create a store. If created inside a component's initialisation block it will be destroyed along with the component, otherwise you must manually call the returned destroy function:
const destroy = knobby.action('say hello', () => alert('hello!'));You can group controls together, even across components. For example your root component might create a group...
<!-- App.svelte -->
<script>
import * as knobby from 'svelte-knobby';
import Widget from './Widget.svelte';
knobby.group('widget'); // create new group
const show_widget = knobby.checkbox('show widget', false);
</script>
{#if $show_widget}
<Widget/>
{/if}...then another component might select the same group and add controls to it:
<!-- Widget.svelte -->
<script>
import * as knobby from 'svelte-knobby';
knobby.group('widget'); // select existing group
const message = knobby.text('message', 'This will appear inside the widget group');
</script>
<h1>{$message}</h1>To exit a group, either create/select a new group (groups cannot be nested) or call knobby.ungroup().
MIT