{"id":18131526,"url":"https://github.com/anater/scriptui","last_synced_at":"2025-10-24T03:10:23.030Z","repository":{"id":44102622,"uuid":"199099283","full_name":"anater/ScriptUI","owner":"anater","description":"Build UI with JavaScript","archived":false,"fork":false,"pushed_at":"2022-12-09T20:01:14.000Z","size":873,"stargazers_count":42,"open_issues_count":8,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-09-03T14:47:42.082Z","etag":null,"topics":["emotion","javascript","jsx","react","reactjs","swiftui","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/anater.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}},"created_at":"2019-07-27T01:13:20.000Z","updated_at":"2024-06-14T10:32:10.000Z","dependencies_parsed_at":"2023-01-25T17:16:03.166Z","dependency_job_id":null,"html_url":"https://github.com/anater/ScriptUI","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/anater/ScriptUI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anater%2FScriptUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anater%2FScriptUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anater%2FScriptUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anater%2FScriptUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anater","download_url":"https://codeload.github.com/anater/ScriptUI/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anater%2FScriptUI/sbom","scorecard":{"id":191363,"data":{"date":"2025-08-11","repo":{"name":"github.com/anater/ScriptUI","commit":"16eccc927481fc953fae443832c28e52f828d474"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/3 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 7 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"81 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-876r-hj45-fw7g","Warn: Project is vulnerable to: GHSA-v63x-xc9j-hhvq","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-w5q7-3pr9-x44w","Warn: Project is vulnerable to: GHSA-3fjq-93xj-3f3f","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx","Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T20:44:49.869Z","repository_id":44102622,"created_at":"2025-08-16T20:44:49.870Z","updated_at":"2025-08-16T20:44:49.870Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280729313,"owners_count":26380964,"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-24T02:00:06.418Z","response_time":73,"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":["emotion","javascript","jsx","react","reactjs","swiftui","ui"],"created_at":"2024-11-01T12:07:52.074Z","updated_at":"2025-10-24T03:10:22.967Z","avatar_url":"https://github.com/anater.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ScriptUI\nScriptUI lets you write React components without JSX. It's easy to read. No build or transpilation required.\n\n[Installation](#installation) | [Usage](#usage) | [API](#api) | [Motivation](#motivation)\n\n```javascript\nconst Hello = View(\"div\")(\n  Text(\"Hello World\")\n    .bold()\n    .color(\"red\"),\n  Button(\"Alert\", () =\u003e alert(\"ScriptUI Rocks!\")\n);\n```\n\n## Installation\nScriptUI has peer dependencies: React, ReactDOM, and Emotion.\nBrowser:\n```html\n\u003c!-- Include React, ReactDOM, and Emotion first --\u003e\n\u003cscript src=\"https://unpkg.com/react/umd/react.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-dom/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/emotion/dist/emotion.umd.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/script-ui/public/index.umd.js\"\u003e\u003c/script\u003e\n\u003c!-- Include your scripts last --\u003e\n```\n\nNode:\n```\nnpm install --save script-ui react react-dom emotion\n```\n\n## Usage\nThe following demonstrates how you render your `View` with `ReactDOM.render`. \n\nBrowser (Try it in [CodePen](https://codepen.io/anater/pen/jgVZpR?editors=0011#0)):\n```javascript\n// Assuming React \u0026 ReactDOM scripts are global.\nconst { View } = ScriptUI;\nconst MyView = View(\"span\")(\"My View\");\nReactDOM.render(\n  View.render(MyView),\n  document.querySelector(\"#root\")\n);\n```\n\nNode:\n```javascript\nimport View from \"scriptui\";\nimport ReactDOM from \"react-dom\";\n\nconst MyView = View(\"span\")(\"My View\");\nReactDOM.render(\n  View.render(MyView),\n  document.querySelector(\"#root\")\n);\n```\n\n## API\n`View(type: string|element, props?: object) =\u003e (...children?) =\u003e view`\n\n`element: { type, props{}, children[], …View.modifiers }`\n\nThis is the core of ScriptUI. `View` is a higher order function that accepts `type` and `props` and returns a function that accepts `children`. When the returned function is called, it returns an `element` object containing type, props, children, and modifiers. You can use modifiers to apply or manipulate props through method chaining:\n```javascript\nconst Button = (label, onClick) =\u003e \n  View(\"button\")(label)\n    .set({ onClick })\n    .background(\"blue\")\n    .padding(\"1em 0.5em\")\n    .radius(\"0.25em\");\n```\n\n### Methods and Properties\n- `View.renderer: React.createElement`\n\t- The renderer is used to determine how an `element` object should be interpreted. By default, `React.createElement` is used. You can use an alternative like [Preact](https://preactjs.com), [Hyperscript](https://github.com/hyperhype/hyperscript), or write your own!\n-  `View.render(element: string|object|function) =\u003e View.renderer()`\n\t- The render method accepts `element` objects from `View` and returns the element returned from `View.renderer`. For falsy elements, `false` is returned. String elements are returned as is.\n- `View.modifiers: object`\n\t- The modifiers property contains core modifier methods that are available to any element returned from a  `View`.\n- `View.addModifiers(newModifiers: object) =\u003e void`\n\t- This method allows you to pass an object of modifier methods that can apply custom modifications. These must be instantiated before using the new modifiers.\n\t- `newModifiers` must contain functions as values and each function must return the modified object. These should be declared as [methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions) for proper access to `this`.\n\n### Modifiers\nModifiers apply changes to the `element` object and return the modified object. There are a few modifiers that are included for convenience.\n- `set(newProps: object)`\n\t- merges  `newProps` into the `props` object\n- `modify(modifier: (object) =\u003e modifiedObject)`\n\t- uses the provided `modifier` function to apply a modification. Use this for one time or private modifiers\n- `style(newStyles: object)`\n\t- merges in the `newStyles` object into the `props.style` object\n- `class(…classNames: string)`\n\t- applies strings from  `classNames` to the `className` prop\n- `css(newCSS: object)`\n\t- applies `newCSS` to the element using [`emotion`](https://github.com/emotion-js/emotion/tree/master/packages/emotion) to generate styles and enable CSS features like child selectors, pseudo-elements, and media queries\n\n## Motivation\nToday we can build web apps more quickly than ever. But somehow it’s never been harder to do it. To use JSX in your React app, you need node, npm, babel, and webpack. Beginners have to learn all of this just to get started. I think we can do better.\n\nSo I wonder: Is JSX the best we can do? Can it be easier?\n\nJSX feels like HTML. So it’s easy to understand. And it has JavaScript super powers. In almost every way, it is better than templating languages. It’s much more legible than using `React.createElement` . It has a lot going for it.\n\nThat said, I find [SwiftUI](https://developer.apple.com/tutorials/swiftui) is easier to read than JSX. It’s been designed for Swift. It leverages the power of the language. That makes it more expressive and flexible. It offers insight into how to improve JavaScript UI code.\n\nWe don’t have all the same tricks in JavaScript, but we can get very close. So how can we get what’s good about SwiftUI _and_ JSX?\n\nThat’s where ScriptUI comes in. The goal is to build a library that is easy to understand and get started with. Reading and writing components should feel intuitive. You shouldn’t need a terminal to start creating. It should feel effortless and encourage experimentation.\n\nIf you’re a fellow SwiftUI fan or don’t love all the tooling needed to write JSX, please try it. If you really like it, please share your experience or contribute to the project. Thank you for giving it a chance.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanater%2Fscriptui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanater%2Fscriptui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanater%2Fscriptui/lists"}