Skip to content
Get packs

Guide · Open source

How to use Photon: clone, build and style an Electron app

Updated · written with AI from the project's own documentation and checked against our catalogue data

Photon is an open-source UI toolkit for building desktop apps with Electron. It supplies compiled CSS, Entypo icon fonts and a template Electron app, so you can style a desktop interface with plain HTML and CSS instead of writing the styling from scratch. This guide walks you through cloning the repository, running the example app and finding the files you need.

Photonconnors/photon · ★ 10.1k · MIT

Quick start

  1. 1Check prerequisites. Make sure Node.js and Git are installed on your computer. The README does not give a required Node.js version.
  2. 2Clone the repository. Run git clone on the Photon repository to download the source to your machine.
  3. 3Install dependencies. Run npm install inside the photon folder to install the node dependencies.
  4. 4Start the example app. Run npm start to open the example Electron app and see Photon's styling in use.
  5. 5Apply the styles to your app. Link the compiled photon.css and Entypo fonts into your own HTML, using the template-app as a reference.

What do you need before you install Photon?

Photon is aimed at developers who already build Electron apps. The README lists two prerequisites: Node.js and Git. It does not specify which Node.js version is required, so check the Electron project's own requirements if you are unsure.

  • Node.js (version not specified in the README)
  • Git, to clone the repository

How do you install Photon and run the example app?

Photon is installed by cloning the repository and building it locally. Clone the repo, move into the folder, install the node dependencies, then open the example app.

The README also notes that the master branch is an active, unstable development branch. If you want a more stable copy, use the tagged downloads on the project's GitHub page instead.

  • Clone the repository from GitHub.
  • Install the node dependencies.
  • Start the example app.
git clone https://github.com/connors/photon.git npm install npm start

What files are included in Photon?

The download is organised into a few groups. The css folder holds the compiled stylesheet, photon.css. The fonts folder contains the Entypo icon font files in several formats, including .eot, .svg, .ttf and .woff. The template-app folder holds a starter Electron application with app.js, index.html, package.json and a js/menu.js file.

  • css/photon.css: compiled CSS
  • fonts/: photon-entypo font files
  • template-app/: a starter Electron app with index.html, app.js, package.json and js/menu.js

How do you change Photon's Sass styles?

If you edit the Sass source files, the README says to open a second terminal tab and run a build command to regenerate the compiled photon.css. Leave the first tab running the app while you do this.

The README does not describe the Sass folder layout, so look in the repository itself for those details.

npm run build

Where do you find Photon's component documentation?

The README does not list the components in detail. It points to the project's documentation site at photonkit.com, which is built with Jekyll. The README also explains how to run the docs locally: install Jekyll (the README says it requires v2.5.x), install the Rouge syntax highlighter, run jekyll serve from the photon folder and open localhost:4000.

  • Read the docs at photonkit.com for component details.
  • To run the docs locally, follow the Jekyll steps in the README.
gem install rouge jekyll serve

What people use it for

  • Styling a desktop Electron app with consistent, native-looking controls
  • Building a quick prototype with a ready-made menu and window structure from the template app
  • Writing a desktop interface in plain HTML and CSS without a JavaScript component framework
  • Using Entypo icon fonts in an Electron interface

Frequently asked questions

Is Photon free to use?

Yes. Photon is released under the MIT licence, as stated in the README. Check the LICENSE file in the repository for the full terms.

What do I need to install Photon?

The README lists Node.js and Git as prerequisites. It does not specify a Node.js version, so you will need to confirm compatibility yourself.

How do I run Photon's example app?

Clone the repository with git clone, run npm install in the folder, then run npm start to open the example app.

Is Photon stable enough for production?

The README warns that the master branch is unstable and active. For a more stable copy, use the tagged downloads on GitHub. The README does not list a latest release.

Does Photon include React or Vue components?

No. The README describes compiled CSS, icon fonts and a template Electron app, so it is not a React or Vue component library.

What are alternatives to Photon?

The source lists Electron Fiddle, Bootstrap, Tailwind CSS and Ant Design as comparable projects. Bootstrap and Tailwind CSS are general CSS frameworks, while Ant Design is a React component library.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Photon suits developers who already build Electron apps and want ready-made, plain CSS styling with a starter template. It is a poor fit for anyone who needs a React or Vue component library, a stable tagged release process, or who is not comfortable building an app from source.

Install options & downloads