{"id":30742685,"url":"https://github.com/agj/elm-knobs","last_synced_at":"2025-10-20T15:23:52.972Z","repository":{"id":159078881,"uuid":"634377934","full_name":"agj/elm-knobs","owner":"agj","description":"A simple control panel to tweak values interactively. 🎛️","archived":false,"fork":false,"pushed_at":"2024-08-24T16:20:42.000Z","size":745,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-24T17:53:54.128Z","etag":null,"topics":["control-panel","elm","package"],"latest_commit_sha":null,"homepage":"https://package.elm-lang.org/packages/agj/elm-knobs/latest/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agj.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2023-04-29T23:15:59.000Z","updated_at":"2024-05-04T18:10:46.000Z","dependencies_parsed_at":"2024-01-02T01:45:54.635Z","dependency_job_id":"ec78d7f4-473a-4020-a5aa-73a3bc991d75","html_url":"https://github.com/agj/elm-knobs","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/agj/elm-knobs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agj%2Felm-knobs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agj%2Felm-knobs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agj%2Felm-knobs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agj%2Felm-knobs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agj","download_url":"https://codeload.github.com/agj/elm-knobs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agj%2Felm-knobs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273539314,"owners_count":25123499,"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","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["control-panel","elm","package"],"created_at":"2025-09-04T02:01:15.756Z","updated_at":"2025-10-20T15:23:52.847Z","avatar_url":"https://github.com/agj.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# elm-knobs 🎛\n\n[![Elm package](https://img.shields.io/elm-package/v/agj/elm-knobs?style=flat-square\u0026logo=elm\u0026labelColor=white\u0026color=%231293D8)](https://package.elm-lang.org/packages/agj/elm-knobs/latest)\n\nA way to easily tweak values interactively within a running Elm app, using a\npanel of input controls that map to those values, which we call “knobs” here.\nWhile not in use, they recede to an icon in the lower-left corner. The library\nsupports easy serialization, enabling you to persist the values even after a\npage refresh by, for example, interfacing with the [Web Storage\nAPI][webstorage].\n\n[webstorage]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API\n\n![Example of elm-knobs in action](https://raw.githubusercontent.com/agj/elm-knobs/d2167d12ded679174e6678b2de29b9132ffac104/examples/polygon-example.png)\n\n## Links\n\n- [API docs (package.elm-lang.org).][docs]\n- [Interactive docs.][interactive-docs]\n- [Code examples.][examples]\n\n[docs]: https://package.elm-lang.org/packages/agj/elm-knobs/1.2.0\n[interactive-docs]: https://agj.github.io/elm-knobs/1.2.0/\n[examples]: https://github.com/agj/elm-knobs/blob/1.2.0/examples/\n\n## Why?\n\nSometimes it's hard to find the right value for something in your design, and\nhaving actual controls in the browser that instantly update the view helps\ntremendously in the development process. It also enables non-technical people\nto explore how things change when different values are used, with immediate\nfeedback.\n\nSince its intended use case is aiding the development process and facilitating\nrough prototypes, visual customization is not a priority, but you can still\ndefine your own CSS styles to customize how it looks.\n\n## What it looks like to use elm-knobs\n\nBelow is a very basic yet complete example of using elm-knobs. It is not what\nis shown at the top of this page, though, but you can [find that and other\nexamples in the Github repo][examples].\n\n```elm\nmodule Main exposing (main)\n\nimport Browser\nimport Html\nimport Knob exposing (Knob)\n\n\nmain =\n    Browser.sandbox\n        { init = init\n        , view = view\n        , update = update\n        }\n\n\ntype alias Model =\n    -- Put the knob in the model:\n    { knob : Knob Int }\n\n\ntype\n    Msg\n    -- Create a message for knob updates:\n    = KnobUpdated (Knob Int)\n\n\ninit =\n    -- Initialize the knob:\n    { knob =\n        Knob.int\n            { step = 1\n            , initial = 0\n            }\n    }\n\n\nupdate msg model =\n    case msg of\n        -- Update the knob state:\n        KnobUpdated knobState -\u003e\n            { knob = knobState }\n\n\nview model =\n    Html.div []\n        -- Use the knob value within the view:\n        [ Html.text (String.fromInt (Knob.value model.knob))\n\n        -- Display the knob controls:\n        , Knob.view KnobUpdated model.knob\n        , Knob.styles\n        ]\n```\n\n## Not exactly what you were looking for?\n\nFor a more complete package that does much more than elm-knobs, at the cost of\nsetup complexity, try\n[jamesgary/elm-config-ui](https://package.elm-lang.org/packages/jamesgary/elm-config-ui/latest/).\n\nAlso check out\n[avh4/elm-debug-controls](https://package.elm-lang.org/packages/avh4/elm-debug-controls/latest/),\na library with some overlap with this one, and whose source code inspired my\napproach to building this library.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagj%2Felm-knobs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagj%2Felm-knobs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagj%2Felm-knobs/lists"}