--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/input/xmlui.html	Sun Sep 24 16:48:15 2017 +0200
@@ -0,0 +1,108 @@
+{% import 'input/field.html' as field %}
+
+{# generate methods #}
+
+{% macro generate_container(cont) %}
+    {% if cont.type == 'vertical' %}
+        {{ vertical_container(cont) }}
+    {% elif cont.type == 'pairs' %}
+        {{ pairs_container(cont) }}
+    {% elif cont.type == 'label' %}
+        {{ label_container(cont) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro generate_widget(wid, id=none) %}
+    {% if wid.type == 'text' %}
+        {{ text_widget(wid, id=id) }}
+    {% elif wid.type == 'label' %}
+        {{ label_widget(wid) }}
+    {% elif wid.type == 'string' %}
+        {{ string_widget(wid, id=id) }}
+    {% elif wid.type == 'textbox' %}
+        {{ textbox_widget(wid, id=id) }}
+    {% elif wid.type == 'list' %}
+        {{ list_widget(wid, id=id) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro generate_children(cont) %}
+    {% for child in cont.children %}
+        {% if child.category == 'container' %}
+            {{ generate_container(child) }}
+        {% else %}
+            {{ generate_widget(child) }}
+        {% endif %}
+    {% endfor %}
+
+{% endmacro %}
+
+{% macro generate(xmlui) %}
+    {{ generate_container(xmlui.main_cont) }}
+{% endmacro %}
+
+{# containers #}
+
+{% macro vertical_container(cont) %}
+    <div class="xmlui_cont xmlui_cont_vertical">
+        {{ generate_children(cont) }}
+    </div>
+{% endmacro %}
+
+{% macro pairs_container(cont) %}
+    {# TODO: proper impelmentation (do the same as vertical container for now #}
+    <div class="xmlui_cont xmlui_cont_vertical">
+        {{ generate_children(cont) }}
+    </div>
+{% endmacro %}
+
+{% macro label_container(cont) %}
+    <div class="xmlui_cont xmlui_cont_vertical">
+        {% for child in cont.children %}
+            {% if loop.index is odd %}
+                {# label #}
+                {% set id = 'widget'|next_gidx %}
+                {% if child.type == 'label' %}
+                    {{ label_widget(child, for=id) }}
+                {% endif %}
+            {% else %}
+                {# widget #}
+                {% set id = 'widget'|cur_gidx %}
+                {{ generate_widget(child, id=id) }}
+            {% endif %}
+        {% endfor %}
+    </div>
+{% endmacro %}
+
+
+{# widgets #}
+
+{% macro text_widget(wid, id=none) %}
+    <p class="xmlui_widget xmlui_text" {{ {'id':id}|xmlattr }}>
+        {{wid.value}}
+    </p>
+{% endmacro%}
+
+{% macro label_widget(wid, for=none) %}
+    <label class="xmlui_widget xmlui_label"{{ {'for':for}|xmlattr }}>
+        {{wid.value}}
+    </label>
+{% endmacro%}
+
+{% macro string_widget(wid, id=none) %}
+    <input class="xmlui_widget xmlui_string" type="text" {{ {'name':wid.name, 'id':id, 'value':wid.value}|xmlattr }}>
+{% endmacro%}
+
+{% macro textbox_widget(wid, id=none) %}
+    <textarea class="xmlui_widget xmlui_textbox" rows="10" cols="50" {{ {'name':wid.name, 'id':id}|xmlattr }}>
+        {{- wid.value -}}
+    </textarea>
+{% endmacro%}
+
+{% macro list_widget(wid, id=none) %}
+    <select class="xmlui_widget xmlui_list"{{ {'name':wid.name, 'id':id}|xmlattr }}>
+        {% for value,label in wid.options %}
+            <option {{ {'value':value}|xmlattr }} {{ 'selected' if value == wid.selected }}>{{label}}</option>
+        {% endfor %}
+    </select>
+{% endmacro%}

--- a/default/static/styles.css	Sun Sep 24 16:47:12 2017 +0200
+++ b/default/static/styles.css	Sun Sep 24 16:48:15 2017 +0200
@@ -52,3 +52,25 @@
     width: 60%;
     margin: 1.5em auto;
 }
+
+/* Forms */
+
+.form_submit {
+    margin: 1em auto 0;
+    display: block;
+}
+
+/* XMLUI */
+
+.xmlui_cont_vertical>* {
+    display: block;
+    box-sizing: border-box;
+}
+
+.xmlui_cont_vertical>.xmlui_widget {
+    width: 100%;
+}
+
+label.xmlui_label {
+    font-weight: bold;
+}