{"id":19322725,"url":"https://github.com/picatz/builderjs","last_synced_at":"2025-10-08T14:14:25.275Z","repository":{"id":89918950,"uuid":"112634741","full_name":"picatz/builderJS","owner":"picatz","description":"👷 Simple, composable user interface builder.","archived":false,"fork":false,"pushed_at":"2018-02-13T05:12:55.000Z","size":35,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-23T10:52:21.177Z","etag":null,"topics":["frontend","functional","javascript","library","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/picatz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","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-11-30T16:34:23.000Z","updated_at":"2023-05-30T06:40:21.000Z","dependencies_parsed_at":"2023-05-30T12:30:18.041Z","dependency_job_id":null,"html_url":"https://github.com/picatz/builderJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/picatz/builderJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picatz%2FbuilderJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picatz%2FbuilderJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picatz%2FbuilderJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picatz%2FbuilderJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/picatz","download_url":"https://codeload.github.com/picatz/builderJS/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picatz%2FbuilderJS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278956350,"owners_count":26075229,"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-10-08T02:00:06.501Z","response_time":56,"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":["frontend","functional","javascript","library","ui"],"created_at":"2024-11-10T01:42:16.575Z","updated_at":"2025-10-08T14:14:25.271Z","avatar_url":"https://github.com/picatz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# BuilderJS\n\n\u003e 👷  Simple, composable user interface builder.\n\n\u003c/div\u003e\n\n## Installation\n\n```shell\ngit clone https://github.com/picatz/builderJS\n```\n## Quick Example\n\nHow about a clock?\n\n```javascript\nvar b = new Builder();\n\nfunction getTime() {\n  return new Date().toLocaleString().split(\", \")[1]\n}\n\nvar currentTime = b.heading({\n  text: getTime(),\n  events: {\n    tick: function() { currentTime.innerText = getTime() }\n  }\n})\n\nb.append(currentTime)\n```\n\n## Usage\n\nCreate a builder object called `b` using the `Builder` module.\n\n```javascript\nvar b = new Builder();\n```\n\n### Fun with `function()`'s\nThe API is both fun and functional in nature. All the functions in builderJS come from the `Builder` module; and most functions within the module rely on the `element()` function.\n\n##### Input\nCreate a simple [`div`](https://www.w3schools.com/tags/tag_div.asp) element.\n```javascript\nvar divElement = b.element(\"div\")\n```\n##### Output\nCreated HTML from previous function ( not yet in DOM ).\n```html\n\u003cdiv\u003e\u003c/div\u003e\n```\n##### Further Details\nIf you want to append the HTML to the document body:\n```javascript\nb.append(divElement)\n```\nYou could also skip making it a seperate variable and just add the output of the function right away.\n```javascript\nb.append(b.element(\"div\"))\n```\nNow the output of the `element()` function has been appended to the document body.\n\n### Building Components\nWe could build a simple component function that utilizes the various builderJS functions.\n\n##### Input\nCreate a slightly more complex [`div`](https://www.w3schools.com/tags/tag_div.asp) element using the [component](https://github.com/picatz/builderJS/wiki/Component-Style) style.\n```javascript\n// create a basic dynamic component\nvar dynamicHeader = b.component({ \n  render: function(options = {}) {\n    return b.div({\n      html: b.heading({ \n        text: (options.text || \"Example\")\n      })\n    })\n  }\n})\n\n// build the header and append it to the document body\nb.append(dynamicHeader.render({ text: \"Custom Text!\" }))\n```\n\n## Full HTML Example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"builder.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      // Builder module\n      var b = new Builder();\n    \n      // build a static header in a div\n      var staticHeader = b.div({ \n        id: \"view\", \n        class: \"text-center\", \n        html: b.header({ \n          html: [ \n            b.heading({ text: \"Example Application\" }),\n            b.paragraph(b.bold(b.sanitize(\"Built with ♥\")))\n          ]\n        })\n      })\n\n      // add the div to the document body\n      b.append(staticHeader)\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## License\n\nThe project is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicatz%2Fbuilderjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpicatz%2Fbuilderjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicatz%2Fbuilderjs/lists"}