diff --git a/src/App.svelte b/src/App.svelte
index f13ab29..c2bab7f 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4,8 +4,6 @@
 
     // TODO: import Jsonix as module
     // TODO: reset currentItem after loading a new file
-    // TODO: edit struktur, not enthaelt.datenfeld or enthaelt.datenfeldgruppe and make anzahl available
-    // TODO: use stammdatenschema as root of tree to allow adding elements before first enthaelt
     // TODO: optionally use own counter in number range 00
 
     import example from "./bewohnerparken-datenfelder.json"
@@ -18,8 +16,14 @@
     let formHandle;
     let stammdatenschemaValue;
 
-    // let stammdatenschemaElement = example;
-    let stammdatenschemaElement;
+    let stammdatenschemaElement = example;
+    // let stammdatenschemaElement;
+
+    let maskInformation = {
+        profile: {
+            seitenbau: {}
+        }
+    };
 
     $: if (stammdatenschemaElement) {
         stammdatenschemaValue = stammdatenschemaElement.value;
@@ -112,8 +116,8 @@
     <button on:click={loadTemplate} disabled='{!stammdatenschemaElement}'>Formulartemplate wählen...</button>
 
     {#if stammdatenschemaValue}
-        <h1>{stammdatenschemaValue.stammdatenschema.name}</h1>
-        <Stammdatenschema structures="{stammdatenschemaValue.stammdatenschema.struktur}"/>
+<!--        <h1>{stammdatenschemaValue.stammdatenschema.name}</h1>-->
+        <Stammdatenschema stammdatenschema="{stammdatenschemaValue.stammdatenschema}" {maskInformation}/>
     {/if}
 </div>
 <style>
diff --git a/src/Datenfeld.svelte b/src/Datenfeld.svelte
index ca800b7..10022f2 100644
--- a/src/Datenfeld.svelte
+++ b/src/Datenfeld.svelte
@@ -1,10 +1,13 @@
 <script>
     import {createEventDispatcher} from 'svelte';
+    import Field from "./profiles/seitenbau/Field.svelte";
 
     const dispatch = createEventDispatcher();
 
     export let currentItem;
     export let currentItemJson;
+    export let currentMaskInformation;
+    export let anzahl;
 
     let bezeichnungEingabeInput; // TODO to focus when the item is new
 
@@ -103,6 +106,7 @@
             <input class="w3-input" bind:value="{currentItem.schemaelementart.code}"/>
         </label>
     </div>
+    <Field {currentMaskInformation} feldart="{currentItem.feldart.code}" datentyp="{currentItem.datentyp.code}" anzahl="{anzahl}" on:maskInformationChanged/>
     <p>
         <label>Quelltext
             <textarea class="w3-input" rows="30" cols="80" disabled>{currentItemJson}</textarea>
diff --git a/src/Datenfeldgruppe.svelte b/src/Datenfeldgruppe.svelte
index 6b61f09..75a97e3 100644
--- a/src/Datenfeldgruppe.svelte
+++ b/src/Datenfeldgruppe.svelte
@@ -6,6 +6,7 @@
 
     export let currentItem = {};
     export let currentItemJson = {};
+    export let currentMaskInformation;
 
     let bezeichnungEingabeInput; // TODO to focus when the item is new
 
diff --git a/src/Stammdatenschema.svelte b/src/Stammdatenschema.svelte
index 82244ac..96df7f4 100644
--- a/src/Stammdatenschema.svelte
+++ b/src/Stammdatenschema.svelte
@@ -1,23 +1,32 @@
 <script>
     import Struktur from "./Struktur.svelte";
     import StrukturEditor from "./StrukturEditor.svelte"
+    import StammdatenschemaRoot from "./StammdatenschemaRoot.svelte";
+    import StammdatenschemaEditor from "./StammdatenschemaEditor.svelte";
 
-    export let structures = [];
+    export let stammdatenschema;
+    // export let structures = [];
     export let maskInformation;
 
+    let structures = [];
     let currentItem;
     let currentFimIdPath;
     let currentMaskInformation = {};
     let currentItemJson = "";
+    let indent = 18
+
+    $: if (stammdatenschema) {
+        structures = stammdatenschema.struktur;
+    }
 
     function selectCurrentItem(event) {
         currentFimIdPath = event.detail.fimIdPath;
-        if(!maskInformation.profile['seitenbau'][currentFimIdPath]) {
+        if (!maskInformation.profile['seitenbau'][currentFimIdPath]) {
             maskInformation.profile['seitenbau'][currentFimIdPath] = {};
         }
         currentMaskInformation = maskInformation.profile['seitenbau'][currentFimIdPath];
         const structure = event.detail.current;
-        console.log(structure);
+        console.log(`structure: ${JSON.stringify(structure)}`);
         currentItem = structure;
         const currentItemClone = Object.assign({}, structure); // clone structure to delete struktur from it for json display
         delete currentItemClone.struktur;
@@ -28,11 +37,16 @@
         structures = structures;
     }
 
+    function updateStammdatenschema() {
+        stammdatenschema = stammdatenschema;
+    }
+
     function updateMaskInformation() {
         console.log("updateMaskInformations")
         maskInformation = maskInformation;
     }
 
+
 </script>
 
 <style>
@@ -41,15 +55,23 @@
 <div class="stammdatenschema w3-cell-row">
 
     <div class="structures w3-container w3-cell" style="width:45%">
-        {JSON.stringify(maskInformation)}
+        <!--{JSON.stringify(maskInformation)}-->
+        <StammdatenschemaRoot {stammdatenschema} on:currentItemSelected={selectCurrentItem}/>
         {#each structures as structure, i}
-            <Struktur struktur={structure} parentStructures={structures} index="{i}" fimIdPath="{structure.enthaelt.datenfeld ? structure.enthaelt.datenfeld.identifikation.id : structure.enthaelt.datenfeldgruppe.identifikation.id}"
-                       on:currentItemSelected={selectCurrentItem} on:structuresChanged={updateStructures}/>
+            <Struktur struktur={structure} parentStructures={structures} indent="{indent}" index="{i}"
+                      fimIdPath="{structure.enthaelt.datenfeld ? structure.enthaelt.datenfeld.identifikation.id : structure.enthaelt.datenfeldgruppe.identifikation.id}"
+                      on:currentItemSelected={selectCurrentItem} on:structuresChanged={updateStructures}/>
         {/each}
     </div>
 
     <form class="editor w3-container w3-light-grey w3-cell" style="margin-left:46%">
-        <StrukturEditor {currentItem} {currentItemJson} {currentMaskInformation} on:structuresChanged="{updateStructures}" on:maskInformationChanged={updateMaskInformation}/>
+        {#if currentItem && currentItem.enthaelt}
+            <StrukturEditor {currentItem} {currentItemJson} {currentMaskInformation}
+                            on:structuresChanged="{updateStructures}"
+                            on:maskInformationChanged={updateMaskInformation}/>
+        {:else}
+            <StammdatenschemaEditor {currentItem} on:structuresChanged={updateStammdatenschema}/>
+        {/if}
     </form>
 
 </div>
\ No newline at end of file
diff --git a/src/StammdatenschemaEditor.svelte b/src/StammdatenschemaEditor.svelte
new file mode 100644
index 0000000..c732061
--- /dev/null
+++ b/src/StammdatenschemaEditor.svelte
@@ -0,0 +1,20 @@
+<script>
+    import {createEventDispatcher} from 'svelte';
+
+    const dispatch = createEventDispatcher();
+
+    export let currentItem;
+
+    function bezeichnungEingabeChanged() {
+        dispatch("structuresChanged")
+    }
+</script>
+
+{#if currentItem}
+    <h4>Stammdatenschema {currentItem.identifikation.id} V{currentItem.identifikation.version}</h4>
+    <div class="w3-row">
+        <label>Bezeichnung Eingabe
+            <input class="w3-input" bind:value="{currentItem.bezeichnungEingabe}" on:change={bezeichnungEingabeChanged}/>
+        </label>
+    </div>
+{/if}
diff --git a/src/StammdatenschemaRoot.svelte b/src/StammdatenschemaRoot.svelte
new file mode 100644
index 0000000..8c3400a
--- /dev/null
+++ b/src/StammdatenschemaRoot.svelte
@@ -0,0 +1,162 @@
+<script>
+    import {createEventDispatcher} from 'svelte';
+    import {v4 as uuidv4} from "uuid";
+
+    export let stammdatenschema;
+
+    let open = false;
+    const dispatch = createEventDispatcher();
+
+    function setCurrent(object) {
+        dispatch('currentItemSelected', {current: object, fimIdPath: null});
+    }
+
+    function addChildGroup() {
+        const newGroup = {
+            "TYPE_NAME": "xdf.Struktur",
+            "anzahl": "1:1",
+            "bezug": "",
+            "enthaelt": {
+                "TYPE_NAME": "xdf.Enthaelt",
+                "datenfeldgruppe": {
+                    "TYPE_NAME": "xdf.Datenfeldgruppe",
+                    "identifikation": {
+                        "TYPE_NAME": "xdf.ElementIdentifikation",
+                        "id": "G-" + uuidv4(),
+                        "version": "1.0"
+                    },
+                    "name": "",
+                    "bezeichnungEingabe": "Neue Datenfeldgruppe",
+                    "bezeichnungAusgabe": "",
+                    "beschreibung": "",
+                    "definition": "",
+                    "bezug": "",
+                    "status": {
+                        "TYPE_NAME": "xdf.CodeStatus",
+                        "listURI": "urn:xoev-de:fim:codeliste:xdatenfelder.status",
+                        "listVersionID": "1.0",
+                        "code": "aktiv"
+                    },
+                    "fachlicherErsteller": "TODO",
+                    "schemaelementart": {
+                        "TYPE_NAME": "xdf.CodeSchemaelementart",
+                        "listURI": "urn:xoev-de:fim:codeliste:xdatenfelder.schemaelementart",
+                        "listVersionID": "1.0",
+                        "code": "RNG"
+                    },
+                    "hilfetextEingabe": "",
+                    "hilfetextAusgabe": "",
+                    "struktur": []
+                }
+            }
+        };
+        stammdatenschema.struktur.splice(0, 0, newGroup)
+        dispatch('structuresChanged')
+        dispatch('currentItemSelected', {current: newGroup});
+        open = true;
+    }
+
+    function addChildField() {
+        const newField = {
+            "TYPE_NAME": "xdf.Struktur",
+            "anzahl": "1:1",
+            "bezug": "",
+            "enthaelt": {
+                "TYPE_NAME": "xdf.Enthaelt",
+                "datenfeld": {
+                    "TYPE_NAME": "xdf.Datenfeld",
+                    "identifikation": {
+                        "TYPE_NAME": "xdf.ElementIdentifikation",
+                        "id": "F-" + uuidv4(),
+                        "version": "1.0"
+                    },
+                    "name": "",
+                    "bezeichnungEingabe": "Neues Datenfeld",
+                    "bezeichnungAusgabe": "",
+                    "beschreibung": "",
+                    "definition": "",
+                    "bezug": "",
+                    "status": {
+                        "TYPE_NAME": "xdf.CodeStatus",
+                        "listURI": "urn:xoev-de:fim:codeliste:xdatenfelder.status",
+                        "listVersionID": "1.0",
+                        "code": "aktiv"
+                    },
+                    "fachlicherErsteller": "TODO aktueller User",
+                    "schemaelementart": {
+                        "TYPE_NAME": "xdf.CodeSchemaelementart",
+                        "listURI": "urn:xoev-de:fim:codeliste:xdatenfelder.schemaelementart",
+                        "listVersionID": "1.0",
+                        "code": "RNG"
+                    },
+                    "hilfetextEingabe": "",
+                    "hilfetextAusgabe": "",
+                    "feldart": {
+                        "TYPE_NAME": "xdf.CodeFeldart",
+                        "listURI": "urn:xoev-de:fim:codeliste:xdatenfelder.feldart",
+                        "listVersionID": "1.0",
+                        "code": "input"
+                    },
+                    "datentyp": {
+                        "TYPE_NAME": "xdf.CodeDatentyp",
+                        "listURI": "urn:xoev-de:fim:codeliste:xdatenfelder.datentyp",
+                        "listVersionID": "1.0",
+                        "code": "text"
+                    },
+                    "praezisierung": "",
+                    "inhalt": "",
+                    "codelisteReferenz": {
+                        "TYPE_NAME": "xdf.CodelisteReferenz",
+                        "identifikation": {
+                            "TYPE_NAME": "xdf.ElementIdentifikation",
+                            "id": "TODO C05000073"
+                        },
+                        "genericodeIdentification": {
+                            "TYPE_NAME": "xdf.GenericodeIdentification",
+                            "canonicalIdentification": "urn:de:fim:codeliste:zustimmung",
+                            "version": "2021-01-11",
+                            "canonicalVersionUri": "urn:de:fim:codeliste:zustimmung_2021-01-11"
+                        }
+                    }
+                }
+            }
+        };
+        stammdatenschema.struktur.splice(0, 0, newField)
+        dispatch('structuresChanged')
+        dispatch('currentItemSelected', {current:newField});
+        open = true;
+    }
+
+    $: arrowDown = open
+</script>
+
+<p>
+    <span>
+        <span class="arrow arrowDown" class:arrowDown>&#x25b6</span>
+    </span>
+    <strong class="clickable"
+          on:click={setCurrent(stammdatenschema)}>{stammdatenschema.bezeichnungEingabe}</strong>
+    <i class="bi-node-plus clickable w3-text-grey" title="Feld zu diesem Stammdatenschema hinzufügen"
+       on:click={addChildField}></i>
+    <i class="bi-node-plus-fill clickable w3-text-grey" title="Feldgruppe zu diesem Stammdatenschema hinzufügen"
+       on:click={addChildGroup}></i>
+    <!--    <i class="bi-x-circle clickable w3-text-red" title="Entfernen" on:click={deleteItem(index, struktur.enthaelt.datenfeldgruppe.bezeichnungEingabe)}></i>-->
+</p>
+
+<style>
+    .clickable {
+        cursor: pointer;
+        user-select: none;
+    }
+
+    /*.arrow {*/
+    /*    cursor: pointer;*/
+    /*    display: inline-block;*/
+    /*    user-select: none;*/
+    /*    transition: transform 200ms;*/
+    /*}*/
+
+    .arrowDown {
+        transform: rotate(90deg);
+    }
+</style>
\ No newline at end of file
diff --git a/src/Struktur.svelte b/src/Struktur.svelte
index 9f11ec5..1d011a1 100644
--- a/src/Struktur.svelte
+++ b/src/Struktur.svelte
@@ -133,7 +133,7 @@
         if (window.confirm(`Möchten Sie das Element '${bezeichnungEingabe}' wirklich löschen?`)) {
             parentStructures.splice(index, 1)
             dispatch('structuresChanged')
-            dispatch('currentItemSelected', {enthaelt: {}});
+            dispatch('currentItemSelected', {current:{enthaelt: {}}});
         }
     }
 
@@ -179,7 +179,7 @@
         };
         parentStructures.splice(index + 1, 0, newGroup)
         dispatch('structuresChanged')
-        dispatch('currentItemSelected', newGroup);
+        dispatch('currentItemSelected', {current:newGroup, fimIdPath: fimIdPath});
     }
 
     function addField(index) {
@@ -250,7 +250,7 @@
         };
         console.log(`new field: ${JSON.stringify(newField)}`)
         parentStructures.splice(index + 1, 0, newField)
-        dispatch('currentItemSelected', newField);
+        dispatch('currentItemSelected', {current:newField, fimIdPath: fimIdPath});
         dispatch('structuresChanged')
     }
 
@@ -296,7 +296,7 @@
         };
         parentStructures[index].enthaelt.datenfeldgruppe.struktur.splice(0, 0, newGroup)
         dispatch('structuresChanged')
-        dispatch('currentItemSelected', newGroup);
+        dispatch('currentItemSelected', {current:newGroup, fimIdPath: fimIdPath});
         open = true;
     }
 
