Zwidget is an Electron app that allows you to easily launch widgets on your Windows desktop — well, sort of. The widgets are essentially browser windows that are stuck to the bottom of the Z-index stack when they're created (hence the name).

Each widget has a backend layer and a frontend layer. The backend is usually a single JavaScript file, that has access to the main process, and where Node.js APIs can be used. The frontend is composed of an HTML template, a CSS file, and a JavaScript file, where modern web browser APIs can be used in the renderer process. Conforming to the architecture of an Electron app, a preload JavaScript file helps the backend and the frontend communicate to each-other by exposing API endpoints to the renderer.

1. Run npm install in the root directory to install the project's dependencies.
2. Run npm start to build the CSS files, and start the app.

NOTE: The npm scripts in this repo's package.json will work only if you're running them with the Git Bash shell. To use the Git Bash shell, run this command on the terminal:

npm config set script-shell "C:\Program Files\Git\bin\bash.exe"

This is assuming you have installed Git Bash on your machine, and your Git Bash executable is located in the path above. However, you can also use the PowerShell shell like this, but keep in mind you'd have to make changes to package.json and the scripts in the scripts directory:

npm config set script-shell "powershell"

This repository's code was developed with the intention of making it as easy as possible for someone who has web development experience to create their own widget by using the existing code and directory structure. Therefore, several scripts have been included in the scripts directory to allow the developer to focus only on the widget's appearance and functionality. However, it is important to preserve the existing structure of the repo; otherwise, you will have to modify the scripts, in order to make them work.

To add your widget to the existing file structure, run the create-files npm script in the root directory:

npm run create-files '[Widget Name]' '[width]' '[height]'   # e.g. npm run create-files 'Stock Watch' '400' '200'

This script will generate these files in their respective directories:

• A template HTML file in src/[widget-name]/frontend/template.html.
• An input CSS file in src/[widget-name]/frontend/css. You will most likely never have to change this file.
• A JavaScript file in src/[widget-name]/frontend/javascript. This file will contain the renderer logic of the widget.
• A JavaScript preload file in the src/[widget-name]/preload directory. You will most likely never have to change this file.
• A JavaScript file in src/[widget-name]/backend. This file will contain the backend logic of your widget.

The file structure of the widget should look like this:

src/
└── widget-name/
    ├── backend/
    │   └── backend.js
    ├── frontend/
    │   ├── css/
    │   │   └── input.css
    │   ├── javascript/
    │   │   └── renderer.js
    │   └── template.html
    └── preload/
        └── preload.js

The script will also define a widget object in the widgets.js file, located in src/main-window, and add this file to the allWidgets array. This is necessary for the window of the widget to be created when needed.

In the root directory, run the build npm script:

npm run build

The distributable files will be created in dist/Zwidget.

Since Microsoft Defender is often responsible for the slow startup of Electron apps, a PowerShell script, that adds the path to Zwidget's installation directory to the exclusion list of Microsoft Defender, is executed during installation. However, for the script to work, it is necessary to run the installer as an administrator.

To build only the unpacked application, run the build-unpacked npm script:

npm run build-unpacked

The distributable files will be created in dist/Zwidget-win32-x64

👉 This is where I obtained the awesome Zwidget icon: Shapes and symbols icons created by Rakib Hassan Rahim - Flaticon

Like Zwidget? Just 🌟 the project! Create issues if you find a bug.