diff --git a/README.de.md b/README.de.md
index c9ff0104..877ab728 100755
--- a/README.de.md
+++ b/README.de.md
@@ -2,35 +2,34 @@
 
 ![Screenshot](https://github.com/FriendsOfREDAXO/mform/blob/assets/screen_mform7.png?raw=true)
 
-MForm ist ein REDAXO Addon, welches das Erstellen von Modul-Eingabeformularen erheblich erleichtert. Dabei nutzt MForm Templates welche es dem Administrator ermöglichen den Modul-Style seinen Vorstellungen anzupassen. MForm stellt alle gängigen Modul-Input-Formular-Elemente und zusätzlice Widgets bereit welche sich einfach einbinden lassen. MForm eweitert auch **YForm** und **rex_form** um zusätzliche Widgets, z.B. ein Custom-Link-Feld und Image-List für Galerien. 
+MForm ist ein REDAXO Addon, welches das Erstellen von Modul-Eingabeformularen erheblich erleichtert. Dabei nutzt MForm Templates welche es dem Administrator ermöglichen den Modul-Style seinen Vorstellungen anzupassen. MForm stellt alle gängigen Modul-Input-Formular-Elemente und zusätzlice Widgets bereit welche sich einfach einbinden lassen. MForm eweitert auch **YForm** und **rex_form** um zusätzliche Widgets, z.B. ein Custom-Link-Feld und Image-List für Galerien.
 
-Die beiliegende **Demo-Sammlung** erlaubt das sofortige Ausprobieren von Modul-Codes. Module können direkt installiert und getestet werden. Die Codes sind alle kommentiert. 
+Die beiliegende **Demo-Sammlung** erlaubt das sofortige Ausprobieren von Modul-Codes. Module können direkt installiert und getestet werden. Die Codes sind alle kommentiert.
 
 ## Features
 
 - Erstellen von Moduleingaben per PHP
 - Ausgabe der Formulare anpassbar über Fragmente
 - Custom Widgets für Verlinkung (auch Yform) und Bilder
-- Factory die es ermöglicht Formularteile leicht auszulagern 
+- Factory die es ermöglicht Formularteile leicht auszulagern
 - REDAXO JSON Value Nutzung
 - Mehrspaltige Formulare
 - Inline-Formular-Elemente
 - Modul-Beispiele zur direkten Installation
-- HMTL5-Formular-Elemente 
+- HMTL5-Formular-Elemente
 - SQL-Felder
-- Collapse, Tabs 
-- Accordions Wrapper Elemente Via Checkbox 
+- Collapse, Tabs
+- Accordions Wrapper Elemente Via Checkbox
 - Radio oder Select steuerbare Collapse Elemente
 - Durchgehende MBlock Kompatibilität
-- Datalists 
+- Datalists
 
 **Hinweise**
 
-* Der MForm Formular-Builder ist ausschließlich dafür geeignet REDAXO Modul-Input-Formulare zu generieren!
-* Aktuell ist das Imagelist-Widget nicht mblock-kompatibel
+- Der MForm Formular-Builder ist ausschließlich dafür geeignet REDAXO Modul-Input-Formulare zu generieren!
+- Aktuell ist das Imagelist-Widget nicht mblock-kompatibel
 
-
-## Installation:
+## Installation
 
 MForm kann direkt über den Redaxo-Installer Installiert werden. [MForm Redaxo Addon Page](http://www.redaxo.org/de/download/addons/?addon_id=967&searchtxt=mform&cat_id=-1)
 
@@ -43,7 +42,6 @@ MForm kann direkt über den Redaxo-Installer Installiert werden. [MForm Redaxo A
 
 MForm muss im Modul-Input eines REDAXO Moduls als PHP Code notiert werden.
 
-
 ### Instanziierung  
 
 ```php
@@ -80,8 +78,8 @@ $MForm = MForm::factory()
     ->setLabel('Text Field') 
     ->setAttributes(['style' => 'width:200px', 'class' => 'test-field']);
 ```
-Der `REX_VALUE-Key` muss jeder Formular-Input-Methode als Pflichtfeld übergeben werden. Informative Elemente benötigen keine ID.
 
+Der `REX_VALUE-Key` muss jeder Formular-Input-Methode als Pflichtfeld übergeben werden. Informative Elemente benötigen keine ID.
 
 ##### Full JSON Value Support
 
@@ -109,240 +107,10 @@ echo MForm::factory()
     ->show();
 ```
 
-### Element-Methoden
-
-MForm stellt folgende Element-Methoden bereit: 
-
-* Strukturelle Wrapper-Elemente
-  * `addFieldsetArea`
-  * `addCollapseElement`
-  * `addAccordionElement`
-  * `addTabElement`
-  * `addColumnElement`
-  * `addInlineElement`
-* Text-Input- und Hidden-Elemente
-  * `addTextField`
-  * `addHiddenField`
-  * `addTextAreaField`
-  * `addTextReadOnlyField`
-  * `addTextAreaReadOnlyField`
-* Select-Elemente
-  * `addSelectField`
-  * `addMultiSelectField`
-* Checkbox- und Radio-Elemente
-  * `addCheckboxField`
-  * `addRadioField`
-* Informelle-Elemente
-  * `addHtml`
-  * `addHeadline`
-  * `addDescription`
-  * `addAlert`
-  * `addAlertDanger`, `addAlertError`
-  * `addAlertInfo`
-  * `addAlertSuccess`
-  * `addAlertWarning`
-* System-Button-Elemente
-  * `addLinkField`
-  * `addLinklistField`
-  * `addMediaField`
-  * `addMedialistField`
-* Custom-Elemente 
-  * `addCustomLinkField`
-  * `addImagelistField`
-  * `addInputField`
-* Spezielle `setter`-Methoden
-  * `setAttribute`
-  * `setAttributes`
-  * `setCategory`
-  * `setCollapseInfo`
-  * `setDefaultValue`
-  * `setDisableOption`
-  * `setDisableOptions`
-  * `setFormItemColClass`
-  * `setFull`
-  * `setLabel`
-  * `setLabelColClass`
-  * `setMultiple`
-  * `setOption`
-  * `setOptions`
-  * `setParameter`
-  * `setParameters`
-  * `setPlaceholder`
-  * `setSize`
-  * `setSqlOptions`
-  * `setTabIcon`
-  * `setToggleOptions`
-  * `setTooltipInfo`
-
-## Ausgabe 
-
-MForm nutzt die von REDAXO bereitgestellten REDAXO Variablen. Entweder als klassische oder als JSON-Values. 
-Informationen hierzu in der [REDAXO Doku](https://www.redaxo.org/doku/main/redaxo-variablen).
-
-## Custom-Link Element
-
-Das Custom MForm Custom-Link-Element ermöglicht es durch den Einsatz eines Feldes mehrere Link-Typen definieren zu können.  
-Das Cusotm-Link-Element steht in MForm, YForm und auch als REX_VAR zur Verfügung.  
-
-Die Link Typen des Custom-Link-Elements:
-
-* `data-extern`
-* `data-intern`
-* `data-media`
-* `data-mailto`
-* `data-tel`
-* `ylink`
-
-Jeder dieser Typen kann aktiviert oder deaktiviert werden. Per default sind folgende Typen aktiv:
-
-* `data-extern`
-* `data-intern`
-* `data-media`
-
-
-### Verwendung mit MBlock
-
-Das Custom-Link-Element darf keinen String (wie bei anderen Elementen) in der ID enthalten:  
-
-`$MBlock->addCustomLinkField("$id.0.1",array('label'=>'Link'));`
-
-
-### Beispiel-Code: 
-
-#### MForm
-
-```php
-$mform = new MForm();
-$ylink = [['name' => 'Countries', 'table'=>'rex_ycountries', 'column' => 'de_de']];
-$mform->addCustomLinkField(1, ['label' => 'custom', 'data-intern'=>'disable', 'data-extern'=>'enable', 'ylink' => $ylink]);
-echo $mform->show();
-```
-
-### Als REX_VAR
-
-```html
-REX_CUSTOM_LINK[id=5 widget=1 external=1 intern=0 mailto=0 phone=1 media=1 ylink="Countries::rex_ycountries::de_de,CountriesEN::rex_ycountries::en_gb"]
-```
-
-#### Auslesen der YLinks per Outputfilter
-
-#### YForm links
-
-Um die  generierten Urls wie `rex_news://1` zu ersetzen, muss das folgende Skript in die `boot.php` des `project` AddOns eingefügt werden.
-Der Code für die Urls muss modifiziert werden. 
-
-```php
-rex_extension::register('OUTPUT_FILTER', function(\rex_extension_point $ep) {
-    return preg_replace_callback(
-        '@((rex_news|rex_person))://(\d+)(?:-(\d+))?/?@i',
-        function ($matches) {
-            // table = $matches[1]
-            // id = $matches[3]
-            $url = '';
-            switch ($matches[1]) {
-                case 'news':
-                    // Example, if the Urls are generated via Url-AddOn  
-                    $id = $matches[3];
-                    if ($id) {
-                       return rex_getUrl('', '', ['news' => $id]); 
-                    }
-                    break;
-                case 'person':
-                    // ein anderes Beispiel 
-                    $url = '/index.php?person='.$matches[3];
-                    break;
-            }
-            return $url;
-        },
-        $ep->getSubject()
-    );
-}, rex_extension::NORMAL);
-
-```
-
-
-#### Auslesen der Ylinks manuell: 
-
-```php 
-$link = explode("://", $img['link']);
-
-      if (count($link) > 1) {
-          // its a table link
-          // url AddOn
-        $url = rex_getUrl('', '', [$link[0] => $link[1]]); // key muss im url addon übereinstimmen
-      } else {
-          $extUrl = parse_url($link[0]);
-
-          if (isset($extUrl['scheme']) && ($extUrl['scheme'] == 'http' || $extUrl['scheme'] == 'https')) {
-              // its an external link 
-              $url = $link[0];
-          } else {
-              // internal id
-              $url = rex_getUrl($link[0]);
-          }
-      }
-```
-
-#### Custom Link auslesen
-
-MForm liefert eine Methode zum Auslesen und Auswerten der Custom-Links. 
-`MForm\Utils\MFormOutputHelper::prepareCustomLink(array $item, $externBlank = true)`
-
-Die Methode nimmt ein Array für den Link  an und gibt ein  Array mit verarbeiteten Links zurück. 
-
-```php
-$link = '10';
-$linkdata = MForm\Utils\MFormOutputHelper::prepareCustomLink(['link' => $link], true);
-```
-
-Ergebnis: 
-
-```
-^ array:5 [▼
-    "link" => "10"
-    "customlink_text" => "Artikelname"
-    "customlink_url" => "/artikelname"
-    "customlink_target" => ""
-    "customlink_class" => " intern"
-]
-```
-
-Benötigt man nur den Link oder möchte man mehr Erkennungsmöglichkeiten realisieren, kann man folgendes Beispiel verwenden.  
-
-Die nachfolgende Funktion dient dazu den von MForm / Mblock generierten CustomLink auszulesen und korrekt zu verlinken. Die Funktion kann in der Ausgabe eines Moduls genutzt werden oder ggf. im Theme- oder Projektaddon verwendet werden. Sie kann auch allgemein dazu verwendet werden, einen unbekannten Link zu identifizieren 
-
-Die Funktion kann in der functions.php vom theme-AddOn oder in der boot.php vom project-AddOn hinterlegt werden:  
-
-```php
-// CustomLink-Funktion REX5 / mform / mblock
-
-if (!function_exists('getcustomLink')) {
-  function getcustomLink($url) {
-
-  // Wurde ein Wert für $url übergeben?
-  if ($url) {
-
-    // Prüfe ob es sich um eine URL handelt, dann weiter
-    if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) {
-    }
-
-    // Ist es eine Mediendatei?
-    if (file_exists(rex_path::media($url)) === true) {
-       $url = rex_url::media($url);
-    }
-    else {
-        // Ist es keine Mediendatei oder URL, dann als REDAXO-Artikel-ID behandeln
-        if (filter_var($url, FILTER_VALIDATE_URL) === FALSE and is_numeric($url)) {
-            $url = rex_getUrl($url);
-        }
-    }
-
-   return $url;
-   }
-  }
-}
-```
+## Ausgabe
 
+MForm nutzt die von REDAXO bereitgestellten REDAXO Variablen. Entweder als klassische oder als JSON-Values.
+Informationen hierzu in der [REDAXO Doku](https://www.redaxo.org/doku/main/redaxo-variablen).
 
 ## Lizenz
 
@@ -356,8 +124,8 @@ siehe [CHANGELOG.md](https://github.com/FriendsOfREDAXO/mform/blob/master/CHANGE
 
 **Friends Of REDAXO**
 
-* http://www.redaxo.org
-* https://github.com/FriendsOfREDAXO
+- <http://www.redaxo.org>
+- <https://github.com/FriendsOfREDAXO>
 
 **Projekt-Lead**
 
diff --git a/docs/01_basics.md b/docs/01_basics.md
new file mode 100644
index 00000000..68931efc
--- /dev/null
+++ b/docs/01_basics.md
@@ -0,0 +1,247 @@
+# MForm vereinfacht Moduleingaben
+
+Verwendene MForm-Elemente in deinem Modul, indem du diese Beispiele kopierst und anpasst.
+
+## Text-Input- und Hidden-Elemente
+
+Rendert Text- und Eingabe-Elemente wie `<input type="text">`, `<textarea>` oder `<input type="hidden">`.
+
+> **Tipp:** Weiter unten folgen Beispiele für weitere HTML5-Elemente.
+
+**Modul-Eingabe**
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    // add fieldset area
+    ->addFieldsetArea('Input Text elements', MForm::factory() // init new mform
+        // add some text fields
+        ->addTextField(1.0, ['label' => 'Input Text'])
+        ->addTextField(1.2, ['label' => 'With options and Full width', 'full' => true])
+            ->setOptions([1=>'option1',2=>'option2'])
+    )
+    // add second fieldset area
+    ->addFieldsetArea('Textarea elements', MForm::factory() // init new mform
+        ->addTextAreaField(1.3, ['label' => 'Textarea'])
+        ->addTextAreaField(1.4, ['label' => 'Full width'])
+            ->setFull() // or ->addTextAreaField(1.2,['full' => true])
+    )
+    // add third fieldset area
+    ->addFieldsetArea('Readonly text elements', MForm::factory() // use mform factory
+        // add some readonly text fields
+        ->addTextReadOnlyField("2.0", 'string readonly', ['label' => 'Readonly Input Text'])
+        ->addTextAreaReadOnlyField(2.1, 'string readonly', ['label' => 'Readonly Textarea'])
+    );
+// parse form
+echo $mform->show();
+```
+
+**Modul-Ausgabe**
+
+```php
+<?php
+dump(rex_var::toArray('REX_VALUE[id=1]'));
+dump(rex_var::toArray('REX_VALUE[id=2]'));
+```
+
+## Checkbox und Radio-Elmente
+
+Rendert `<input type="checkbox">` oder `input type="radio">`-Elemente.
+
+**Modul-Eingabe**
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    // add fieldset area
+    ->addFieldsetArea('Checkbox element', MForm::factory()
+        // some checkbox elements
+        ->addCheckboxField(1, [1 => 'test-1'], ['label' => 'Checkbox'])
+        ->addToggleCheckboxField(3, [1 => 'Toggle test-1'], ['label' => 'Toggle Checkbox'])
+    )
+    // add second fieldset area
+    ->addFieldsetArea('Radio buttons element', MForm::factory()
+        // radio element
+        ->addRadioField(2, [1 => 'test-1', 2 => 'test-2'], ['label' => 'Radio Buttons'])
+    );
+// parse form
+echo $mform->show();
+```
+
+**Modul-Ausgabe**
+
+```php
+<?php
+dump('REX_VALUE[id=1]');
+dump('REX_VALUE[id=2]');
+dump('REX_VALUE[id=3]');
+```
+
+## Strukturelle Info-Elemente
+
+Rendert Überschriften, Alerts und andere HTML-Elemente.
+
+**Modul-Eingabe**
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    // add fieldset area
+    ->addFieldsetArea('Fieldset Element', MForm::factory()
+        // headline, description and some other elements
+        ->addHeadline('MForm Demo Headline')
+        ->addDescription('Mform Demo Description for any descriptions texts in your modul input formular.')
+        ->addHtml('<b>HTML <i>Text</i></b><br>')
+    )
+    // add second fieldset area
+    ->addFieldsetArea('Alert Messages', MForm::factory()
+        ->addAlertInfo('Info Alert Message')
+        ->addAlertDanger('Danger Alert Message')
+        ->addAlertSuccess('Success Alert Message')
+        ->addAlertWarning('Warning Alert Message')
+        ->addAlertError('Error Alert Message')
+    )
+    // add third fieldset area
+    ->addFieldsetArea('', MForm::factory()
+        // toogle checkbox with tooltip
+        ->addToggleCheckboxField(2, [1 => 'Test-Checkbox'], ['label' => 'Checkbox'])
+        ->setTooltipInfo('Tooltip Test-Checkbox Label.', 'fa-question-circle')
+    );
+// parse form
+echo $mform->show();
+```
+
+## Select- und Multiselect-Elemente
+
+Rendert `<select>`- und `<select multiple>`-Elemente.
+
+**Modul-Eingabe**
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    // add fieldset area
+    ->addFieldsetArea('Select elements', MForm::factory()
+        // some select fields
+        ->addSelectField("1.0", [1 => 'test-1', 2 => 'test-2', 3 => 'test-3', 4 => 'test-4'], ['label' => 'Select optgroup'])
+        ->addSelectField("1.1", ['group 1' => [1 => 'test-1', 2 => 'test-2'], 'group 2' => [3 => 'test-3', 4 => 'test-4']], ['label' => 'Select optgroup'])
+    )
+    // add second fieldset area
+    ->addFieldsetArea('Multiselect elements', MForm::factory()
+        // some multiple selects fields
+        ->addMultiSelectField("2.0", [1 => 'test-1', 2 => 'test-2', 3 => 'test-3', 4 => 'test-4'], ['label' => 'Select optgroup'])
+        ->addMultiSelectField("2.1", ['group 1' => [1 => 'test-1', 2 => 'test-2'], 'group 2' => [3 => 'test-3', 4 => 'test-4']], ['label' => 'Select optgroup'])
+    );
+// parse form
+echo $mform->show();
+```
+
+**Modul-Ausgabe**
+
+```php
+<?php
+dump(rex_var::toArray('REX_VALUE[id=1]'));
+dump(rex_var::toArray('REX_VALUE[id=2]'));
+```
+
+## Weitere HTML5-Elemente
+
+Erweitert MForm-Elemente um weitere HTML5-Elemente wie `type="email"`, `type="url"` oder `type="tel"`.
+
+### Zusätzliche Feldtypen
+
+```php
+<?php
+// show form elements
+echo MForm::factory() // init mform
+    // add fieldset area
+    ->addFieldsetArea('HTML5 input elements', MForm::factory()
+        // input color
+        ->addInputField("color", "1.0", ['label'=>'Color field']) // use string for x.0 json values
+        // input email
+        ->addInputField("email", 1.1, ['label'=>'Email field'])
+        // input url
+        ->addInputField("url", 1.2, ['label'=>'URL field'])
+        // input tel
+        ->addInputField("tel", 1.3, ['label'=>'Tel field'])
+        // input search
+        ->addInputField("search", 1.4, ['label'=>'Search field'])
+        // input number
+        ->addInputField("number", 1.5, ['label'=>'Number field'])
+        // input range
+        ->addInputField("range", 1.6, ['label'=>'Range field'])
+        // input range
+        ->addInputField("range", 1.7, ['label'=>'Range field with datalist'])
+            ->setOptions(array(1,"-20", 30, "-30"))
+        // input datetime
+        ->addInputField("datetime", 1.8, ['label'=>'Datetime field']) // Datum und Uhrzeit (mit Zeitzone)
+        // input datetime-local
+        ->addInputField("datetime-local", 1.9, ['label'=>'Datetime-local field']) // Datum und Uhrzeit (ohne Zeitzone)
+        // input date
+        ->addInputField("date", 1.10, ['label'=>'Date field']) // Datum
+        // input time
+        ->addInputField("time", 1.11, ['label'=>'Time field']) // Uhrzeit
+        // input month
+        ->addInputField("month", 1.12, ['label'=>'Month field']) // Monat
+        // input week
+        ->addInputField("week", 1.13, ['label'=>'Week field']) // Kalenderwoche
+    )
+    // parse form
+    ->show();
+```
+
+### Placeholder
+
+Fügt ein Platzhalter-Attribut zu einem Textfeld hinzu.
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    // fieldset with placeholder
+    ->addFieldsetArea('Placeholder', MForm::factory()
+        // text input with placeholder
+        ->addTextField("1.0", array('label'=>'Text input', 'placeholder' => 'Test Placeholder'))
+        // textinput with placeholder
+        ->addTextField(1.1, array('label'=>'Text input'))
+            ->setPlaceholder('Test Placeholder')
+    );
+// parse form
+echo $mform->show();
+```
+
+### Datalists und Optionen
+
+Setzt Datalists und Optionen für verschiedene Input-Elemente.
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    // fieldset
+    ->addFieldsetArea('Form elements with datalist', MForm::factory()
+        // text with datalist
+        ->addTextField(1, ['label'=>'Text input'])
+            ->setOptions(['Apple', 'Orange', 'Peach', 'Melon', 'Strawberry'])
+        // input range width datalist
+        ->addInputField("range", 2, ['label'=>'Range field with datalist'])
+            ->setAttribute("max",60)
+            ->setAttribute("min",20)
+            ->setOptions([10,20,30,40,50]) // to add datalist use set options
+        // input datetime locale with datalist
+        ->addInputField("datetime-local", 2, ['label'=>'Datetime-local field'])
+            ->setOptions(["Santa Visit"=>"2012-12-24T23:59", "Chrismas party"=>"2012-12-25T18:00", "Happy New Year"=>"2013-01-01T00:00", "2012-12-30T00:00"]) // to add datalist use set options
+        // input time with datalist
+        ->addInputField("time", 3, ['label'=>'Time field'])
+            ->setOption("00:00", "Midnight")
+            ->setOption("06:00", 2)
+            ->setOption("12:00", "Noon")
+            ->setOption("18:00", 4)
+    );
+// parse form
+echo $mform->show();
+```
diff --git a/docs/02_redaxo.md b/docs/02_redaxo.md
new file mode 100644
index 00000000..6543ca6d
--- /dev/null
+++ b/docs/02_redaxo.md
@@ -0,0 +1,74 @@
+
+# REDAXO System-Elemente
+
+Rendert die REDAXO System-Elemente `REX_MEDIA_BUTTON`, `REX_LINK_BUTTON`, `REX_MEDIALIST_BUTTON`, `REX_LINKLIST_BUTTON`.
+
+## Modul-Eingabe
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    // add fieldset area
+    ->addFieldsetArea('Media file elements', MForm::factory()
+        // some media fields
+        ->addMediaField(1, array('label'=>'Image'))
+        ->addMedialistField(1, array('label'=>'Image list'))
+        ->addImagelistField(2, ['label' => 'Image List'])
+    )
+    // add second fieldset area
+    ->addFieldsetArea('Link elements', MForm::factory()
+        // some link elements
+        ->addLinkField(1,array('label'=>'Link'))
+        ->addLinklistField(1,array('label'=>'Link list'))
+        ->addCustomLinkField(1, ['label' => 'Custom Link', 'data-intern' => 'enable', 'data-extern' => 'enable', 'data-media' => 'enable', 'data-mailto' => 'enable', 'data-tel' => 'enable'])
+    );
+// parse form
+echo $mform->show();
+```
+
+## Modul-Ausgabe
+
+```php
+<?php
+dump('REX_MEDIA[id=1]');
+dump('REX_MEDIALIST[id=1]');
+dump('REX_MEDIALIST[id=2]');
+dump('REX_LINK[id=1]');
+dump('REX_LINKLIST[id=1]');
+dump('REX_VALUE[id=1]');
+```
+
+## Parameter
+
+Die System-Elemente können mit Parametern versehen werden, z.B. um die Vorschau zu aktivieren oder die Kategorie eines Medienpool-Auswahlfelds festzulegen.
+
+```php
+// init mform
+$mform = MForm::factory()
+    // add fieldset area
+    ->addFieldsetArea('System Elements with Parameters', MForm::factory()
+        // use media field method with parameter property
+        ->addMediaField(1, ['types'=>'png', 'preview'=>1, 'category'=>2, 'label'=>'Image'])
+        // use set parameter method
+        ->addMediaField(2)
+            ->setLabel('Image')
+            ->setParameter('preview', 1)
+            ->setParameter('category', 2)
+            ->setParameter('type', 'png')
+        // use set parameters method
+        ->addMediaField(3)
+            ->setLabel('Image')
+            ->setParameters(['types'=>'png', 'preview'=>1, 'category'=>2])
+        // use media list method with parameter property
+        ->addMedialistField(1, ['types'=>'gif,jpg', 'preview'=>1, 'category'=>4, 'label'=>'Image list'])
+        // use set parameters for link field
+        ->addLinkField(1)
+            ->setParameters(['label'=>'Link', 'category'=>3])
+        // and for linklist field
+        ->addLinklistField(1, ['label'=>'Link list'])
+            ->setParameter('category', 2)
+    );
+// parse form
+echo $mform->show();
+```
diff --git a/docs/03_customlink.md b/docs/03_customlink.md
new file mode 100644
index 00000000..986d2894
--- /dev/null
+++ b/docs/03_customlink.md
@@ -0,0 +1,181 @@
+# Custom-Link-Widget
+
+Das Custom MForm Custom-Link-Element ermöglicht es durch den Einsatz eines Feldes mehrere Link-Typen definieren zu können.  
+
+Das Cusotm-Link-Element steht in MForm, YForm und auch als REX_VAR zur Verfügung.  
+
+Die Link Typen des Custom-Link-Elements:
+
+* `data-extern`
+* `data-intern`
+* `data-media`
+* `data-mailto`
+* `data-tel`
+* `ylink`
+
+Jeder dieser Typen kann aktiviert oder deaktiviert werden. Per default sind folgende Typen aktiv:
+
+* `data-extern`
+* `data-intern`
+* `data-media`
+
+## Modul-Eingabe
+
+```php
+<?php
+// init mform
+echo MForm::factory()
+    // add fieldset area
+    ->addFieldsetArea('MForm Widgets', MForm::factory()
+        // custom elements
+        ->addCustomLinkField(1, ['label' => 'Custom Link', 'data-intern' => 'enable', 'data-extern' => 'enable', 'data-media' => 'enable', 'data-mailto' => 'enable', 'data-tel' => 'enable'])
+    )
+    // parse form
+    ->show();
+```
+
+## Modul-Ausgabe
+
+```php
+<?php
+dump('REX_VALUE[id=1]');
+```
+
+## Verwendung mit MBlock
+
+Das Custom-Link-Element darf keinen String (wie bei anderen Elementen) in der ID enthalten:  
+
+`$MBlock->addCustomLinkField("$id.0.1",array('label'=>'Link'));`
+
+### MForm
+
+```php
+$mform = new MForm();
+$ylink = [['name' => 'Countries', 'table'=>'rex_ycountries', 'column' => 'de_de']];
+$mform->addCustomLinkField(1, ['label' => 'custom', 'data-intern'=>'disable', 'data-extern'=>'enable', 'ylink' => $ylink]);
+echo $mform->show();
+```
+
+### Als REX_VAR
+
+```html
+REX_CUSTOM_LINK[id=5 widget=1 external=1 intern=0 mailto=0 phone=1 media=1 ylink="Countries::rex_ycountries::de_de,CountriesEN::rex_ycountries::en_gb"]
+```
+
+## Auslesen der YLinks per Outputfilter
+
+### YForm links
+
+Um die  generierten Urls wie `rex_news://1` zu ersetzen, muss das folgende Skript in die `boot.php` des `project` AddOns eingefügt werden.
+Der Code für die Urls muss modifiziert werden.
+
+```php
+rex_extension::register('OUTPUT_FILTER', function(\rex_extension_point $ep) {
+    return preg_replace_callback(
+        '@((rex_news|rex_person))://(\d+)(?:-(\d+))?/?@i',
+        function ($matches) {
+            // table = $matches[1]
+            // id = $matches[3]
+            $url = '';
+            switch ($matches[1]) {
+                case 'news':
+                    // Example, if the Urls are generated via Url-AddOn  
+                    $id = $matches[3];
+                    if ($id) {
+                       return rex_getUrl('', '', ['news' => $id]); 
+                    }
+                    break;
+                case 'person':
+                    // ein anderes Beispiel 
+                    $url = '/index.php?person='.$matches[3];
+                    break;
+            }
+            return $url;
+        },
+        $ep->getSubject()
+    );
+}, rex_extension::NORMAL);
+
+```
+
+### Auslesen der Ylinks manuell
+
+```php
+$link = explode("://", $img['link']);
+
+      if (count($link) > 1) {
+          // its a table link
+          // url AddOn
+        $url = rex_getUrl('', '', [$link[0] => $link[1]]); // key muss im url addon übereinstimmen
+      } else {
+          $extUrl = parse_url($link[0]);
+
+          if (isset($extUrl['scheme']) && ($extUrl['scheme'] == 'http' || $extUrl['scheme'] == 'https')) {
+              // its an external link 
+              $url = $link[0];
+          } else {
+              // internal id
+              $url = rex_getUrl($link[0]);
+          }
+      }
+```
+
+### Custom Link auslesen
+
+MForm liefert eine Methode zum Auslesen und Auswerten der Custom-Links.
+`MForm\Utils\MFormOutputHelper::prepareCustomLink(array $item, $externBlank = true)`
+
+Die Methode nimmt ein Array für den Link  an und gibt ein  Array mit verarbeiteten Links zurück.
+
+```php
+$link = '10';
+$linkdata = MForm\Utils\MFormOutputHelper::prepareCustomLink(['link' => $link], true);
+```
+
+Ergebnis:
+
+```
+^ array:5 [▼
+    "link" => "10"
+    "customlink_text" => "Artikelname"
+    "customlink_url" => "/artikelname"
+    "customlink_target" => ""
+    "customlink_class" => " intern"
+]
+```
+
+Benötigt man nur den Link oder möchte man mehr Erkennungsmöglichkeiten realisieren, kann man folgendes Beispiel verwenden.  
+
+Die nachfolgende Funktion dient dazu den von MForm / Mblock generierten CustomLink auszulesen und korrekt zu verlinken. Die Funktion kann in der Ausgabe eines Moduls genutzt werden oder ggf. im Theme- oder Projektaddon verwendet werden. Sie kann auch allgemein dazu verwendet werden, einen unbekannten Link zu identifizieren
+
+Die Funktion kann in der functions.php vom theme-AddOn oder in der boot.php vom project-AddOn hinterlegt werden:  
+
+```php
+// CustomLink-Funktion REX5 / mform / mblock
+
+if (!function_exists('getcustomLink')) {
+  function getcustomLink($url) {
+
+  // Wurde ein Wert für $url übergeben?
+  if ($url) {
+
+    // Prüfe ob es sich um eine URL handelt, dann weiter
+    if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) {
+    }
+
+    // Ist es eine Mediendatei?
+    if (file_exists(rex_path::media($url)) === true) {
+       $url = rex_url::media($url);
+    }
+    else {
+        // Ist es keine Mediendatei oder URL, dann als REDAXO-Artikel-ID behandeln
+        if (filter_var($url, FILTER_VALIDATE_URL) === FALSE and is_numeric($url)) {
+            $url = rex_getUrl($url);
+        }
+    }
+
+   return $url;
+   }
+  }
+}
+```
diff --git a/docs/04_imagelist.md b/docs/04_imagelist.md
new file mode 100644
index 00000000..e6de0a97
--- /dev/null
+++ b/docs/04_imagelist.md
@@ -0,0 +1,27 @@
+# ImageList-Widget
+
+Die ImageList ist ein Widget, das es ermöglicht, eine Liste von Bildern zu erstellen.
+
+## Modul-Eingabe
+
+```php
+<?php
+// init mform
+echo MForm::factory()
+    // add fieldset area
+    ->addFieldsetArea('MForm Widgets', MForm::factory()
+        // custom elements
+        ->addImagelistField(1, ['label' => 'Image List'])
+    )
+    // parse form
+    ->show();
+```
+
+## Modul-Ausgabe
+
+Verwende die Imagelist wie eine klassische Medialist.
+
+```php
+<?php
+dump('REX_MEDIALIST[id=1]');
+```
diff --git a/docs/05_wrapper.md b/docs/05_wrapper.md
new file mode 100644
index 00000000..a7902262
--- /dev/null
+++ b/docs/05_wrapper.md
@@ -0,0 +1,193 @@
+# Wrapper- und Layout-Elemente
+
+Diese Moduleingabe-Beispiele zeigen, wie man mittels der MForm Wrapper-Elemente Input-Formulare sinnvoll layouten und interaktiv aufbereitet.
+
+## Accordion
+
+Stellt ein Accordion-Element dar, das sich bei Klick öffnet und schließt.
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    // fieldset
+    ->addFieldsetArea('Collapse accordion elements', MForm::factory()
+        ->addAccordionElement('Accordion 1', MForm::factory()
+            ->addTextAreaField('1.0.1', ['label' => 'Text-Area 1'])
+        )
+        ->addAccordionElement('Accordion 2', MForm::factory()
+            ->addTextAreaField('1.0.2', ['label' => 'Text-Area 2'])
+        , true) // open this collapse initial
+        ->addAccordionElement('Accordion 3', MForm::factory()
+            ->addTextAreaField('1.0.3', ['label' => 'Text-Area 3'])
+        )
+    );
+// parse mform
+echo $mform->show();
+```
+
+## Collapse
+
+Stellt ein Collapse-Element dar, das sich bei Klick öffnet und schließt.
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    // fieldset
+    ->addFieldsetArea('Collapse elements', MForm::factory()
+        ->addCollapseElement('Collapse 1', MForm::factory()
+            ->addTextAreaField('5.0.1', ['label' => 'Text-Area 1'])
+        , true) // open this collapse initial
+        ->addCollapseElement('Collapse 2', MForm::factory()
+            ->addTextAreaField('5.0.2', ['label' => 'Text-Area 2'])
+        )
+        ->addCollapseElement('Collapse 3', MForm::factory()
+            ->addTextAreaField('5.0.3', ['label' => 'Text-Area 3'])
+        )
+    );
+// parse mform
+echo $mform->show();
+```
+
+## Radio-/Checkbox-Collapse
+
+Stellt ein Collapse-Element dar, das sich in Abhängigkeit einer Checkbox- oder eines Radio-Auswahlfelds bei Klick öffnet und schließt.
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    // toggle radio
+    ->addFieldsetArea('Radio collapse element', MForm::factory()
+        ->addRadioField('4.0.1', [1 => 'Open Collapse 1', 2 => 'Open Collapse 2' ,3 => 'Something...'], ['label' => 'Radio Buttons'])
+            ->setToggleOptions([1 => 'collapse1', 2 => 'collapse2']) // user value "collapse1" and "collapse2" for collapse data-group-collapse-id
+        ->addForm( // use addForm method to add the collapse element wrapper form
+            MForm::factory()
+                ->addCollapseElement('',
+                    MForm::factory()->addTextAreaField('4.0.2', ['label' => 'Text-Area 1']),
+                    false, true, ['data-group-collapse-id' => 'collapse1'] // open that collapse initial and hide the toggle link
+                )
+                ->addCollapseElement('',
+                    MForm::factory()->addTextAreaField('4.0.3', ['label' => 'Text-Area 2']),
+                    true, true, ['data-group-collapse-id' => 'collapse2'] // hide the toggle link
+                )
+        )
+    )
+    // toggle checkbox
+    ->addFieldsetArea('Checkbox collapse element', MForm::factory()
+        ->addCheckboxField('5.0.1', [1 => 'Open Collapse-area'], ['label' => 'Collapse checkbox', 'data-toggle-item' => 'collapse1'])
+        ->addForm(MForm::factory()
+            ->addCollapseElement('', MForm::factory()
+                ->addTextField('5.0.2', ['label' => 'Button-Text (optional)'])
+                ->addCustomLinkField('5.0.3', ['label' => 'Link-Ziel'])->show(), false, true, ['data-group-collapse-id' => 'collapse3']
+            )
+        )
+    )
+    // checkbox
+    ->addFieldsetArea('Toggle checkbox collapse element', MForm::factory()
+        ->addToggleCheckboxField('6.0.4', [1 => 'Open Collapse-area'], ['label' => 'Collapse checkbox', 'data-toggle-item' => 'collapse3'])
+        ->addForm(MForm::factory()
+            ->addCollapseElement('', MForm::factory()
+                ->addTextField('6.0.5', ['label' => 'Button-Text (optional)'])
+                ->addCustomLinkField('6.0.6', ['label' => 'Link-Ziel'])->show(), false, true, ['data-group-collapse-id' => 'collapse3']
+            )
+        )
+    );
+// parse form
+echo $mform->show();
+```
+
+## Select-Collapse
+
+Stellt ein Collapse-Element dar, das sich in Abhängigkeit einer Select-Auswahlliste bei Klick öffnet und schließt.
+
+```php
+<?php
+// select collapse
+$mform = MForm::factory()
+    ->addFieldsetArea('Select collapse element',
+        MForm::factory()
+            ->addSelectField('6.0.select', [0 => 'Bitte wählen', 1 => 'collapse 1', 2 => 'collapse 2', 3 => 'collapse 3'], ['label' => 'Select collapse', 'data-toggle' => 'collapse'])
+                ->setToggleOptions([1 => 'collapse1', 2 => 'collapse2', 3 => 'collapse3']) // user value "collapse1", "collapse2" and "collapse3" for collapse data-group-collapse-id
+            ->addForm(
+                MForm::factory()
+                    ->addCollapseElement('',
+                        MForm::factory()->addTextAreaField('6.0.1', ['label' => 'Text-Area 1']),
+                        false, true, ['data-group-collapse-id' => 'collapse1']
+                    )
+                    ->addCollapseElement('',
+                        MForm::factory()->addTextAreaField('6.0.2', ['label' => 'Text-Area 2']),
+                        true, true, ['data-group-collapse-id' => 'collapse2']
+                    )
+                    ->addCollapseElement('',
+                        MForm::factory()->addTextAreaField('6.0.3', ['label' => 'Text-Area 3']),
+                        false, true, ['data-group-collapse-id' => 'collapse3']
+                    )
+            )
+    );
+// parse mform
+echo $mform->show();
+```
+
+## Grid/Column-Wrapper
+
+Stellt ein Grid-Element dar, das sich in mehrere Spalten aufteilen lässt.
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    ->addColumnElement(6, // column
+        MForm::factory()->addTextField(1, ['label' => 'Test 1', 'full' => true])
+    )
+    ->addColumnElement(6, //column
+        MForm::factory()->addTextField(2, ['label' => 'Test 2', 'full' => true]),
+        ['class' => 'pl-0', 'data-test' => 'test123']
+    );
+// parse mform
+echo $mform->show();
+```
+
+## Inline-Elemente
+
+Stellt Inline-Elemente dar, die sich in einer Zeile nebeneinander anordnen.
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    ->addInlineElement('Label', MForm::factory()
+        ->addTextField(3, ['label' => 'Test 3', 'full' => true])
+        ->addTextField(4, ['label' => 'Test 4', 'full' => true])
+    )
+    ->addInlineElement('Label 2', MForm::factory()
+        ->addTextField(5, ['label' => 'Test 5', 'full' => true])
+        ->addTextField(6, ['label' => 'Test 6', 'full' => true])
+    );
+// parse mform
+echo $mform->show();
+```
+
+## Tabs
+
+Stellt Tab-Elemente dar, die bei Klick den dargestellten Inhalt wechseln.
+
+```php
+<?php
+// init mform
+$mform = MForm::factory()
+    ->addTabElement('Tab1', MForm::factory()
+        ->addTextField('2.0.1',['label' => 'Text1'])
+            ->setOptions([1=>'option1',2=>'option2'])
+    )
+    ->addTabElement('Tab2', MForm::factory()
+        ->addTextField('2.0.2',['label' => 'Text2'])
+        , true, true
+    )
+    ->addTabElement('Tab3', MForm::factory()
+        ->addTextField('2.0.3',['label' => 'Text3'])
+    );
+// parse mform
+echo $mform->show();
+```
diff --git a/docs/06_advanced.md b/docs/06_advanced.md
new file mode 100644
index 00000000..c212ede9
--- /dev/null
+++ b/docs/06_advanced.md
@@ -0,0 +1,214 @@
+# Erweiterte Beispiele
+
+Kniffe und Praxisbeispiele, wie MForm-Elemente an die jeweiligen Anforderungen angepasst werden können.
+
+MForm stellt folgende Element-Methoden bereit:
+
+- Strukturelle Wrapper-Elemente
+  - `addFieldsetArea`
+  - `addCollapseElement`
+  - `addAccordionElement`
+  - `addTabElement`
+  - `addColumnElement`
+  - `addInlineElement`
+- Text-Input- und Hidden-Elemente
+  - `addTextField`
+  - `addHiddenField`
+  - `addTextAreaField`
+  - `addTextReadOnlyField`
+  - `addTextAreaReadOnlyField`
+- Select-Elemente
+  - `addSelectField`
+  - `addMultiSelectField`
+- Checkbox- und Radio-Elemente
+  - `addCheckboxField`
+  - `addRadioField`
+- Informelle-Elemente
+  - `addHtml`
+  - `addHeadline`
+  - `addDescription`
+  - `addAlert`
+  - `addAlertDanger`, `addAlertError`
+  - `addAlertInfo`
+  - `addAlertSuccess`
+  - `addAlertWarning`
+- System-Button-Elemente
+  - `addLinkField`
+  - `addLinklistField`
+  - `addMediaField`
+  - `addMedialistField`
+- Custom-Elemente
+  - `addCustomLinkField`
+  - `addImagelistField`
+  - `addInputField`
+- Spezielle `setter`-Methoden
+  - `setAttribute`
+  - `setAttributes`
+  - `setCategory`
+  - `setCollapseInfo`
+  - `setDefaultValue`
+  - `setDisableOption`
+  - `setDisableOptions`
+  - `setFormItemColClass`
+  - `setFull`
+  - `setLabel`
+  - `setLabelColClass`
+  - `setMultiple`
+  - `setOption`
+  - `setOptions`
+  - `setParameter`
+  - `setParameters`
+  - `setPlaceholder`
+  - `setSize`
+  - `setSqlOptions`
+  - `setTabIcon`
+  - `setToggleOptions`
+  - `setTooltipInfo`
+
+## Beispiele: Attribute
+
+```php
+// init mform
+$mform = MForm::factory()
+    // text input use set attribute method
+    ->addTextField("1.0")
+    ->setAttribute('label', 'Text Label')
+    ->setAttribute('class', 'mynewclass')
+    ->setAttribute('style', 'width: 260px')
+    ->setAttribute('default-value', 'default value string');
+// text input use set attributes method
+$mform->addTextField(1.2)
+    ->setAttributes([
+        'label'=>'Text Label',
+        'class'=>'mynewclass',
+        'style'=>'width: 220px',
+        'default-value'=>'default value string'
+    ]);
+// text input use add method attributes parameter
+$mform->addTextField(1.3, [
+    'label'=>'Text Label',
+    'class'=>'mynewclass',
+    'style'=>'width: 280px',
+    'default-value'=>'default value string'
+]);
+// text input use any set methods
+$mform->addTextField(1.4)
+    ->setLabel('Text Label') // for label use set label method
+    ->setAttribute('class', 'mynewclass') // for class use only set attribute method
+    ->setAttribute('style', 'width: 220px') // for style use only set attribute method
+    ->setDefaultValue('default value string'); // for default value use set default value method
+// init mform
+$mform2 = MForm::factory()
+    // select use add method attributes parameter
+    ->addSelectField("2.0", [1 => 'option 1', 2 => 'option 2'], [
+        'label'=>'Select Label',
+        'class'=>'mynewclass',
+        'style'=>'width: 260px',
+        'default-value'=>2
+    ]);
+// select use set attributes method
+$mform->addSelectField(2.1, [1 => 'option 1', 2 => 'option 2'])
+    ->setAttributes([
+        'label'=>'Select Label',
+        'class'=>'mynewclass',
+        'style'=>'width: 220px',
+        'default-value'=>2
+    ]);
+// select use any setters
+$mform->addSelectField(2.2)
+    ->setOptions([1 => 'option 1', 2 => 'option 2', 3 => 'option 3', 4 => 'option 4']) // for options set options method
+    ->setOption('option 5', 5)
+    ->setLabel('Select Label') // for label use set label method
+    ->setAttribute('class', 'mynewclass') // for class use only set attribute method
+    ->setAttribute('style', 'width: 260px') // for style use only set attribute method
+    ->setDefaultValue(2) // for default value use set default value method
+    ->setMultiple()
+    ->setSize('full');
+// parse mform
+echo MForm::factory()
+    // add fieldset areas
+    ->addFieldsetArea('Fieldset Element', $mform)
+    ->addFieldsetArea('Select elements with attributes', $mform2)
+    ->show();
+```
+
+## Beispiele: JSON-Value-Support
+
+```php
+// instanziieren
+$mform = MForm::factory()
+    // add fieldset area
+    ->addFieldsetArea('Full json value support', MForm::factory()
+        ->addTextField('1.0.title', ['label' => 'Text title'])
+        ->addTextAreaField("1.0.description", ['label' => 'Text description'])
+        ->addMultiSelectField("1.0.style", [1 => 'test-1', 2 => 'test-2'], ['label' => 'Multiselect style'])
+    )
+    // add second fieldset area
+    ->addFieldsetArea('Numeric json values', MForm::factory()
+        ->addTextField("1.1.0", ['label' => 'Text input'])
+        ->addTextAreaField("1.1.1", ['label' => 'Textarea'])
+        ->addMultiSelectField("1.1.2", [1 => 'test-1', 2 => 'test-2'], ['label' => 'Multiselect'])
+    );
+// parse form
+echo $mform->show();
+```
+
+```php
+dump('REX_VALUE[id=1]');
+```
+
+## Beispiele: Optionen
+
+```php
+// init mform
+$mform = MForm::factory()
+    // add fieldset area
+    ->addFieldsetArea('Select elements with options', MForm::factory()
+        // select use add method options parameter
+        ->addSelectField("1.0", [1 => 'option 1', 2 => 'option 2'], ['label'=>'Select Label'])
+        // select use set option method
+        ->addSelectField(1.1)
+            ->setOption(1, 'option 1')
+            ->setOption(2, 'option 2')
+            ->setLabel('Select Label')
+        // select use set options method
+        ->addSelectField(1.2)
+            ->setOptions([1 => 'option 1', 2 => 'option 2', 3 => 'option 3', 4 => 'option 4']) // for options set options method
+            ->setLabel('Select Label') // for label use set label method
+    )
+    // add second fieldset area
+    ->addFieldsetArea('Multiselect elements with options', MForm::factory()
+        // multiselect use add method options parameter
+        ->addMultiSelectField("2.0", [1 => 'option 1', 2 => 'option 2'], ['label'=>'Multiselect Label'])
+        ->addSelectField("3.0", ['optgroup 1' => [1 => 'option 1', 2 => 'option 2'], 'optgroup 2' => [3 => 'option 3', 4 => 'option 4']], ['label'=>'Multiselect Label'])
+            ->setSize('full') // do it full
+            ->setMultiple()
+        // select use set options method
+        ->addSelectField(3.1)
+            ->setOptions(['optgroup 1' => [1 => 'option 1', 2 => 'option 2'], 'optgroup 2' => [3 => 'option 3', 4 => 'option 4']]) // for options set options method
+            ->setLabel('Multiselect Label')
+            ->setMultiple()
+    )
+    // add third fieldset area
+    ->addFieldsetArea('Checkbox element with option', MForm::factory()
+        // checkbox element with option
+        ->addCheckboxField(4)
+            ->setOption(1, 'option 1') // checkboxes can only have one option
+            ->setLabel('Checkbox Label')
+    )
+    // add fourth fieldset area
+    ->addFieldsetArea('Radio button element with options', MForm::factory()
+        ->addRadioField(5, [1 => 'option 1', 2 => 'option 2'], ['label' => 'Radio Buttons'])
+            ->setOptions([1 => 'test-1', 2 => 'test-2', 3 => 'test-3']) // overwrite options
+            ->setLabel('Radio Label') // overwrite label
+    )
+    // add fifth fieldset area
+    ->addFieldsetArea('SQL options', MForm::factory()
+        ->addRadioField(6, [], ['label' => 'SQL Radio'])
+            ->setSqlOptions("select id, name from rex_module limit 5")
+        ->addSelectField(7, [], ['label' => 'SQL Select'])
+            ->setSqlOptions("select id, name from rex_module")
+    );
+// parse form
+echo $mform->show();
+```
diff --git a/lang/de_de.lang b/lang/de_de.lang
index bb796755..d9daeffa 100755
--- a/lang/de_de.lang
+++ b/lang/de_de.lang
@@ -73,3 +73,13 @@ yform_values_custom_link_link_category = Link-Kategorie
 yform_values_custom_link_phone = Telefon-Link-Button
 yform_values_imagelist_description = Bildauswahl mit direkter Darstellung / drag & drop
 yform_values_custom_link_ylink = YForm-Link-Widget (label_text::yform_tabelle::anzeige_column,label_text2::yform_tabelle_2::anzeige_column_2)
+
+# Docs
+
+mform_docs = Dokumentation
+mform_docs_basics = Grundlagen
+mform_docs_redaxo = REDAXO-Widgets
+mform_docs_customlink = Custom-Link-Widget
+mform_docs_imagelist = Imagelist-Widget
+mform_docs_wrapper = Wrapper und Layouts
+mform_docs_advanced = Erweitert
diff --git a/package.yml b/package.yml
index 9d2be6a8..136e1047 100755
--- a/package.yml
+++ b/package.yml
@@ -7,25 +7,21 @@ page:
     title: 'translate:title'
     pjax: true
     perm: admin[]
-    icon: rex-icon fa-subway
+    icon: rex-icon fa-diagram-next
     subpages:
-        mform_demo:
-            title: 'translate:mform_reference_demo'
-            subpages:
-                pjax: true
-                demo_base: { title: 'translate:demo_base' }
-                demo_wrapper: { title: 'translate:demo_wrapper' }
-                demo_extended: { title: 'translate:demo_extended' }
-                demo_expert: { title: 'translate:demo_expert' }
+        docs:
+            title: 'translate:help'
+            icon: rex-icon fa-info-circle
+            perm: mform[docs]
+            hidden: true
+        demo:
+            title: 'translate:demo'
+            icon: rex-icon fa-desktop
+            perm: mform[demo]
         changelog:
             title: 'translate:changelog'
             subPath: CHANGELOG.md
             itemclass: pull-right
-        help:
-            title: 'translate:help'
-            subPath: README.md
-            itemclass: pull-right
-
 requires:
     php: '>=7.4'
     redaxo: '^5.10.0'
diff --git a/pages/minputs_demo.demo_base.php b/pages/demo.php
similarity index 100%
rename from pages/minputs_demo.demo_base.php
rename to pages/demo.php
diff --git a/pages/docs.php b/pages/docs.php
new file mode 100644
index 00000000..83e65148
--- /dev/null
+++ b/pages/docs.php
@@ -0,0 +1,45 @@
+<?php
+
+/**
+ * @var rex_addon $this
+ * @psalm-scope-this rex_addon
+ */
+
+$mdFiles = [];
+foreach (glob(rex_addon::get('mform')->getPath('docs') . '/*.md') ?: [] as $file) {
+    $mdFiles[mb_substr(basename($file), 0, -3)] = $file;
+}
+
+$currenMDFile = rex_request('mdfile', 'string', '01_basics');
+
+$page = rex_be_controller::getPageObject('mform');
+
+if (null !== $page) {
+    foreach ($mdFiles as $key => $mdFile) {
+        $keyWithoudPrio = mb_substr($key, 3);
+        $currenMDFileWithoudPrio = mb_substr($currenMDFile, 3);
+        $page->addSubpage(
+            (new rex_be_page($key, rex_i18n::msg('mform_docs_' . $keyWithoudPrio)))
+            ->setSubPath($mdFile)
+            ->setHref('index.php?page=mform/docs&mdfile=' . $key)
+            ->setIsActive($key == $currenMDFile),
+        );
+    }
+}
+
+echo rex_view::title($this->i18n('mform_title'));
+
+[$Toc, $Content] = rex_markdown::factory()->parseWithToc(rex_file::require($mdFiles[$currenMDFile]), 2, 3, [
+    rex_markdown::SOFT_LINE_BREAKS => false,
+    rex_markdown::HIGHLIGHT_PHP => true,
+]);
+
+$fragment = new rex_fragment();
+$fragment->setVar('content', $Content, false);
+$fragment->setVar('toc', $Toc, false);
+$content = $fragment->parse('core/page/docs.php');
+
+$fragment = new rex_fragment();
+$fragment->setVar('title', rex_i18n::msg('package_help') . ' MForm', false);
+$fragment->setVar('body', $content, false);
+echo $fragment->parse('core/page/section.php');
diff --git a/pages/index.php b/pages/index.php
index f2493d1e..50a3f5c8 100755
--- a/pages/index.php
+++ b/pages/index.php
@@ -5,6 +5,33 @@
  * @license MIT
  */
 
-echo rex_view::title(rex_i18n::msg('mform_title') . ' ' . rex_i18n::msg('mform_'.rex_be_controller::getCurrentPagePart(2)));
+
+$mdFiles = [];
+foreach (glob(rex_addon::get('mform')->getPath('docs') . '/*.md') ?: [] as $file) {
+    $mdFiles[mb_substr(basename($file), 0, -3)] = $file;
+}
+
+$currenMDFile = rex_request('mdfile', 'string', '02_basics');
+if (!array_key_exists($currenMDFile, $mdFiles)) {
+    $currenMDFile = '02_basics';
+}
+
+$page = rex_be_controller::getPageObject('mform');
+
+if (null !== $page) {
+    foreach ($mdFiles as $key => $mdFile) {
+        $keyWithoudPrio = mb_substr($key, 3);
+        $currenMDFileWithoudPrio = mb_substr($currenMDFile, 3);
+        $page->addSubpage(
+            (new rex_be_page($key, rex_i18n::msg('mform_docs_' . $keyWithoudPrio)))
+            ->setSubPath($mdFile)
+            ->setHref('index.php?page=mform/docs&mdfile=' . $key)
+        );
+    }
+}
+
+if(rex_be_controller::getCurrentPagePart(2) == "changelog" || rex_be_controller::getCurrentPagePart(2) == "demo") {
+    echo rex_view::title(rex_i18n::msg('mform_title') . ' ' . rex_i18n::msg('mform_'.rex_be_controller::getCurrentPagePart(2)));
+}
 
 rex_be_controller::includeCurrentPageSubPath();
diff --git a/pages/info.php b/pages/info.php
index fb265657..5b506df9 100755
--- a/pages/info.php
+++ b/pages/info.php
@@ -5,8 +5,10 @@
  * @license MIT
  */
 
+echo rex_view::title(rex_i18n::msg('mform_title') . ' ' . rex_i18n::msg('mform_'.rex_be_controller::getCurrentPagePart(2)));
+
 $headline = '<h3>'. rex_i18n::msg('mform_help_subheadline_1') .'</h3>';
 $content = '<p>'.  rex_i18n::msg('mform_help_infotext_1') .'</p>
     <p>'.  rex_i18n::msg('mform_help_infotext_2') .'</p>
     <p>'.  rex_i18n::msg('mform_help_infotext_3') .'</p>
-    <a href="https://github.com/FriendsOfREDAXO/mform/" target="_blank">'. rex_i18n::msg('mform_github') .'</a>';
\ No newline at end of file
+    <a href="https://github.com/FriendsOfREDAXO/mform/" target="_blank">'. rex_i18n::msg('mform_github') .'</a>';
diff --git a/pages/mform_demo.demo_base.php b/pages/mform_demo.demo_base.php
deleted file mode 100755
index dc060714..00000000
--- a/pages/mform_demo.demo_base.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php
-/**
- * @author Joachim Doerr
- * @package redaxo5
- * @license MIT
- */
-
-use MForm\Utils\MFormPageHelper;
-
-// parse info fragment
-$fragment = new rex_fragment();
-$fragment->setVar('title', rex_i18n::msg('mform_info'), false);
-$fragment->setVar('body', '<p>'.rex_i18n::msg('mform_example_description_base').'</p>', false);
-echo $fragment->parse('core/page/section.php');
-
-// parse info fragment
-$fragment = new rex_fragment();
-$fragment->setVar('title', rex_i18n::msg('mform_demo_base'), false);
-$fragment->setVar('body', MFormPageHelper::exchangeExamples('base'), false);
-echo $fragment->parse('core/page/section.php');
diff --git a/pages/mform_demo.demo_community.php b/pages/mform_demo.demo_community.php
deleted file mode 100755
index 1dfd8525..00000000
--- a/pages/mform_demo.demo_community.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php
-/**
- * @author Joachim Doerr
- * @package redaxo5
- * @license MIT
- */
-
-use MForm\Utils\MFormPageHelper;
-
-// parse info fragment
-$fragment = new rex_fragment();
-$fragment->setVar('title', $this->i18n('info'), false);
-$fragment->setVar('body', '<p>'.$this->i18n('example_description_community').'</p>', false);
-echo $fragment->parse('core/page/section.php');
-
-// parse info fragment
-$fragment = new rex_fragment();
-$fragment->setVar('title', $this->i18n('demo_community'), false);
-$fragment->setVar('body', MFormPageHelper::exchangeExamples('community'), false);
-echo $fragment->parse('core/page/section.php');
diff --git a/pages/mform_demo.demo_expert.php b/pages/mform_demo.demo_expert.php
deleted file mode 100755
index 40039127..00000000
--- a/pages/mform_demo.demo_expert.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php
-/**
- * @author Joachim Doerr
- * @package redaxo5
- * @license MIT
- */
-
-use MForm\Utils\MFormPageHelper;
-
-// parse info fragment
-$fragment = new rex_fragment();
-$fragment->setVar('title', $this->i18n('info'), false);
-$fragment->setVar('body', '<p>'.$this->i18n('example_description_expert').'</p>', false);
-echo $fragment->parse('core/page/section.php');
-
-// parse info fragment
-$fragment = new rex_fragment();
-$fragment->setVar('title', $this->i18n('demo_expert'), false);
-$fragment->setVar('body', MFormPageHelper::exchangeExamples('expert'), false);
-echo $fragment->parse('core/page/section.php');
diff --git a/pages/mform_demo.demo_extended.php b/pages/mform_demo.demo_extended.php
deleted file mode 100755
index 1846366f..00000000
--- a/pages/mform_demo.demo_extended.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php
-/**
- * @author Joachim Doerr
- * @package redaxo5
- * @license MIT
- */
-
-use MForm\Utils\MFormPageHelper;
-
-// parse info fragment
-$fragment = new rex_fragment();
-$fragment->setVar('title', $this->i18n('info'), false);
-$fragment->setVar('body', '<p>'.$this->i18n('example_description_extended').'</p>', false);
-echo $fragment->parse('core/page/section.php');
-
-// parse info fragment
-$fragment = new rex_fragment();
-$fragment->setVar('title', $this->i18n('demo_extended'), false);
-$fragment->setVar('body', MFormPageHelper::exchangeExamples('extended'), false);
-echo $fragment->parse('core/page/section.php');
diff --git a/pages/mform_demo.demo_wrapper.php b/pages/mform_demo.demo_wrapper.php
deleted file mode 100755
index 90553e11..00000000
--- a/pages/mform_demo.demo_wrapper.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php
-/**
- * @author Joachim Doerr
- * @package redaxo5
- * @license MIT
- */
-
-use MForm\Utils\MFormPageHelper;
-
-// parse info fragment
-$fragment = new rex_fragment();
-$fragment->setVar('title', rex_i18n::msg('mform_info'), false);
-$fragment->setVar('body', '<p>'.rex_i18n::msg('mform_example_description_wrapper').'</p>', false);
-echo $fragment->parse('core/page/section.php');
-
-// parse info fragment
-$fragment = new rex_fragment();
-$fragment->setVar('title', rex_i18n::msg('mform_demo_wrapper'), false);
-$fragment->setVar('body', MFormPageHelper::exchangeExamples('wrapper'), false);
-echo $fragment->parse('core/page/section.php');