What does XUL look like?
¥<?xml version="1.0"?>
¥<?xml-stylesheet href="chrome://global/skin/"?>
¥<window id="test"
¥        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
¥        title="Hello, World!">
¥  <script type="application/x-javascript" src="test.js"/>
¥  <vbox flex="1">
¥    <listbox id="itemlist" flex="1">
¥      <listitem label="Item 1"/>
¥      <listitem label="Item 2"/>
¥    </listbox>
¥    <hbox>
¥      <textbox id="labelfield" flex="1"
¥               oninput="validateInput();"/>
¥      <button id="addButton" label="Add Item"
¥              disabled="true" oncommand="addItem();"/>
¥    </hbox>
¥  </vbox>
¥</window>
This is a very simple XUL window with a list control, a text box and a button. Clicking the button adds an item to the list with the label specified by the user in the text box.

The <window> tag is the document element, with a title to appear in its title bar.

The controls are laid out using XULÕs flexible box model, using the flex attribute to control how much of any available space each control should occupy on top of its preferred size.

User input events are handled by event handlers, similar to HTML.

A script file that provides the implementation of the event handlers is included using a <script> tag, similar to HTML.

Stylesheets are included to provide default appearance to widgets, using processing instructions.