Spice up your mac desktop with custom widgets, yes we can write our own widgets using coffeescript, HTML5, JSX, React and JS
Tags: javascript, programming, react, ubersicht
Published: 2022-03-26 09:45:08


![Mac custom widgets in desktop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zd7fbiqd6eouwgkn0hc.png)

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](https://tracesof.net/uebersicht/). 

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/685fpycr13r3qruo8bwn.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf07c0p907vk8o5ds7py.png)


![Debugging 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kghrmzmnudaw12x6ff65.png)


A minimal widget looks like this:

**Sample Code**:


![Sample Code to run your own Übersicht widget](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/humziy8btie9sj288pq7.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de59mkdjnhjkgo6hbqwj.png)

so you got an idea now!

Your widget can have following stuffs at a minimal level:

```
README.md
screenshot.png
widget.json
index.coffee
```

or 

```
README.md
screenshot.png
widget.json
index.js
```

or

```
README.md
screenshot.png
widget.json
index.jsx
```


To learn more how to write your code see this [link](https://github.com/felixhageloh/uebersicht)

If you prefer writing in coffeescript then this [link](https://github.com/felixhageloh/uebersicht/blob/master/ClassicWidgets.md). 

If you download first existing widgets to try and see how they look then its available in [Übersicht official site](https://tracesof.net/uebersicht-widgets/).

After writing your own widget, you can [submit your widget](https://tracesof.net/uebersicht-widgets/#submit) 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](https://github.com/zakirsajib/bdt-currency-converter.widget)