Type safe DSL builders

39 files changed, 604 insertions, 31 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Container.kt b/src/main/kotlin/pl/treksoft/kvision/core/Container.kt
index d2650f7e..653f4a79 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/Container.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Container.kt
@@ -41,7 +41,7 @@ interface Container : Component {
 
     /**
      * Operator function for adding children in a DSL style.
-     * @param child children components
+     * @param children children components
      * @return current container
      */
     operator fun invoke(vararg children: Component): Container {
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
index 5f664563..532a6bb7 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
@@ -516,4 +516,15 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent() {
 
     override fun dispose() {
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.widget(classes: Set<String> = setOf(), init: (Widget.() -> Unit)? = null) {
+            this.add(Widget(classes).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt b/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
index 47470c83..81765846 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
@@ -54,4 +54,18 @@ open class WidgetWrapper(internal var wrapped: Component?, classes: Set<String>
         wrapped = null
     }
 
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.widgetWrapper(
+            wrapped: Component?,
+            classes: Set<String> = setOf(),
+            init: (WidgetWrapper.() -> Unit)? = null
+        ) {
+            this.add(WidgetWrapper(wrapped, classes).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/data/DataContainer.kt b/src/main/kotlin/pl/treksoft/kvision/data/DataContainer.kt
index 13b5ce00..fa545dc8 100644
--- a/src/main/kotlin/pl/treksoft/kvision/data/DataContainer.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/data/DataContainer.kt
@@ -123,4 +123,20 @@ class DataContainer<M : DataComponent, C : Component>(
         onUpdateHandler = null
         return this
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun <M : DataComponent, C : Component> Container.dataContainer(
+            model: ObservableList<M>,
+            binding: (Int) -> C,
+            child: Container = VPanel(),
+            init: (DataContainer<M, C>.() -> Unit)? = null
+        ) {
+            this.add(DataContainer(model, binding, child, init))
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
index b80c6dc5..1af71dc8 100644
--- a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.dropdown
 
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.CssSize
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
@@ -154,10 +155,6 @@ open class DropDown(
         counter++
     }
 
-    companion object {
-        internal var counter = 0
-    }
-
     override fun add(child: Component): SimplePanel {
         list.add(child)
         return this
@@ -237,6 +234,23 @@ open class DropDown(
     open fun toggle() {
         this.list.getElementJQueryD()?.dropdown("toggle")
     }
+
+    companion object {
+        internal var counter = 0
+
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.dropDown(
+            text: String, elements: List<StringPair>? = null, icon: String? = null,
+            style: BUTTONSTYLE = BUTTONSTYLE.DEFAULT, disabled: Boolean = false,
+            classes: Set<String> = setOf(), init: (DropDown.() -> Unit)? = null
+        ) {
+            this.add(DropDown(text, elements, icon, style, disabled, classes).apply { init?.invoke(this) })
+        }
+    }
 }
 
 internal class DropDownButton(
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
index 0a12f818..70c44fd7 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.form
 
 import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.form.check.CheckBox
 import pl.treksoft.kvision.form.check.Radio
@@ -214,4 +215,20 @@ open class FormPanel<K>(
     open fun validate(): Boolean {
         return form.validate()
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun <K> Container.formPanel(
+            type: FORMTYPE? = null, classes: Set<String> = setOf(),
+            modelFactory: (Map<String, Any?>) -> K
+        ): FormPanel<K> {
+            val panel = FormPanel(type, classes, modelFactory)
+            this.add(panel)
+            return panel
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
index 0bad8440..4c373a2d 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.form.check
 
 import org.w3c.dom.events.MouseEvent
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.form.BoolFormControl
@@ -153,10 +154,6 @@ open class CheckBox(
         counter++
     }
 
-    companion object {
-        internal var counter = 0
-    }
-
     @Suppress("UNCHECKED_CAST")
     override fun <T : Widget> setEventListener(block: SnOn<T>.() -> Unit): Widget {
         input.setEventListener(block)
@@ -201,4 +198,20 @@ open class CheckBox(
         }
         return this
     }
+
+    companion object {
+        internal var counter = 0
+
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.checkBox(
+            value: Boolean = false, label: String? = null,
+            rich: Boolean = false, init: (CheckBox.() -> Unit)? = null
+        ) {
+            this.add(CheckBox(value, label, rich).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckInput.kt
index 26a06fa7..8d083b42 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckInput.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.form.check
 
 import com.github.snabbdom.VNode
 import org.w3c.dom.events.MouseEvent
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
@@ -179,4 +180,18 @@ open class CheckInput(
         }
         return this
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.checkInput(
+            type: CHECKINPUTTYPE = CHECKINPUTTYPE.CHECKBOX, value: Boolean = false,
+            classes: Set<String> = setOf(), init: (CheckInput.() -> Unit)? = null
+        ) {
+            this.add(CheckInput(type, value, classes).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
index a8059230..13f4c4cd 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.form.check
 
 import org.w3c.dom.events.MouseEvent
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.form.BoolFormControl
@@ -164,10 +165,6 @@ open class Radio(
         counter++
     }
 
-    companion object {
-        internal var counter = 0
-    }
-
     @Suppress("UNCHECKED_CAST")
     override fun <T : Widget> setEventListener(block: SnOn<T>.() -> Unit): Widget {
         input.setEventListener(block)
@@ -221,4 +218,20 @@ open class Radio(
         }
         return this
     }
+
+    companion object {
+        internal var counter = 0
+
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.radio(
+            value: Boolean = false, extraValue: String? = null, name: String? = null, label: String? = null,
+            rich: Boolean = false, init: (Radio.() -> Unit)? = null
+        ) {
+            this.add(Radio(value, extraValue, name, label, rich).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
index 7bd13d4e..80736d59 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
@@ -21,6 +21,7 @@
  */
 package pl.treksoft.kvision.form.check
 
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
@@ -110,10 +111,6 @@ open class RadioGroup(
         counter++
     }
 
-    companion object {
-        internal var counter = 0
-    }
-
     override fun getSnClass(): List<StringBoolPair> {
         val cl = super.getSnClass().toMutableList()
         if (validatorError != null) {
@@ -166,4 +163,19 @@ open class RadioGroup(
         this.addInternal(validationInfo)
     }
 
+    companion object {
+        internal var counter = 0
+
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.radioGroup(
+            options: List<StringPair>? = null, value: String? = null, inline: Boolean = false,
+            label: String? = null, rich: Boolean = false, init: (RadioGroup.() -> Unit)? = null
+        ) {
+            this.add(RadioGroup(options, value, inline, label, rich).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/select/Select.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/Select.kt
index e8494d58..dc55dd04 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/select/Select.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/Select.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.form.select
 
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
@@ -200,10 +201,6 @@ open class Select(
         counter++
     }
 
-    companion object {
-        internal var counter = 0
-    }
-
     override fun getSnClass(): List<StringBoolPair> {
         val cl = super.getSnClass().toMutableList()
         if (validatorError != null) {
@@ -272,4 +269,21 @@ open class Select(
     open fun toggleOptions() {
         input.toggleOptions()
     }
+
+    companion object {
+        internal var counter = 0
+
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.select(
+            options: List<StringPair>? = null, value: String? = null,
+            multiple: Boolean = false, ajaxOptions: AjaxOptions? = null, label: String? = null,
+            rich: Boolean = false, init: (Select.() -> Unit)? = null
+        ) {
+            this.add(Select(options, value, multiple, ajaxOptions, label, rich).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/select/SelectInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/SelectInput.kt
index 7374a30d..be986f02 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/select/SelectInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/SelectInput.kt
@@ -24,6 +24,7 @@ package pl.treksoft.kvision.form.select
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.KVManager.KVNULL
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.CssSize
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
@@ -384,4 +385,19 @@ open class SelectInput(
         } ?: getElementJQueryD()?.selectpicker("val", null)
     }
 
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.selectInput(
+            options: List<StringPair>? = null, value: String? = null,
+            multiple: Boolean = false, ajaxOptions: AjaxOptions? = null,
+            classes: Set<String> = setOf(), init: (SelectInput.() -> Unit)? = null
+        ) {
+            this.add(SelectInput(options, value, multiple, ajaxOptions, classes).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt b/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt
index 4d7a3150..2a5d2cbe 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt
@@ -21,6 +21,7 @@
  */
 package pl.treksoft.kvision.form.spinner
 
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.form.FieldLabel
@@ -191,10 +192,6 @@ open class Spinner(
         counter++
     }
 
-    companion object {
-        internal var counter = 0
-    }
-
     override fun getSnClass(): List<StringBoolPair> {
         val cl = super.getSnClass().toMutableList()
         if (validatorError != null) {
@@ -238,4 +235,26 @@ open class Spinner(
         input.spinDown()
         return this
     }
+
+    companion object {
+        internal var counter = 0
+
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.spinner(
+            value: Number? = null, min: Int = 0, max: Int = DEFAULT_MAX, step: Double = DEFAULT_STEP,
+            decimals: Int = 0, buttonsType: BUTTONSTYPE = BUTTONSTYPE.VERTICAL,
+            forceType: FORCETYPE = FORCETYPE.NONE, label: String? = null,
+            rich: Boolean = false, init: (Spinner.() -> Unit)? = null
+        ) {
+            this.add(Spinner(value, min, max, step, decimals, buttonsType, forceType, label, rich).apply {
+                init?.invoke(
+                    this
+                )
+            })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt
index 63ad0852..6dcb2b4a 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.form.spinner
 
 import com.github.snabbdom.VNode
 import pl.treksoft.jquery.JQuery
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
@@ -336,4 +337,26 @@ open class SpinnerInput(
             this.forcestepdivisibility = forceType.value
         }
     }
+
+    companion object {
+        internal var counter = 0
+
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.spinnerInput(
+            value: Number? = null, min: Int = 0, max: Int = DEFAULT_MAX, step: Double = DEFAULT_STEP,
+            decimals: Int = 0, buttonsType: BUTTONSTYPE = BUTTONSTYPE.VERTICAL,
+            forceType: FORCETYPE = FORCETYPE.NONE, classes: Set<String> = setOf(),
+            init: (SpinnerInput.() -> Unit)? = null
+        ) {
+            this.add(SpinnerInput(value, min, max, step, decimals, buttonsType, forceType, classes).apply {
+                init?.invoke(
+                    this
+                )
+            })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/Password.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/Password.kt
index f3f50a63..39c9a306 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/Password.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/Password.kt
@@ -21,6 +21,8 @@
  */
 package pl.treksoft.kvision.form.text
 
+import pl.treksoft.kvision.core.Container
+
 /**
  * Form field password component.
  *
@@ -32,4 +34,17 @@ package pl.treksoft.kvision.form.text
 open class Password(value: String? = null, label: String? = null, rich: Boolean = false) : Text(
     TEXTINPUTTYPE.PASSWORD,
     value, label, rich
-)
+) {
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.password(
+            value: String? = null, label: String? = null, rich: Boolean = false, init: (Password.() -> Unit)? = null
+        ) {
+            this.add(Password(value, label, rich).apply { init?.invoke(this) })
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/RichText.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/RichText.kt
index 39083577..9d5c8c49 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/RichText.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/RichText.kt
@@ -21,6 +21,8 @@
  */
 package pl.treksoft.kvision.form.text
 
+import pl.treksoft.kvision.core.Container
+
 /**
  * Form field rich text component.
  *
@@ -51,4 +53,17 @@ open class RichText(
         this.addInternal(input)
         this.addInternal(validationInfo)
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.richText(
+            value: String? = null, label: String? = null, rich: Boolean = false, init: (RichText.() -> Unit)? = null
+        ) {
+            this.add(RichText(value, label, rich).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/RichTextInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/RichTextInput.kt
index d90c5769..f802cc2a 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/RichTextInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/RichTextInput.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.form.text
 
 import com.github.snabbdom.VNode
 import pl.treksoft.jquery.jQuery
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 import kotlin.browser.document
 
@@ -108,4 +109,17 @@ open class RichTextInput(value: String? = null, classes: Set<String> = setOf())
     override fun changeValue() {
         // disabled parent class functionality
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.richTextInput(
+            value: String? = null, classes: Set<String> = setOf(), init: (RichTextInput.() -> Unit)? = null
+        ) {
+            this.add(RichTextInput(value, classes).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/Text.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/Text.kt
index 298a3209..2878dc66 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/Text.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/Text.kt
@@ -21,6 +21,8 @@
  */
 package pl.treksoft.kvision.form.text
 
+import pl.treksoft.kvision.core.Container
+
 /**
  * Form field text component.
  *
@@ -60,4 +62,18 @@ open class Text(
         this.addInternal(input)
         this.addInternal(validationInfo)
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.text(
+            type: TEXTINPUTTYPE = TEXTINPUTTYPE.TEXT, value: String? = null,
+            label: String? = null, rich: Boolean = false, init: (Text.() -> Unit)? = null
+        ) {
+            this.add(Text(type, value, label, rich).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/TextArea.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/TextArea.kt
index 02a64136..e9575264 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/TextArea.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/TextArea.kt
@@ -21,6 +21,8 @@
  */
 package pl.treksoft.kvision.form.text
 
+import pl.treksoft.kvision.core.Container
+
 /**
  * Form field textarea component.
  *
@@ -69,4 +71,18 @@ open class TextArea(
         this.addInternal(input)
         this.addInternal(validationInfo)
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.textArea(
+            cols: Int? = null, rows: Int? = null, value: String? = null,
+            label: String? = null, rich: Boolean = false, init: (TextArea.() -> Unit)? = null
+        ) {
+            this.add(TextArea(cols, rows, value, label, rich).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
index fd42de9c..64e0f17d 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.form.text
 
 import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 
 /**
@@ -80,4 +81,18 @@ open class TextAreaInput(cols: Int? = null, rows: Int? = null, value: String? =
         }
         return sn
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.textAreaInput(
+            cols: Int? = null, rows: Int? = null, value: String? = null, classes: Set<String> = setOf(),
+            init: (TextAreaInput.() -> Unit)? = null
+        ) {
+            this.add(TextAreaInput(cols, rows, value, classes).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
index 72791239..cc443aa5 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.form.text
 
 import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 
 /**
@@ -84,4 +85,18 @@ open class TextInput(type: TEXTINPUTTYPE = TEXTINPUTTYPE.TEXT, value: String? =
         }
         return sn
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.textInput(
+            type: TEXTINPUTTYPE = TEXTINPUTTYPE.TEXT, value: String? = null, classes: Set<String> = setOf(),
+            init: (TextInput.() -> Unit)? = null
+        ) {
+            this.add(TextInput(type, value, classes).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt b/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt
index 426e0644..34ea98ce 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt
@@ -21,6 +21,7 @@
  */
 package pl.treksoft.kvision.form.time
 
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.form.DateFormControl
@@ -189,10 +190,6 @@ open class DateTime(
         counter++
     }
 
-    companion object {
-        internal var counter = 0
-    }
-
     override fun getSnClass(): List<StringBoolPair> {
         val cl = super.getSnClass().toMutableList()
         if (validatorError != null) {
@@ -234,4 +231,20 @@ open class DateTime(
     override fun getValueAsString(): String? {
         return input.getValueAsString()
     }
+
+    companion object {
+        internal var counter = 0
+
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.dateTime(
+            value: Date? = null, format: String = "YYYY-MM-DD HH:mm", label: String? = null,
+            rich: Boolean = false, init: (DateTime.() -> Unit)? = null
+        ) {
+            this.add(DateTime(value, format, label, rich).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt
index a49f1d5f..0556f2ef 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.form.time
 
 import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
@@ -309,5 +310,17 @@ open class DateTimeInput(
                 .replace("M", "m").replace("{----}", "MM").replace("{---}", "M").replace("H", "{-}")
                 .replace("h", "H").replace("{-}", "h").replace("D", "d").replace("a", "p").replace("A", "P")
         }
+
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.dateTimeInput(
+            value: Date? = null, format: String = "YYYY-MM-DD HH:mm", classes: Set<String> = setOf(),
+            init: (DateTimeInput.() -> Unit)? = null
+        ) {
+            this.add(DateTimeInput(value, format, classes).apply { init?.invoke(this) })
+        }
     }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Button.kt b/src/main/kotlin/pl/treksoft/kvision/html/Button.kt
index 874c4182..b4c6ed7c 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Button.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Button.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.html
 
 import com.github.snabbdom.VNode
 import org.w3c.dom.events.MouseEvent
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.ResString
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
@@ -158,4 +159,18 @@ open class Button(
         }
         return this
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.button(
+            text: String, icon: String? = null, style: BUTTONSTYLE = BUTTONSTYLE.DEFAULT,
+            disabled: Boolean = false, classes: Set<String> = setOf(), init: (Button.() -> Unit)? = null
+        ) {
+            this.add(Button(text, icon, style, disabled, classes).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Image.kt b/src/main/kotlin/pl/treksoft/kvision/html/Image.kt
index 9321b4dc..c2af9bac 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Image.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Image.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.ResString
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
@@ -118,4 +119,18 @@ open class Image(
         }
         return cl
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.image(
+            src: ResString, alt: String? = null, responsive: Boolean = false, shape: IMAGESHAPE? = null,
+            centered: Boolean = false, classes: Set<String> = setOf(), init: (Image.() -> Unit)? = null
+        ) {
+            this.add(Image(src, alt, responsive, shape, centered, classes).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Label.kt b/src/main/kotlin/pl/treksoft/kvision/html/Label.kt
index 1701150e..cd120cba 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Label.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Label.kt
@@ -21,6 +21,8 @@
  */
 package pl.treksoft.kvision.html
 
+import pl.treksoft.kvision.core.Container
+
 /**
  * Simple label component rendered as *span*.
  *
@@ -28,4 +30,17 @@ package pl.treksoft.kvision.html
  * @param text label text
  * @param rich determines if [text] can contain HTML code
  */
-open class Label(text: String, rich: Boolean = false) : Tag(TAG.SPAN, text, rich)
+open class Label(text: String, rich: Boolean = false) : Tag(TAG.SPAN, text, rich) {
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.label(
+            text: String, rich: Boolean = false, init: (Label.() -> Unit)? = null
+        ) {
+            this.add(Label(text, rich).apply { init?.invoke(this) })
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Link.kt b/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
index ad8897d5..7572d444 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.ResString
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.panel.SimplePanel
@@ -81,4 +82,18 @@ open class Link(
     override fun getSnAttrs(): List<StringPair> {
         return super.getSnAttrs() + ("href" to url)
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.link(
+            label: String, url: String, icon: String? = null, image: ResString? = null,
+            classes: Set<String> = setOf(), init: (Link.() -> Unit)? = null
+        ) {
+            this.add(Link(label, url, icon, image, classes).apply { init?.invoke(this) })
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/List.kt b/src/main/kotlin/pl/treksoft/kvision/html/List.kt
index 261555c9..29f5d18e 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/List.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/List.kt
@@ -25,6 +25,7 @@ import com.github.snabbdom.VNode
 import com.github.snabbdom.h
 import pl.treksoft.kvision.KVManager
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.panel.SimplePanel
 
@@ -142,4 +143,18 @@ open class ListTag(
         }
         return cl
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.listTag(
+            type: LISTTYPE, elements: List<String>? = null, rich: Boolean = false,
+            classes: Set<String> = setOf(), init: (ListTag.() -> Unit)? = null
+        ) {
+            this.add(ListTag(type, elements, rich, classes, init))
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
index 91fa2587..ebcc0020 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.html
 
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.KVManager
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.panel.SimplePanel
 
@@ -151,4 +152,18 @@ open class Tag(
         }
         return cl
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.tag(
+            type: TAG, text: String? = null, rich: Boolean = false, align: ALIGN? = null,
+            classes: Set<String> = setOf(), init: (Tag.() -> Unit)? = null
+        ) {
+            this.add(Tag(type, text, rich, align, classes, init))
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt
index 82d1c117..15e66766 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.panel
 
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.Container
 
 /**
  * Dock layout directions.
@@ -185,4 +186,15 @@ open class DockPanel(classes: Set<String> = setOf(), init: (DockPanel.() -> Unit
         removeAt(SIDE.DOWN)
         return this
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.dockPanel(classes: Set<String> = setOf(), init: (DockPanel.() -> Unit)? = null) {
+            this.add(DockPanel(classes, init))
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
index 5aebe1c6..9cff2a7e 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.panel
 
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.StyledComponent
 import pl.treksoft.kvision.core.WidgetWrapper
@@ -275,4 +276,18 @@ internal class FlexWrapper(
         return snstyle
     }
 
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.flexPanel(
+            direction: FLEXDIR? = null, wrap: FLEXWRAP? = null, justify: FLEXJUSTIFY? = null,
+            alignItems: FLEXALIGNITEMS? = null, alignContent: FLEXALIGNCONTENT? = null,
+            spacing: Int? = null, classes: Set<String> = setOf(), init: (FlexPanel.() -> Unit)? = null
+        ) {
+            this.add(FlexPanel(direction, wrap, justify, alignItems, alignContent, spacing, classes, init))
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt
index ba72535a..48e4a784 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.panel
 
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.WidgetWrapper
 
@@ -302,6 +303,28 @@ open class GridPanel(
         }
         return snstyle
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.gridPanel(
+            autoColumns: String? = null, autoRows: String? = null, autoFlow: GRIDFLOW? = null,
+            templateColumns: String? = null, templateRows: String? = null, templateAreas: List<String>? = null,
+            columnGap: Int? = null, rowGap: Int? = null, justifyItems: GRIDJUSTIFY? = null,
+            alignItems: GRIDALIGN? = null, justifyContent: GRIDJUSTIFYCONTENT? = null,
+            alignContent: GRIDALIGNCONTENT? = null, classes: Set<String> = setOf(), init: (GridPanel.() -> Unit)? = null
+        ) {
+            this.add(
+                GridPanel(
+                    autoColumns, autoRows, autoFlow, templateColumns, templateRows, templateAreas,
+                    columnGap, rowGap, justifyItems, alignItems, justifyContent, alignContent, classes, init
+                )
+            )
+        }
+    }
 }
 
 class GridWrapper(
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt
index 755c675b..20cc72f8 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt
@@ -21,6 +21,8 @@
  */
 package pl.treksoft.kvision.panel
 
+import pl.treksoft.kvision.core.Container
+
 /**
  * The container with horizontal layout.
  *
@@ -45,4 +47,22 @@ open class HPanel(
         @Suppress("LeakingThis")
         init?.invoke(this)
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.hPanel(
+            wrap: FLEXWRAP? = null,
+            justify: FLEXJUSTIFY? = null,
+            alignItems: FLEXALIGNITEMS? = null,
+            spacing: Int? = null,
+            classes: Set<String> = setOf(),
+            init: (HPanel.() -> Unit)? = null
+        ) {
+            this.add(HPanel(wrap, justify, alignItems, spacing, classes, init))
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/ResponsiveGridPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/ResponsiveGridPanel.kt
index 8831e905..9ac66d20 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/ResponsiveGridPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/ResponsiveGridPanel.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.panel
 
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.WidgetWrapper
 import pl.treksoft.kvision.html.ALIGN
 import pl.treksoft.kvision.html.TAG
@@ -176,4 +177,19 @@ open class ResponsiveGridPanel(
         children.forEach { it.dispose() }
         removeAll()
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.responsiveGridPanel(
+            gridsize: GRIDSIZE = GRIDSIZE.MD,
+            rows: Int = 0, cols: Int = 0, align: ALIGN? = null,
+            classes: Set<String> = setOf(), init: (ResponsiveGridPanel.() -> Unit)? = null
+        ) {
+            this.add(ResponsiveGridPanel(gridsize, rows, cols, align, classes, init))
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/SimplePanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/SimplePanel.kt
index aad57023..f642b353 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/SimplePanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/SimplePanel.kt
@@ -100,4 +100,15 @@ open class SimplePanel(classes: Set<String> = setOf(), init: (SimplePanel.() ->
         children.forEach { it.dispose() }
         removeAll()
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.simplePanel(classes: Set<String> = setOf(), init: (SimplePanel.() -> Unit)? = null) {
+            this.add(SimplePanel(classes, init))
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt
index 677d0704..c9ee7197 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt
@@ -24,6 +24,7 @@ package pl.treksoft.kvision.panel
 import com.github.snabbdom.VNode
 import pl.treksoft.jquery.JQuery
 import pl.treksoft.jquery.JQueryEventObject
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StyledComponent
 import pl.treksoft.kvision.core.UNIT
 import pl.treksoft.kvision.html.TAG
@@ -97,6 +98,20 @@ open class SplitPanel(
             arrayOf()
         }
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.splitPanel(
+            direction: DIRECTION = DIRECTION.VERTICAL,
+            classes: Set<String> = setOf(), init: (SplitPanel.() -> Unit)? = null
+        ) {
+            this.add(SplitPanel(direction, classes, init))
+        }
+    }
 }
 
 internal class Splitter(private val splitPanel: SplitPanel, direction: DIRECTION) : Tag(
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt
index cf765928..c5234f88 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.panel
 
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.routing.routing
 
 /**
@@ -100,4 +101,17 @@ open class StackPanel(
         if (activeIndex > children.size - 1) activeIndex = children.size - 1
         return this
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.stackPanel(
+            activateLast: Boolean = true, classes: Set<String> = setOf(), init: (StackPanel.() -> Unit)? = null
+        ) {
+            this.add(StackPanel(activateLast, classes, init))
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt
index 067a8146..3e882710 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.panel
 
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.ResString
 import pl.treksoft.kvision.html.Link
 import pl.treksoft.kvision.html.TAG
@@ -135,4 +136,15 @@ open class TabPanel(classes: Set<String> = setOf(), init: (TabPanel.() -> Unit)?
         refresh()
         return this
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.tabPanel(classes: Set<String> = setOf(), init: (TabPanel.() -> Unit)? = null) {
+            this.add(TabPanel(classes, init))
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt
index 823ab66f..a0eccb50 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt
@@ -21,6 +21,8 @@
  */
 package pl.treksoft.kvision.panel
 
+import pl.treksoft.kvision.core.Container
+
 /**
  * The container with vertical layout.
  *
@@ -44,5 +46,19 @@ open class VPanel(
         @Suppress("LeakingThis")
         init?.invoke(this)
     }
+
+    companion object {
+        /**
+         * DSL builder extension function
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.vPanel(
+            justify: FLEXJUSTIFY? = null, alignItems: FLEXALIGNITEMS? = null, spacing: Int? = null,
+            classes: Set<String> = setOf(), init: (VPanel.() -> Unit)? = null
+        ) {
+            this.add(VPanel(justify, alignItems, spacing, classes, init))
+        }
+    }
 }