{"id":20562169,"url":"https://github.com/elyaconrad/photon","last_synced_at":"2025-08-03T09:07:17.810Z","repository":{"id":42951452,"uuid":"81237087","full_name":"ElyaConrad/Photon","owner":"ElyaConrad","description":"Clone native desktop UI's like cocoa and develop native feeling applications using web technologies","archived":false,"fork":false,"pushed_at":"2021-08-22T10:23:01.000Z","size":14565,"stargazers_count":407,"open_issues_count":10,"forks_count":38,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-07-11T18:50:49.187Z","etag":null,"topics":["atom","css","css3","electron","electron-app","javascript","native","node-js","nodejs","web-app"],"latest_commit_sha":null,"homepage":"https://mauriceconrad.github.io/Photon/","language":"CSS","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/ElyaConrad.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":"2017-02-07T17:53:56.000Z","updated_at":"2025-06-27T08:44:13.000Z","dependencies_parsed_at":"2022-09-26T16:21:10.536Z","dependency_job_id":null,"html_url":"https://github.com/ElyaConrad/Photon","commit_stats":null,"previous_names":["elyaconrad/photon","mauriceconrad/photon"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ElyaConrad/Photon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElyaConrad%2FPhoton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElyaConrad%2FPhoton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElyaConrad%2FPhoton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElyaConrad%2FPhoton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElyaConrad","download_url":"https://codeload.github.com/ElyaConrad/Photon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElyaConrad%2FPhoton/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268519109,"owners_count":24263048,"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-08-03T02:00:12.545Z","response_time":2577,"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":["atom","css","css3","electron","electron-app","javascript","native","node-js","nodejs","web-app"],"created_at":"2024-11-16T04:09:30.043Z","updated_at":"2025-08-03T09:07:17.473Z","avatar_url":"https://github.com/ElyaConrad.png","language":"CSS","readme":"# Photon\n\n[Official Website](https://mauriceconrad.github.io/Photon/)\n\nDevelop native looking UI's for **Electron** with HTML, CSS \u0026 JS.\n\n![ShowReel](https://dev.maurice-conrad.eu/img/photon/demo.png)\n\n## Install\n\n```bash\nnpm install electron-photon\n```\n\n[NPM](https://www.npmjs.com/package/electron-photon)\n\n## Usage\n\n```javascript\n// Require photon\nconst Photon = require(\"electron-photon\");\n```\n\n### Use in Browser\n\nIf you want to use Photon in a Browser, you have to mention some things.\nFirst of all, embed the browserified script file like anything else using a `\u003cscript\u003e` Tag.\nBut now, you also have to set a relative path for loading the components.\n```html\n\u003cscript src=\"photon.browser.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  Photon.__baseDir = \"/myPhotonMaster\";\n\u003c/script\u003e\n```\n\n#### Why?\n\nThis is because Photon needs an “endpoint” that contains a `/dist` folder to load each component.\nThe problem is, that we are embedding the `photon.browser.js` using a former script tag. And sadly, there exist no API to get the relative source of an embedded script from himself. Of course there exist a lot of hacks workarounds but currently this is the only “clean” solution.\n\n**Just look at the magic! Everything works out of the box.**\n\nYour `Photon` instance is just used to contain the component controllers and to perform special actions like `Dialog()` (More about [Dialogs](dist/PhotonDialog)). Or if you want to *hack* a components lifecycle, there you get the classes you need.\n\n### Troubleshooting\n\n**I get an error** `ERR_FILE_NOT_FOUND` when *requiring* the  **Photon**. Sometimes the components will not load and you may ask yourself why.\nGenerally, `Photon` loads each component on its own. Therefore, a general `/dist` folder is required that contains all component folders. By default, the module tries to use the `/dist` folder relative to the location of `photon.js` using node's `__dirname`. Because of the fact that browsers does not support a clear solution to get the relative path of embedded javascript file by itself, you have to set `Photon.__baseDir` manually when using the browserified version. And if you do not contain your `/dist` directory relative to the location of `photon.js` (which is the `main` file for the node module), you also have to set `Photon.__baseDir` manually.\n\nTherefore, if you get such an error, just try to set the `Photon.__baseDir` manually to the `/dist` folder you want to use to load your components\n\n## Example\n\nJust run the `demo/ShowReel` folder with `electron` and will see the whole beauty of Photon!\n\n## Application Layout\n\nThe main layout of your application needs a `\u003cph-window\u003e` element in which the `\u003ctool-bar\u003e`'s and your `\u003cwindow-content\u003e` will find their place.\n\n```html\n\u003cph-window\u003e\n  \u003c!--Top header bar here--\u003e\n  \u003ctool-bar type=\"header\"\u003e\n    Toolbar Header\n  \u003c/tool-bar\u003e\n  \u003c!--Window content here--\u003e\n  \u003cwindow-content\u003e\n    Window Content\n  \u003c/window-content\u003e\n  \u003c!--Bottom footer bar here--\u003e\n  \u003ctool-bar type=\"footer\"\u003e\n    Footer Header\n  \u003c/tool-bar\u003e\n\u003c/ph-window\u003e\n```\n\n## Components\n\n* [Panes](#panes)\n* [Navigation](#navigation-list)\n* [Toolbar](#toolbar)\n* [Table](#table-view)\n* [Tabs](#tabs)\n* [Lists/Swipes](#lists--swipes)\n* [Button](#button)\n* [Button Group](#button-group)\n* [Circular Slider](#circular-slider)\n* [ContentFrame/SelectList](#content-frame--select-list)\n* [Input](#input)\n* [NumberInput/Stepper](#number-input--stepper)\n* [NumberInput](#number-input)\n* [ProgressCircle](#progress-circle)\n* [Slider](#slider)\n* [Dialog](#dialog)\n\nIf you have a look at the project's structure, you will see that there exist a very well balanced component system you theoretically can contribute to with custom components.\n\n### Styles\n\nHow do I set the **style** of the UI?\n`Photon` supports multiple styles, inspired by native user interfaces from *macOS* or *Windows*.\n\nBy default, `Photon` tries to use the `style` that is connected to the running OS, stored in `process.platform`. But you can easily set the style to one of the supported ones. Note that the styles do not have the name of an operating system but their **real** name such as *cocoa*.\n\n|Style Name|Related Operating System|     Support\n|----------|------------------------|------------\n|  `cocoa` |     macOS (Apple)      |        True\n|  `metro` |  Windows (Microsoft)   |Coming soon\n|  `unity` |     Ubuntu (Linux)     |Coming soon\n\n#### Set Style\n\nYou can easily control the current style just with the `style` property of your `Photon` instance.\n\n```javascript\n// Set style\nPhoton.style = \"cocoa\";\n// Works as expected\n```\n\nYou can do this whenever you want while your application is running ;-)\n\nNote, that when you set a style the first time in your session, it may takes time to load the resources because they are not cached.\n\n#### Set An Invalid Style\n\n```javascript\n// Set style\nPhoton.style = \"xxx\";\n// Occurs an error\n```\n\n\n### Panes\n\n![Paned Layout](https://dev.maurice-conrad.eu/img/photon/paned1.png)\n\nMore about the panes in\n[Panes](dist/PhotonPanes)\n\n### Navigation List\n\n![Navigation List](https://dev.maurice-conrad.eu/img/photon/navigation2.png)\n\nMore about the navigation list in\n[Navigation List](dist/PhotonNavigation)\n\n### Toolbar\n\n![Toolbars](https://dev.maurice-conrad.eu/img/photon/toolbar1.png)\n\nMore about toolbars in [Toolbar](dist/PhotonToolbar)\n\n\n### Table View\n\n![Table View](https://dev.maurice-conrad.eu/img/photon/table1.png)\n\nMore about the table view in [Table View](dist/PhotonTable)\n\n### Tabs\n\n![Example](https://dev.maurice-conrad.eu/img/photon/tab1.gif)\n![Example](https://dev.maurice-conrad.eu/img/photon/tab2.gif)\n\nMore about tabs in [Tabs](dist/PhotonTab)\n\n### Lists \u0026 Swipes\n\n#### Lists\n\n![Lists](https://dev.maurice-conrad.eu/img/photon/lists.png)\n\n#### Swipes\n\n![Swipe](https://dev.maurice-conrad.eu/img/photon/swipe1.png)\n![Swipe](https://dev.maurice-conrad.eu/img/photon/swipe2.png)\n\n![Swipes Showreel](https://dev.maurice-conrad.eu/img/photon/swipes.gif)\n(GIF is slower than in reality)\n\nMore about lists \u0026 swipe actions in [Lists \u0026 Swipes](dist/PhotonSwipe)\n\n### Button\n\n![Button Default](https://dev.maurice-conrad.eu/img/photon/button1.png)\n\n![Button Default](https://dev.maurice-conrad.eu/img/photon/button2.png)\n\nMore about all buttons in [Button](dist/PhotonButton)\n\n### Button Group\n\n![Button Group Default](https://dev.maurice-conrad.eu/img/photon/buttongroupdefault.png)\n\n![ButtonGroup Segmented](https://dev.maurice-conrad.eu/img/photon/buttongroupdesegmented.png)\n\nMore about the button group component in [Button Group](dist/PhotonBtnGroup)\n\n### Circular Slider\n\n![Circular Slider](https://dev.maurice-conrad.eu/img/photon/circularslider1.png)\n\nMore about the circular slider in [Circular Slider](dist/PhotonCircularSlider)\n\n### Content Frame \u0026 Select List\n\n![Input Field Focused](https://dev.maurice-conrad.eu/img/photon/contentframe2.png)\n\nMore about the content frames and selectable lists in [Content Frame \u0026 Select List](dist/PhotonContent)\n\n### Input\n\n#### Simple Text Field\n\n![Input Field](https://dev.maurice-conrad.eu/img/photon/input1.png)\n![Input Field Focused](https://dev.maurice-conrad.eu/img/photon/input2.png)\n\n#### Number Input \u0026 Stepper\n\n![Number Input with Stepper](https://dev.maurice-conrad.eu/img/photon/input3.png)\n\nMore about input fields in [Input](dist/PhotonInput)\n\n### Messages\n\n![Messages](https://dev.maurice-conrad.eu/img/photon/messages.png)\n\nMore about messages view in [Messages](dist/PhotonMessages)\n\n### Number Input\n\n![Number Input](https://dev.maurice-conrad.eu/img/photon/numberinput.png)\n\nMore about number input in [Number Input](dist/PhotonNumberInput)\n\n### Progress Circle\n\n![Progress Circle](https://camo.githubusercontent.com/3ed0dfb5ab01ce1ebd6ae06acf1b86214d038281/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f72647063706c6f772f62696c6473636869726d666f746f323031362d31312d3132756d31352e332e706e67)\n\nMore about progress circle in [Progress Circle](dist/PhotonProgressCircle)\n\n### Slider\n\n![Slider](https://camo.githubusercontent.com/d4635dbfc74c802b7b6dac1edb65d68c1490850b/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706f7077612f62696c6473636869726d666f746f323031362d31312d3036756d32312e312e706e67)\n\nMore about sliders in [Slider](dist/PhotonSlider)\n\n### Dialog\n\n![Dialog](https://dev.maurice-conrad.eu/img/photon/dialog1.png)\n\nMore about dialog controller in [Dialog](dist/PhotonDialog)\n\n### Drop Down Menu\n\n![Dialog](https://dev.maurice-conrad.eu/img/photon/dropdown1.png)\n\nMore about drop down menu controller in [Drop Down Menu](dist/Drop Down Menu)\n\n### Browserify\n\nYou can `browserify` the `photon.js` file completely using the `--ignore-missing` flag which ignores the missing `electron` requirements. Please note, that not all features are supported in browsers because they may need electron or node functions.\n\nIf you browserify `photon.js` and execute it in a non-node enviroment, the `Photon` instance will adopted globally to the *window* object.\n\nThis repository contains a valid browserified file named `photon-browser.js`, you normally should use.\n\n### More\n\n**You are missing something or do you have improvements?**\n\nPlease open a *pull-request* or an *Issue* and I will do my best ;-)\n\n## Disclaimer\n\nThis framework is a **hard fork** of the original *PhotonKit* framework of *connors*. Because *connors* project is not developed anymore since more than **2** years, this is the release of Photon to version `1.0`.\n\nPieces of the code that is used here, is originally written by *connors*. The original code is contained within the CSS file `dist/PhotonOriginal/photon-original.css`.\n\nBut I made some important changes on the original components. E.g. I use modern technologies like **Custom Elements** to handle components much easier and cleaner and to provide a lighter API ;-)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felyaconrad%2Fphoton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felyaconrad%2Fphoton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felyaconrad%2Fphoton/lists"}