DEV Community

Cover image for Spice up your mac desktop with custom widgets, yes we can write our own widgets using coffeescript, HTML5, JSX, React and JS
Zakir Sajib
Zakir Sajib

Posted on

Spice up your mac desktop with custom widgets, yes we can write our own widgets using coffeescript, HTML5, JSX, React and JS

Mac custom widgets in desktop

There are native widgets available in mac but I don't like them.

I like my own widgets on desktop. Such as Weather, Currency, Timezones, or even system information such as CPU load, Memory status, Disk or network status. I want full control what these widgets are doing and most importantly I want to hone my existing skill sets - JavaScript, React, JSX and learn new thing CoffeeScript.

Its possible using third party app called - ubersicht.

Its a mac app which will allow any JavaScript, React, JSX code to run on your mac desktop and display information.

According to Übersicht:

Übersicht lets you run system commands and display their output on your desktop in little containers, called widgets.

First you need to download and install Übersicht and you can put it into applications folder or anywhere and run it.

Location of all its widgets are:

..../Library/Application Support/Übersicht/widgets

Inside this widgets folder we can create our own widgets.

The widgets folder may look like this:

The widgets folder

Folder syntax:

{foldername}.widget
hello-world.widget

.widget is important, without this .widget Übersicht won't recognize.
You can also write your code without creating any folder. Just put your index.js or index.jsx or index.coffee within this location (..../Library/Application Support/Übersicht/widgets) and it will run if there is no error.

How to Debug

Its quite similar the way we inspect element in browser.

click show debug console.

Debugging 1

Debugging 2

A minimal widget looks like this:

Sample Code:

Sample Code to run your own Übersicht widget

A sample of complex code to see current month as calendar in CoffeeScript.

Sample Code:

A complex code to see current month as calendar in CoffeeScript

so you got an idea now!

Your widget can have following stuffs at a minimal level:

README.md
screenshot.png
widget.json
index.coffee
Enter fullscreen mode Exit fullscreen mode

or

README.md
screenshot.png
widget.json
index.js
Enter fullscreen mode Exit fullscreen mode

or

README.md
screenshot.png
widget.json
index.jsx
Enter fullscreen mode Exit fullscreen mode

To learn more how to write your code see this link

If you prefer writing in coffeescript then this link.

If you download first existing widgets to try and see how they look then its available in Übersicht official site.

After writing your own widget, you can submit your widget to Übersicht.

Small Warning:

  • All widgets are built by third party developers in Übersicht and most of them are nonreponsive to answer your any queries or question (well, it happened to me but you might be lucky). you can create issue in their github and wait for their response. Good luck.
  • Don't mess around with system command.

My Currency convertor.

Example:
Currency Conversion

Top comments (0)