{"id":20545493,"url":"https://github.com/eonist/element","last_synced_at":"2025-04-04T09:08:21.765Z","repository":{"id":93635075,"uuid":"39192100","full_name":"eonist/Element","owner":"eonist","description":"Programmatic UI for macOS","archived":false,"fork":false,"pushed_at":"2023-04-17T09:35:58.000Z","size":7186,"stargazers_count":855,"open_issues_count":4,"forks_count":36,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-03-28T08:06:10.290Z","etag":null,"topics":["animation","components","css","framework","gui","interface","macos","programatic","svg"],"latest_commit_sha":null,"homepage":"","language":"Swift","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/eonist.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}},"created_at":"2015-07-16T10:58:39.000Z","updated_at":"2025-01-11T06:59:35.000Z","dependencies_parsed_at":"2024-01-12T19:48:34.169Z","dependency_job_id":"4a115f9f-ed4f-439a-92a3-11764bfd7a86","html_url":"https://github.com/eonist/Element","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eonist%2FElement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eonist%2FElement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eonist%2FElement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eonist%2FElement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eonist","download_url":"https://codeload.github.com/eonist/Element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149501,"owners_count":20891954,"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":["animation","components","css","framework","gui","interface","macos","programatic","svg"],"created_at":"2024-11-16T01:52:24.753Z","updated_at":"2025-04-04T09:08:21.742Z","avatar_url":"https://github.com/eonist.png","language":"Swift","readme":"![MIT Status](https://img.shields.io/badge/License-MIT-lightgrey.svg?maxAge=2592000) ![platform](https://img.shields.io/badge/OS-macOS-blue.svg?maxAge=2592000)  ![Lang](https://img.shields.io/badge/Swift-4-orange.svg) [![SPM  compatible](https://img.shields.io/badge/SPM-compatible-orange.svg)](https://github.com/apple/swift-package-manager) [![codebeat badge](https://codebeat.co/badges/2de7a2a5-91d5-401e-8913-8f1993affd55)](https://codebeat.co/projects/github-com-eonist-element) \n\n\u003ca href=\"https://www.producthunt.com/posts/stylekit?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-stylekit\" target=\"_blank\"\u003e\u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=50514\u0026theme=dark\" alt=\"StyleKit - UI\u0026#0032;framework\u0026#0032;for\u0026#0032;OSX | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /\u003e\u003c/a\u003e\n\n### Description:\nProgrammatic UI Framework for macOS. Swift handles app logic, CSS/SVG handles design and JSON handles struture. \n\n\u003cimg width=\"608\" alt=\"img\" src=\"https://raw.githubusercontent.com/stylekit/img/master/progressindicator2_trim.mp4.gif\"\u003e\n\n### Installation:\n**Step 1:** Add this to your Package.swift [Tutorial](http://stylekit.org/blog/2017/02/05/Xcode-and-spm/)\n\n```swift\nimport PackageDescription\nlet package = Package(\n    name: \"AwesomeApp\",\n    dependencies: [\n\t   .Package(url: \"https://github.com/eonist/Element.git\", Version(0, 0, 0, prereleaseIdentifiers: [\"alpha\", \"5\"]))\n    ]\n)\n```\n\n**Step 2:** In AppDelegate.swift add this to the top ``@testable import Element`` and ``@testable import Utils``and this inside the ``applicationDidFinishLaunching`` method:\n\n```swift\nStyleManager.addStyle(\"Button{fill:blue;}\")\nlet btn = Button(100,20)\nlet window = NSApp.windows[0]\nwindow.contentView = InteractiveView()/*TopLeft orientation*/\nwindow.contentView?.addSubview(btn)\nbtn.addHandler(.upInside) = { (event:ButtonEvent) in\n   Swift.print(\"hello world\")\n}\n```\n\nYou can also compile Element as a regular .framework instructions [here](https://github.com/eonist/Element/wiki/framework-instructions) \n\n### Resources: \n- Simple example app made with Element: [Stash](https://github.com/stylekit/stash) \n- Library of example code for each component in Element: [Explorer](https://github.com/stylekit/explorer)  \n- Default macOS styles to get you started: [ElCapitan](https://github.com/stylekit/ElCapitan)  \n\n### iOS:\nElement for 📱 is in the works [here](https://github.com/stylekit/Element-iOS)   \n\u003cimg width=\"186\" alt=\"img\" src=\"https://raw.githubusercontent.com/stylekit/img/master/switch8crop20fps.gif\"\u003e  \n\n## More...\nMore about Element 👉 [wiki](https://github.com/eonist/Element/wiki) \n\n## Sponsors:\n[\u003cimg width=\"150\" alt=\"img\" src=\"https://rawgit.com/stylekit/img/master/appcode-logo.svg\"\u003e\n](https://www.jetbrains.com/objc/) \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feonist%2Felement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feonist%2Felement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feonist%2Felement/lists"}