{"id":13534342,"url":"https://github.com/colejd/guify","last_synced_at":"2025-04-01T22:31:28.263Z","repository":{"id":23864508,"uuid":"99999087","full_name":"colejd/guify","owner":"colejd","description":"A simple GUI for inspecting and changing JavaScript variables","archived":false,"fork":false,"pushed_at":"2024-07-18T00:46:03.000Z","size":3506,"stargazers_count":289,"open_issues_count":16,"forks_count":18,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-05T14:06:55.788Z","etag":null,"topics":["creative-coding","gui","js","prototyping"],"latest_commit_sha":null,"homepage":"https://jons.website/projects/guify","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/colejd.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":"contributing.md","funding":null,"license":"license.md","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":"2017-08-11T06:30:40.000Z","updated_at":"2025-02-27T20:12:59.000Z","dependencies_parsed_at":"2024-01-03T04:06:10.910Z","dependency_job_id":"392280ff-0af3-4e5d-bb27-2cd76b5e1b19","html_url":"https://github.com/colejd/guify","commit_stats":{"total_commits":207,"total_committers":4,"mean_commits":51.75,"dds":"0.019323671497584516","last_synced_commit":"4cafddd568859fd7c33faaf9550c5e6ab3fe8e13"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colejd%2Fguify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colejd%2Fguify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colejd%2Fguify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colejd%2Fguify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colejd","download_url":"https://codeload.github.com/colejd/guify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246720574,"owners_count":20822918,"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":["creative-coding","gui","js","prototyping"],"created_at":"2024-08-01T07:01:30.859Z","updated_at":"2025-04-01T22:31:27.539Z","avatar_url":"https://github.com/colejd.png","language":"JavaScript","readme":"# guify\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./.meta-files/images/Hero-Screenshot.png\" width=\"80%\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://badge.fury.io/js/guify\"\u003e\u003cimg src=\"https://badge.fury.io/js/guify.svg\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://jons.website/projects/guify\"\u003eDemo\u003c/a\u003e\n    |\n    \u003ca href=\"/docs/api.md\"\u003eDocs\u003c/a\u003e\n\u003c/p\u003e\n\nGuify is a runtime JS library that gives you a simple way to build a GUI for your JS projects. It pairs very well with [three.js](https://threejs.org/) and [p5.js](https://p5js.org/). Consider it an opinionated take on [dat.GUI](https://github.com/dataarts/dat.gui).\n\nHere are the big features:\n\n* Bind any UI component to any variable. Guify supports arbitrary text inputs, colors, ranges, file inputs, booleans, and more.\n* Guify is easy to graft onto any page and integrate with your existing JS code. Just point your components at the variables you already have:\n    ```js\n    var someVariable = 0;\n    guify.Register([{\n        {\n            type: 'range',\n            object: this, property: 'someProperty',\n            label: 'Some Property',\n            min: 0, max: 20, step: 1\n        },\n    }])\n    ```\n* Give it that \"web app\" look with an optional header bar and easy toast notifications.\n* Style it however you'd like. You can use one of three built-in themes, or build your own to get exactly the look you want.\n\n---\n\n## Installation\n\nBelow are some common ways to integrate Guify with your setup.\n\n### Quick Start (Browser)\n\nTo integrate on an existing page, you can use the transpiled version in [`/lib`](/lib), either by including it with your files or using a CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/guify@0.15.1/lib/guify.min.js\"\u003e\u003c/script\u003e\n```\n\nThis adds a `guify` function at the global level, which you can use to construct the GUI. For example:\n\n```html\n\u003cscript src=\"https://unpkg.com/guify@0.15.1/lib/guify.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n    var gui = new guify({ ... })\n    gui.register([ ... ])\n\u003c/script\u003e\n```\n\nSee the \u003ca href=\"#Usage\"\u003eUsage guide\u003c/a\u003e below for more details. [example.html](/example/index.html) also demonstrates this pattern.\n\n### Quick Start (NPM)\n\nFirst, install with NPM: `npm install --save guify`\n\nThen you can import using either `require` or `import` depending on your preference:\n```js\n// ES6\nimport guify from 'guify'\n\n// Require\nlet guify = require('guify');\n```\n\nThen you can make a quick GUI this way:\n```js\nvar gui = new guify({ ... });\ngui.Register([ ... ]);\n```\n\nSee the \u003ca href=\"#Usage\"\u003eUsage guide\u003c/a\u003e below for more details.\n\n### Quick Start (React)\n\nCheck out the unofficial [React port](https://github.com/dbismut/react-guify).\n\n---\n\n## Usage\n\nOnce you have Guify available to construct in your project, make a `guify` instance:\n\n```js\nvar gui = new guify({\n    title: \"Some Title\",\n});\n```\n\nThe various controls in Guify are called \"components\". You can feed component definitions to Guify as follows:\n\n```js\ngui.Register([\n    { // A slider representing a value between 0 and 20\n        type: 'range', label: 'Range',\n        min: 0, max: 20, step: 1,\n        onChange: (value) =\u003e {\n            console.log(value);\n        }\n    },\n    {\n        type: 'button', label: 'Button',\n        action: () =\u003e {\n            console.log('Button clicked!');\n        }\n    },\n    {\n        type: 'checkbox', label: 'Checkbox',\n        onChange: (value) =\u003e {\n            console.log(value);\n        }\n    }\n]);\n```\n\nYou can also bind components representing a value to your JS variables instead of using an `onChange()` handler. For example:\n\n```js\nvar someNumber = 10;\ngui.Register([\n    { // A slider representing `someNumber`, constrained between 0 and 20.\n        type: 'range', label: 'Range',\n        min: 0, max: 20, step: 1,\n        object: this, property: 'someNumber'\n    },\n```\n\nThere are many points of customization here. See the docs at [/docs/api.md](/docs/api.md). A much more robust example can also be found at [example.html](/example/index.html).\n\n\n### Building This Package\nIf you want to build this package, you can run `npm install` and then `npm run build:prod`, which will create `/lib/guify.min.js`.\n\nNPM commands:\n\n- `build:prod`: Creates `/lib/guify.min.js`, the default script used by this package.\n- `build:dev`: Creates `/lib/guify.js`.\n- `develop`: Runs `build:dev` and serves the `/example` directory as a static web page.\n\n---\n\n## Changelog\nSee [changelog.md](/changelog.md).\n\n\n## License\nMIT license. See [license.md](/license.md) for specifics.\n\n\n## Credit\nThis package is largely based on [control-panel](https://github.com/freeman-lab/control-panel).\nFor setting this up, I used [webpack-library-starter](https://github.com/krasimir/webpack-library-starter).\n\n## Alternatives\n- [dat.GUI](https://github.com/dataarts/dat.gui)\n- [Control-Panel](https://github.com/freeman-lab/control-panel)\n- [Oui](https://github.com/wearekuva/oui)\n","funding_links":[],"categories":["GUI Parameters \u0026 Settings","Libraries"],"sub_categories":["JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolejd%2Fguify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolejd%2Fguify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolejd%2Fguify/lists"}