{"id":24086422,"url":"https://github.com/electrikmilk/javascript-ui","last_synced_at":"2025-10-26T23:15:58.486Z","repository":{"id":58166552,"uuid":"529335414","full_name":"electrikmilk/javascript-ui","owner":"electrikmilk","description":"JavaScript framework based on Swift UI","archived":false,"fork":false,"pushed_at":"2025-04-24T14:42:30.000Z","size":2639,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-07T08:56:36.199Z","etag":null,"topics":["css-in-js","javascript","javascript-ui","js-framework","swiftui"],"latest_commit_sha":null,"homepage":"https://electrikmilk.github.io/javascript-ui","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/electrikmilk.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-26T16:44:57.000Z","updated_at":"2025-04-24T14:42:34.000Z","dependencies_parsed_at":"2024-02-07T03:26:39.192Z","dependency_job_id":"8b08f5c8-ed5c-4de4-a78a-0c0e49eb1811","html_url":"https://github.com/electrikmilk/javascript-ui","commit_stats":{"total_commits":153,"total_committers":1,"mean_commits":153.0,"dds":0.0,"last_synced_commit":"dcb0484f472b73dcf96e5c69d2589c1046a98876"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/electrikmilk/javascript-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electrikmilk%2Fjavascript-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electrikmilk%2Fjavascript-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electrikmilk%2Fjavascript-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electrikmilk%2Fjavascript-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/electrikmilk","download_url":"https://codeload.github.com/electrikmilk/javascript-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electrikmilk%2Fjavascript-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266312063,"owners_count":23909744,"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-07-21T11:47:31.412Z","response_time":64,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["css-in-js","javascript","javascript-ui","js-framework","swiftui"],"created_at":"2025-01-10T01:57:55.888Z","updated_at":"2025-10-26T23:15:53.449Z","avatar_url":"https://github.com/electrikmilk.png","language":"JavaScript","readme":"\u003cp align=center\u003e\n\t\u003cimg src=\"https://i.imgur.com/HnRViVq.png\" width=\"300\"/\u003e\n\u003c/p\u003e\n\n# JavaScript UI\n\n[![License](https://img.shields.io/github/license/electrikmilk/javascript-ui)](https://github.com/electrikmilk/javascript-ui/blob/main/LICENSE)\n[![Version](https://img.shields.io/npm/v/javascript-ui)](https://www.npmjs.com/package/javascript-ui)\n\nJavascript UI is a JavaScript framework. It describes HTML and CSS in Javascript similar to SwiftUI.\n\n## ❇️ Features\n\n- ✔️ Declarative syntax, functions nest within each other, similar to HTML, but with methods instead of CSS properties\n  and HTML attributes.\n- 😎 Useful shorthands for HTML tags and attributes and CSS properties.\n- 🤓 Methods for CSS tricks like `truncate()`, `fontSmoothing()`, fit, etc. More CSS is abstracted into views and\n  stacks like `ScrollView()`, `GridStack()`, `HStack()`, `VStack()`, etc.\n- 🐰 It's fast! Element objects simply provide helpful methods and are used during the first render, but they keep a\n  reference to their element or document fragment. They modify the element directly rather than re-rendering it. There\n  are never entire page re-renders, only selective re-renders when needed for state management.\n\n### 🔧 Built-in\n\n- 💾 Stores\n- ⚛️ State management\n- 🦋 Standard animations (rotate, fade, flip, shake, and more!)\n- 🧭 Router\n\n[Playground](https://codepen.io/internetgho5t/pen/ZExgBbm)\n\u0026bull; [Documentation](https://github.com/electrikmilk/jsUI/wiki)\n\n## Usage\n\nInstall via NPM:\n\n```console\nnpm i javascript-ui\n```\n\nImport and add elements to the `view()` function.\n\n```javascript\nimport {view, Section, Paragraph} from 'javascript-ui';\n\nwindow.onload = () =\u003e {\n    view([\n        Section([\n            Paragraph('Hello, World!')\n                .textColor('green')\n        ])\n    ]);\n};\n```\n\nResulting HTML:\n\n```html\n\n\u003csection\u003e\n    \u003cp style=\"color: green;\"\u003eHello, World!\u003c/p\u003e\n\u003c/section\u003e\n```\n\nResult in browser:\n\n![Example](https://i.imgur.com/8MgKcE4.png)\n\n---\n\nThis project aims to create a framework that allows you to create UI in a way that feels natural and easy.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectrikmilk%2Fjavascript-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felectrikmilk%2Fjavascript-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectrikmilk%2Fjavascript-ui/lists"}