How To: Add Custom or Pre-Made HTML5 Widgets to Your Mac's Desktop

Apple hasn't been the most avid supporter of widgets over the years. Yes, they added them to the Notification Center in Yosemite, but that requires a drawer to be opened and closed whenever you want to check them. In my search for a better solution, I came across Ubersicht by developer Felix Hageloh.

Ubersicht is not just a widget, but a collection of HTML5 widgets that can be arranged any way you like on your desktop. Because they're coded in HTML5, you can take a crack at making your own, but if that isn't your style, there are plenty of free, user-created widgets available from the Ubersicht website.

Step 1: Install Ubersicht

Ubersicht is not hosted on the Mac App Store, so you will need to download it from their official website. Make sure that your security settings are set to allow third-party app installs beforehand. Once the archive is downloaded, unzip it and place it in your Applications folder.

• Download Ubersicht 0.3.13 (new versions can be found here)

Step 2: Add Widgets

You can follow the instructions on the Ubersicht website to create your own widgets, or find some pre-made options from their widget gallery. After downloading a widget, locate (usually in your Downloads folder) and unzip it.

Now open Ubersicht and click on Open Widgets Folder option from the menu bar icon. Now simply move the widget folders you just unzipped to the Ubersicht widget folder.

Step 3: Move Widgets

Unfortunately, you can't just drag to move widgets wherever you want, but this is a good thing, since now whenever you connect a display to your Mac, it won't break your widget layout. The position of each widget is written in its code, but don't let that hold you back.

Go back into the widgets folder, open the folder of your target widget, then open the index.coffee file located inside with any text editor app.

Once the file opens, look for the style header and the line that reads either top, bottom, left, or right. You can change the px value to anything you want, but be sure to not make it anything over your displays resolution. If you don't know that value, check it from About This Mac -> Displays. The position is updated once you save the file, so you can tweak your changes in real time.

While it is a bummer that Apple doesn't allow native widgets to be added to your desktop, it is reassuring that developers will always be there to pick up the slack. Let us know your favorite widgets or show off your current set up in the comment below, and make sure to follow us on Facebook and Twitter for more Mac fun.