The built-in web developer tools (Cmd + Opt + I) will help you out a lot.

Don't bother using Firefox, or trying to make the HTML render the same in multiple browsers. Since the widget will be rendered using WebKit, you will want to use Google Chrome or Apple Safari to develop. While developing your widget, you will want to build it in a web browser. AJAX works better than expected (no cross domain limitations), and you can even run command line applications (which can be distributed within the widget). The background of the DOM is transparent by default, and using semi-transparent PNG's show the desktop as expected. A widget can have a predefined (and resizable), width and height. Each widget in the OS X Dashboard contains it's own DOM, supports most of the existing events you would expect, and is rendered using WebKit (or, more specifically, Safari based WebKit, I believe there are some Safari specific features you can use). The coolest thing about Dashboard Widgets is that they are built using HTML and JavaScript, which means that any web developer can build a widget. I've picked up these tips while developing the NeoInvoice Time Tracking Widget, along with development of some other smaller widgets. This guide will cover some tools to use, shortcomings, gotcha's, you name it.

This guide is meant to supplement the comprehensive (although limited) Apple Dashboard Reference page, which provides a lot of technical details, but lacks some of the important “between the lines” stuff. 5 min read Multithreaded JavaScript has been published with O'Reilly!

Mac os dashboard widgets