{"id":18155308,"url":"https://github.com/eye-wave/svelte-knobs","last_synced_at":"2025-06-17T18:35:05.507Z","repository":{"id":259443054,"uuid":"876393391","full_name":"eye-wave/svelte-knobs","owner":"eye-wave","description":"Svelte component library for building customizable knob controls.","archived":false,"fork":false,"pushed_at":"2025-02-15T23:24:06.000Z","size":856,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-05T06:26:10.811Z","etag":null,"topics":["audio-production","knobs","svelte","sveltekit","ui-components"],"latest_commit_sha":null,"homepage":"https://eye-wave.github.io/svelte-knobs/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eye-wave.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-21T22:29:43.000Z","updated_at":"2025-05-26T20:18:29.000Z","dependencies_parsed_at":"2024-10-25T13:12:28.902Z","dependency_job_id":"d0bad7bb-725e-4288-84ee-cb1166176723","html_url":"https://github.com/eye-wave/svelte-knobs","commit_stats":null,"previous_names":["eye-wave/svelte-knobs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eye-wave/svelte-knobs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eye-wave%2Fsvelte-knobs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eye-wave%2Fsvelte-knobs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eye-wave%2Fsvelte-knobs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eye-wave%2Fsvelte-knobs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eye-wave","download_url":"https://codeload.github.com/eye-wave/svelte-knobs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eye-wave%2Fsvelte-knobs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260419297,"owners_count":23006247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio-production","knobs","svelte","sveltekit","ui-components"],"created_at":"2024-11-02T04:10:31.790Z","updated_at":"2025-06-17T18:35:00.492Z","avatar_url":"https://github.com/eye-wave.png","language":"Svelte","readme":"# svelte-knobs\n\n![Version](https://img.shields.io/npm/v/svelte-knobs)\n![License](https://img.shields.io/badge/license-MIT-lightgrey)\n\n`svelte-knobs` is a Svelte component library for building customizable knob controls.\n\nInspired by:\n\n- [vital](https://vital.audio)\n- [solid-knobs](https://github.com/tahti-studio/solid-knobs)\n- [nih-plug](https://github.com/robbert-vdh/nih-plug)\n\n[Web demo](https://eye-wave.github.io/svelte-knobs)\n\n## Installation\n\nAdd the library to your project:\n\n```bash\nnpm install svelte-knobs@1.0.0-beta.1\n```\n\n## Usage\n\n#### Basic Knob\n\n```svelte\n\u003cscript\u003e\n\timport { SvgKnob } from 'svelte-knobs';\n\n\tlet value = $state(0.0);\n\u003c/script\u003e\n\n\u003cSvgKnob bind:value /\u003e\n\u003cspan\u003e{value.toFixed(2)}\u003c/span\u003e\n```\n\nA basic knob control with parameter scaling.\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { LinearParam, LogParam } from 'svelte-knobs/params';\n\timport { SvgKnob } from 'svelte-knobs';\n\n\tlet value = $state(0.0);\n\n\tconst freqParam = new LogParam(20, 20_000, 10);\n\tconst linParam = new LinearParam(0, 100);\n\u003c/script\u003e\n\n\u003cSvgKnob bind:value /\u003e\n\u003cspan\u003e{freqParam.denormalize(value) | 0}hz\u003c/span\u003e\n\n\u003cSvgKnob bind:value /\u003e\n\u003cspan\u003e{linParam.denormalize(value) | 0}%\u003c/span\u003e\n```\n\n#### Snap Points\n\nSet specific snap points and adjust snapping sensitivity using `snapThreshold`.\n\n```svelte\n\u003cscript\u003e\n\timport { SvgKnob } from 'svelte-knobs';\n\n\tlet value = $state(0.0);\n\u003c/script\u003e\n\n\u003cdiv\u003e\n\t\u003cSvgKnob bind:value snapPoints={[0.5]} /\u003e\n\t\u003cspan\u003e{value.toFixed(2)}\u003c/span\u003e\n\u003c/div\u003e\n\n```\n\n#### Enum Parameter\n\nExample usage of `EnumParam` for working with enumerated options.\n\n```typescript\nimport { BoolParam, EnumParam } from 'svelte-knobs/params';\nimport { SvgKnob } from 'svelte-knobs';\n\nlet value = $state(0);\n\nconst fruitParam = new EnumParam(['🍍', '🍉', '🍌', '🍋', '🍇'] as const);\nconst filterTypeParam = new EnumParam([\n  'Low pass',\n  'High pass',\n  'Low shelf',\n  'High shelf',\n  'Bell',\n  'Notch',\n  'Allpass'\n] as const);\n\nconst booleanParam = new BoolParam();\n```\n\n```svelte\n\u003cSvgKnob\n\tbind:value\n\tsnapPoints={fruitParam.snapPoints}\n\tsnapThreshold={fruitParam.snapThreshold}\n/\u003e\n\u003cp\u003e{fruitParam.denormalize(value)}\u003c/p\u003e\n\n\u003cSvgKnob bind:value {...filterTypeParam.knobProps} /\u003e\n\u003cp\u003e{filterTypeParam.denormalize(value)}\u003c/p\u003e\n\n\u003cSvgKnob bind:value {...booleanParam.knobProps} /\u003e\n\u003cp\u003e{booleanParam.denormalize(value)}\u003c/p\u003e\n```\n\n#### Disabled Knob\n\nDisable knob interactivity\n\n```svelte\n\u003cSvgKnob disabled /\u003e\n\u003cImageKnob disabled /\u003e\n\u003cDraggable disabled /\u003e\n```\n\n## License\n\nMIT License\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feye-wave%2Fsvelte-knobs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feye-wave%2Fsvelte-knobs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feye-wave%2Fsvelte-knobs/lists"}