Subscribe to RSS Feed

There is bunch of various possibilities how to generate UI using Domplate (remember entire Firebug UI is generated using Domplate - i.e. content of all panels) and so here is another set of how to examples that is trying to reveal some other useful aspect and patterns. Of course, all examples can be explored using Domplate Runner again.

See all posts about Domplate here.

Enjoy! 😉


There is still lack of documentation for Domplate (even if there are already some articles) and so, I have decided to put together set of how to examples. I believe that this kind of simple and focused examples is good start for everybody who wants to understand how Domplate works and use it for building HTML UI.

Each example consists usually from following parts:

  • Domplate Script: the script used to describe Domplate template
  • Input Data (object): input data for a dynamic template
  • CSS: set of CSS rules used by result DOM

Every example also contains a brief description and a Demo button that can be used to run the example with Domplate Runner and see/explore generated markup. Since the runner is based on Domplate, specifically on
JQuery Domplate Plugin (made by Christoph Dorn) and Domplate doesn't support other browsers yet, it runs only in Firefox. So, if you are not using Firefox, perhaps it's good time to install it now. 😉


Even if this part is also about web services integration, the main purpose is actually to show another (and a bit more complex) example of Domplate usage. In this part I have used Yahoo! Search Web Services to track inbound links and demonstrate how Domplate can be used together with real data. Final extension in this part will discover what pages link to the current page in the browser.

One of the most interesting parts of the Firebug framework is a template system called Domplate. This engine is used to generate HTML UI of Firebug (content of all FB's panels).

It's quite powerful template system and I would definitely recommend to use it when creating UI for Firebug extensions.

Domplate generates the result HTML markup according to templates written in JavaScript. These templates are internally evaluated into a text, which is consequently inserted into specified DOM element on the page through innerHTML property.

It's also possible to define DOM event listeners so, the template object can handle even the user interaction with the final UI.