XULPIXはXUL実行環境を用いて、デザインを直接描画させている。 デザインを変更している間、すでにプログラムが実行している状態にある。 期待通りの結果を得るには実行と編集の区別を把握することが必要になる。
デザインに関するすべての操作はツリーパネルとプロパティパネルで行う。 広く使われている開発環境のデザイナのように、デザインパネル上のコントロールを直接変更することはできない。 例えば、マウスのドラッグで大きさを変えたり、クリックしてフォーカスしたテキストボックスの表示文字を直接入力して 変えることはできない。
XULPIXにおいて、そのようなデザインパネル上の操作はすべて実行時の変更と解釈される。 つまり編集しているドキュメントには何も影響を与えずReloadすれば元に戻る。 textboxの内容(デフォルト値)を変える場合、ツリーパネル内のtextboxアイテムを選択し、属性タブ内のvalue値を変えるという手順をとる。
もうひとつ具体例を挙げる。
２つのボックスの間にsplitterがあり、このスプリッターの位置を動かして、２つのボックスの大きさの比率を変えたい場合。 splitterをマウスでドラッグして動かしても二つのボックスの大きさは変わるかもしれないが、出力ファイルに対しては何の変更も行っていないことになる。 正しいやり方は、2つのボックスのflex,またはwidthやheightを属性パネル内で変更するという方法である。
編集しているドキュメントを初期化する時以外にも、デザインを編集中に目的の結果が得られないときに リロードを行うとうまくいく場合がある。
元に戻せる操作は要素の追加、削除、移動となる
ツリーパネル上のテキストノードを選択すると、プロパティパネルにテキストボックスが表示され、 その中でテキストを編集することができる。ツリーパネル上のテキストノードをダブルクリックすると デザインパネルと同じ位置にテキストボックスのタブが表示され、テキストを編集することができる。