@@ -368,7 +368,7 @@
         };
         parentStructures[index].enthaelt.datenfeldgruppe.struktur.splice(0, 0, newField)
         dispatch('structuresChanged')
-        dispatch('currentItemSelected', newField);
+        dispatch('currentItemSelected', {current:newField, fimIdPath: fimIdPath});
         open = true;
     }
 
diff --git a/src/profiles/seitenbau/Field.svelte b/src/profiles/seitenbau/Field.svelte
new file mode 100644
index 0000000..c195c3e
--- /dev/null
+++ b/src/profiles/seitenbau/Field.svelte
@@ -0,0 +1,264 @@
+<script>
+    import {createEventDispatcher} from "svelte";
+
+    const dispatch = createEventDispatcher();
+
+    export let feldart = "input"; // input, select, label
+    export let anzahl = "";
+    export let datentyp = "";
+    export let currentMaskInformation = {};
+    /*
+    text Text
+    date Datum
+    bool Wahrheitswert
+    num Nummer
+    num_int Ganzzahl
+    num_currency Geldbetrag
+    file Anlage (Datei)
+    obj Objekt (Blob)
+    */
+    export let id = "";
+    export let label = "";
+    export let type = "";
+    export let required = false;
+    export let disabled = false;
+    export let consent = false;
+    export let placeholder = "";
+    export let helptext = "";
+    export let possibleValues = []; // checkbox, radio, dropdown, two-list only
+    export let displayConditions = [];
+    export let value;
+    export let width;
+    export let validationRules = [];
+    export let layout = "vertical" // or horizontal, not supported yet
+    export let source; // {service:"", variableName:""}
+    export let target; // {service:"", variableName:""}
+    export let externalDataSourceProperties;
+    export let externalValue;
+    export let requiredValidationFailedMessage;
+    export let typeValidationFailedMessage;
+    export let thousandsSeparatorValidationFailedMessage;
+    export let digitsAfterDecimalPointValidationFailedMessage;
+    export let filterable;
+    export let additonalConfig;
+    export let helpDialog;
+
+    $: {
+        currentMaskInformation.id = undefined;
+        currentMaskInformation.label = undefined;
+        currentMaskInformation.type = "";
+        currentMaskInformation.width = undefined;
+        // currentMaskInformation.required = anzahl.startsWith("0") ? true : false
+    }
+
+    /*
+    text Text
+    date Datum
+    bool Wahrheitswert
+    num Nummer
+    num_int Ganzzahl
+    num_currency Geldbetrag
+    file Anlage (Datei)
+    obj Objekt (Blob)
+    */
+    let typeOptions = [
+        {
+            id: "STRING",
+            text: "Input-Feld",
+            feldart: "input",
+            supportedMultiplicities: ["1", "*"],
+            supportedDataTypes: ["text", "num", "num_int"]
+        },
+        {
+            id: "EURO_BETRAG",
+            text: "Input Feld für Euro Geldbeträge",
+            feldart: "input",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["num_currency"]
+        },
+        {
+            id: "STRING_AJAX_AUTOCOMPLETE",
+            text: "Input-Feld mit Vorschlagsliste, die aus AJAX-Aufruf befüllt wird",
+            feldart: "input",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["text"]
+        },
+        {
+            id: "DROPDOWN_SINGLE_SELECT_AJAX",
+            text: "Auswahlfeld für Werte aus AJAX-Aufruf",
+            feldart: "select",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["text", "num", "num_int"]
+        },
+        {
+            id: "TEXTAREA",
+            text: "Mehrzeiliges Input-Feld",
+            feldart: "input",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["text"]
+        },
+        {
+            id: "FILE",
+            text: "Dateiupload-Feld",
+            feldart: "input",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["file"]
+        },
+        {
+            id: "BOOLEAN",
+            text: "Radiobutton mit Werten 'ja' und 'nein'",
+            feldart: "input",
+            supportedMultiplicities: ["1"], supportedDataTypes: ["bool"]
+        },
+        {
+            id: "TEXT",
+            text: "Anzeigetext",
+            feldart: "label",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["text"]
+        },
+        {
+            id: "PLACEHOLDER",
+            text: "Horizontaler Leerraum",
+            feldart: "label",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["text"]
+        },
+        {
+            id: "SINGLE_CHECKBOX",
+            text: "Einzelne Checkbox",
+            feldart: "input",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["bool"]
+        },
+        {
+            id: "CHECKBOX",
+            text: "Liste von Checkboxen",
+            feldart: "select",
+            supportedMultiplicities: ["*"],
+            supportedDataTypes: ["text", "num", "num_int"]
+        },
+        {
+            id: "RADIO_BUTTONS",
+            text: "Liste aus Radiobuttons",
+            feldart: "select",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["text", "num", "num_int"]
+        },
+        {
+            id: "DROPDOWN_SINGLE_SELECT",
+            text: "Auswahlfeld für genau einen wählbaren Wert",
+            feldart: "select",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["text", "num", "num_int"]
+        },
+        {
+            id: "DROPDOWN_MULTIPLE_SELECT",
+            text: "Auswahlfeld mit mehreren wählbaren Werten",
+            feldart: "select",
+            supportedMultiplicities: ["*"],
+            supportedDataTypes: ["text", "num", "num_int"]
+        },
+        {
+            id: "TWO_LIST_SELECT",
+            text: "Zwei verbundene Auswahlfelder mit selektierten und unselektierten Werten",
+            feldart: "select",
+            supportedMultiplicities: ["*"],
+            supportedDataTypes: ["text", "num", "num_int"]
+        },
+        {
+            id: "DATE",
+            text: "Datumseingabe",
+            feldart: "input",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["date"]
+        },
+        {
+            id: "TIME",
+            text: "Uhrzeiteingabe",
+            feldart: "input",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["date"]
+        },
+        {
+            id: "H1",
+            text: "Überschrift ohne Eingabemöglichkeit",
+            feldart: "label",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["text"]
+        },
+        {
+            id: "H2",
+            text: "Zwischenüberschrift ohne Eingabemöglichkeit",
+            feldart: "label",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["text"]
+        },
+        {
+            id: "SUBMITTED_WITH_NPA_INFO",
+            text: "Status Anmeldung Online-Ausweis, unsichtbar",
+            feldart: "input",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["bool"]
+        },
+        {
+            id: "VIDEO",
+            text: "Anzeige eines externen Videos",
+            feldart: "label",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["blob"]
+        },
+        {
+            id: "IMAGE",
+            text: "Anzeige eines externen Bildes",
+            feldart: "label",
+            supportedMultiplicities: ["1"],
+            supportedDataTypes: ["blob"]
+        }
+    ];
+    let typeOptionsFiltered;
+    $: typeOptionsFiltered = typeOptions
+        .sort((a, b) => {
+                if (a.text < b.text) {
+                    return -1;
+                } else if (a.text > b.text) {
+                    return 1;
+                } else {
+                    return 0;
+                }
+            }
+        )
+        .filter((element) => {
+            return element.feldart === feldart &&
+                element.supportedMultiplicities.find(
+                    supportedMultiplicity => anzahl.endsWith(supportedMultiplicity)) &&
+                element.supportedDataTypes.find(
+                    supportedDataType => datentyp === supportedDataType
+                );
+            // TODO: 1:* Inputfelder wie bei Vorname in Bewohnerparken, eventuell spezielle Bedingung für feldart input, datentyp text und anzahl _:*
+        });
+
+    function fieldChanged(event) {
+        dispatch('maskInformationChanged')
+    }
+
+</script>
+
+<label>Feld-Id
+    <input class="w3-input" bind:value="{currentMaskInformation.id}" on:change={fieldChanged}/>
+</label>
+<label>Beschriftung
+    <input class="w3-input" bind:value="{currentMaskInformation.label}" on:change={fieldChanged}/>
+</label>
+<label>Typ
+    <select class="w3-input" bind:value={currentMaskInformation.type} on:change={fieldChanged}>
+        {#each typeOptionsFiltered as typeOption}
+            <option value={typeOption.id}>
+                {typeOption.text}
+            </option>
+        {/each}
+    </select>
+</label>
+<label>Breite
+    <input class="w3-input" bind:value="{currentMaskInformation.width}" on:change={fieldChanged}/>
+</label>
\ No newline at end of file