{"id":17087907,"url":"https://github.com/geraintluff/jsfx-ui-lib","last_synced_at":"2025-03-23T15:16:47.597Z","repository":{"id":66040936,"uuid":"67369258","full_name":"geraintluff/jsfx-ui-lib","owner":"geraintluff","description":"UI library for REAPER's JSFX language","archived":false,"fork":false,"pushed_at":"2021-03-02T18:44:53.000Z","size":1359,"stargazers_count":49,"open_issues_count":0,"forks_count":6,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-01-28T21:18:24.541Z","etag":null,"topics":["jsfx","reaper","reaper-plugin"],"latest_commit_sha":null,"homepage":"https://geraintluff.github.io/jsfx-ui-lib","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geraintluff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2016-09-04T21:30:03.000Z","updated_at":"2024-11-16T03:45:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"74788fce-fef8-4fc9-89cc-37a194e706af","html_url":"https://github.com/geraintluff/jsfx-ui-lib","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geraintluff%2Fjsfx-ui-lib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geraintluff%2Fjsfx-ui-lib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geraintluff%2Fjsfx-ui-lib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geraintluff%2Fjsfx-ui-lib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geraintluff","download_url":"https://codeload.github.com/geraintluff/jsfx-ui-lib/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245119592,"owners_count":20563763,"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":["jsfx","reaper","reaper-plugin"],"created_at":"2024-10-14T13:35:22.408Z","updated_at":"2025-03-23T15:16:47.394Z","avatar_url":"https://github.com/geraintluff.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `ui-lib.jsfx-inc`: UIs for REAPER's JS effects\n\nThis is a library/framework for creating UIs in REAPER's JSFX language.\n\nDownload the latest version from [GitHub](https://raw.githubusercontent.com/geraintluff/jsfx-ui-lib/master/ui-lib.jsfx-inc), or the [Stash ZIP](https://stash.reaper.fm/v/32955/ui-lib.zip) which also includes API docs.\n\nIt requires REAPER v4.60 or above.  See the [Cockos forum topic](https://forums.cockos.com/showthread.php?t=181055) for any questions/bugs/requests.\n\n## Features\n\n*\tFlexible layouts (adapts to available space)\n*\tRich built-in controls\n\t*\tbuttons\n\t*\tsliders\n\t*\tdials\n\t*\tselectors\n\t*\ttext-input boxes\n*\tMultiple screens (including argument-passing)\n*\tThemes ([default](demo/theme-default.png), [black](demo/theme-black.png), [tron](demo/theme-tron.png))\n\n![screenshot](demo/theme-default.png)\n\n# API\n\nThe best way to get started is the [**quick-start tour**](tour/), which explains some principles of how the library works.  After that, hopefully the API docs will make sense.\n\nThe full API is available as [HTML](https://geraintluff.github.io/jsfx-ui-lib/doc/html/) or as an [interactive JSFX plugin](https://stash.reaper.fm/v/32955/ui-lib.zip).\n\n## Compatibilty\n\nThe file `ui-lib-compat.jsfx-inc` bridges the gap between the current API and previous versions.\n\nIf you update your version of the UI library and it complains about missing functions, include this file as well.\n\n# Generator Tool\n\nThere is an experimental web-based tool to [generate UI code](https://geraintluff.github.io/jsfx-ui-lib/generate-ui.html) based on JSFX slider definitions.  It's not the tidiest code in the world, and it's definitely not a full-featured UI editor, but it can handle some basic layouts.\n\n# Development\n\nDevelopment happens in \"ui-lib.txt\", and the actual library is generated using a [JSFX preprocessor](https://www.npmjs.com/package/jsfx-preprocessor).\n\nThis means that to assemble the final code, you'll need Node.js installed.\n\n```\nnode build.js\n# or\nnpm run build\n```\n\nTo monitor with `nodemon`, use `npm run nodemon` - you can also specify any additional locations to write the result to (e.g. the [JSFX collection](https://github.com/geraintluff/jsfx)):\n\n```\nnpm run nodemon -- ../my-jsfx-set/ui-lib.jsfx-inc\n```\n\n# Tips and tricks\n\n## Automation, saving state, and \"hidden sliders\"\n\nYou can hide REAPER's default slider by preceding the name with \"-\":\n\n```\nslider1:0\u003c0,1,0\u003e-Slider Name\n```\n\nHidden sliders are still automatable and their state is saved automatically.\n\nRemember to save the state for\n\n```eel2\n@gfx\n\n[...]\n\tmy_control_value = control_dial(my_control_value, 0, 1, 0);\n[...]\n\n@serialize\nfile_var(0, my_control_value); // Works for both read/write\n```\n\n## Versioning and complex effects\n\nThis is not specific to this UI library, but it's a useful trick when developing complex effects.\n\nIn `@serialize`, the very first thing you should do is read/write a version indicator.\n\n```eel2\n@serialize\n\npreset_version = 1.01;\nfile_var(0, preset_version);\n```\n\nIf you make significant changes, bump up this version.  What this means is that you can detect when you're loading a preset from an earlier version of your effect, and can perform some appropriate action.\n\n```eel2\n@serialize\n\npreset_version = 1.01;\nfile_var(0, preset_version);\n\npreset_version \u003c 1.0 ? (\n\t// Didn't exist in older versions, use default\n\tsaved_value = 5;\n) : (\n\tfile_var(0, saved_value);\n);\n```\n\nIf you do this right at the start of developing your effect, you can keep your effect backwards-compatible.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeraintluff%2Fjsfx-ui-lib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeraintluff%2Fjsfx-ui-lib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeraintluff%2Fjsfx-ui-lib/lists"}