Develop native looking UI's for Electron with HTML, CSS & JS.
npm install electron-photon
// Require photonconst Photon = ;
Use in Browser
If you want to use Photon in a Browser, you have to mention some things.
First of all, embed the browserified script file like anything else using a
But now, you also have to set a relative path for loading the components.
This is because Photon needs an “endpoint” that contains a “/dist” folder to load each component.
The 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 hackt workarounds but currently this is the only “clean” solution.
Just look at the magic! Everything works out of the box.
Photon instance is just used to contain the component controllers and to perform special actions like
Dialog() (More about Dialogs). Or if you want to hack a components lifecycle, there you get the classes you need.
I get an error
ERR_FILE_NOT_FOUND when requiring the Photon. Sometimes the components will not load and you may ask yourself why.
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
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
Therefore, 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
Just run the
demo/ShowReel folder with
electron and will see the whole beauty of Photon!
The main layout of your application needs a
<ph-window> element in which the
<tool-bar>'s and your
<window-content> will find their place.
<!--Top header bar here-->Toolbar Header<!--Window content here-->Window Content<!--Bottom footer bar here-->Footer Header
- Button Group
- Circular Slider
If 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.
How do I set the style of the UI?
Photon supports multiple styles, inspired by native user interfaces from macOS or Windows.
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.
|Style Name||Related Operating System||Support|
||Windows (Microsoft)||Cooming soon|
||Ubuntu (Linux)||Cooming soon|
You can easily control the current style just with the
style property of your
// Set stylePhotonstyle = "cocoa";// Works as expected
You can do this whenever you want while your application is running ;-)
Note, 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.
Set An Invalid Style
// Set stylePhotonstyle = "xxx";// Occurs an error
More about the panes in Panes
More about the navigation list in Navigation List
More about toolbars in Toolbar
More about the table view in Table View
More about tabs in Tabs
Lists & Swipes
(GIF is slower than in reality)
More about lists & swipe actions in Lists & Swipes
More about all buttons in Button
More about the button group component in Button Group
More about the circular slider in Circular Slider
Content Frame & Select List
More about the content frames and selectable lists in Content Frame & Select List
Simple Text Field
Number Input & Stepper
More about input fields in Input
More about messages view in Messages
More about number input in Number Input
More about progress circle in Progress Circle
More about sliders in Slider
More about dialog controller in Dialog
Drop Down Menu
More about drop down menu controller in Drop Down Menu
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.
If you browserify
photon.js and execute it in a non-node enviroment, the
Photon instance will adopted globally to the window object.
This repository contains a valid browserified file named
photon-browser.js, you normally should use.
You are missing something or do you have improvements?
Please open a pull-request or an Issue and I will do my best ;-)
This 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
Pieces of the code that is used here, is originally written by connors. The original code is contained within the CSS file
But 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 ;-)