From 5b8b65782661d31313a1b1f3f11f5d31e2f2b0a7 Mon Sep 17 00:00:00 2001
From: Henri Courdent <122811744+hcourdent@users.noreply.github.com>
Date: Mon, 18 Sep 2023 18:21:09 +0200
Subject: [PATCH] Pages for components (#308)

* Pages for components

* Fixing build

* Ilusstrations page components list
---
 .../index.md                                  |    2 +-
 docs/apps/0_app_editor/index.mdx              |   10 +-
 docs/apps/1_canvas.mdx                        |    8 +-
 docs/apps/2_outputs.md                        |    2 +-
 docs/apps/3_app-runnable-panel.mdx            |   28 +-
 .../1_app_component_library.mdx               | 1441 -----------------
 .../1_app_component_library.mdx               |  331 ++++
 .../2_app_runnable_triggers.md                |    0
 .../3_app_component_configuration.mdx         |    0
 .../4_app_styling.mdx                         |    0
 .../5_components_groups.md                    |    2 +-
 .../aggrid_table.mdx                          |   62 +
 .../bar_line_chart.mdx                        |   45 +
 .../4_app_configuration_settings/button.mdx   |   79 +
 .../4_app_configuration_settings/chartjs.mdx  |   51 +
 .../conditional_tabs.mdx                      |   46 +
 .../container.mdx                             |   64 +
 .../currency_input.mdx                        |   40 +
 .../date_input.mdx                            |   39 +
 .../divider_x.mdx                             |   32 +
 .../divider_y.mdx                             |   32 +
 .../download_button.mdx                       |   59 +
 .../4_app_configuration_settings/drawer.mdx   |   46 +
 .../email_input.mdx                           |   38 +
 .../file_input.mdx                            |   43 +
 .../flow_status.mdx                           |   38 +
 .../form_input.mdx                            |   45 +
 .../horizontal_split_panes.mdx                |   40 +
 .../4_app_configuration_settings/html.mdx     |   38 +
 .../4_app_configuration_settings/icon.mdx     |   34 +
 .../4_app_configuration_settings/image.mdx    |   39 +
 .../index.mdx                                 |    0
 .../invisible_tabs.mdx                        |   26 +
 .../4_app_configuration_settings/list.mdx     |   88 +
 .../log_display.mdx                           |   38 +
 .../apps/4_app_configuration_settings/map.mdx |   42 +
 .../4_app_configuration_settings/modal.mdx    |   43 +
 .../modal_form.mdx                            |   57 +
 .../multiselect.mdx                           |   38 +
 .../number_input.mdx                          |   38 +
 .../password_input.mdx                        |   37 +
 .../apps/4_app_configuration_settings/pdf.mdx |   38 +
 .../pie_chart.mdx                             |   45 +
 .../4_app_configuration_settings/plotly.mdx   |   37 +
 .../4_app_configuration_settings/range.mdx    |   39 +
 .../resource_select.mdx                       |   40 +
 .../rich_result.mdx                           |   38 +
 .../rich_text_editor.mdx                      |   38 +
 .../scatter_chart.mdx                         |   45 +
 .../4_app_configuration_settings/select.mdx   |   40 +
 .../select_step.mdx                           |   38 +
 .../select_tab.mdx                            |   38 +
 .../sidebar_tabs.mdx                          |   26 +
 .../4_app_configuration_settings/slider.mdx   |   38 +
 .../4_app_configuration_settings/stepper.mdx  |   47 +
 .../submit_form.mdx                           |   51 +
 .../table.mdx}                                |   31 +-
 .../4_app_configuration_settings/tabs.mdx     |   45 +
 .../4_app_configuration_settings/text.mdx     |   56 +
 .../text_input.mdx                            |   38 +
 .../4_app_configuration_settings/textarea.mdx |   38 +
 .../timeseries.mdx                            |   46 +
 .../4_app_configuration_settings/toggle.mdx   |   38 +
 .../vega_lite.mdx                             |   44 +
 .../vertical_split_panes.mdx                  |   40 +
 docs/apps/7_app_e-commerce.md                 |    6 +-
 docs/compared_to/retool.mdx                   |    2 +-
 .../18_files_binary_data/index.mdx            |    4 +-
 .../19_rich_display_rendering/index.md        |   24 +-
 .../6_auto_generated_uis/index.md             |    2 +-
 docs/core_concepts/index.mdx                  |    6 +-
 .../7_apps_quickstart/index.mdx               |   10 +-
 docs/misc/9_guides/aggrid_table/index.md      |    4 +-
 docs/misc/9_guides/table/index.md             |    4 +-
 sidebars.js                                   |   77 +-
 src/landing/AppSection.tsx                    |    4 +-
 src/landing/EntrepriseFeatures.tsx            |    2 +-
 77 files changed, 2736 insertions(+), 1524 deletions(-)
 delete mode 100644 docs/apps/4_app_configuration-settings/1_app_component_library.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/1_app_component_library.mdx
 rename docs/apps/{4_app_configuration-settings => 4_app_configuration_settings}/2_app_runnable_triggers.md (100%)
 rename docs/apps/{4_app_configuration-settings => 4_app_configuration_settings}/3_app_component_configuration.mdx (100%)
 rename docs/apps/{4_app_configuration-settings => 4_app_configuration_settings}/4_app_styling.mdx (100%)
 rename docs/apps/{4_app_configuration-settings => 4_app_configuration_settings}/5_components_groups.md (87%)
 create mode 100644 docs/apps/4_app_configuration_settings/aggrid_table.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/bar_line_chart.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/button.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/chartjs.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/conditional_tabs.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/container.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/currency_input.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/date_input.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/divider_x.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/divider_y.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/download_button.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/drawer.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/email_input.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/file_input.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/flow_status.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/form_input.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/horizontal_split_panes.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/html.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/icon.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/image.mdx
 rename docs/apps/{4_app_configuration-settings => 4_app_configuration_settings}/index.mdx (100%)
 create mode 100644 docs/apps/4_app_configuration_settings/invisible_tabs.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/list.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/log_display.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/map.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/modal.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/modal_form.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/multiselect.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/number_input.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/password_input.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/pdf.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/pie_chart.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/plotly.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/range.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/resource_select.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/rich_result.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/rich_text_editor.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/scatter_chart.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/select.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/select_step.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/select_tab.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/sidebar_tabs.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/slider.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/stepper.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/submit_form.mdx
 rename docs/apps/{4_app_configuration-settings/99_component_template.mdx => 4_app_configuration_settings/table.mdx} (77%)
 create mode 100644 docs/apps/4_app_configuration_settings/tabs.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/text.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/text_input.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/textarea.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/timeseries.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/toggle.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/vega_lite.mdx
 create mode 100644 docs/apps/4_app_configuration_settings/vertical_split_panes.mdx

diff --git a/blog/2023-09-05-teracapital-case-study/index.md b/blog/2023-09-05-teracapital-case-study/index.md
index ea932faa9..bf6a31773 100644
--- a/blog/2023-09-05-teracapital-case-study/index.md
+++ b/blog/2023-09-05-teracapital-case-study/index.md
@@ -45,7 +45,7 @@ Within two weeks, everything was set to go with Windmill. Although self-hosting
 
 ## How do we work with Windmill?
 
-Today, 6 team members are directly using Windmill. Most of our Windmill's users are non-technical, but they can easily fork an app with our entire [identity in CSS](/docs/apps/app_configuration-settings/app_styling) and [use AI to write code](/docs/core_concepts/ai_generation).
+Today, 6 team members are directly using Windmill. Most of our Windmill's users are non-technical, but they can easily fork an app with our entire [identity in CSS](/docs/apps/app_configuration_settings/app_styling) and [use AI to write code](/docs/core_concepts/ai_generation).
 
 While we initially came to Windmill for its [App Editor](/docs/apps/app_editor), we ended up using [scripts](/docs/script_editor) and [flows](/docs/flows/flow_editor) to make our apps deeper and more complex.
 
diff --git a/docs/apps/0_app_editor/index.mdx b/docs/apps/0_app_editor/index.mdx
index c26f9e566..7b89f6125 100644
--- a/docs/apps/0_app_editor/index.mdx
+++ b/docs/apps/0_app_editor/index.mdx
@@ -76,7 +76,7 @@ The canvas at the center of the editor is where you design and see the overall U
 		color="orange"
 		title="Component Library"
 		description="Discover all the components available."
-		href="/docs/apps/app_configuration-settings/app_component_library"
+		href="/docs/apps/app_configuration_settings/app_component_library"
 	/>
 </div>
 
@@ -147,13 +147,13 @@ Finally, on the right panel of the editor, you can insert a new component, confi
 		color="orange"
 		title="Component Library"
 		description="Discover all the components available in the library, and their configurations."
-		href="/docs/apps/app_configuration-settings/app_component_library"
+		href="/docs/apps/app_configuration_settings/app_component_library"
 	/>
 	<DocCard
 		color="orange"
 		title="Runnable Triggers"
 		description="Learn how to trigger a runnable."
-		href="/docs/apps/app_configuration-settings/app_runnable_triggers"
+		href="/docs/apps/app_configuration_settings/app_runnable_triggers"
 	/>
 </div>
 
@@ -168,7 +168,7 @@ Styling on the app editor can be managed at the component and app-level, with pr
 		color="orange"
 		title="Styling"
 		description="Learn how to edit the component styles."
-		href="/docs/apps/app_configuration-settings/app_styling"
+		href="/docs/apps/app_configuration_settings/app_styling"
 	/>
 </div>
 
@@ -178,7 +178,7 @@ Styling on the app editor can be managed at the component and app-level, with pr
 	<DocCard
 		title="Group of Components"
 		description="Components can be grouped within containers."
-		href="/docs/apps/app_configuration-settings/components_groups"
+		href="/docs/apps/app_configuration_settings/components_groups"
 		color="orange"
 	/>
 	<DocCard
diff --git a/docs/apps/1_canvas.mdx b/docs/apps/1_canvas.mdx
index 2685ab196..b4953cd57 100644
--- a/docs/apps/1_canvas.mdx
+++ b/docs/apps/1_canvas.mdx
@@ -22,7 +22,7 @@ The header has the following elements:
 
 ### Component selection
 
-[Components](./4_app_configuration-settings/1_app_component_library.mdx) can be selected by clicking on them. The selected component will be highlighted with a indigo border.
+[Components](./4_app_configuration_settings/1_app_component_library.mdx) can be selected by clicking on them. The selected component will be highlighted with a indigo border.
 When hovering a component, a blue border will be displayed around the component.
 
 You can also select multiple components by clicking on the `Shift` key and clicking on the components you want to select.
@@ -176,18 +176,18 @@ Maintain consistency in style across multiple applications by creating styled co
 		color="orange"
 		title="Component Library"
 		description="Discover all the components available in the library, and their configurations."
-		href="/docs/apps/app_configuration-settings/app_component_library"
+		href="/docs/apps/app_configuration_settings/app_component_library"
 	/>
 	<DocCard
 		color="orange"
 		title="Styling"
 		description="Learn how to edit the component styles."
-		href="/docs/apps/app_configuration-settings/app_styling"
+		href="/docs/apps/app_configuration_settings/app_styling"
 	/>
 	<DocCard
 		color="orange"
 		title="Component Configuration"
 		description="Learn how to configure a component."
-		href="/docs/apps/app_configuration-settings/app_component_configuration"
+		href="/docs/apps/app_configuration_settings/app_component_configuration"
 	/>
 </div>
diff --git a/docs/apps/2_outputs.md b/docs/apps/2_outputs.md
index ebf103ad2..000890b4e 100644
--- a/docs/apps/2_outputs.md
+++ b/docs/apps/2_outputs.md
@@ -36,7 +36,7 @@ Each component has its own outputs. The outputs are displayed in a tree structur
 
 ![App outputs](../assets/apps/2_app_outputs/app-output-collapsed.png.webp)
 
-For example, the [Table component](./4_app_configuration-settings/1_app_component_library.mdx#table-1) has the following outputs:
+For example, the [Table component](./4_app_configuration_settings/table.mdx) has the following outputs:
 
 - selectedRow: the selected row as an object
 - loading: the loading state of the table
diff --git a/docs/apps/3_app-runnable-panel.mdx b/docs/apps/3_app-runnable-panel.mdx
index 9dc859366..ace82862e 100644
--- a/docs/apps/3_app-runnable-panel.mdx
+++ b/docs/apps/3_app-runnable-panel.mdx
@@ -268,20 +268,20 @@ Note that it's a bad idea to mix dynamic default value and setValue together.
 
 `setValue` supports the following components:
 
-- [Display](./4_app_configuration-settings/1_app_component_library.mdx#display)
-- [Date Input](./4_app_configuration-settings/1_app_component_library.mdx#date-input)
-- [Number Input](./4_app_configuration-settings/1_app_component_library.mdx#number-input)
-- [Currency Input](./4_app_configuration-settings/1_app_component_library.mdx#currency-input)
-- [Schema Form](./4_app_configuration-settings/1_app_component_library.mdx#schema-form)
-- [Checkbox](./4_app_configuration-settings/1_app_component_library.mdx#checkbox)
-- [Standalone Tab](./4_app_configuration-settings/1_app_component_library.mdx#select-tab)
-- [Standalone step](./4_app_configuration-settings/1_app_component_library.mdx#select-step)
-- [Range](./4_app_configuration-settings/1_app_component_library.mdx#range)
-- [Multi Select](./4_app_configuration-settings/1_app_component_library.mdx#multi-select)
-- [Text Input](./4_app_configuration-settings/1_app_component_library.mdx#text-input)
-- [Slider](./4_app_configuration-settings/1_app_component_library.mdx#slider)
-- [Select](./4_app_configuration-settings/1_app_component_library.mdx#select)
-- [Text](./4_app_configuration-settings/1_app_component_library.mdx#text)
+- [Display](./4_app_configuration_settings/log_display.mdx)
+- [Date Input](./4_app_configuration_settings/date_input.mdx)
+- [Number Input](./4_app_configuration_settings/number_input.mdx)
+- [Currency Input](./4_app_configuration_settings/currency_input.mdx)
+- [Form Input](./4_app_configuration_settings/form_input.mdx)
+- [Toggle](./4_app_configuration_settings/toggle.mdx)
+- [Standalone Tab](./4_app_configuration_settings/select_tab.mdx)
+- [Standalone step](./4_app_configuration_settings/select_step.mdx)
+- [Range](./4_app_configuration_settings/range.mdx)
+- [Multi Select](./4_app_configuration_settings/multiselect.mdx)
+- [Text Input](./4_app_configuration_settings/text_input.mdx)
+- [Slider](./4_app_configuration_settings/slider.mdx)
+- [Select](./4_app_configuration_settings/select.mdx)
+- [Text](./4_app_configuration_settings/text.mdx)
 
 #### Parameters
 
diff --git a/docs/apps/4_app_configuration-settings/1_app_component_library.mdx b/docs/apps/4_app_configuration-settings/1_app_component_library.mdx
deleted file mode 100644
index 355250d3a..000000000
--- a/docs/apps/4_app_configuration-settings/1_app_component_library.mdx
+++ /dev/null
@@ -1,1441 +0,0 @@
-import DocCard from '@site/src/components/DocCard';
-
-# Component Library
-
-The app components library is located on the right-hand side of the app editor. It displays the app components and allows you to configure them.
-
-## Components properties
-
-Components can be configured in two ways:
-
-- **Inputs**: inputs can be [connected to an output](../2_outputs.md#connecting-inputs) or computed using a runnable.
-
-  - e.g. `Table` component has an input that can be connected to an output or computed using a runnable, which is an array of objects.
-    <br/>
-
-- **Configuration**: property such as the button label, the text input placeholder, etc.
-  - e.g. `Table` component has a configuration property that allows you to configure the search bar: Client-side search, Server-side search, or no search.
-
-## Component outputs
-
-- **Runnable**: some component can trigger a runnable when an event occurs, usually when a user interacts with the component. The result of the runnable is stored in the component output in the key `result`. It also stores the `loading` state of the component.
-
-  - e.g. `Button` component can trigger a runnable when clicked.
-    <br/>
-
-- **Own outputs**: some component have outputs defined by the component.
-  - e.g. `Table` component has a selectedRow output
-
-## Inserting components
-
-Click on a component in the component library to insert it in the app canvas. It will be automatically positioned to the first available spot starting from the top left corner
-
-## Components list
-
-Windmill provides a set of components that can be used to build apps.
-
-The list of components is constantly growing according to our users' expectations. If you feel like a new component would be useful, please [reach out to us](/docs/misc/getting_help/).
-
-Even though the list of components is never as up to date as on [Windmill Cloud](https://app.windmill.dev/user/login), here is the list of the available components:
-
-### Layout
-
-The layout components are used to organize the components in the app canvas.
-
-- [Container](#container)
-- [List](#list)
-- [Divider X](#divider-x)
-- [Dvider Y](#divider-y)
-- [Drawer](#drawer)
-- [Vertical Split Panes](#vertical-split-panes)
-- [Horizontal Split Panes](#horizontal-split-panes)
-- [Modal](#modal-layout)
-- [Stepper](#stepper)
-
-### Tabs
-
-- [Tabs](#tabs-2)
-- [Conditional Tabs](#conditional-tabs)
-- [Sidebar Tabs](#sidebar-tabs)
-- [Invisible Tabs](#invisible-tabs)
-
-### Buttons
-
-- [Button](#button)
-- [Submit](#submit-form)
-- [Modal Form](#modal-form)
-- [Download Button](#download-button)
-
-### Inputs
-
-- [Form](#form-input)
-- [Text Input](#text-input)
-- [Textarea](#textarea)
-- [Rich Text Editor](#rich-text-editor)
-- [Password](#password-input)
-- [Email Input](#email-input)
-- [Number](#number-input)
-- [Currency](#currency-input)
-- [Slider](#slider)
-- [Range](#range)
-- [Date](#date-input)
-- [File Input](#file-input)
-- [Toggle](#toggle)
-- [Select](#select)
-- [Resource Select](#resource-select)
-- [MultiSelect](#multiselect)
-- [Select Tab](#select-tab)
-- [Select Step](#select-step)
-
-### Tables
-
-- [Table](#table)
-- [AgGrid Table](#aggrid-table)
-
-### Display
-
-- [Text](#text)
-- [Icon](#icon)
-- [Image](#image)
-- [Map](#map)
-- [HTML](#html)
-- [PDF](#pdf)
-- [Rich Result](#rich-result)
-- [Log](#log-display)
-- [Flow Status](#flow-status)
-
-### Charts
-
-- [Bar/Line Chart](#barline-chart)
-- [Pie Chart](#pie-chart)
-- [Vega Lite](#vega-lite)
-- [Plotly](#plotly)
-- [Scatter Chart](#scatter-chart)
-- [Timeseries](#timeseries)
-- [ChartJs](#chartjs)
-
-Below you will find details about each component.
-
-## Layout
-
-### Container
-
-Containers allow you to host other components in a box. Moving a container means moving all the components inside.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/container.mp4"
-    alt="container component"
-/>
-<br/>
-
-To add a component to a container, you can either click on `Insert` while you selected the container,or your can move an existing component by copy/pasting it.
-
-#### Container configuration
-
-A container can be turned into a group of components by enabling "Container is a component group".
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    id="main-video"
-    src="/videos/group_of_components.mp4"
-/>
-
-<br/>
-
-More details on Group of Components:
-
-<div class="grid grid-cols-2 gap-2 my-4">
-	<DocCard
-		title="Group of Components"
-		description="Components can be grouped within containers."
-		href="/docs/apps/app_configuration-settings/components_groups"
-		color="orange"
-	/>
-</div>
-
-
-#### Outputs
-
-The container component has no output.
-
-### List
-
-The List component enables duplication of cards or rows with consistent structure, allowing for containment of other components. By default, editing or moving a component will apply changes to all cards or rows, while still allowing customization and exceptions for unique values per component.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/list_component.mp4"
-    alt="list component"
-/>
-<br/>
-
-To add a component to a list, you can either click on `Insert` while you selected the container, or your can move an existing component by copy/pasting it.
-
-Editing or moving a component will apply changes to all cards or rows.
-
-![Editing a list card](../../assets/apps/4_app_component_library/editing_list.gif 'Editing a list card')
-
-To customize the settings of components within each time, you can use `iter.index` and `iter.value`.
-
-- `iter.index` will retrieve the index number of each card (0, 1, 2 etc.).
-
-![iter.index](../../assets/apps/4_app_component_library/iter.index.png.webp)
-
-- `iter.value.key` will retrieve the value of each key defined in the `items` section.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/iter.value.mp4"
-    alt="iter.value"
-/>
-<br/>
-
-List components also support having [inputs](#inputs) set inside them. Retrieve the values of each in the `inputs` field of the List component in the [outputs](../2_outputs.md) menu.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/list_inputs.mp4"
-    alt="List inputs"
-/>
-<br/>
-
-#### List configuration
-
-| Name         |  Type  | Connectable | Templatable |        Default        | Description                                                                                                                                                                                                                                                                                                       |
-| ------------ | :----: | :---------: | :---------: | :-------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| items        | array  |    true     |    false    |        3 items        | The list items.                                                                                                                                                                                                                                                                                                   |
-| item keys    | string |    true     |    false    |    `"foo": 1` ...     | The keys of each card.                                                                                                                                                                                                                                                                                            |
-| Width        | string |    false    |    false    |        "Card"         | Whether items should be "Card" of "Full Row".                                                                                                                                                                                                                                                                     |
-| Min Width Px | number |    true     |    true     |          300          | The minimum width in pixels. Only applies when "Width" is set to Card                                                                                                                                                                                                                                             |
-| Height Px    | number |    true     |    true     |          280          | The height in pixels.                                                                                                                                                                                                                                                                                             |
-| Pagination   | string |    false    |    false    | "Managed by runnable" | Pagination can be managed using two methods: By the component: Based on a specified page size, the component divides the array into several pages. By the runnable: The component shows all items, leaving the task of pagination to the runnable. The current page number is available in the component outputs. |
-| Page count   | number |    false    |    false    |           1           | The number of pages. Only applies when pagination is managed by the runnable.                                                                                                                                                                                                                                     |
-| Page size    | number |    false    |    false    |           3           | The number of items per page. Only applies when pagination is managed by component.                                                                                                                                                                                                                               |
-
-#### Outputs
-
-| Name    |  Type   | Description                             |
-| ------- | :-----: | --------------------------------------- |
-| result  |   any   | The result of the list component.       |
-| loading | boolean | The loading state of the component.     |
-| inputs  |   any   | The [inputs](#inputs) of the component. |
-| page    | number  | The current page number.                |
-
-### Divider X
-
-Divider X is a horizontal line.
-
-![Divider X](../../assets/apps/4_app_component_library/divider_x.png.webp)
-
-#### Divider X configuration
-
-| Name  |  Type  | Connectable | Templatable |  Default  | Description                                          |
-| ----- | :----: | :---------: | :---------: | :-------: | ---------------------------------------------------- |
-| Size  | number |    false    |    false    |     2     | The thickness of the line.                           |
-| Color | string |    false    |    false    | #00000060 | The color of the line in hexadecimal color notation. |
-
-### Divider Y
-
-Divider Y is a vertical line.
-
-![Divider Y](../../assets/apps/4_app_component_library/divider_y.png.webp)
-
-#### Divider Y configuration
-
-| Name  |  Type  | Connectable | Templatable |  Default  | Description                                          |
-| ----- | :----: | :---------: | :---------: | :-------: | ---------------------------------------------------- |
-| Size  | number |    false    |    false    |     2     | The thickness of the line.                           |
-| Color | string |    false    |    false    | #00000060 | The color of the line in hexadecimal color notation. |
-
-### Drawer
-
-The drawer is container called by a button. Once you click on the button, a side tab will appear on which you can display other components.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/drawer.mp4"
-    alt="drawer component"
-/>
-<br/>
-
-To add a component to a container, you can either click on `Insert` while you selected the opened drawer, or your can move an existing component by copy/pasting it.
-
-#### Drawer configuration
-
-| Name           |                   Type                    | Connectable | Templatable |   Default    | Description                                                               |
-| -------------- | :---------------------------------------: | :---------: | :---------: | :----------: | ------------------------------------------------------------------------- |
-| No Padding     |                  boolean                  |    false    |    false    |    false     | Whether you want to add extra space between the component and the border. |
-| Drawer Title   |                  string                   |    false    |    false    | Drawer title | The title of the container called by Drawer.                              |
-| Label          |                  string                   |    true     |    false    |   Press me   | The button label.                                                         |
-| Color          | blue, red, dark, light, green, gray, none |    false    |    false    |     blue     | The button color.                                                         |
-| Size           |            xs, sm, md , lg, xl            |    false    |    false    |      xs      | The button size.                                                          |
-| Fill container |                  boolean                  |    false    |    false    |    false     | Whether the button should fill the container.                             |
-| Disabled       |                  boolean                  |    false    |    false    |    false     | Whether the button should be disabled.                                    |
-
-### Vertical Split Panes
-
-Container split in x number of panes vertically.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/vertical_split.mp4"
-    alt="vertical split panes"
-/>
-<br/>
-
-To add a component to a vertical split pane, you can either click on `Insert` while you selected the vertical split pane, or your can move an existing component by copy/pasting it.
-
-#### Vertical Split Panes configuration
-
-| Name       |  Type   | Connectable | Templatable | Default | Description                                                               |
-| ---------- | :-----: | :---------: | :---------: | :-----: | ------------------------------------------------------------------------- |
-| No Padding | boolean |    false    |    false    |  false  | Whether you want to add extra space between the component and the border. |
-
-### Horizontal Split Panes
-
-Container split in x number of panes horizontally.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/horizontal_split.mp4"
-    alt="horizontal split panes"
-/>
-<br/>
-
-To add a component to a horizontal split pane, you can either click on `Insert` while you selected the horizontal split pane, or your can move an existing component by copy/pasting it.
-
-#### Horizontal Split Panes configuration
-
-| Name       |  Type   | Connectable | Templatable | Default | Description                                                               |
-| ---------- | :-----: | :---------: | :---------: | :-----: | ------------------------------------------------------------------------- |
-| No Padding | boolean |    false    |    false    |  false  | Whether you want to add extra space between the component and the border. |
-
-### Modal
-
-The modal is container called by a button. Once you click on the button, a modal will appear on which you can display other components.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    id="modal-layout"
-    src="/videos/modal-layout.mp4"
-    alt="modal component"
-/>
-
-#### Modal configuration
-
-| Name                |                   Type                    | Connectable | Templatable |   Default   | Description                                   |
-| ------------------- | :---------------------------------------: | :---------: | :---------: | :---------: | --------------------------------------------- |
-| modalTitle          |                  string                   |    false    |    false    | Modal title | The title of the modal.                       |
-| buttonLabel         |                  string                   |    true     |    false    |  Press me   | The button label.                             |
-| buttonColor         | blue, red, dark, light, green, gray, none |    false    |    false    |    blue     | The button color.                             |
-| buttonSize          |            xs, sm, md , lg, xl            |    false    |    false    |     xs      | The button size.                              |
-| buttonFillContainer |                  boolean                  |    false    |    false    |    false    | Whether the button should fill the container. |
-| buttonDisabled      |                  boolean                  |    false    |    false    |    false    | Whether the button should be disabled.        |
-
-### Stepper
-
-The stepper component helps you lay out multi-step apps, with an optional validation function to validate a step.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    id="modal-layout"
-    src="/videos/stepper.mp4"
-    alt="stepper"
-/>
-
-<br/>
-
-If no validation function is defined, the stepper will behave a tabs component where the user can switch between tabs (with `Previous` and `Next` buttons, or directly on the step).
-
-A validation function can be set and won't allow users to go to the next step while the runnable returns an error.
-
-#### Outputs
-
-| Name             |            Type            | Description                            |
-| ---------------- | :------------------------: | -------------------------------------- | --- |
-| currentStepIndex |           number           | Number of the step / tab.              |
-| result           |            any             | The result of the runnable.            |
-| loading          |          boolean           | The loading state of the button.       |
-| lastAction       | string: "previous", "next" | The last action performed by the user. | F   |
-
-## Tabs
-
-### Tabs
-
-Tabs components allow you to host other components in several tabs. Each tab is a container.
-Tabs have three display modes:
-
-- `Tabs`: the tabs are displayed horizontally.
-- `Sidebar`: the tabs are displayed vertically.
-- `Invisible on view`: The tabs are not displayed when the app is viewed. They are only displayed in the app editor. This is useful to make multi-page apps, where each page is a tab.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/tabs.mp4"
-    alt="tabs component"
-/>
-<br/>
-
-To add a component to a tabs component, you can either click on `Insert` while you selected the tabs component, or your can move an existing component by cutting it and pasting it in the tabs component. See [Moving components](#moving-components).
-
-#### Tabs configuration
-
-| Name      |               Type               | Connectable | Templatable | Default | Description                   |
-| --------- | :------------------------------: | :---------: | :---------: | :-----: | ----------------------------- |
-| Tabs Kind | Tabs, Sidebar, Invisible on view |    false    |    false    |  Tabs   | The display mode of the tabs. |
-
-### Conditional Tabs
-
-Conditional tabs are tabs that are displayed only if a condition is met. The conditions are an array of conditions. Conditions are evaluated in order. The first condition that evaluates to true will render its subgrid. If no condition evaluates to true, the last subgrid will be rendered.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    id="conditional-tabs-video"
-    src="/videos/conditional-tabs.mp4"
-    alt="Conditional tabs component"
-/>
-<br/>
-
-#### Conditional Tabs configuration
-
-| Name       |   Type    | Connectable | Templatable | Default | Description                            |
-| ---------- | :-------: | :---------: | :---------: | :-----: | -------------------------------------- |
-| Conditions | boolean[] |    false    |    false    |  false  | The conditions that will be evaluated. |
-
-#### Outputs
-
-| Name                   |   Type    | Description                         |
-| ---------------------- | :-------: | ----------------------------------- |
-| conditions             | boolean[] | The conditions evalutation          |
-| selectedConditionIndex |  number   | The index of the selected condition |
-
-### Sidebar Tabs
-
-The Sidebar Tabs component is basically a [Tabs component](#tabs-2) whose `Tabs Kind` is "Sidebar".
-
-![Sidebar Tabs](../../assets/apps/4_app_component_library/sidebar_tabs.gif)
-
-### Invisible Tabs
-
-The Invisible Tabs component is basically a [Tabs component](#tabs-2) whose `Tabs Kind` is "Invisible", meaning the tabs labels are not visible by the user.
-
-![Inisible Tabs](../../assets/apps/4_app_component_library/invisible_tabs.gif)
-
-## Buttons
-
-### Button
-
-The component triggers a runnable when clicked. If the runnable has parameters, they need to be configured in the component configuration.
-The runnable parameters are defined:
-
-- **Static**: the parameter is defined in the component configuration.
-- **Connected**: the parameter is connected to an output.
-
-![Button API](../../assets/apps/4_app_component_library/button.png.webp)
-
-#### Button configuration
-
-| Name                |                Type                 | Connectable | Templatable |  Default  | Description                                                |
-| ------------------- | :---------------------------------: | :---------: | :---------: | :-------: | ---------------------------------------------------------- |
-| label               |               string                |    true     |    false    | Press me  | The button label.                                          |
-| color               | blue, red, dark, light, green, gray |    false    |    false    |   blue    | The button color.                                          |
-| size                |         xs, sm, md , lg, xl         |    false    |    false    |    sm     | The button size.                                           |
-| Fill container      |               boolean               |    false    |    false    |   false   | Whether the button should fill the container.              |
-| disabled            |               boolean               |    false    |    false    |   false   | Whether the button should be disabled.                     |
-| Before Icon         |               string                |    false    |    false    | Undefined | The icon to display before the label.                      |
-| After Icon          |               string                |    false    |    false    | Undefined | The icon to display after the label.                       |
-| Trigger on App load |               boolean               |    false    |    false    |   false   | Whether the button script should be triggered on app load. |
-
-Special parameters:
-
-#### Button On Success
-
-The button component has a special parameter called `On Success`. This parameter is used to trigger one of the following actions:
-
-- **Do nothing**: the button does nothing after the runnable is executed.
-- **Go to an URL**: the button redirects the user to the specified URL after the runnable is executed.
-- **Set the tab of a Tabs component**: the button sets the tab of a Tabs component after the runnable is executed.
-- **Display a toast**: the button displays a toast after the runnable is executed.
-
-##### **Go to an URL configuration:**
-
-| Name    |  Type   | Connectable | Templatable |    Default    | Description                                    |
-| ------- | :-----: | :---------: | :---------: | :-----------: | ---------------------------------------------- |
-| URL     | string  |    true     |    false    | /apps/get/foo | The URL to redirect the user to.               |
-| New Tab | boolean |    false    |    false    |     true      | Whether the URL should be opened in a new tab. |
-
-##### **Set the tab of a Tabs component configuration:**
-
-| Name    |               Type                | Connectable | Templatable | Default | Description                                                                             |
-| ------- | :-------------------------------: | :---------: | :---------: | :-----: | --------------------------------------------------------------------------------------- |
-| Set Tab | Array<{id: string, index:number}> |    false    |    false    |   []    | The tabs to set. The id is the id of the Tabs component and the index is the tab index. |
-
-##### **Display a toast configuration:**
-
-| Name    |  Type  | Connectable | Templatable |   Default   | Description                          |
-| ------- | :----: | :---------: | :---------: | :---------: | ------------------------------------ |
-| Message | string |    true     |    false    | Hello there | The message to display in the toast. |
-
-#### Outputs
-
-| Name    |  Type   | Description                      |
-| ------- | :-----: | -------------------------------- |
-| result  |   any   | The result of the runnable.      |
-| loading | boolean | The loading state of the button. |
-
-### Submit Form
-
-The form component allows you to create a form. It has a submit button that triggers a runnable when clicked.
-The runnable parameters are defined:
-
-- **Static**: the parameter is defined in the component configuration.
-- **User input**: the parameter is defined by the user input.
-- **Connected**: the parameter is connected to an output.
-
-Only user inputs are displayed in the form.
-
-![Form API](../../assets/apps/4_app_component_library/form.png.webp)
-
-#### Form configuration
-
-| Name  |                Type                 | Connectable | Templatable | Default | Description       |
-| ----- | :---------------------------------: | :---------: | :---------: | :-----: | ----------------- |
-| label |               string                |    true     |    false    | Submit  | The button label. |
-| color | blue, red, dark, light, green, gray |    false    |    false    |  dark   | The button color. |
-| size  |         xs, sm, md , lg, xl         |    false    |    false    |   sm    | The button size.  |
-
-:::info
-The form component has a special parameter called `On Success`. See the button component for more information.
-:::
-
-#### Outputs
-
-| Name    |  Type   | Description                      |
-| ------- | :-----: | -------------------------------- |
-| result  |   any   | The result of the runnable.      |
-| loading | boolean | The loading state of the button. |
-
-### Modal Form
-
-The form modal component allows you to create a form. It has a submit button that triggers a runnable when clicked. The form is displayed in a modal, which can be opened by clicking on a button.
-
-The runnable parameters are defined:
-
-- **Static**: the parameter is defined in the component configuration.
-- **User input**: the parameter is defined by the user input.
-- **Connected**: the parameter is connected to an output.
-
-Only user inputs are displayed in the form in the modal.
-
-![Form Modal Button](../../assets/apps/4_app_component_library/form-modal-button.png.webp)
-![Form Modal API](../../assets/apps/4_app_component_library/form-modal.png.webp)
-
-#### Form Modal configuration
-
-| Name  |                Type                 | Connectable | Templatable |  Default   | Description       |
-| ----- | :---------------------------------: | :---------: | :---------: | :--------: | ----------------- |
-| label |               string                |    true     |    false    | Open popup | The button label. |
-| color | blue, red, dark, light, green, gray |    false    |    false    |    dark    | The button color. |
-| size  |         xs, sm, md , lg, xl         |    false    |    false    |     sm     | The button size.  |
-
-:::info
-The button label is used as the modal title.
-:::
-
-:::info
-The form modal component has a special parameter called `On Success`. See the button component for more information.
-:::
-
-#### Outputs
-
-| Name    |  Type   | Description                      |
-| ------- | :-----: | -------------------------------- |
-| result  |   any   | The result of the runnable.      |
-| loading | boolean | The loading state of the button. |
-
-### Download Button
-
-The download button component allows you to download a file.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/download_button.mp4"
-    alt="Download Button"
-/>
-
-<br/>
-
-The data source of the Download button must be a data URL scheme with a [Base64 encoded string](../../core_concepts/18_files_binary_data/index.mdx):
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/download_base64.mp4"
-    alt="Download Button Base64"
-/>
-
-#### Download Button configuration
-
-| Name           |                Type                 | Connectable | Templatable |  Default  | Description                                                                                                      |
-| -------------- | :---------------------------------: | :---------: | :---------: | :-------: | ---------------------------------------------------------------------------------------------------------------- |
-| source         |           string or File            |    true     |    false    |           | The source of the file to download ([Base64 encoded string](../../core_concepts/18_files_binary_data/index.mdx). |
-| filename       |               string                |    true     |    false    |           | The name of the file to download.                                                                                |
-| label          |               string                |    true     |    false    | Press me  | The button label.                                                                                                |
-| color          | blue, red, dark, light, green, gray |    false    |    false    |   blue    | The button color.                                                                                                |
-| size           |         xs, sm, md , lg, xl         |    false    |    false    |    sm     | The button size.                                                                                                 |
-| Fill container |               boolean               |    false    |    false    |   false   | Whether the button should fill the container.                                                                    |
-| disabled       |               boolean               |    false    |    false    |   false   | Whether the button should be disabled.                                                                           |
-| Before Icon    |               string                |    false    |    false    | Undefined | The icon to display before the label.                                                                            |
-| After Icon     |               string                |    false    |    false    | Undefined | The icon to display after the label.                                                                             |
-
-## Inputs
-
-### Form Input
-
-The form input component allows you to create a form and get answers from the user.
-
-![Form Input API](../../assets/apps/4_app_component_library/form_input.png.webp)
-
-#### Form Input configuration
-
-| Name         |  Type   | Connectable | Templatable | Default | Description                                                                  |
-| ------------ | :-----: | :---------: | :---------: | :-----: | ---------------------------------------------------------------------------- |
-| Display Type | boolean |    false    |    false    |  false  | This will display the type and/or the format on the field next to the label. |
-| Large Gap    | boolean |    false    |    false    |  false  | This will add a large gap between the field elements.                        |
-
-Each argument can be configured (name, description, type, default value, advanced parameters).
-
-![Form Input Arguments](../../assets/apps/4_app_component_library/form_input_argument.png.webp)
-
-#### Outputs
-
-| Name       |         Type          | Description                                     |
-| ---------- | :-------------------: | ----------------------------------------------- |
-| properties |        string         | Type, description and default of each argument. |
-| loading    |        boolean        | The loading state of the text component.        |
-| valid      |        boolean        |                                                 |
-| values     | same as each argument | Value of each answer by the user.               |
-
-### Text Input
-
-The text input component allows you to get a string from the user.
-
-![Text Input API](../../assets/apps/4_app_component_library/text-input.png.webp)
-
-#### Text Input configuration
-
-| Name          |  Type  | Connectable | Templatable | Default | Description                          |
-| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------------ |
-| Placeholder   | string |    false    |    false    | Type... | The text input placeholder.          |
-| Default value | string |    true     |    false    |         | The default value of the text input. |
-
-#### Outputs
-
-| Name   |  Type  | Description           |
-| ------ | :----: | --------------------- |
-| Result | string | The text input value. |
-
-### Textarea
-
-The textarea component allows you to get a string from the user, with an expandable text area.
-
-![Textarea API](../../assets/apps/4_app_component_library/textarea.gif)
-
-#### Textarea configuration
-
-| Name          |  Type  | Connectable | Templatable | Default | Description                          |
-| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------------ |
-| Placeholder   | string |    false    |    false    | Type... | The text input placeholder.          |
-| Default value | string |    true     |    false    |         | The default value of the text input. |
-
-#### Outputs
-
-| Name   |  Type  | Description           |
-| ------ | :----: | --------------------- |
-| Result | string | The text input value. |
-
-### Rich Text Editor
-
-The Rich Text Editor component allows to have to user enter text with a layout, on top of files or videos.
-
-![Rich Text Editor API](../../assets/apps/4_app_component_library/rich_text.gif)
-
-#### Rich Text Editor configuration
-
-| Name          |  Type  | Connectable | Templatable | Default | Description                          |
-| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------------ |
-| Placeholder   | string |    false    |    false    | Type... | The text input placeholder.          |
-| Default value | string |    true     |    false    |         | The default value of the text input. |
-
-#### Outputs
-
-| Name   |  Type  | Description                                                                          |
-| ------ | :----: | ------------------------------------------------------------------------------------ |
-| Result | string | The Rich Text Editor input value, in HTML-like syntax within the Quill delta format. |
-
-### Password Input
-
-The password input component allows you to get a password from the user.
-
-![Password Input API](../../assets/apps/4_app_component_library/password-input.png.webp)
-
-#### Password Input configuration
-
-| Name        |  Type  | Connectable | Templatable | Default  | Description                     |
-| ----------- | :----: | :---------: | :---------: | :------: | ------------------------------- |
-| Placeholder | string |    false    |    false    | Password | The password input placeholder. |
-
-#### Outputs
-
-| Name   |  Type  | Description               |
-| ------ | :----: | ------------------------- |
-| Result | string | The password input value. |
-
-### Email Input
-
-The email input component allows you to get an email from the user.
-
-![Email Input API](../../assets/apps/4_app_component_library/email.png.webp)
-
-#### Email Input configuration
-
-| Name          |  Type  | Connectable | Templatable | Default | Description                    |
-| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------ |
-| Placeholder   | string |    false    |    false    |  Email  | The email input placeholder.   |
-| Default value | string |    true     |    false    |  Email  | The email input default value. |
-
-#### Outputs
-
-| Name   |  Type  | Description            |
-| ------ | :----: | ---------------------- |
-| Result | string | The email input value. |
-
-### Number Input
-
-The number input component allows you to get a number from the user.
-
-![Number Input API](../../assets/apps/4_app_component_library/number-input.png.webp)
-
-#### Number Input configuration
-
-| Name          |  Type  | Connectable | Templatable | Default | Description                            |
-| ------------- | :----: | :---------: | :---------: | :-----: | -------------------------------------- |
-| placeholder   | string |    false    |    false    | Type... | The number input placeholder.          |
-| default value | number |    true     |    false    |         | The default value of the number input. |
-
-#### Outputs
-
-| Name   |  Type  | Description            |
-| ------ | :----: | ---------------------- |
-| result | number | The number input value |
-
-### Currency Input
-
-The currency input component allows you to get a written amount of money in a set currency from the user.
-
-![Currency Input API](../../assets/apps/4_app_component_library/currency.png.webp)
-
-#### Currency Input configuration
-
-| Name                |                                     Type                                     | Connectable | Templatable | Default | Description                              |
-| ------------------- | :--------------------------------------------------------------------------: | :---------: | :---------: | :-----: | ---------------------------------------- |
-| default value       |                                    number                                    |    true     |    false    |    /    | The default value of the currency input. |
-| is negative allowed |                                   boolean                                    |    false    |    false    |  false  | If negative amounts will be accepted.    |
-| currency            |             string: USD, EUR, GBP, CAD, AUD, JPY, CNY, INR, BRL              |    false    |    false    |   USD   | The default value of the currency input. |
-| locale              | string: en-US, en-GB, en-IE, de-DE, fr-FR, br-FR, ja-JP, pt-TL, fr-CA, en-CA |    false    |    false    |  en-US  | The format of the amount.                |
-
-#### Outputs
-
-| Name   |  Type  | Description              |
-| ------ | :----: | ------------------------ |
-| result | number | The currency input value |
-
-### Slider
-
-The slider component allows you to get a number from the user.
-
-![Slider API](../../assets/apps/4_app_component_library/slider.png.webp)
-
-#### Slider configuration
-
-| Name |  Type  | Connectable | Templatable | Default | Description                      |
-| ---- | :----: | :---------: | :---------: | :-----: | -------------------------------- |
-| min  | number |    false    |    false    |    0    | The minimum value of the slider. |
-| max  | number |    false    |    false    |   42    | The maximum value of the slider. |
-
-#### Outputs
-
-| Name   |  Type  | Description       |
-| ------ | :----: | ----------------- |
-| result | number | The slider value. |
-
-### Range
-
-The slider component allows you to get a range of numbers from the user.
-
-![Range API](../../assets/apps/4_app_component_library/range.png.webp)
-
-#### Range configuration
-
-| Name |  Type  | Connectable | Templatable | Default | Description                     |
-| ---- | :----: | :---------: | :---------: | :-----: | ------------------------------- |
-| min  | number |    false    |    false    |    0    | The minimum value of the range. |
-| max  | number |    false    |    false    |   42    | The maximum value of the range. |
-
-#### Outputs
-
-| Name     |  Type  | Description             |
-| -------- | :----: | ----------------------- |
-| result 0 | number | The range bottom value. |
-| result 1 | number | The range top value.    |
-
-### Date Input
-
-The date input component allows you to get a date from the user.
-
-![Date Input API](../../assets/apps/4_app_component_library/date-input.png.webp)
-
-#### Date Input configuration
-
-| Name          |  Type  | Connectable | Templatable | Default | Description                          |
-| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------------ |
-| minDate       | string |    true     |    false    |         | The minimum date of the date input.  |
-| maxDate       | string |    true     |    false    |         | The maximum date of the date input.  |
-| default value | string |    true     |    false    |         | The default value of the date input. |
-
-#### Outputs
-
-| Name   |  Type  | Description           |
-| ------ | :----: | --------------------- |
-| result | string | The date input value. |
-
-### File Input
-
-The file input allows users to drop files into the app.
-
-![File Input API](../../assets/apps/4_app_component_library/file_input.png.webp)
-
-Files uploaded are converted and returned as a data URL scheme with a [Base64 encoded string](../../core_concepts/18_files_binary_data/index.mdx).
-
-![File Input Base64](../../assets/apps/4_app_component_library/file_input_base64.png.webp)
-
-#### File Input configuration
-
-| Name                |  Type   | Connectable | Templatable |                   Default                   | Description                                                    |
-| ------------------- | :-----: | :---------: | :---------: | :-----------------------------------------: | -------------------------------------------------------------- |
-| Accepted File Types |  array  |    false    |    false    |       "image/\*" ; "application/pdf"        | The types of files you accept to be submitted.                 |
-| Allow Multiple      | boolean |    false    |    false    |                    false                    | If allowed, the user will be able to select more than one file |
-| Text                | string  |    false    |    false    | Drag and drop files or click to select them | The text displayed on the file input.                          |
-
-#### Outputs
-
-| Name   |  Type  | Description                  |
-| ------ | :----: | ---------------------------- |
-| result | string | The name of the loaded file. |
-
-### Toggle
-
-The toggle component allows you to get a boolean from the user.
-
-![Toggle API](../../assets/apps/4_app_component_library/toggle.png.webp)
-
-#### Toggle configuration
-
-| Name          |  Type   | Connectable | Templatable | Default | Description                      |
-| ------------- | :-----: | :---------: | :---------: | :-----: | -------------------------------- |
-| label         | string  |    true     |    false    |  Label  | The toggle label.                |
-| default value | boolean |    true     |    false    |         | The default value of the toggle. |
-
-#### Outputs
-
-| Name   |  Type   | Description              |
-| ------ | :-----: | ------------------------ |
-| result | boolean | The state of the toggle. |
-
-### Select
-
-The select component allows you to get a string from the user.
-
-![Select API](../../assets/apps/4_app_component_library/select.png.webp)
-
-#### Select configuration
-
-| Name          |  Type   | Connectable | Templatable | Default | Description                     |
-| ------------- | :-----: | :---------: | :---------: | :-----: | ------------------------------- |
-| items         |  Array  |    true     |    false    |         | The select items.               |
-| item key      | string  |    true     |    false    |         | The key of the item to display. |
-| create        | boolean |    false    |    false    |  false  | If users can create values.     |
-| default value | boolean |    true     |    false    |         | The default value of the input. |
-
-#### Outputs
-
-| Name   |  Type  | Description        |
-| ------ | :----: | ------------------ |
-| result | string | The selected item. |
-
-### Resource Select
-
-The Resource Select component allows you to have users pick [resources](../../core_concepts/3_resources_and_types/index.mdx) from your Windmil workspace to interact with [intergrations](../../integrations/0_integrations_on_windmill.mdx).
-
-![Resource Select](../../assets/apps/4_app_component_library/resource_select.png.webp)
-
-#### Resource Select configuration
-
-| Name        |                               Type                                | Connectable | Templatable | Default | Description                                                     |
-| ----------- | :---------------------------------------------------------------: | :---------: | :---------: | :-----: | --------------------------------------------------------------- |
-| Items Name  |                              string                               |    true     |    false    |  "bar"  | The name of each suggested resource.                            |
-| Items       |  [resource](../../core_concepts/3_resources_and_types/index.mdx)  |    true     |    false    |         | The Windmill resource.                                          |
-| Placeholder | [variable](../../core_concepts/2_variables_and_secrets/index.mdx) |    false    |    false    |         | The variable that will be displayed by default.                 |
-| Full Width  |                              boolean                              |    false    |    false    |  true   | Set the width of the options popup to 100% of the select width. |
-
-#### Outputs
-
-| Name   |  Type  | Description                                |
-| ------ | :----: | ------------------------------------------ |
-| result | string | The selected resource (in `$res:` format). |
-
-### Multiselect
-
-The multiselect component allows you to get multiple strings from the user.
-
-![Multiselect API](../../assets/apps/4_app_component_library/multiselect.png.webp)
-
-#### Multiselect configuration
-
-| Name        |  Type  | Connectable | Templatable |    Default    | Description                                 |
-| ----------- | :----: | :---------: | :---------: | :-----------: | ------------------------------------------- |
-| items       | string |    true     |    false    | "Foo" ; "Bar" | The select items.                           |
-| placeholder | string |    true     |    false    | Select items  | The text that will be displayed by default. |
-
-#### Outputs
-
-| Name   |  Type  | Description         |
-| ------ | :----: | ------------------- |
-| result | string | The selected items. |
-
-### Select Tab
-
-The Select Tab is standalone tab component that behaves like a select component. It is meant to have the chosen tab to be chosen as input by components or runnables.
-
-![Select Tab](../../assets/apps/4_app_component_library/tab_select.png.webp)
-
-#### Select Tab configuration
-
-| Name          |  Type  | Connectable | Templatable |    Default    | Description                                       |
-| ------------- | :----: | :---------: | :---------: | :-----------: | ------------------------------------------------- |
-| Items         | string |    true     |    false    | "Foo" ; "Bar" | The select tabs items (label and value, in JSON). |
-| Default Value | string |    true     |    false    |               | The default value of the tabs labels and value.   |
-
-#### Outputs
-
-| Name   |  Type  | Description       |
-| ------ | :----: | ----------------- |
-| result | string | The selected tab. |
-
-### Select Step
-
-The Select Step is standalone tab component that behaves like a select component. It is meant to have the chosen tab to be chosen as input by components or runnables.
-
-![Select Step](../../assets/apps/4_app_component_library/step_select.png.webp)
-
-#### Select Step configuration
-
-| Name          |  Type  | Connectable | Templatable |    Default    | Description                                       |
-| ------------- | :----: | :---------: | :---------: | :-----------: | ------------------------------------------------- |
-| Items         | string |    true     |    false    | "Foo" ; "Bar" | The select step items (label and value, in JSON). |
-| Default Value | string |    true     |    false    |               | The default value of the step labels and value.   |
-
-#### Outputs
-
-| Name   |  Type  | Description        |
-| ------ | :----: | ------------------ |
-| result | string | The selected step. |
-
-## Tables
-
-### Table
-
-The table component allows you to display a table.
-
-![Table API](../../assets/apps/4_app_component_library/table.png.webp)
-
-#### Table Input
-
-|      Type       | Connectable | Templatable | Default | Description     |
-| :-------------: | :---------: | :---------: | :-----: | --------------- |
-| `Array<Object>` |    true     |    false    |         | The table data. |
-
-:::info
-The columns are automatically generated from all the keys of the objects in the array.
-:::
-
-#### Table configuration
-
-| Name   |                   Type                    | Connectable | Templatable |  Default   | Description                           |
-| ------ | :---------------------------------------: | :---------: | :---------: | :--------: | ------------------------------------- |
-| search | 'Disabled', 'By Runnable', 'By component' |    false    |    false    | 'Disabled' | The search query to filter the table. |
-
-Search can be configured in the following ways:
-
-- **Disabled**: The search is disabled.
-- **By Runnable**: The search is done in the backend.
-- **By component**: The search is done in the frontend.
-
-#### Table actions
-
-`Table` can define actions that will be displayed in each row of the table. An action is a `Button` component that cannot be moved.
-
-#### Outputs
-
-| Name             |  Type   | Description                              |
-| ---------------- | :-----: | ---------------------------------------- |
-| result           | Object  | The table data.                          |
-| loading          | boolean | The loading state of the table component |
-| selectedRow      | Object  | The selected row                         |
-| selectedRowIndex | number  | The selected row index                   |
-| search           | string  | The search query                         |
-
-### AgGrid Table
-
-:::tip Guide
-If you are new to Ag Grid, check out our [Introduction guide](../../misc/9_guides/aggrid_table/index.md).
-:::
-
-The AgGrid table component allows you to display an agnostic grid table.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/aggrid_table.mp4"
-    alt="aggrid table"
-/>
-<br/>
-
-#### AgGird Table Input
-
-|      Type       | Connectable | Templatable | Default | Description     |
-| :-------------: | :---------: | :---------: | :-----: | --------------- |
-| `Array<Object>` |    true     |    false    |         | The table data. |
-
-#### AgGrid Table configuration
-
-| Name                       |  Type   | Connectable | Templatable |    Default    | Description                                                                                                     |
-| -------------------------- | :-----: | :---------: | :---------: | :-----------: | --------------------------------------------------------------------------------------------------------------- |
-| Column Defs                | object  |    true     |    false    | Id, Name, Age | The definition of the columns & their name.                                                                     |
-| Flex                       | boolean |    false    |    false    |     true      | Allows you to distribute available space among multiple elements to control their relative sizes and positions. |
-| All Editable               | boolean |    false    |    false    |     false     | Whether you want all columns to be editable.                                                                    |
-| Multiple Selectable        | boolean |    false    |    false    |     false     | Make multiple rows selectable at once.                                                                          |
-| Row Multiselect With Click | boolean |    false    |    false    |     true      | If multiple selectable, allow multiselect with click.                                                           |
-| Pagination                 | boolean |    false    |    false    |     false     | Whether you want pages on your table.                                                                           |
-
-#### Outputs
-
-| Name             |  Type   | Description                                     |
-| ---------------- | :-----: | ----------------------------------------------- |
-| result           | Object  | The AgGrid table data.                          |
-| loading          | boolean | The loading state of the AgGrid table component |
-| selectedRow      | Object  | The selected row                                |
-| selectedRowIndex | number  | The selected row index                          |
-
-## Display
-
-### Text
-
-The text component allows you to display text.
-
-![Text API](../../assets/apps/4_app_component_library/text.png.webp)
-
-#### Text Input
-
-|  Type  | Connectable | Templatable |   Default    | Description          |
-| :----: | :---------: | :---------: | :----------: | -------------------- |
-| string |    true     |    true     | Hello World! | The text to display. |
-
-#### Text configuration
-
-| Name        |                      Type                      | Connectable | Templatable | Default | Description                                                     |
-| ----------- | :--------------------------------------------: | :---------: | :---------: | :-----: | --------------------------------------------------------------- |
-| style       | 'title', 'subtitle', 'body', 'label','caption' |    false    |    false    | 'body'  | The text style.                                                 |
-| Extra Style |                     string                     |    false    |    false    |         | Extra style to apply to the text: CSS rules like "color: blue;" |
-
-#### Outputs
-
-| Name    |  Type   | Description                              |
-| ------- | :-----: | ---------------------------------------- |
-| result  | string  | The text.                                |
-| loading | boolean | The loading state of the text component. |
-
-#### Inline editor
-
-You can directly edit the text by click the `Pen` icon on the app editor. You can also double click on the text to edit it.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/text_editor.mp4"
-/>
-
-### Icon
-
-The Icon API allows you to display an icon chosen in a library of icons.
-
-![Icon](../../assets/apps/4_app_component_library/icon.png.webp)
-
-#### Icon configuration
-
-| Name         |  Type  | Connectable | Templatable |   Default    | Description                   |
-| ------------ | :----: | :---------: | :---------: | :----------: | ----------------------------- |
-| Icon         | string |    true     |    false    |    Smile     | The actual icon.              |
-| Color        | string |    true     |    false    | currentColor | The color of the icon.        |
-| Size         | number |    false    |    false    |      24      | The size of the icon.         |
-| Stroke Width | number |    false    |    false    |      2       | The width of the icon stroke. |
-
-### Image
-
-The Image component allows you to display a picture.
-
-![HTML](../../assets/apps/4_app_component_library/image_api.png.webp)
-
-#### Image configuration
-
-| Name      |             Type             | Connectable | Templatable |  Default  | Description                                                        |
-| --------- | :--------------------------: | :---------: | :---------: | :-------: | ------------------------------------------------------------------ |
-| Source    |            string            |    true     |    false    | /logo.svg | The image.                                                         |
-| Image Fit | string: contain, cover, fill |    false    |    false    |  contain  | How the image will fit the component box.                          |
-| Alt text  |            string            |    false    |    false    |     /     | This text will appear if the image can't be loaded for any reason. |
-
-#### Outputs
-
-| Name    |  Type   | Description                               |
-| ------- | :-----: | ----------------------------------------- |
-| loading | boolean | The loading state of the Image component. |
-
-### Map
-
-The Map component allows you to display an interactive map.
-
-![map](../../assets/apps/4_app_component_library/map.png.webp)
-
-#### Map configuration
-
-| Name      |  Type  | Connectable | Templatable | Default | Description                             |
-| --------- | :----: | :---------: | :---------: | :-----: | --------------------------------------- |
-| Longitude | number |    true     |    false    |   15    | The longitude of the center of the map. |
-| Latitude  | number |    true     |    false    |   50    | The latitude of the center of the map.  |
-| Zoom      | number |    true     |    false    |    3    | The zoom of the map.                    |
-| Markers   | object |    true     |    false    |         | The map data.                           |
-
-#### Outputs
-
-| Name                   |  Type  | Description                                                 |
-| ---------------------- | :----: | ----------------------------------------------------------- |
-| Map region             | string | The region where the displayed map is located.              |
-| topLeft lat & long     | number | Latitude & longitude of the top left corner of the map.     |
-| bottomRight lat & long | number | Latitude & longitude of the bottom right corner of the map. |
-
-### HTML
-
-The HTML component allows you to display HTML content.
-
-![HTML](../../assets/apps/4_app_component_library/html.png.webp)
-
-#### HTML Input
-
-|  Type  | Connectable | Templatable |                                          Default                                          | Description                |
-| :----: | :---------: | :---------: | :---------------------------------------------------------------------------------------: | -------------------------- |
-| string |    true     |    true     | `<img src="****"><h1 class="absolute top-4 left-2 text-white">Hello ${ctx.username}</h1>` | The HTML content to render |
-
-#### Outputs
-
-| Name    |  Type   | Description                              |
-| ------- | :-----: | ---------------------------------------- |
-| result  | string  | The HTML.                                |
-| loading | boolean | The loading state of the HTML component. |
-
-### PDF
-
-The PDF component allows you to display a PDF file.
-
-![PDF API](../../assets/apps/4_app_component_library/pdf_api.png.webp)
-
-#### PDF configuration
-
-| Name   |  Type   | Connectable | Templatable |  Default   | Description               |
-| ------ | :-----: | :---------: | :---------: | :--------: | ------------------------- |
-| Source | boolean |    true     |    true     | /dummy.pdf | The PDF file.             |
-| Zoom   | number  |    true     |    true     |    100     | The zoom on the PDF view. |
-
-#### Outputs
-
-| Name    |  Type   | Description                             |
-| ------- | :-----: | --------------------------------------- |
-| loading | boolean | The loading state of the PDF component. |
-
-### Rich Result
-
-The Rich Result component allows you to display the result of a Runnable. It tries to display the result in a human-readable way.
-
-![Rich Result](../../assets/apps/4_app_component_library/rich_result.png.webp)
-
-#### Rich Result configuration
-
-| Name        | Type | Connectable | Templatable |   Default   | Description                         |
-| ----------- | :--: | :---------: | :---------: | :---------: | ----------------------------------- |
-| Data Source |      |    true     |             | {"foo": 42} | The data source to display results. |
-
-#### Outputs
-
-| Name    |  Type   | Description                         |
-| ------- | :-----: | ----------------------------------- |
-| result  |         | The result of the runnable.         |
-| loading | boolean | The loading state of the component. |
-
-### Log Display
-
-The Log Display component allows you to display the log of a Runnable.
-
-![Log Display](../../assets/apps/4_app_component_library/log_display.png.webp)
-
-#### Log Display configuration
-
-| Name        | Type | Connectable | Templatable | Default | Description                      |
-| ----------- | :--: | :---------: | :---------: | :-----: | -------------------------------- |
-| Data Source |      |    true     |             |         | The data source to display logs. |
-
-#### Outputs
-
-| Name    |  Type   | Description                         |
-| ------- | :-----: | ----------------------------------- |
-| result  |         | The result of the runnable.         |
-| loading | boolean | The loading state of the component. |
-
-### Flow Status
-
-The Flow Status component allows you to display the status of a flow.
-
-![Flow Status](../../assets/apps/4_app_component_library/flow_status.png.webp)
-
-#### Flow Status configuration
-
-| Name        | Type | Connectable | Templatable | Default | Description                 |
-| ----------- | :--: | :---------: | :---------: | :-----: | --------------------------- |
-| Data Source |      |    true     |             |         | The flow to display status. |
-
-#### Outputs
-
-| Name    |  Type   | Description                         |
-| ------- | :-----: | ----------------------------------- |
-| result  |         | The result of the runnable.         |
-| loading | boolean | The loading state of the component. |
-
-## Charts
-
-### Bar/Line Chart
-
-The Bar Chart component allows you to display a Bar Chart using the [Chart.js](https://www.chartjs.org/) library. It can also be used to display a Line Chart.
-
-![Bar/Line Chart API](../../assets/apps/4_app_component_library/bar.png.webp)
-
-#### Bar/Line Chart Input
-
-|  Type  | Connectable | Templatable | Default | Description         |
-| :----: | :---------: | :---------: | :-----: | ------------------- |
-| Object |    true     |    false    |         | The bar chart data. |
-
-#### Bar/Line Chart configuration
-
-| Name  |  Type   | Connectable | Templatable | Default | Description                  |
-| ----- | :-----: | :---------: | :---------: | :-----: | ---------------------------- |
-| Theme | string  |    false    |    false    | Theme1  | The chart theme.             |
-| Line  | boolean |    false    |    false    |  false  | Whether to use a line style. |
-
-#### Outputs
-
-| Name    |  Type   | Description                                   |
-| ------- | :-----: | --------------------------------------------- |
-| result  | Object  | The bar chart data.                           |
-| loading | boolean | The loading state of the bar chart component. |
-
-### Pie Chart
-
-The Pie Chart component allows you to display a Pie Chart using the [Chart.js](https://www.chartjs.org/) library.
-
-![Pie Chart API](../../assets/apps/4_app_component_library/pie.png.webp)
-
-#### Pie Chart Input
-
-|  Type  | Connectable | Templatable | Default | Description         |
-| :----: | :---------: | :---------: | :-----: | ------------------- |
-| Object |    true     |    false    |         | The pie chart data. |
-
-#### Pie Chart configuration
-
-| Name          |  Type   | Connectable | Templatable | Default | Description                     |
-| ------------- | :-----: | :---------: | :---------: | :-----: | ------------------------------- |
-| theme         | string  |    false    |    false    | Theme1  | The chart theme.                |
-| Doghnut style | boolean |    false    |    false    |  false  | Whether to use a doghnut style. |
-
-#### Outputs
-
-| Name    |  Type   | Description                                   |
-| ------- | :-----: | --------------------------------------------- |
-| result  | Object  | The pie chart data.                           |
-| loading | boolean | The loading state of the pie chart component. |
-
-### Vega Lite
-
-The Vega Lite component allows you to display a Vega Lite chart.
-
-![Vega Lite API](../../assets/apps/4_app_component_library/vega-lite.png.webp)
-
-#### Vega Lite Input
-
-|  Type  | Connectable | Templatable | Default | Description                |
-| :----: | :---------: | :---------: | :-----: | -------------------------- |
-| object |    true     |    false    |         | The Vega Lite chart config |
-
-#### Vega Lite configuration
-
-| Name   |  Type   | Connectable | Templatable | Default | Description                                                               |
-| ------ | :-----: | :---------: | :---------: | :-----: | ------------------------------------------------------------------------- |
-| canvas | boolean |    false    |    false    |  false  | Use the canvas renderer instead of the svg one for more interactive plots |
-
-#### Outputs
-
-| Name    |  Type   | Description                              |
-| ------- | :-----: | ---------------------------------------- |
-| result  | Object  | The Vega Lite chart data.                |
-| loading | boolean | The loading state of the Vega Lite chart |
-
-### Plotly
-
-The Plotly component allows you to display a Plotly chart.
-
-![Plotly API](../../assets/apps/4_app_component_library/plotly.png.webp)
-
-#### Plotly Input
-
-|  Type  | Connectable | Templatable | Default | Description             |
-| :----: | :---------: | :---------: | :-----: | ----------------------- |
-| object |    true     |    false    |         | The Plotly chart config |
-
-#### Outputs
-
-| Name   |  Type  | Description            |
-| ------ | :----: | ---------------------- |
-| result | Object | The Plotly chart data. |
-
-### Scatter Chart
-
-The Scatter Chart component allows you to display a Scatter Chart using the [Chart.js](https://www.chartjs.org/) library.
-
-![Scatter Chart API](../../assets/apps/4_app_component_library/scatter.png.webp)
-
-#### Scatter Chart Input
-
-|      Type       | Connectable | Templatable | Default | Description             |
-| :-------------: | :---------: | :---------: | :-----: | ----------------------- |
-| `Array<Object>` |    true     |    false    |         | The scatter chart data. |
-
-#### Scatter Chart configuration
-
-| Name     |  Type   | Connectable | Templatable | Default | Description                      |
-| -------- | :-----: | :---------: | :---------: | :-----: | -------------------------------- |
-| zoomable | boolean |    false    |    false    |  false  | Whether to use a zoomable style. |
-| panable  | boolean |    false    |    false    |  false  | Whether to use a panable style.  |
-
-#### Outputs
-
-| Name    |  Type   | Description                                       |
-| ------- | :-----: | ------------------------------------------------- |
-| result  | Object  | The scatter chart data.                           |
-| loading | boolean | The loading state of the scatter chart component. |
-
-### Timeseries
-
-The Timeseries component allows you to display a Timeseries using the [Chart.js](https://www.chartjs.org/) library.
-
-![Timeseries API](../../assets/apps/4_app_component_library/timeseries.png.webp)
-
-#### Timeseries Input
-
-|      Type       | Connectable | Templatable | Default | Description          |
-| :-------------: | :---------: | :---------: | :-----: | -------------------- |
-| `Array<Object>` |    true     |    false    |         | The timeseries data. |
-
-#### Timeseries configuration
-
-| Name              |  Type   | Connectable | Templatable | Default | Description                         |
-| ----------------- | :-----: | :---------: | :---------: | :-----: | ----------------------------------- |
-| Logarithmic scale | boolean |    false    |    false    |  false  | Whether to use a logarithmic scale. |
-| zoomable          | boolean |    false    |    false    |  false  | Whether to use a zoomable style.    |
-| panable           | boolean |    false    |    false    |  false  | Whether to use a panable style.     |
-
-#### Outputs
-
-| Name    |  Type   | Description                                    |
-| ------- | :-----: | ---------------------------------------------- |
-| result  | Object  | The timeseries data.                           |
-| loading | boolean | The loading state of the timeseries component. |
-
-### ChartJs
-
-The ChartJs component allows you to display a ChartJs using the [Chart.js](https://www.chartjs.org/) library.
-
-<video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/chartjs.mp4"
-    alt="ChartJS"
-/>
-<br/>
-
-#### ChartJs Input
-
-|    Type     | Connectable | Templatable |       Default        | Description                            |
-| :---------: | :---------: | :---------: | :------------------: | -------------------------------------- |
-| Data source |    true     |    false    | {"label":["Pie"]...} | The Json source of the displayed data. |
-
-#### ChartJs configuration
-
-|  Type   | Connectable | Templatable | Default | Description                                                                          |
-| :-----: | :---------: | :---------: | :-----: | ------------------------------------------------------------------------------------ |
-|  Type   |    false    |    false    |   Pie   | The type of the chart (bar, bubble, doughnut, line, pie, polarArea, radar, scatter). |
-| Options |    true     |    false    |  none   | ChartJs [options](https://www.chartjs.org/docs/latest/general/options.html) object.  |
-
-#### Outputs
-
-| Name   |  Type  | Description       |
-| ------ | :----: | ----------------- |
-| result | Object | The ChartJs data. |
diff --git a/docs/apps/4_app_configuration_settings/1_app_component_library.mdx b/docs/apps/4_app_configuration_settings/1_app_component_library.mdx
new file mode 100644
index 000000000..34976e890
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/1_app_component_library.mdx
@@ -0,0 +1,331 @@
+import DocCard from '@site/src/components/DocCard';
+
+# Component Library
+
+Windmill provides a set of components that can be used to build apps.
+
+The app components library is located on the right-hand side of the app editor. It displays the app components and allows you to configure them.
+
+The list of components is constantly growing according to our users' expectations. If you feel like a new component would be useful, please [reach out to us](/docs/misc/getting_help/).
+
+Even though the list of components is never as up to date as on [Windmill Cloud](https://app.windmill.dev/user/login), here is the list of the available components:
+
+## Components properties
+
+Components can be configured in two ways:
+
+- **Inputs**: inputs can be [connected to an output](../2_outputs.md#connecting-inputs) or computed using a runnable.
+
+  - e.g. `Table` component has an input that can be connected to an output or computed using a runnable, which is an array of objects.
+    <br/>
+
+- **Configuration**: [configure](./3_app_component_configuration.mdx) property such as the button label, the text input placeholder, etc.
+  - e.g. `Table` component has a configuration property that allows you to configure the search bar: Client-side search, Server-side search, or no search.
+
+## Component outputs
+
+- **Runnable**: some component can [trigger a runnable](./2_app_runnable_triggers.md) when an event occurs, usually when a user interacts with the component. The result of the runnable is stored in the component output in the key `result`. It also stores the `loading` state of the component.
+
+  - e.g. `Button` component can trigger a runnable when clicked.
+    <br/>
+
+- **Own outputs**: some component have [outputs defined by the component](../2_outputs.md).
+  - e.g. `Table` component has a selectedRow output
+
+## Inserting components
+
+Click on a component in the component library to insert it in the app canvas. It will be automatically positioned to the first available spot starting from the top left corner
+
+## Layout
+
+The layout components are used to organize the components in the app canvas.
+
+### [Container](./container.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    src="/videos/container.mp4"
+    alt="container component"
+/>
+
+### [List](./list.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    src="/videos/list_component.mp4"
+    alt="list component"
+/>
+
+### [Divider X](./divider_x.mdx)
+
+![Divider X](../../assets/apps/4_app_component_library/divider_x.png.webp)
+
+### [Divider Y](./divider_y.mdx)
+
+![Divider Y](../../assets/apps/4_app_component_library/divider_y.png.webp)
+
+### [Drawer](./drawer.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    src="/videos/drawer.mp4"
+    alt="drawer component"
+/>
+
+### [Vertical Split Panes](./vertical_split_panes.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    src="/videos/vertical_split.mp4"
+    alt="vertical split panes"
+/>
+
+### [Horizontal Split Panes](./horizontal_split_panes.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    src="/videos/horizontal_split.mp4"
+    alt="horizontal split panes"
+/>
+
+### [Modal](./modal.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    id="modal-layout"
+    src="/videos/modal-layout.mp4"
+    alt="modal component"
+/>
+
+### [Stepper](./stepper.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    id="modal-layout"
+    src="/videos/stepper.mp4"
+    alt="stepper"
+/>
+
+## Tabs
+
+### [Tabs](./tabs.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    src="/videos/tabs.mp4"
+    alt="tabs component"
+/>
+
+### [Conditional Tabs](./conditional_tabs.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    id="conditional-tabs-video"
+    src="/videos/conditional-tabs.mp4"
+    alt="Conditional tabs component"
+/>
+
+### [Sidebar Tabs](./sidebar_tabs.mdx)
+
+![Sidebar Tabs](../../assets/apps/4_app_component_library/sidebar_tabs.gif)
+
+### [Invisible Tabs](./invisible_tabs.mdx)
+
+![Inisible Tabs](../../assets/apps/4_app_component_library/invisible_tabs.gif)
+
+## Buttons
+
+### [Button](./button.mdx)
+
+![Button API](../../assets/apps/4_app_component_library/button.png.webp)
+
+### [Submit](./submit_form.mdx)
+
+![Form API](../../assets/apps/4_app_component_library/form.png.webp)
+
+### [Modal Form](./modal_form.mdx)
+
+![Form Modal Button](../../assets/apps/4_app_component_library/form-modal-button.png.webp)
+![Form Modal API](../../assets/apps/4_app_component_library/form-modal.png.webp)
+
+### [Download Button](./download_button.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    src="/videos/download_button.mp4"
+    alt="Download Button"
+/>
+
+## Inputs
+
+### [Form](./form_input.mdx)
+
+![Form Input API](../../assets/apps/4_app_component_library/form_input.png.webp)
+
+### [Text Input](./text_input.mdx)
+
+![Text Input API](../../assets/apps/4_app_component_library/text-input.png.webp)
+
+### [Textarea](./textarea.mdx)
+
+![Textarea API](../../assets/apps/4_app_component_library/textarea.gif)
+
+### [Rich Text Editor](./rich_text_editor.mdx)
+
+![Rich Text Editor API](../../assets/apps/4_app_component_library/rich_text.gif)
+
+### [Password](./password_input.mdx)
+
+![Password Input API](../../assets/apps/4_app_component_library/password-input.png.webp)
+
+### [Email Input](./email_input.mdx)
+
+![Email Input API](../../assets/apps/4_app_component_library/email.png.webp)
+
+### [Number](./number_input.mdx)
+
+![Number Input API](../../assets/apps/4_app_component_library/number-input.png.webp)
+
+### [Currency](./currency_input.mdx)
+
+![Currency Input API](../../assets/apps/4_app_component_library/currency.png.webp)
+
+### [Slider](./slider.mdx)
+
+![Slider API](../../assets/apps/4_app_component_library/slider.png.webp)
+
+### [Range](./range.mdx)
+
+![Range API](../../assets/apps/4_app_component_library/range.png.webp)
+
+### [Date](./date_input.mdx)
+
+![Date Input API](../../assets/apps/4_app_component_library/date-input.png.webp)
+
+### [File Input](./file_input.mdx)
+
+![File Input API](../../assets/apps/4_app_component_library/file_input.png.webp)
+
+### [Toggle](./toggle.mdx)
+
+![Toggle API](../../assets/apps/4_app_component_library/toggle.png.webp)
+
+### [Select](./select.mdx)
+
+![Select API](../../assets/apps/4_app_component_library/select.png.webp)
+
+### [Resource Select](./resource_select.mdx)
+
+![Resource Select](../../assets/apps/4_app_component_library/resource_select.png.webp)
+
+### [MultiSelect](./multiselect.mdx)
+
+![Multiselect API](../../assets/apps/4_app_component_library/multiselect.png.webp)
+
+### [Select Tab](./select_tab.mdx)
+
+![Select Tab](../../assets/apps/4_app_component_library/tab_select.png.webp)
+
+### [Select Step](./select_step.mdx)
+
+![Select Step](../../assets/apps/4_app_component_library/step_select.png.webp)
+
+## Tables
+
+### [Table](./table.mdx)
+
+![Table API](../../assets/apps/4_app_component_library/table.png.webp)
+
+### [AgGrid Table](./aggrid_table.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    src="/videos/aggrid_table.mp4"
+    alt="aggrid table"
+/>
+<br/>
+
+## Display
+
+### [Text](./text.mdx)
+
+![Text API](../../assets/apps/4_app_component_library/text.png.webp)
+
+### [Icon](./icon.mdx)
+
+![Icon](../../assets/apps/4_app_component_library/icon.png.webp)
+
+### [Image](./image.mdx)
+
+![HTML](../../assets/apps/4_app_component_library/image_api.png.webp)
+
+### [Map](./map.mdx)
+
+![map](../../assets/apps/4_app_component_library/map.png.webp)
+
+### [HTML](./html.mdx)
+
+![HTML](../../assets/apps/4_app_component_library/html.png.webp)
+
+### [PDF](./pdf.mdx)
+
+![PDF API](../../assets/apps/4_app_component_library/pdf_api.png.webp)
+
+### [Rich Result](./rich_result.mdx)
+
+![Rich Result](../../assets/apps/4_app_component_library/rich_result.png.webp)
+
+### [Log](./log_display.mdx)
+
+![Log Display](../../assets/apps/4_app_component_library/log_display.png.webp)
+
+### [Flow Status](./flow_status.mdx)
+
+![Flow Status](../../assets/apps/4_app_component_library/flow_status.png.webp)
+
+## Charts
+
+### [Bar/Line Chart](./bar_line_chart.mdx)
+
+![Bar/Line Chart API](../../assets/apps/4_app_component_library/bar.png.webp)
+
+### [Pie Chart](./pie_chart.mdx)
+
+![PDF API](../../assets/apps/4_app_component_library/pdf_api.png.webp)
+
+### [Vega Lite](./vega_lite.mdx)
+
+![Vega Lite API](../../assets/apps/4_app_component_library/vega-lite.png.webp)
+
+### [Plotly](./plotly.mdx)
+
+![Plotly API](../../assets/apps/4_app_component_library/plotly.png.webp)
+
+### [Scatter Chart](./scatter_chart.mdx)
+
+![Scatter Chart API](../../assets/apps/4_app_component_library/scatter.png.webp)
+
+### [Timeseries](./timeseries.mdx)
+
+![Timeseries API](../../assets/apps/4_app_component_library/timeseries.png.webp)
+
+### [ChartJs](./chartjs.mdx)
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/chartjs.mp4"
+    alt="ChartJS"
+/>
\ No newline at end of file
diff --git a/docs/apps/4_app_configuration-settings/2_app_runnable_triggers.md b/docs/apps/4_app_configuration_settings/2_app_runnable_triggers.md
similarity index 100%
rename from docs/apps/4_app_configuration-settings/2_app_runnable_triggers.md
rename to docs/apps/4_app_configuration_settings/2_app_runnable_triggers.md
diff --git a/docs/apps/4_app_configuration-settings/3_app_component_configuration.mdx b/docs/apps/4_app_configuration_settings/3_app_component_configuration.mdx
similarity index 100%
rename from docs/apps/4_app_configuration-settings/3_app_component_configuration.mdx
rename to docs/apps/4_app_configuration_settings/3_app_component_configuration.mdx
diff --git a/docs/apps/4_app_configuration-settings/4_app_styling.mdx b/docs/apps/4_app_configuration_settings/4_app_styling.mdx
similarity index 100%
rename from docs/apps/4_app_configuration-settings/4_app_styling.mdx
rename to docs/apps/4_app_configuration_settings/4_app_styling.mdx
diff --git a/docs/apps/4_app_configuration-settings/5_components_groups.md b/docs/apps/4_app_configuration_settings/5_components_groups.md
similarity index 87%
rename from docs/apps/4_app_configuration-settings/5_components_groups.md
rename to docs/apps/4_app_configuration_settings/5_components_groups.md
index 5a8e8c868..25feb38cb 100644
--- a/docs/apps/4_app_configuration-settings/5_components_groups.md
+++ b/docs/apps/4_app_configuration_settings/5_components_groups.md
@@ -14,7 +14,7 @@ Components can be grouped within containers. This feature enables making groups
 
 Inside those "container groups", you can refer to "group.x" to refer to one of those group field which make this independent of the id of the container itself.
 
-1. From the editor, pick a [container](1_app_component_library.mdx#container) component and enable "Container is a component group".
+1. From the editor, pick a [container](../4_app_configuration_settings/container.mdx) component and enable "Container is a component group".
 2. Create at least one group field.
 3. Fill the group field's object, either manually or dynamically through an [eval](../3_app-runnable-panel.mdx#evals).
 4. Now the container's components can be [connected](../2_outputs.md#connecting-inputs) to the group fields items through `group.group_field_name.optional_subitems`
diff --git a/docs/apps/4_app_configuration_settings/aggrid_table.mdx b/docs/apps/4_app_configuration_settings/aggrid_table.mdx
new file mode 100644
index 000000000..aa6d7de77
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/aggrid_table.mdx
@@ -0,0 +1,62 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# AgGrid Table
+
+The AgGrid table component allows you to display an agnostic grid table.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/aggrid_table.mp4"
+    alt="aggrid table"
+/>
+<br/>
+
+:::tip Guide
+If you are new to Ag Grid, check out our [Introduction guide](../../misc/9_guides/aggrid_table/index.md).
+:::
+
+The following section details AgGrid Table component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## AgGird Table Input
+
+|      Type       | Connectable | Templatable | Default | Description     |
+| :-------------: | :---------: | :---------: | :-----: | --------------- |
+| `Array<Object>` |    true     |    false    |         | The table data. |
+
+## AgGrid Table configuration
+
+| Name                       |  Type   | Connectable | Templatable |    Default    | Description                                                                                                     |
+| -------------------------- | :-----: | :---------: | :---------: | :-----------: | --------------------------------------------------------------------------------------------------------------- |
+| Column Defs                | object  |    true     |    false    | Id, Name, Age | The definition of the columns & their name.                                                                     |
+| Flex                       | boolean |    false    |    false    |     true      | Allows you to distribute available space among multiple elements to control their relative sizes and positions. |
+| All Editable               | boolean |    false    |    false    |     false     | Whether you want all columns to be editable.                                                                    |
+| Multiple Selectable        | boolean |    false    |    false    |     false     | Make multiple rows selectable at once.                                                                          |
+| Row Multiselect With Click | boolean |    false    |    false    |     true      | If multiple selectable, allow multiselect with click.                                                           |
+| Pagination                 | boolean |    false    |    false    |     false     | Whether you want pages on your table.                                                                           |
+
+## Outputs
+
+| Name             |  Type   | Description                                     |
+| ---------------- | :-----: | ----------------------------------------------- |
+| result           | Object  | The AgGrid table data.                          |
+| loading          | boolean | The loading state of the AgGrid table component |
+| selectedRow      | Object  | The selected row                                |
+| selectedRowIndex | number  | The selected row index                          |
diff --git a/docs/apps/4_app_configuration_settings/bar_line_chart.mdx b/docs/apps/4_app_configuration_settings/bar_line_chart.mdx
new file mode 100644
index 000000000..503b25af1
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/bar_line_chart.mdx
@@ -0,0 +1,45 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Bar/Line Chart
+
+The Bar Chart component allows you to display a Bar Chart using the [Chart.js](https://www.chartjs.org/) library. It can also be used to display a Line Chart.
+
+![Bar/Line Chart API](../../assets/apps/4_app_component_library/bar.png.webp)
+
+The following section details Bar/Line Chart component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Bar/Line Chart Input
+
+|  Type  | Connectable | Templatable | Default | Description         |
+| :----: | :---------: | :---------: | :-----: | ------------------- |
+| Object |    true     |    false    |         | The bar chart data. |
+
+## Bar/Line Chart configuration
+
+| Name  |  Type   | Connectable | Templatable | Default | Description                  |
+| ----- | :-----: | :---------: | :---------: | :-----: | ---------------------------- |
+| Theme | string  |    false    |    false    | Theme1  | The chart theme.             |
+| Line  | boolean |    false    |    false    |  false  | Whether to use a line style. |
+
+## Outputs
+
+| Name    |  Type   | Description                                   |
+| ------- | :-----: | --------------------------------------------- |
+| result  | Object  | The bar chart data.                           |
+| loading | boolean | The loading state of the bar chart component. |
diff --git a/docs/apps/4_app_configuration_settings/button.mdx b/docs/apps/4_app_configuration_settings/button.mdx
new file mode 100644
index 000000000..d80626209
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/button.mdx
@@ -0,0 +1,79 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Button
+
+The component triggers a runnable when clicked. If the runnable has parameters, they need to be configured in the component configuration.
+The runnable parameters are defined:
+
+- **Static**: the parameter is defined in the component configuration.
+- **Connected**: the parameter is connected to an output.
+
+![Button API](../../assets/apps/4_app_component_library/button.png.webp)
+
+The following section details Button component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Button configuration
+
+| Name                |                Type                 | Connectable | Templatable |  Default  | Description                                                |
+| ------------------- | :---------------------------------: | :---------: | :---------: | :-------: | ---------------------------------------------------------- |
+| label               |               string                |    true     |    false    | Press me  | The button label.                                          |
+| color               | blue, red, dark, light, green, gray |    false    |    false    |   blue    | The button color.                                          |
+| size                |         xs, sm, md , lg, xl         |    false    |    false    |    sm     | The button size.                                           |
+| Fill container      |               boolean               |    false    |    false    |   false   | Whether the button should fill the container.              |
+| disabled            |               boolean               |    false    |    false    |   false   | Whether the button should be disabled.                     |
+| Before Icon         |               string                |    false    |    false    | Undefined | The icon to display before the label.                      |
+| After Icon          |               string                |    false    |    false    | Undefined | The icon to display after the label.                       |
+| Trigger on App load |               boolean               |    false    |    false    |   false   | Whether the button script should be triggered on app load. |
+
+Special parameters:
+
+## Button On Success
+
+The button component has a special parameter called `On Success`. This parameter is used to trigger one of the following actions:
+
+- **Do nothing**: the button does nothing after the runnable is executed.
+- **Go to an URL**: the button redirects the user to the specified URL after the runnable is executed.
+- **Set the tab of a Tabs component**: the button sets the tab of a Tabs component after the runnable is executed.
+- **Display a toast**: the button displays a toast after the runnable is executed.
+
+### **Go to an URL configuration:**
+
+| Name    |  Type   | Connectable | Templatable |    Default    | Description                                    |
+| ------- | :-----: | :---------: | :---------: | :-----------: | ---------------------------------------------- |
+| URL     | string  |    true     |    false    | /apps/get/foo | The URL to redirect the user to.               |
+| New Tab | boolean |    false    |    false    |     true      | Whether the URL should be opened in a new tab. |
+
+### **Set the tab of a Tabs component configuration:**
+
+| Name    |               Type                | Connectable | Templatable | Default | Description                                                                             |
+| ------- | :-------------------------------: | :---------: | :---------: | :-----: | --------------------------------------------------------------------------------------- |
+| Set Tab | Array<{id: string, index:number}> |    false    |    false    |   []    | The tabs to set. The id is the id of the Tabs component and the index is the tab index. |
+
+### **Display a toast configuration:**
+
+| Name    |  Type  | Connectable | Templatable |   Default   | Description                          |
+| ------- | :----: | :---------: | :---------: | :---------: | ------------------------------------ |
+| Message | string |    true     |    false    | Hello there | The message to display in the toast. |
+
+## Outputs
+
+| Name    |  Type   | Description                      |
+| ------- | :-----: | -------------------------------- |
+| result  |   any   | The result of the runnable.      |
+| loading | boolean | The loading state of the button. |
diff --git a/docs/apps/4_app_configuration_settings/chartjs.mdx b/docs/apps/4_app_configuration_settings/chartjs.mdx
new file mode 100644
index 000000000..0eb3c23cd
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/chartjs.mdx
@@ -0,0 +1,51 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# ChartJs
+
+The ChartJs component allows you to display a ChartJs using the [Chart.js](https://www.chartjs.org/) library.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/chartjs.mp4"
+    alt="ChartJS"
+/>
+<br/>
+
+The following section details ChartJs component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## ChartJs Input
+
+|    Type     | Connectable | Templatable |       Default        | Description                            |
+| :---------: | :---------: | :---------: | :------------------: | -------------------------------------- |
+| Data source |    true     |    false    | {"label":["Pie"]...} | The Json source of the displayed data. |
+
+## ChartJs configuration
+
+|  Type   | Connectable | Templatable | Default | Description                                                                          |
+| :-----: | :---------: | :---------: | :-----: | ------------------------------------------------------------------------------------ |
+|  Type   |    false    |    false    |   Pie   | The type of the chart (bar, bubble, doughnut, line, pie, polarArea, radar, scatter). |
+| Options |    true     |    false    |  none   | ChartJs [options](https://www.chartjs.org/docs/latest/general/options.html) object.  |
+
+## Outputs
+
+| Name   |  Type  | Description       |
+| ------ | :----: | ----------------- |
+| result | Object | The ChartJs data. |
diff --git a/docs/apps/4_app_configuration_settings/conditional_tabs.mdx b/docs/apps/4_app_configuration_settings/conditional_tabs.mdx
new file mode 100644
index 000000000..d30328452
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/conditional_tabs.mdx
@@ -0,0 +1,46 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Conditional Tabs
+
+Conditional tabs are tabs that are displayed only if a condition is met. The conditions are an array of conditions. Conditions are evaluated in order. The first condition that evaluates to true will render its subgrid. If no condition evaluates to true, the last subgrid will be rendered.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    id="conditional-tabs-video"
+    src="/videos/conditional-tabs.mp4"
+    alt="Conditional tabs component"
+/>
+<br/>
+
+The following section details Conditional Tabs component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Conditional Tabs configuration
+
+| Name       |   Type    | Connectable | Templatable | Default | Description                            |
+| ---------- | :-------: | :---------: | :---------: | :-----: | -------------------------------------- |
+| Conditions | boolean[] |    false    |    false    |  false  | The conditions that will be evaluated. |
+
+## Outputs
+
+| Name                   |   Type    | Description                         |
+| ---------------------- | :-------: | ----------------------------------- |
+| conditions             | boolean[] | The conditions evalutation          |
+| selectedConditionIndex |  number   | The index of the selected condition |
diff --git a/docs/apps/4_app_configuration_settings/container.mdx b/docs/apps/4_app_configuration_settings/container.mdx
new file mode 100644
index 000000000..0f33a2906
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/container.mdx
@@ -0,0 +1,64 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Container
+
+Containers allow you to host other components in a box. Moving a container means moving all the components inside.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/container.mp4"
+    alt="container component"
+/>
+<br/>
+
+To add a component to a container, you can either click on `Insert` while you selected the container,or your can move an existing component by copy/pasting it.
+
+The following section details Container component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Container configuration
+
+A container can be turned into a group of components by enabling "Container is a component group".
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    id="main-video"
+    src="/videos/group_of_components.mp4"
+/>
+
+<br/>
+
+More details on Group of Components:
+
+<div class="grid grid-cols-2 gap-2 my-4">
+	<DocCard
+		title="Group of Components"
+		description="Components can be grouped within containers."
+		href="/docs/apps/app_configuration-settings/components_groups"
+		color="orange"
+	/>
+</div>
+
+
+## Outputs
+
+The container component has no output.
diff --git a/docs/apps/4_app_configuration_settings/currency_input.mdx b/docs/apps/4_app_configuration_settings/currency_input.mdx
new file mode 100644
index 000000000..9a221353a
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/currency_input.mdx
@@ -0,0 +1,40 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Currency Input
+
+The currency input component allows you to get a written amount of money in a set currency from the user.
+
+![Currency Input API](../../assets/apps/4_app_component_library/currency.png.webp)
+
+The following section details Currency Input component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Currency Input configuration
+
+| Name                |                                     Type                                     | Connectable | Templatable | Default | Description                              |
+| ------------------- | :--------------------------------------------------------------------------: | :---------: | :---------: | :-----: | ---------------------------------------- |
+| default value       |                                    number                                    |    true     |    false    |    /    | The default value of the currency input. |
+| is negative allowed |                                   boolean                                    |    false    |    false    |  false  | If negative amounts will be accepted.    |
+| currency            |             string: USD, EUR, GBP, CAD, AUD, JPY, CNY, INR, BRL              |    false    |    false    |   USD   | The default value of the currency input. |
+| locale              | string: en-US, en-GB, en-IE, de-DE, fr-FR, br-FR, ja-JP, pt-TL, fr-CA, en-CA |    false    |    false    |  en-US  | The format of the amount.                |
+
+## Outputs
+
+| Name   |  Type  | Description              |
+| ------ | :----: | ------------------------ |
+| result | number | The currency input value |
diff --git a/docs/apps/4_app_configuration_settings/date_input.mdx b/docs/apps/4_app_configuration_settings/date_input.mdx
new file mode 100644
index 000000000..f74478a10
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/date_input.mdx
@@ -0,0 +1,39 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Date Input
+
+The date input component allows you to get a date from the user.
+
+![Date Input API](../../assets/apps/4_app_component_library/date-input.png.webp)
+
+The following section details Date Input component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Date Input configuration
+
+| Name          |  Type  | Connectable | Templatable | Default | Description                          |
+| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------------ |
+| minDate       | string |    true     |    false    |         | The minimum date of the date input.  |
+| maxDate       | string |    true     |    false    |         | The maximum date of the date input.  |
+| default value | string |    true     |    false    |         | The default value of the date input. |
+
+## Outputs
+
+| Name   |  Type  | Description           |
+| ------ | :----: | --------------------- |
+| result | string | The date input value. |
diff --git a/docs/apps/4_app_configuration_settings/divider_x.mdx b/docs/apps/4_app_configuration_settings/divider_x.mdx
new file mode 100644
index 000000000..341f3ffc3
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/divider_x.mdx
@@ -0,0 +1,32 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Divider X
+
+Divider X is a horizontal line.
+
+![Divider X](../../assets/apps/4_app_component_library/divider_x.png.webp)
+
+The following section details Divider X component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Divider X configuration
+
+| Name  |  Type  | Connectable | Templatable |  Default  | Description                                          |
+| ----- | :----: | :---------: | :---------: | :-------: | ---------------------------------------------------- |
+| Size  | number |    false    |    false    |     2     | The thickness of the line.                           |
+| Color | string |    false    |    false    | #00000060 | The color of the line in hexadecimal color notation. |
diff --git a/docs/apps/4_app_configuration_settings/divider_y.mdx b/docs/apps/4_app_configuration_settings/divider_y.mdx
new file mode 100644
index 000000000..12574c0b0
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/divider_y.mdx
@@ -0,0 +1,32 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Divider Y
+
+Divider Y is a vertical line.
+
+![Divider Y](../../assets/apps/4_app_component_library/divider_y.png.webp)
+
+The following section details Divider Y component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Divider Y configuration
+
+| Name  |  Type  | Connectable | Templatable |  Default  | Description                                          |
+| ----- | :----: | :---------: | :---------: | :-------: | ---------------------------------------------------- |
+| Size  | number |    false    |    false    |     2     | The thickness of the line.                           |
+| Color | string |    false    |    false    | #00000060 | The color of the line in hexadecimal color notation. |
diff --git a/docs/apps/4_app_configuration_settings/download_button.mdx b/docs/apps/4_app_configuration_settings/download_button.mdx
new file mode 100644
index 000000000..59d0c9f8d
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/download_button.mdx
@@ -0,0 +1,59 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Download Button
+
+The download button component allows you to download a file.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/download_button.mp4"
+    alt="Download Button"
+/>
+
+<br/>
+
+The data source of the Download button must be a data URL scheme with a [Base64 encoded string](../../core_concepts/18_files_binary_data/index.mdx):
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/download_base64.mp4"
+    alt="Download Button Base64"
+/>
+
+<br/>
+
+The following section details Download Button component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Download Button configuration
+
+| Name           |                Type                 | Connectable | Templatable |  Default  | Description                                                                                                      |
+| -------------- | :---------------------------------: | :---------: | :---------: | :-------: | ---------------------------------------------------------------------------------------------------------------- |
+| source         |           string or File            |    true     |    false    |           | The source of the file to download ([Base64 encoded string](../../core_concepts/18_files_binary_data/index.mdx). |
+| filename       |               string                |    true     |    false    |           | The name of the file to download.                                                                                |
+| label          |               string                |    true     |    false    | Press me  | The button label.                                                                                                |
+| color          | blue, red, dark, light, green, gray |    false    |    false    |   blue    | The button color.                                                                                                |
+| size           |         xs, sm, md , lg, xl         |    false    |    false    |    sm     | The button size.                                                                                                 |
+| Fill container |               boolean               |    false    |    false    |   false   | Whether the button should fill the container.                                                                    |
+| disabled       |               boolean               |    false    |    false    |   false   | Whether the button should be disabled.                                                                           |
+| Before Icon    |               string                |    false    |    false    | Undefined | The icon to display before the label.                                                                            |
+| After Icon     |               string                |    false    |    false    | Undefined | The icon to display after the label.                                                                             |
diff --git a/docs/apps/4_app_configuration_settings/drawer.mdx b/docs/apps/4_app_configuration_settings/drawer.mdx
new file mode 100644
index 000000000..c6c1806b0
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/drawer.mdx
@@ -0,0 +1,46 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Drawer
+
+The drawer is container called by a button. Once you click on the button, a side tab will appear on which you can display other components.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/drawer.mp4"
+    alt="drawer component"
+/>
+<br/>
+
+To add a component to a container, you can either click on `Insert` while you selected the opened drawer, or your can move an existing component by copy/pasting it.
+
+The following section details Drawer component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Drawer configuration
+
+| Name           |                   Type                    | Connectable | Templatable |   Default    | Description                                                               |
+| -------------- | :---------------------------------------: | :---------: | :---------: | :----------: | ------------------------------------------------------------------------- |
+| No Padding     |                  boolean                  |    false    |    false    |    false     | Whether you want to add extra space between the component and the border. |
+| Drawer Title   |                  string                   |    false    |    false    | Drawer title | The title of the container called by Drawer.                              |
+| Label          |                  string                   |    true     |    false    |   Press me   | The button label.                                                         |
+| Color          | blue, red, dark, light, green, gray, none |    false    |    false    |     blue     | The button color.                                                         |
+| Size           |            xs, sm, md , lg, xl            |    false    |    false    |      xs      | The button size.                                                          |
+| Fill container |                  boolean                  |    false    |    false    |    false     | Whether the button should fill the container.                             |
+| Disabled       |                  boolean                  |    false    |    false    |    false     | Whether the button should be disabled.                                    |
diff --git a/docs/apps/4_app_configuration_settings/email_input.mdx b/docs/apps/4_app_configuration_settings/email_input.mdx
new file mode 100644
index 000000000..d41d632a0
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/email_input.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Email Input
+
+The email input component allows you to get an email from the user.
+
+![Email Input API](../../assets/apps/4_app_component_library/email.png.webp)
+
+The following section details Email Input component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Email Input configuration
+
+| Name          |  Type  | Connectable | Templatable | Default | Description                    |
+| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------ |
+| Placeholder   | string |    false    |    false    |  Email  | The email input placeholder.   |
+| Default value | string |    true     |    false    |  Email  | The email input default value. |
+
+## Outputs
+
+| Name   |  Type  | Description            |
+| ------ | :----: | ---------------------- |
+| Result | string | The email input value. |
diff --git a/docs/apps/4_app_configuration_settings/file_input.mdx b/docs/apps/4_app_configuration_settings/file_input.mdx
new file mode 100644
index 000000000..b693645ed
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/file_input.mdx
@@ -0,0 +1,43 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# File Input
+
+The file input allows users to drop files into the app.
+
+![File Input API](../../assets/apps/4_app_component_library/file_input.png.webp)
+
+Files uploaded are converted and returned as a data URL scheme with a [Base64 encoded string](../../core_concepts/18_files_binary_data/index.mdx).
+
+![File Input Base64](../../assets/apps/4_app_component_library/file_input_base64.png.webp)
+
+The following section details File Input component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## File Input configuration
+
+| Name                |  Type   | Connectable | Templatable |                   Default                   | Description                                                    |
+| ------------------- | :-----: | :---------: | :---------: | :-----------------------------------------: | -------------------------------------------------------------- |
+| Accepted File Types |  array  |    false    |    false    |       "image/\*" ; "application/pdf"        | The types of files you accept to be submitted.                 |
+| Allow Multiple      | boolean |    false    |    false    |                    false                    | If allowed, the user will be able to select more than one file |
+| Text                | string  |    false    |    false    | Drag and drop files or click to select them | The text displayed on the file input.                          |
+
+## Outputs
+
+| Name   |  Type  | Description                  |
+| ------ | :----: | ---------------------------- |
+| result | string | The name of the loaded file. |
diff --git a/docs/apps/4_app_configuration_settings/flow_status.mdx b/docs/apps/4_app_configuration_settings/flow_status.mdx
new file mode 100644
index 000000000..9380c53da
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/flow_status.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Flow Status
+
+The Flow Status component allows you to display the status of a flow.
+
+![Flow Status](../../assets/apps/4_app_component_library/flow_status.png.webp)
+
+The following section details Flow Status component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Flow Status configuration
+
+| Name        | Type | Connectable | Templatable | Default | Description                 |
+| ----------- | :--: | :---------: | :---------: | :-----: | --------------------------- |
+| Data Source |      |    true     |             |         | The flow to display status. |
+
+## Outputs
+
+| Name    |  Type   | Description                         |
+| ------- | :-----: | ----------------------------------- |
+| result  |         | The result of the runnable.         |
+| loading | boolean | The loading state of the component. |
diff --git a/docs/apps/4_app_configuration_settings/form_input.mdx b/docs/apps/4_app_configuration_settings/form_input.mdx
new file mode 100644
index 000000000..b85b87d74
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/form_input.mdx
@@ -0,0 +1,45 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Form Input
+
+The form input component allows you to create a form and get answers from the user.
+
+![Form Input API](../../assets/apps/4_app_component_library/form_input.png.webp)
+
+The following section details Form Input component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Form Input configuration
+
+| Name         |  Type   | Connectable | Templatable | Default | Description                                                                  |
+| ------------ | :-----: | :---------: | :---------: | :-----: | ---------------------------------------------------------------------------- |
+| Display Type | boolean |    false    |    false    |  false  | This will display the type and/or the format on the field next to the label. |
+| Large Gap    | boolean |    false    |    false    |  false  | This will add a large gap between the field elements.                        |
+
+Each argument can be configured (name, description, type, default value, advanced parameters).
+
+![Form Input Arguments](../../assets/apps/4_app_component_library/form_input_argument.png.webp)
+
+## Outputs
+
+| Name       |         Type          | Description                                     |
+| ---------- | :-------------------: | ----------------------------------------------- |
+| properties |        string         | Type, description and default of each argument. |
+| loading    |        boolean        | The loading state of the text component.        |
+| valid      |        boolean        |                                                 |
+| values     | same as each argument | Value of each answer by the user.               |
diff --git a/docs/apps/4_app_configuration_settings/horizontal_split_panes.mdx b/docs/apps/4_app_configuration_settings/horizontal_split_panes.mdx
new file mode 100644
index 000000000..77ba663d7
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/horizontal_split_panes.mdx
@@ -0,0 +1,40 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Horizontal Split Panes
+
+Container split in x number of panes horizontally.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/horizontal_split.mp4"
+    alt="horizontal split panes"
+/>
+<br/>
+
+To add a component to a horizontal split pane, you can either click on `Insert` while you selected the horizontal split pane, or your can move an existing component by copy/pasting it.
+
+The following section details Horizontal Split Panes component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Horizontal Split Panes configuration
+
+| Name       |  Type   | Connectable | Templatable | Default | Description                                                               |
+| ---------- | :-----: | :---------: | :---------: | :-----: | ------------------------------------------------------------------------- |
+| No Padding | boolean |    false    |    false    |  false  | Whether you want to add extra space between the component and the border. |
diff --git a/docs/apps/4_app_configuration_settings/html.mdx b/docs/apps/4_app_configuration_settings/html.mdx
new file mode 100644
index 000000000..b1e792993
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/html.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# HTML
+
+The HTML component allows you to display HTML content.
+
+![HTML](../../assets/apps/4_app_component_library/html.png.webp)
+
+The following section details HTML component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## HTML Input
+
+|  Type  | Connectable | Templatable |                                          Default                                          | Description                |
+| :----: | :---------: | :---------: | :---------------------------------------------------------------------------------------: | -------------------------- |
+| string |    true     |    true     | `<img src="****"><h1 class="absolute top-4 left-2 text-white">Hello ${ctx.username}</h1>` | The HTML content to render |
+
+## Outputs
+
+| Name    |  Type   | Description                              |
+| ------- | :-----: | ---------------------------------------- |
+| result  | string  | The HTML.                                |
+| loading | boolean | The loading state of the HTML component. |
diff --git a/docs/apps/4_app_configuration_settings/icon.mdx b/docs/apps/4_app_configuration_settings/icon.mdx
new file mode 100644
index 000000000..45f3c6bb4
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/icon.mdx
@@ -0,0 +1,34 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Icon
+
+The Icon API allows you to display an icon chosen in a library of icons.
+
+![Icon](../../assets/apps/4_app_component_library/icon.png.webp)
+
+The following section details Icon component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Icon configuration
+
+| Name         |  Type  | Connectable | Templatable |   Default    | Description                   |
+| ------------ | :----: | :---------: | :---------: | :----------: | ----------------------------- |
+| Icon         | string |    true     |    false    |    Smile     | The actual icon.              |
+| Color        | string |    true     |    false    | currentColor | The color of the icon.        |
+| Size         | number |    false    |    false    |      24      | The size of the icon.         |
+| Stroke Width | number |    false    |    false    |      2       | The width of the icon stroke. |
diff --git a/docs/apps/4_app_configuration_settings/image.mdx b/docs/apps/4_app_configuration_settings/image.mdx
new file mode 100644
index 000000000..2f09531b1
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/image.mdx
@@ -0,0 +1,39 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Image
+
+The Image component allows you to display a picture.
+
+![HTML](../../assets/apps/4_app_component_library/image_api.png.webp)
+
+The following section details Image component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Image configuration
+
+| Name      |             Type             | Connectable | Templatable |  Default  | Description                                                        |
+| --------- | :--------------------------: | :---------: | :---------: | :-------: | ------------------------------------------------------------------ |
+| Source    |            string            |    true     |    false    | /logo.svg | The image.                                                         |
+| Image Fit | string: contain, cover, fill |    false    |    false    |  contain  | How the image will fit the component box.                          |
+| Alt text  |            string            |    false    |    false    |     /     | This text will appear if the image can't be loaded for any reason. |
+
+## Outputs
+
+| Name    |  Type   | Description                               |
+| ------- | :-----: | ----------------------------------------- |
+| loading | boolean | The loading state of the Image component. |
diff --git a/docs/apps/4_app_configuration-settings/index.mdx b/docs/apps/4_app_configuration_settings/index.mdx
similarity index 100%
rename from docs/apps/4_app_configuration-settings/index.mdx
rename to docs/apps/4_app_configuration_settings/index.mdx
diff --git a/docs/apps/4_app_configuration_settings/invisible_tabs.mdx b/docs/apps/4_app_configuration_settings/invisible_tabs.mdx
new file mode 100644
index 000000000..033ee6959
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/invisible_tabs.mdx
@@ -0,0 +1,26 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Invisible Tabs
+
+The Invisible Tabs component is basically a Tabs component whose `Tabs Kind` is "Invisible", meaning the tabs labels are not visible by the user.
+
+![Inisible Tabs](../../assets/apps/4_app_component_library/invisible_tabs.gif)
+The following section details Invisible Tabs component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## 
diff --git a/docs/apps/4_app_configuration_settings/list.mdx b/docs/apps/4_app_configuration_settings/list.mdx
new file mode 100644
index 000000000..6bb1db006
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/list.mdx
@@ -0,0 +1,88 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# List
+
+The List component enables duplication of cards or rows with consistent structure, allowing for containment of other components. By default, editing or moving a component will apply changes to all cards or rows, while still allowing customization and exceptions for unique values per component.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/list_component.mp4"
+    alt="list component"
+/>
+<br/>
+
+To add a component to a list, you can either click on `Insert` while you selected the container, or your can move an existing component by copy/pasting it.
+
+Editing or moving a component will apply changes to all cards or rows.
+
+![Editing a list card](../../assets/apps/4_app_component_library/editing_list.gif 'Editing a list card')
+
+To customize the settings of components within each time, you can use `iter.index` and `iter.value`.
+
+- `iter.index` will retrieve the index number of each card (0, 1, 2 etc.).
+
+![iter.index](../../assets/apps/4_app_component_library/iter.index.png.webp)
+
+- `iter.value.key` will retrieve the value of each key defined in the `items` section.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/iter.value.mp4"
+    alt="iter.value"
+/>
+<br/>
+
+List components also support having inputs set inside them. Retrieve the values of each in the `inputs` field of the List component in the [outputs](../2_outputs.md) menu.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/list_inputs.mp4"
+    alt="List inputs"
+/>
+<br/>
+
+The following section details List component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## List configuration
+
+| Name         |  Type  | Connectable | Templatable |        Default        | Description                                                                                                                                                                                                                                                                                                       |
+| ------------ | :----: | :---------: | :---------: | :-------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| items        | array  |    true     |    false    |        3 items        | The list items.                                                                                                                                                                                                                                                                                                   |
+| item keys    | string |    true     |    false    |    `"foo": 1` ...     | The keys of each card.                                                                                                                                                                                                                                                                                            |
+| Width        | string |    false    |    false    |        "Card"         | Whether items should be "Card" of "Full Row".                                                                                                                                                                                                                                                                     |
+| Min Width Px | number |    true     |    true     |          300          | The minimum width in pixels. Only applies when "Width" is set to Card                                                                                                                                                                                                                                             |
+| Height Px    | number |    true     |    true     |          280          | The height in pixels.                                                                                                                                                                                                                                                                                             |
+| Pagination   | string |    false    |    false    | "Managed by runnable" | Pagination can be managed using two methods: By the component: Based on a specified page size, the component divides the array into several pages. By the runnable: The component shows all items, leaving the task of pagination to the runnable. The current page number is available in the component outputs. |
+| Page count   | number |    false    |    false    |           1           | The number of pages. Only applies when pagination is managed by the runnable.                                                                                                                                                                                                                                     |
+| Page size    | number |    false    |    false    |           3           | The number of items per page. Only applies when pagination is managed by component.                                                                                                                                                                                                                               |
+
+## Outputs
+
+| Name    |  Type   | Description                             |
+| ------- | :-----: | --------------------------------------- |
+| result  |   any   | The result of the list component.       |
+| loading | boolean | The loading state of the component.     |
+| inputs  |   any   | The inputs of the component. |
+| page    | number  | The current page number.                |
diff --git a/docs/apps/4_app_configuration_settings/log_display.mdx b/docs/apps/4_app_configuration_settings/log_display.mdx
new file mode 100644
index 000000000..a8a9b7ae5
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/log_display.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Log Display
+
+The Log Display component allows you to display the log of a Runnable.
+
+![Log Display](../../assets/apps/4_app_component_library/log_display.png.webp)
+
+The following section details Log Display component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Log Display configuration
+
+| Name        | Type | Connectable | Templatable | Default | Description                      |
+| ----------- | :--: | :---------: | :---------: | :-----: | -------------------------------- |
+| Data Source |      |    true     |             |         | The data source to display logs. |
+
+## Outputs
+
+| Name    |  Type   | Description                         |
+| ------- | :-----: | ----------------------------------- |
+| result  |         | The result of the runnable.         |
+| loading | boolean | The loading state of the component. |
diff --git a/docs/apps/4_app_configuration_settings/map.mdx b/docs/apps/4_app_configuration_settings/map.mdx
new file mode 100644
index 000000000..0a979e1b0
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/map.mdx
@@ -0,0 +1,42 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Map
+
+The Map component allows you to display an interactive map.
+
+![map](../../assets/apps/4_app_component_library/map.png.webp)
+
+The following section details Map component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Map configuration
+
+| Name      |  Type  | Connectable | Templatable | Default | Description                             |
+| --------- | :----: | :---------: | :---------: | :-----: | --------------------------------------- |
+| Longitude | number |    true     |    false    |   15    | The longitude of the center of the map. |
+| Latitude  | number |    true     |    false    |   50    | The latitude of the center of the map.  |
+| Zoom      | number |    true     |    false    |    3    | The zoom of the map.                    |
+| Markers   | object |    true     |    false    |         | The map data.                           |
+
+## Outputs
+
+| Name                   |  Type  | Description                                                 |
+| ---------------------- | :----: | ----------------------------------------------------------- |
+| Map region             | string | The region where the displayed map is located.              |
+| topLeft lat & long     | number | Latitude & longitude of the top left corner of the map.     |
+| bottomRight lat & long | number | Latitude & longitude of the bottom right corner of the map. |
diff --git a/docs/apps/4_app_configuration_settings/modal.mdx b/docs/apps/4_app_configuration_settings/modal.mdx
new file mode 100644
index 000000000..d83cb11a5
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/modal.mdx
@@ -0,0 +1,43 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Modal
+
+The modal is container called by a button. Once you click on the button, a modal will appear on which you can display other components.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    id="modal-layout"
+    src="/videos/modal-layout.mp4"
+    alt="modal component"
+/>
+
+The following section details Modal component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Modal configuration
+
+| Name                |                   Type                    | Connectable | Templatable |   Default   | Description                                   |
+| ------------------- | :---------------------------------------: | :---------: | :---------: | :---------: | --------------------------------------------- |
+| modalTitle          |                  string                   |    false    |    false    | Modal title | The title of the modal.                       |
+| buttonLabel         |                  string                   |    true     |    false    |  Press me   | The button label.                             |
+| buttonColor         | blue, red, dark, light, green, gray, none |    false    |    false    |    blue     | The button color.                             |
+| buttonSize          |            xs, sm, md , lg, xl            |    false    |    false    |     xs      | The button size.                              |
+| buttonFillContainer |                  boolean                  |    false    |    false    |    false    | Whether the button should fill the container. |
+| buttonDisabled      |                  boolean                  |    false    |    false    |    false    | Whether the button should be disabled.        |
diff --git a/docs/apps/4_app_configuration_settings/modal_form.mdx b/docs/apps/4_app_configuration_settings/modal_form.mdx
new file mode 100644
index 000000000..547b519b0
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/modal_form.mdx
@@ -0,0 +1,57 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Modal Form
+
+The form modal component allows you to create a form. It has a submit button that triggers a runnable when clicked. The form is displayed in a modal, which can be opened by clicking on a button.
+
+The runnable parameters are defined:
+
+- **Static**: the parameter is defined in the component configuration.
+- **User input**: the parameter is defined by the user input.
+- **Connected**: the parameter is connected to an output.
+
+Only user inputs are displayed in the form in the modal.
+
+![Form Modal Button](../../assets/apps/4_app_component_library/form-modal-button.png.webp)
+![Form Modal API](../../assets/apps/4_app_component_library/form-modal.png.webp)
+
+The following section details Modal Form component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Form Modal configuration
+
+| Name  |                Type                 | Connectable | Templatable |  Default   | Description       |
+| ----- | :---------------------------------: | :---------: | :---------: | :--------: | ----------------- |
+| label |               string                |    true     |    false    | Open popup | The button label. |
+| color | blue, red, dark, light, green, gray |    false    |    false    |    dark    | The button color. |
+| size  |         xs, sm, md , lg, xl         |    false    |    false    |     sm     | The button size.  |
+
+:::info
+The button label is used as the modal title.
+:::
+
+:::info
+The form modal component has a special parameter called `On Success`. See the button component for more information.
+:::
+
+## Outputs
+
+| Name    |  Type   | Description                      |
+| ------- | :-----: | -------------------------------- |
+| result  |   any   | The result of the runnable.      |
+| loading | boolean | The loading state of the button. |
diff --git a/docs/apps/4_app_configuration_settings/multiselect.mdx b/docs/apps/4_app_configuration_settings/multiselect.mdx
new file mode 100644
index 000000000..573a9f2da
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/multiselect.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Multiselect
+
+The multiselect component allows you to get multiple strings from the user.
+
+![Multiselect API](../../assets/apps/4_app_component_library/multiselect.png.webp)
+
+The following section details Multiselect component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Multiselect configuration
+
+| Name        |  Type  | Connectable | Templatable |    Default    | Description                                 |
+| ----------- | :----: | :---------: | :---------: | :-----------: | ------------------------------------------- |
+| items       | string |    true     |    false    | "Foo" ; "Bar" | The select items.                           |
+| placeholder | string |    true     |    false    | Select items  | The text that will be displayed by default. |
+
+## Outputs
+
+| Name   |  Type  | Description         |
+| ------ | :----: | ------------------- |
+| result | string | The selected items. |
diff --git a/docs/apps/4_app_configuration_settings/number_input.mdx b/docs/apps/4_app_configuration_settings/number_input.mdx
new file mode 100644
index 000000000..6d7d976c2
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/number_input.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Number Input
+
+The number input component allows you to get a number from the user.
+
+![Number Input API](../../assets/apps/4_app_component_library/number-input.png.webp)
+
+The following section details Number Input component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Number Input configuration
+
+| Name          |  Type  | Connectable | Templatable | Default | Description                            |
+| ------------- | :----: | :---------: | :---------: | :-----: | -------------------------------------- |
+| placeholder   | string |    false    |    false    | Type... | The number input placeholder.          |
+| default value | number |    true     |    false    |         | The default value of the number input. |
+
+## Outputs
+
+| Name   |  Type  | Description            |
+| ------ | :----: | ---------------------- |
+| result | number | The number input value |
diff --git a/docs/apps/4_app_configuration_settings/password_input.mdx b/docs/apps/4_app_configuration_settings/password_input.mdx
new file mode 100644
index 000000000..a604b6071
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/password_input.mdx
@@ -0,0 +1,37 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Password Input
+
+The password input component allows you to get a password from the user.
+
+![Password Input API](../../assets/apps/4_app_component_library/password-input.png.webp)
+
+The following section details Password Input component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Password Input configuration
+
+| Name        |  Type  | Connectable | Templatable | Default  | Description                     |
+| ----------- | :----: | :---------: | :---------: | :------: | ------------------------------- |
+| Placeholder | string |    false    |    false    | Password | The password input placeholder. |
+
+## Outputs
+
+| Name   |  Type  | Description               |
+| ------ | :----: | ------------------------- |
+| Result | string | The password input value. |
diff --git a/docs/apps/4_app_configuration_settings/pdf.mdx b/docs/apps/4_app_configuration_settings/pdf.mdx
new file mode 100644
index 000000000..6abcf19fd
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/pdf.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# PDF
+
+The PDF component allows you to display a PDF file.
+
+![PDF API](../../assets/apps/4_app_component_library/pdf_api.png.webp)
+
+The following section details PDF component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## PDF configuration
+
+| Name   |  Type   | Connectable | Templatable |  Default   | Description               |
+| ------ | :-----: | :---------: | :---------: | :--------: | ------------------------- |
+| Source | boolean |    true     |    true     | /dummy.pdf | The PDF file.             |
+| Zoom   | number  |    true     |    true     |    100     | The zoom on the PDF view. |
+
+## Outputs
+
+| Name    |  Type   | Description                             |
+| ------- | :-----: | --------------------------------------- |
+| loading | boolean | The loading state of the PDF component. |
diff --git a/docs/apps/4_app_configuration_settings/pie_chart.mdx b/docs/apps/4_app_configuration_settings/pie_chart.mdx
new file mode 100644
index 000000000..1aa041e39
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/pie_chart.mdx
@@ -0,0 +1,45 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Pie Chart
+
+The Pie Chart component allows you to display a Pie Chart using the [Chart.js](https://www.chartjs.org/) library.
+
+![Pie Chart API](../../assets/apps/4_app_component_library/pie.png.webp)
+
+The following section details Pie Chart component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Pie Chart Input
+
+|  Type  | Connectable | Templatable | Default | Description         |
+| :----: | :---------: | :---------: | :-----: | ------------------- |
+| Object |    true     |    false    |         | The pie chart data. |
+
+## Pie Chart configuration
+
+| Name          |  Type   | Connectable | Templatable | Default | Description                     |
+| ------------- | :-----: | :---------: | :---------: | :-----: | ------------------------------- |
+| theme         | string  |    false    |    false    | Theme1  | The chart theme.                |
+| Doghnut style | boolean |    false    |    false    |  false  | Whether to use a doghnut style. |
+
+## Outputs
+
+| Name    |  Type   | Description                                   |
+| ------- | :-----: | --------------------------------------------- |
+| result  | Object  | The pie chart data.                           |
+| loading | boolean | The loading state of the pie chart component. |
diff --git a/docs/apps/4_app_configuration_settings/plotly.mdx b/docs/apps/4_app_configuration_settings/plotly.mdx
new file mode 100644
index 000000000..3f55426c4
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/plotly.mdx
@@ -0,0 +1,37 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Plotly
+
+The Plotly component allows you to display a Plotly chart.
+
+![Plotly API](../../assets/apps/4_app_component_library/plotly.png.webp)
+
+The following section details Plotly component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Plotly Input
+
+|  Type  | Connectable | Templatable | Default | Description             |
+| :----: | :---------: | :---------: | :-----: | ----------------------- |
+| object |    true     |    false    |         | The Plotly chart config |
+
+## Outputs
+
+| Name   |  Type  | Description            |
+| ------ | :----: | ---------------------- |
+| result | Object | The Plotly chart data. |
diff --git a/docs/apps/4_app_configuration_settings/range.mdx b/docs/apps/4_app_configuration_settings/range.mdx
new file mode 100644
index 000000000..b99633546
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/range.mdx
@@ -0,0 +1,39 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Range
+
+The slider component allows you to get a range of numbers from the user.
+
+![Range API](../../assets/apps/4_app_component_library/range.png.webp)
+
+The following section details Range component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Range configuration
+
+| Name |  Type  | Connectable | Templatable | Default | Description                     |
+| ---- | :----: | :---------: | :---------: | :-----: | ------------------------------- |
+| min  | number |    false    |    false    |    0    | The minimum value of the range. |
+| max  | number |    false    |    false    |   42    | The maximum value of the range. |
+
+## Outputs
+
+| Name     |  Type  | Description             |
+| -------- | :----: | ----------------------- |
+| result 0 | number | The range bottom value. |
+| result 1 | number | The range top value.    |
diff --git a/docs/apps/4_app_configuration_settings/resource_select.mdx b/docs/apps/4_app_configuration_settings/resource_select.mdx
new file mode 100644
index 000000000..322221b81
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/resource_select.mdx
@@ -0,0 +1,40 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Resource Select
+
+The Resource Select component allows you to have users pick [resources](../../core_concepts/3_resources_and_types/index.mdx) from your Windmil workspace to interact with [intergrations](../../integrations/0_integrations_on_windmill.mdx).
+
+![Resource Select](../../assets/apps/4_app_component_library/resource_select.png.webp)
+
+The following section details Resource Select component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Resource Select configuration
+
+| Name        |                               Type                                | Connectable | Templatable | Default | Description                                                     |
+| ----------- | :---------------------------------------------------------------: | :---------: | :---------: | :-----: | --------------------------------------------------------------- |
+| Items Name  |                              string                               |    true     |    false    |  "bar"  | The name of each suggested resource.                            |
+| Items       |  [resource](../../core_concepts/3_resources_and_types/index.mdx)  |    true     |    false    |         | The Windmill resource.                                          |
+| Placeholder | [variable](../../core_concepts/2_variables_and_secrets/index.mdx) |    false    |    false    |         | The variable that will be displayed by default.                 |
+| Full Width  |                              boolean                              |    false    |    false    |  true   | Set the width of the options popup to 100% of the select width. |
+
+## Outputs
+
+| Name   |  Type  | Description                                |
+| ------ | :----: | ------------------------------------------ |
+| result | string | The selected resource (in `$res:` format). |
diff --git a/docs/apps/4_app_configuration_settings/rich_result.mdx b/docs/apps/4_app_configuration_settings/rich_result.mdx
new file mode 100644
index 000000000..efafa4bff
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/rich_result.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Rich Result
+
+The Rich Result component allows you to display the result of a Runnable. It tries to display the result in a human-readable way.
+
+![Rich Result](../../assets/apps/4_app_component_library/rich_result.png.webp)
+
+The following section details Rich Result component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Rich Result configuration
+
+| Name        | Type | Connectable | Templatable |   Default   | Description                         |
+| ----------- | :--: | :---------: | :---------: | :---------: | ----------------------------------- |
+| Data Source |      |    true     |             | {"foo": 42} | The data source to display results. |
+
+## Outputs
+
+| Name    |  Type   | Description                         |
+| ------- | :-----: | ----------------------------------- |
+| result  |         | The result of the runnable.         |
+| loading | boolean | The loading state of the component. |
diff --git a/docs/apps/4_app_configuration_settings/rich_text_editor.mdx b/docs/apps/4_app_configuration_settings/rich_text_editor.mdx
new file mode 100644
index 000000000..c3dcc259f
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/rich_text_editor.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Rich Text Editor
+
+The Rich Text Editor component allows to have to user enter text with a layout, on top of files or videos.
+
+![Rich Text Editor API](../../assets/apps/4_app_component_library/rich_text.gif)
+
+The following section details Rich Text Editor component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Rich Text Editor configuration
+
+| Name          |  Type  | Connectable | Templatable | Default | Description                          |
+| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------------ |
+| Placeholder   | string |    false    |    false    | Type... | The text input placeholder.          |
+| Default value | string |    true     |    false    |         | The default value of the text input. |
+
+## Outputs
+
+| Name   |  Type  | Description                                                                          |
+| ------ | :----: | ------------------------------------------------------------------------------------ |
+| Result | string | The Rich Text Editor input value, in HTML-like syntax within the Quill delta format. |
diff --git a/docs/apps/4_app_configuration_settings/scatter_chart.mdx b/docs/apps/4_app_configuration_settings/scatter_chart.mdx
new file mode 100644
index 000000000..d403938c9
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/scatter_chart.mdx
@@ -0,0 +1,45 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Scatter Chart
+
+The Scatter Chart component allows you to display a Scatter Chart using the [Chart.js](https://www.chartjs.org/) library.
+
+![Scatter Chart API](../../assets/apps/4_app_component_library/scatter.png.webp)
+
+The following section details Scatter Chart component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Scatter Chart Input
+
+|      Type       | Connectable | Templatable | Default | Description             |
+| :-------------: | :---------: | :---------: | :-----: | ----------------------- |
+| `Array<Object>` |    true     |    false    |         | The scatter chart data. |
+
+## Scatter Chart configuration
+
+| Name     |  Type   | Connectable | Templatable | Default | Description                      |
+| -------- | :-----: | :---------: | :---------: | :-----: | -------------------------------- |
+| zoomable | boolean |    false    |    false    |  false  | Whether to use a zoomable style. |
+| panable  | boolean |    false    |    false    |  false  | Whether to use a panable style.  |
+
+## Outputs
+
+| Name    |  Type   | Description                                       |
+| ------- | :-----: | ------------------------------------------------- |
+| result  | Object  | The scatter chart data.                           |
+| loading | boolean | The loading state of the scatter chart component. |
diff --git a/docs/apps/4_app_configuration_settings/select.mdx b/docs/apps/4_app_configuration_settings/select.mdx
new file mode 100644
index 000000000..5a71b6b9a
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/select.mdx
@@ -0,0 +1,40 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Select
+
+The select component allows you to get a string from the user.
+
+![Select API](../../assets/apps/4_app_component_library/select.png.webp)
+
+The following section details Select component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Select configuration
+
+| Name          |  Type   | Connectable | Templatable | Default | Description                     |
+| ------------- | :-----: | :---------: | :---------: | :-----: | ------------------------------- |
+| items         |  Array  |    true     |    false    |         | The select items.               |
+| item key      | string  |    true     |    false    |         | The key of the item to display. |
+| create        | boolean |    false    |    false    |  false  | If users can create values.     |
+| default value | boolean |    true     |    false    |         | The default value of the input. |
+
+## Outputs
+
+| Name   |  Type  | Description        |
+| ------ | :----: | ------------------ |
+| result | string | The selected item. |
diff --git a/docs/apps/4_app_configuration_settings/select_step.mdx b/docs/apps/4_app_configuration_settings/select_step.mdx
new file mode 100644
index 000000000..d3996ddda
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/select_step.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Select Step
+
+The Select Step is standalone tab component that behaves like a select component. It is meant to have the chosen tab to be chosen as input by components or runnables.
+
+![Select Step](../../assets/apps/4_app_component_library/step_select.png.webp)
+
+The following section details Select Step component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Select Step configuration
+
+| Name          |  Type  | Connectable | Templatable |    Default    | Description                                       |
+| ------------- | :----: | :---------: | :---------: | :-----------: | ------------------------------------------------- |
+| Items         | string |    true     |    false    | "Foo" ; "Bar" | The select step items (label and value, in JSON). |
+| Default Value | string |    true     |    false    |               | The default value of the step labels and value.   |
+
+## Outputs
+
+| Name   |  Type  | Description        |
+| ------ | :----: | ------------------ |
+| result | string | The selected step. |
diff --git a/docs/apps/4_app_configuration_settings/select_tab.mdx b/docs/apps/4_app_configuration_settings/select_tab.mdx
new file mode 100644
index 000000000..bfd83f514
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/select_tab.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Select Tab
+
+The Select Tab is standalone tab component that behaves like a select component. It is meant to have the chosen tab to be chosen as input by components or runnables.
+
+![Select Tab](../../assets/apps/4_app_component_library/tab_select.png.webp)
+
+The following section details Select Tab component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Select Tab configuration
+
+| Name          |  Type  | Connectable | Templatable |    Default    | Description                                       |
+| ------------- | :----: | :---------: | :---------: | :-----------: | ------------------------------------------------- |
+| Items         | string |    true     |    false    | "Foo" ; "Bar" | The select tabs items (label and value, in JSON). |
+| Default Value | string |    true     |    false    |               | The default value of the tabs labels and value.   |
+
+## Outputs
+
+| Name   |  Type  | Description       |
+| ------ | :----: | ----------------- |
+| result | string | The selected tab. |
diff --git a/docs/apps/4_app_configuration_settings/sidebar_tabs.mdx b/docs/apps/4_app_configuration_settings/sidebar_tabs.mdx
new file mode 100644
index 000000000..6dd671ea1
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/sidebar_tabs.mdx
@@ -0,0 +1,26 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Sidebar Tabs
+
+The Sidebar Tabs component is basically a Tabs component whose `Tabs Kind` is "Sidebar".
+
+![Sidebar Tabs](../../assets/apps/4_app_component_library/sidebar_tabs.gif)
+The following section details Sidebar Tabs component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## 
diff --git a/docs/apps/4_app_configuration_settings/slider.mdx b/docs/apps/4_app_configuration_settings/slider.mdx
new file mode 100644
index 000000000..3b92cfbfc
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/slider.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Slider
+
+The slider component allows you to get a number from the user.
+
+![Slider API](../../assets/apps/4_app_component_library/slider.png.webp)
+
+The following section details Slider component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Slider configuration
+
+| Name |  Type  | Connectable | Templatable | Default | Description                      |
+| ---- | :----: | :---------: | :---------: | :-----: | -------------------------------- |
+| min  | number |    false    |    false    |    0    | The minimum value of the slider. |
+| max  | number |    false    |    false    |   42    | The maximum value of the slider. |
+
+## Outputs
+
+| Name   |  Type  | Description       |
+| ------ | :----: | ----------------- |
+| result | number | The slider value. |
diff --git a/docs/apps/4_app_configuration_settings/stepper.mdx b/docs/apps/4_app_configuration_settings/stepper.mdx
new file mode 100644
index 000000000..b7581f999
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/stepper.mdx
@@ -0,0 +1,47 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Stepper
+
+The stepper component helps you lay out multi-step apps, with an optional validation function to validate a step.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    id="modal-layout"
+    src="/videos/stepper.mp4"
+    alt="stepper"
+/>
+
+<br/>
+
+If no validation function is defined, the stepper will behave a tabs component where the user can switch between tabs (with `Previous` and `Next` buttons, or directly on the step).
+
+A validation function can be set and won't allow users to go to the next step while the runnable returns an error.
+
+The following section details Stepper component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Outputs
+
+| Name             |            Type            | Description                            |
+| ---------------- | :------------------------: | -------------------------------------- | --- |
+| currentStepIndex |           number           | Number of the step / tab.              |
+| result           |            any             | The result of the runnable.            |
+| loading          |          boolean           | The loading state of the button.       |
+| lastAction       | string: "previous", "next" | The last action performed by the user. | F   |
diff --git a/docs/apps/4_app_configuration_settings/submit_form.mdx b/docs/apps/4_app_configuration_settings/submit_form.mdx
new file mode 100644
index 000000000..a8f8e9980
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/submit_form.mdx
@@ -0,0 +1,51 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Submit Form
+
+The form component allows you to create a form. It has a submit button that triggers a runnable when clicked.
+The runnable parameters are defined:
+
+- **Static**: the parameter is defined in the component configuration.
+- **User input**: the parameter is defined by the user input.
+- **Connected**: the parameter is connected to an output.
+
+Only user inputs are displayed in the form.
+
+![Form API](../../assets/apps/4_app_component_library/form.png.webp)
+
+The following section details Submit Form component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Form configuration
+
+| Name  |                Type                 | Connectable | Templatable | Default | Description       |
+| ----- | :---------------------------------: | :---------: | :---------: | :-----: | ----------------- |
+| label |               string                |    true     |    false    | Submit  | The button label. |
+| color | blue, red, dark, light, green, gray |    false    |    false    |  dark   | The button color. |
+| size  |         xs, sm, md , lg, xl         |    false    |    false    |   sm    | The button size.  |
+
+:::info
+The form component has a special parameter called `On Success`. See the button component for more information.
+:::
+
+## Outputs
+
+| Name    |  Type   | Description                      |
+| ------- | :-----: | -------------------------------- |
+| result  |   any   | The result of the runnable.      |
+| loading | boolean | The loading state of the button. |
diff --git a/docs/apps/4_app_configuration-settings/99_component_template.mdx b/docs/apps/4_app_configuration_settings/table.mdx
similarity index 77%
rename from docs/apps/4_app_configuration-settings/99_component_template.mdx
rename to docs/apps/4_app_configuration_settings/table.mdx
index 2f8fbad9f..032bc529e 100644
--- a/docs/apps/4_app_configuration-settings/99_component_template.mdx
+++ b/docs/apps/4_app_configuration_settings/table.mdx
@@ -1,3 +1,4 @@
+
 import DocCard from '@site/src/components/DocCard';
 
 # Table
@@ -6,21 +7,25 @@ The table component allows you to display a table.
 
 ![Table API](../../assets/apps/4_app_component_library/table.png.webp)
 
+:::tip Guide
+If you are new to Tables, check out our [Introduction guide](../../misc/9_guides/table/index.md).
+:::
+
 The following section details Table component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
 
 <div class="grid grid-cols-2 gap-6 mb-4">
-	<DocCard
-		color="orange"
-		title="App Editor Documentation"
-		description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
-		href="/docs/apps/app_editor"
-	/>
-	<DocCard
-		color="orange"
-		title="Apps Quickstart"
-		description="Learn how to build your first app in a matter of minutes."
-		href="/docs/getting_started/apps_quickstart"
-	/>
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
 </div>
 
 ## Table Input
@@ -57,4 +62,4 @@ Search can be configured in the following ways:
 | loading          | boolean | The loading state of the table component |
 | selectedRow      | Object  | The selected row                         |
 | selectedRowIndex | number  | The selected row index                   |
-| search           | string  | The search query                         |
\ No newline at end of file
+| search           | string  | The search query                         |
diff --git a/docs/apps/4_app_configuration_settings/tabs.mdx b/docs/apps/4_app_configuration_settings/tabs.mdx
new file mode 100644
index 000000000..a73d87f69
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/tabs.mdx
@@ -0,0 +1,45 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Tabs
+
+Tabs components allow you to host other components in several tabs. Each tab is a container.
+Tabs have three display modes:
+
+- `Tabs`: the tabs are displayed horizontally.
+- `Sidebar`: the tabs are displayed vertically.
+- `Invisible on view`: The tabs are not displayed when the app is viewed. They are only displayed in the app editor. This is useful to make multi-page apps, where each page is a tab.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/tabs.mp4"
+    alt="tabs component"
+/>
+<br/>
+
+To add a component to a tabs component, you can either click on `Insert` while you selected the tabs component, or your can move an existing component by cutting it and pasting it in the tabs component.
+
+The following section details Tabs component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Tabs configuration
+
+| Name      |               Type               | Connectable | Templatable | Default | Description                   |
+| --------- | :------------------------------: | :---------: | :---------: | :-----: | ----------------------------- |
+| Tabs Kind | Tabs, Sidebar, Invisible on view |    false    |    false    |  Tabs   | The display mode of the tabs. |
diff --git a/docs/apps/4_app_configuration_settings/text.mdx b/docs/apps/4_app_configuration_settings/text.mdx
new file mode 100644
index 000000000..b56425259
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/text.mdx
@@ -0,0 +1,56 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Text
+
+The text component allows you to display text.
+
+![Text API](../../assets/apps/4_app_component_library/text.png.webp)
+
+The following section details Text component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Text Input
+
+|  Type  | Connectable | Templatable |   Default    | Description          |
+| :----: | :---------: | :---------: | :----------: | -------------------- |
+| string |    true     |    true     | Hello World! | The text to display. |
+
+## Text configuration
+
+| Name        |                      Type                      | Connectable | Templatable | Default | Description                                                     |
+| ----------- | :--------------------------------------------: | :---------: | :---------: | :-----: | --------------------------------------------------------------- |
+| style       | 'title', 'subtitle', 'body', 'label','caption' |    false    |    false    | 'body'  | The text style.                                                 |
+| Extra Style |                     string                     |    false    |    false    |         | Extra style to apply to the text: CSS rules like "color: blue;" |
+
+## Outputs
+
+| Name    |  Type   | Description                              |
+| ------- | :-----: | ---------------------------------------- |
+| result  | string  | The text.                                |
+| loading | boolean | The loading state of the text component. |
+
+## Inline editor
+
+You can directly edit the text by click the `Pen` icon on the app editor. You can also double click on the text to edit it.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/text_editor.mp4"
+/>
diff --git a/docs/apps/4_app_configuration_settings/text_input.mdx b/docs/apps/4_app_configuration_settings/text_input.mdx
new file mode 100644
index 000000000..5e188d5b1
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/text_input.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Text Input
+
+The text input component allows you to get a string from the user.
+
+![Text Input API](../../assets/apps/4_app_component_library/text-input.png.webp)
+
+The following section details Text Input component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Text Input configuration
+
+| Name          |  Type  | Connectable | Templatable | Default | Description                          |
+| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------------ |
+| Placeholder   | string |    false    |    false    | Type... | The text input placeholder.          |
+| Default value | string |    true     |    false    |         | The default value of the text input. |
+
+## Outputs
+
+| Name   |  Type  | Description           |
+| ------ | :----: | --------------------- |
+| Result | string | The text input value. |
diff --git a/docs/apps/4_app_configuration_settings/textarea.mdx b/docs/apps/4_app_configuration_settings/textarea.mdx
new file mode 100644
index 000000000..a9067139d
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/textarea.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Textarea
+
+The textarea component allows you to get a string from the user, with an expandable text area.
+
+![Textarea API](../../assets/apps/4_app_component_library/textarea.gif)
+
+The following section details Textarea component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Textarea configuration
+
+| Name          |  Type  | Connectable | Templatable | Default | Description                          |
+| ------------- | :----: | :---------: | :---------: | :-----: | ------------------------------------ |
+| Placeholder   | string |    false    |    false    | Type... | The text input placeholder.          |
+| Default value | string |    true     |    false    |         | The default value of the text input. |
+
+## Outputs
+
+| Name   |  Type  | Description           |
+| ------ | :----: | --------------------- |
+| Result | string | The text input value. |
diff --git a/docs/apps/4_app_configuration_settings/timeseries.mdx b/docs/apps/4_app_configuration_settings/timeseries.mdx
new file mode 100644
index 000000000..d25002fd8
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/timeseries.mdx
@@ -0,0 +1,46 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Timeseries
+
+The Timeseries component allows you to display a Timeseries using the [Chart.js](https://www.chartjs.org/) library.
+
+![Timeseries API](../../assets/apps/4_app_component_library/timeseries.png.webp)
+
+The following section details Timeseries component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Timeseries Input
+
+|      Type       | Connectable | Templatable | Default | Description          |
+| :-------------: | :---------: | :---------: | :-----: | -------------------- |
+| `Array<Object>` |    true     |    false    |         | The timeseries data. |
+
+## Timeseries configuration
+
+| Name              |  Type   | Connectable | Templatable | Default | Description                         |
+| ----------------- | :-----: | :---------: | :---------: | :-----: | ----------------------------------- |
+| Logarithmic scale | boolean |    false    |    false    |  false  | Whether to use a logarithmic scale. |
+| zoomable          | boolean |    false    |    false    |  false  | Whether to use a zoomable style.    |
+| panable           | boolean |    false    |    false    |  false  | Whether to use a panable style.     |
+
+## Outputs
+
+| Name    |  Type   | Description                                    |
+| ------- | :-----: | ---------------------------------------------- |
+| result  | Object  | The timeseries data.                           |
+| loading | boolean | The loading state of the timeseries component. |
diff --git a/docs/apps/4_app_configuration_settings/toggle.mdx b/docs/apps/4_app_configuration_settings/toggle.mdx
new file mode 100644
index 000000000..04e4f5bd7
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/toggle.mdx
@@ -0,0 +1,38 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Toggle
+
+The toggle component allows you to get a boolean from the user.
+
+![Toggle API](../../assets/apps/4_app_component_library/toggle.png.webp)
+
+The following section details Toggle component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Toggle configuration
+
+| Name          |  Type   | Connectable | Templatable | Default | Description                      |
+| ------------- | :-----: | :---------: | :---------: | :-----: | -------------------------------- |
+| label         | string  |    true     |    false    |  Label  | The toggle label.                |
+| default value | boolean |    true     |    false    |         | The default value of the toggle. |
+
+## Outputs
+
+| Name   |  Type   | Description              |
+| ------ | :-----: | ------------------------ |
+| result | boolean | The state of the toggle. |
diff --git a/docs/apps/4_app_configuration_settings/vega_lite.mdx b/docs/apps/4_app_configuration_settings/vega_lite.mdx
new file mode 100644
index 000000000..292a2f35f
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/vega_lite.mdx
@@ -0,0 +1,44 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Vega Lite
+
+The Vega Lite component allows you to display a Vega Lite chart.
+
+![Vega Lite API](../../assets/apps/4_app_component_library/vega-lite.png.webp)
+
+The following section details Vega Lite component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Vega Lite Input
+
+|  Type  | Connectable | Templatable | Default | Description                |
+| :----: | :---------: | :---------: | :-----: | -------------------------- |
+| object |    true     |    false    |         | The Vega Lite chart config |
+
+## Vega Lite configuration
+
+| Name   |  Type   | Connectable | Templatable | Default | Description                                                               |
+| ------ | :-----: | :---------: | :---------: | :-----: | ------------------------------------------------------------------------- |
+| canvas | boolean |    false    |    false    |  false  | Use the canvas renderer instead of the svg one for more interactive plots |
+
+## Outputs
+
+| Name    |  Type   | Description                              |
+| ------- | :-----: | ---------------------------------------- |
+| result  | Object  | The Vega Lite chart data.                |
+| loading | boolean | The loading state of the Vega Lite chart |
diff --git a/docs/apps/4_app_configuration_settings/vertical_split_panes.mdx b/docs/apps/4_app_configuration_settings/vertical_split_panes.mdx
new file mode 100644
index 000000000..67d60eb15
--- /dev/null
+++ b/docs/apps/4_app_configuration_settings/vertical_split_panes.mdx
@@ -0,0 +1,40 @@
+
+import DocCard from '@site/src/components/DocCard';
+
+# Vertical Split Panes
+
+Container split in x number of panes vertically.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/vertical_split.mp4"
+    alt="vertical split panes"
+/>
+<br/>
+
+To add a component to a vertical split pane, you can either click on `Insert` while you selected the vertical split pane, or your can move an existing component by copy/pasting it.
+
+The following section details Vertical Split Panes component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+        color="orange"
+        title="App Editor Documentation"
+        description="The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings."
+        href="/docs/apps/app_editor"
+    />
+    <DocCard
+        color="orange"
+        title="Apps Quickstart"
+        description="Learn how to build your first app in a matter of minutes."
+        href="/docs/getting_started/apps_quickstart"
+    />
+</div>
+
+## Vertical Split Panes configuration
+
+| Name       |  Type   | Connectable | Templatable | Default | Description                                                               |
+| ---------- | :-----: | :---------: | :---------: | :-----: | ------------------------------------------------------------------------- |
+| No Padding | boolean |    false    |    false    |  false  | Whether you want to add extra space between the component and the border. |
diff --git a/docs/apps/7_app_e-commerce.md b/docs/apps/7_app_e-commerce.md
index ec0e113a3..30dd22717 100644
--- a/docs/apps/7_app_e-commerce.md
+++ b/docs/apps/7_app_e-commerce.md
@@ -16,7 +16,7 @@ We will now use the Windmill app builder to build a simple E-commerce backoffice
 It showcases a variety of features that are available in the Windmill app builder, such as:
 
 - [Runnables](/docs/apps/3_app-runnable-panel.mdx): scripts or flows that are executed on demand.
-- [Components](/docs/apps/4_app_configuration-settings/1_app_component_library.mdx): pre-built, reusable building blocks that encapsulate specific functionalities or design elements.
+- [Components](/docs/apps/4_app_configuration_settings/1_app_component_library.mdx): pre-built, reusable building blocks that encapsulate specific functionalities or design elements.
 
 :::tip
 
@@ -61,9 +61,9 @@ We will structure the app as follows:
 
 ### Products Tab
 
-/docs/apps/app_configuration-settings/app_component_library
+/docs/apps/app_configuration_settings/app_component_library
 
-We will split the product view into two parts, with the [vertical split](/docs/apps/app_configuration-settings/app_component_library#vertical-split-panes). The left part will be a list of products, and the right part will be a form to edit the currently selected product.
+We will split the product view into two parts, with the [vertical split](/docs/apps/app_configuration_settings/app_component_library#vertical-split-panes). The left part will be a list of products, and the right part will be a form to edit the currently selected product.
 
 <video
     className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
diff --git a/docs/compared_to/retool.mdx b/docs/compared_to/retool.mdx
index f30177aad..d232b9e69 100644
--- a/docs/compared_to/retool.mdx
+++ b/docs/compared_to/retool.mdx
@@ -174,7 +174,7 @@ Windmill's ability to quickly add the components that are useful to them.
 For everyting else, it's comparable: you can run on [schedules](../core_concepts/1_scheduling/index.md) or [webhooks](../core_concepts/4_webhooks/index.md),
 [source control](../core_concepts/17_collaboration/index.mdx#git-integration),
 seamlessly interact your apps with [databases](../integrations/postgresql.md),
-[link runnables to components](../apps/3_app-runnable-panel.mdx), give [styling](../apps/4_app_configuration-settings/4_app_styling.mdx) to apps, [resources](../core_concepts/3_resources_and_types/index.mdx) are handled in a similar way.
+[link runnables to components](../apps/3_app-runnable-panel.mdx), give [styling](../apps/4_app_configuration_settings/4_app_styling.mdx) to apps, [resources](../core_concepts/3_resources_and_types/index.mdx) are handled in a similar way.
 
 To conclude, Retool is an excellent engine for building custom applications within a reassuring and defined framework.
 
diff --git a/docs/core_concepts/18_files_binary_data/index.mdx b/docs/core_concepts/18_files_binary_data/index.mdx
index bc66fce09..88dc25d7b 100644
--- a/docs/core_concepts/18_files_binary_data/index.mdx
+++ b/docs/core_concepts/18_files_binary_data/index.mdx
@@ -34,12 +34,12 @@ Base64 encoded strings are used in:
   <DocCard
 		title="File Input Component"
 		description="The file input allows users to drop files into the app."
-		href="/docs/apps/app_configuration-settings/app_component_library#file-input"
+		href="/docs/apps/app_configuration_settings/app_component_library#file-input"
 	/>
   <DocCard
 		title="Download Button"
 		description="The download button component allows you to download a file."
-		href="/docs/apps/app_configuration-settings/app_component_library#download-button"
+		href="/docs/apps/app_configuration_settings/app_component_library#download-button"
 	/>
   <DocCard
 		title="JSON Schema and Parsing"
diff --git a/docs/core_concepts/19_rich_display_rendering/index.md b/docs/core_concepts/19_rich_display_rendering/index.md
index 0e98eca01..195b9b61e 100644
--- a/docs/core_concepts/19_rich_display_rendering/index.md
+++ b/docs/core_concepts/19_rich_display_rendering/index.md
@@ -6,19 +6,19 @@ This feature is useful if you want to display an image, a GIF, a file, or specif
 
 If the result is an object/dict with a single key (except for `approval`, which needs 3), you can leverage the following rich results:
 
-| Type      | Description                                                 | Example (Deno)                                                                                                       |
+| Type      | Description                                                 | Example                                                                                                       |
 | --------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| json      | Render the value as a JSON                                  | `return { 'json': { 'a': 1 } }`                                                                                      |
-| table-col | Render the value as a column in a table                     | `return { 'table-col': { 'foo': [42, 8], 'bar': [38, 12] }}`                                                         |
-| table-row | Render the value as a row in a table                        | `return { 'table-row': [ 'foo', 'bar' ]}`                                                                            |
-| html      | Render the value as HTML                                    | `return { 'html': '<div>...</div>' }`                                                                                |
-| png       | Render the value as a PNG image                             | `return { 'png': { 'content': encode(image) } }` or `return { 'png': encode(image) }`                                |
-| file      | Render an option to download the file                       | `return { 'file': { 'content': encode(file), 'filename': 'data.txt' } }`                                             |
-| jpeg      | Render the value as a JPEG image                            | `return { 'jpeg': { 'content': encode(image) } }` or `return { 'jpeg': encode(image) }`                              |
-| gif       | Render the value as a GIF image                             | `return { 'gif': { 'content': encode(image) } }` or `return { 'gif': encode(image) }`                                |
-| error     | Render the value as an error message                        | `return { 'error': { 'name': '418', 'message': "I'm a teapot" }}`                                                    |
-| approval  | Render an approval and buttons to Resume or Cancel the step | `return { 'resume': 'https://example.com', 'cancel': 'https://example.com', 'approvalPage': 'https://example.com' }` |
-| svg       | Render the value as an SVG image                            | `return { 'svg': '<svg>...</svg>' }`                                                                                 |
+| json      | Render the value as a JSON                                  | `return { "json": { "a": 1 } }`                                                                                      |
+| table-col | Render the value as a column in a table                     | `return { "table-col": { "foo": [42, 8], "bar": [38, 12] }}`                                                         |
+| table-row | Render the value as a row in a table                        | `return { "table-row": [ "foo", "bar" ]}`                                                                            |
+| html      | Render the value as HTML                                    | `return { "html": "<div>...</div>" }`                                                                                |
+| png       | Render the value as a PNG image                             | `return { "png": { "content": encode(image) } }` or `return { "png": encode(image) }`                                |
+| file      | Render an option to download the file                       | `return { "file": { "content": encode(file), "filename": "data.txt" } }`                                             |
+| jpeg      | Render the value as a JPEG image                            | `return { "jpeg": { "content": encode(image) } }` or `return { "jpeg": encode(image) }`                              |
+| gif       | Render the value as a GIF image                             | `return { "gif": { "content": encode(image) } }` or `return { "gif": encode(image) }`                                |
+| error     | Render the value as an error message                        | `return { "error": { "name": "418", "message": "I'm a teapot" }}`                                                    |
+| approval  | Render an approval and buttons to Resume or Cancel the step | `return { "resume": "https://example.com", "cancel": "https://example.com", "approvalPage": "https://example.com" }` |
+| svg       | Render the value as an SVG image                            | `return { "svg": "<svg>...</svg>" }`                                                                                 |
 
 **Regarding the tables**: If the result is a list whose first element is also a list, it will display the result as a table. If the result is a dict/object where every value is an array, it will also be displayed as a table, with the key as the column name.
 
diff --git a/docs/core_concepts/6_auto_generated_uis/index.md b/docs/core_concepts/6_auto_generated_uis/index.md
index c8c38cef8..0eedab733 100644
--- a/docs/core_concepts/6_auto_generated_uis/index.md
+++ b/docs/core_concepts/6_auto_generated_uis/index.md
@@ -68,4 +68,4 @@ The apps will be permissioned on behalf of the [admin/author](../16_roles_and_pe
 
 <br/>
 
-At last, this is an easy way to get an app for your scripts and flows to be customized with [Styling](../../apps/4_app_configuration-settings/4_app_styling.mdx) and [Components](../../apps/4_app_configuration-settings/1_app_component_library.mdx).
\ No newline at end of file
+At last, this is an easy way to get an app for your scripts and flows to be customized with [Styling](../../apps/4_app_configuration_settings/4_app_styling.mdx) and [Components](../../apps/4_app_configuration_settings/1_app_component_library.mdx).
\ No newline at end of file
diff --git a/docs/core_concepts/index.mdx b/docs/core_concepts/index.mdx
index fdd54ff06..5f06fcb10 100644
--- a/docs/core_concepts/index.mdx
+++ b/docs/core_concepts/index.mdx
@@ -305,7 +305,7 @@ All details on Apps can be found in the [Apps section](../apps/0_app_editor/inde
 	<DocCard
 		title="List of Components"
 		description="Use prebuilt interface elements to display data, and manipulate or interact with it based on user actions."
-		href="/docs/apps/app_configuration-settings/app_component_library"
+		href="/docs/apps/app_configuration_settings/app_component_library"
 		color="orange"
 	/>
 	<DocCard
@@ -317,13 +317,13 @@ All details on Apps can be found in the [Apps section](../apps/0_app_editor/inde
 	<DocCard
 		title="Group of Components"
 		description="Components can be grouped within containers."
-		href="/docs/apps/app_configuration-settings/components_groups"
+		href="/docs/apps/app_configuration_settings/components_groups"
 		color="orange"
 	/>
 	<DocCard
 		title="Styling"
 		description="Customize the styling of your App according to your own graphical standards."
-		href="/docs/apps/app_configuration-settings/app_styling"
+		href="/docs/apps/app_configuration_settings/app_styling"
 		color="orange"
 	/>
 	<DocCard
diff --git a/docs/getting_started/7_apps_quickstart/index.mdx b/docs/getting_started/7_apps_quickstart/index.mdx
index bed22d3e9..9bf2ea7d7 100644
--- a/docs/getting_started/7_apps_quickstart/index.mdx
+++ b/docs/getting_started/7_apps_quickstart/index.mdx
@@ -89,13 +89,13 @@ If you have numerous components you might need to **Anchor** some of them to hav
 
 <br />
 
-Check out all of our components at [this page](../../apps/4_app_configuration-settings/1_app_component_library.mdx) or (better) directly from the app editor. Know that **we can quickly add components to the library**, just [reach out to us](../../misc/6_getting_help/index.mdx).
+Check out all of our components at [this page](../../apps/4_app_configuration_settings/1_app_component_library.mdx) or (better) directly from the app editor. Know that **we can quickly add components to the library**, just [reach out to us](../../misc/6_getting_help/index.mdx).
 
 <div class="grid grid-cols-2 gap-6 mb-4">
 	<DocCard
 		title="Component Library"
 		description="List of all available components."
-		href="/docs/apps/app_configuration-settings/app_component_library"
+		href="/docs/apps/app_configuration_settings/app_component_library"
 		color="orange"
 	/>
 </div>
@@ -143,11 +143,11 @@ At any time, have a look at your app's **Inputs** associated with each component
 
 ### Tailor the look of your app
 
-At the **[component level](../../apps/4_app_configuration-settings/4_app_styling.mdx#component-level)**, on the `Settings` tab, configure the style of each component (color, size, label, etc.) either directly in the boxes or using Custom CSS (on the Component Settings - Styling tab).
+At the **[component level](../../apps/4_app_configuration_settings/4_app_styling.mdx#component-level)**, on the `Settings` tab, configure the style of each component (color, size, label, etc.) either directly in the boxes or using Custom CSS (on the Component Settings - Styling tab).
 
 ![Cutomize components](./customize_component.png.webp)
 
-At the **[app level](../../apps/4_app_configuration-settings/4_app_styling.mdx#global-styling)**, you can give a harmonized style to your app with CSS. On the `Global Styling` tab, give details in boxes or in JSON, for the whole app and per class of component.
+At the **[app level](../../apps/4_app_configuration_settings/4_app_styling.mdx#global-styling)**, you can give a harmonized style to your app with CSS. On the `Global Styling` tab, give details in boxes or in JSON, for the whole app and per class of component.
 
 ![App styling](./customize_app.png.webp)
 
@@ -155,7 +155,7 @@ At the **[app level](../../apps/4_app_configuration-settings/4_app_styling.mdx#g
 	<DocCard
 		title="Styling"
 		description="Customize the styling of your App according to your own graphical standards."
-		href="/docs/apps/app_configuration-settings/app_styling"
+		href="/docs/apps/app_configuration_settings/app_styling"
 		color="orange"
 	/>
 </div>
diff --git a/docs/misc/9_guides/aggrid_table/index.md b/docs/misc/9_guides/aggrid_table/index.md
index 8cba128d9..ea4f1ca41 100644
--- a/docs/misc/9_guides/aggrid_table/index.md
+++ b/docs/misc/9_guides/aggrid_table/index.md
@@ -21,7 +21,7 @@ If you need the enterprise version of AgGrid, please
 ## AgGrid vs Table component
 
 In Windmill there are 2 table components: one simply called
-[Table](../../../apps/4_app_configuration-settings/1_app_component_library.mdx#table)
+[Table](../table/index.md)
 and AgGrid.
 
 The Table component is for most usecases. It takes an array of objects as
@@ -34,7 +34,7 @@ But if you want the user to be able to sort the table, edit a value inplace, adj
 :::info Transformer
 If you want to do basic sorting, or edit the column header name from the script
 you can also use a Transformer script. See the
-[documentation](../../../apps/4_app_configuration-settings/2_app_runnable_triggers.md#transformer)
+[documentation](../../../apps/4_app_configuration_settings/2_app_runnable_triggers.md#transformer)
 for more information. 
 :::
 
diff --git a/docs/misc/9_guides/table/index.md b/docs/misc/9_guides/table/index.md
index 853866387..4e12d215c 100644
--- a/docs/misc/9_guides/table/index.md
+++ b/docs/misc/9_guides/table/index.md
@@ -2,6 +2,8 @@
 
 This is a introduction on how to use the Table component in Windmill.
 
+![Table API](../../../assets/apps/4_app_component_library/table.png.webp)
+
 ## AgGrid vs Table component
 
 In Windmill there are 2 table components: one simply called Table and
@@ -162,7 +164,7 @@ Please see the [Examples](#examples) for working code.
 
 If you want to do basic sorting, or edit the column header name from the script
 you can use a Transformer script. See the
-[documentation](../../../apps/4_app_configuration-settings/2_app_runnable_triggers.md#transformer)
+[documentation](../../../apps/4_app_configuration_settings/2_app_runnable_triggers.md#transformer)
 for more information.
 
 :::
diff --git a/sidebars.js b/sidebars.js
index 48b49ccb5..604c13772 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -140,24 +140,76 @@ const sidebars = {
 						'apps/canvas',
 						'apps/outputs',
 						'apps/app-runnable-panel',
+						'apps/app_configuration_settings/app_styling',
+						'apps/app_debugging',
+						'apps/app_deployment',
+						'apps/public_apps',
 						{
 							type: 'category',
-							label: 'Component Library & Configuration',
+							label: 'Component Library',
 							link: {
 								type: 'doc',
-								id: 'apps/app_configuration-settings/index'
+								id: 'apps/app_configuration_settings/app_component_library',
 							},
 							items: [
-								'apps/app_configuration-settings/app_component_library',
-								'apps/app_configuration-settings/app_runnable_triggers',
-								'apps/app_configuration-settings/app_component_configuration',
-								'apps/app_configuration-settings/components_groups',
+								'apps/app_configuration_settings/aggrid_table',
+								'apps/app_configuration_settings/bar_line_chart',
+								'apps/app_configuration_settings/button',
+								'apps/app_configuration_settings/chartjs',
+								'apps/app_configuration_settings/conditional_tabs',
+								'apps/app_configuration_settings/container',
+								'apps/app_configuration_settings/currency_input',
+								'apps/app_configuration_settings/date_input',
+								'apps/app_configuration_settings/divider_x',
+								'apps/app_configuration_settings/divider_y',
+								'apps/app_configuration_settings/download_button',
+								'apps/app_configuration_settings/drawer',
+								'apps/app_configuration_settings/email_input',
+								'apps/app_configuration_settings/file_input',
+								'apps/app_configuration_settings/flow_status',
+								'apps/app_configuration_settings/form_input',
+								'apps/app_configuration_settings/horizontal_split_panes',
+								'apps/app_configuration_settings/html',
+								'apps/app_configuration_settings/icon',
+								'apps/app_configuration_settings/image',
+								'apps/app_configuration_settings/invisible_tabs',
+								'apps/app_configuration_settings/list',
+								'apps/app_configuration_settings/log_display',
+								'apps/app_configuration_settings/map',
+								'apps/app_configuration_settings/modal_form',
+								'apps/app_configuration_settings/modal',
+								'apps/app_configuration_settings/multiselect',
+								'apps/app_configuration_settings/number_input',
+								'apps/app_configuration_settings/password_input',
+								'apps/app_configuration_settings/pdf',
+								'apps/app_configuration_settings/pie_chart',
+								'apps/app_configuration_settings/plotly',
+								'apps/app_configuration_settings/range',
+								'apps/app_configuration_settings/resource_select',
+								'apps/app_configuration_settings/rich_result',
+								'apps/app_configuration_settings/rich_text_editor',
+								'apps/app_configuration_settings/scatter_chart',
+								'apps/app_configuration_settings/select_step',
+								'apps/app_configuration_settings/select_tab',
+								'apps/app_configuration_settings/select',
+								'apps/app_configuration_settings/sidebar_tabs',
+								'apps/app_configuration_settings/slider',
+								'apps/app_configuration_settings/stepper',
+								'apps/app_configuration_settings/submit_form',
+								'apps/app_configuration_settings/table',
+								'apps/app_configuration_settings/tabs',
+								'apps/app_configuration_settings/text_input',
+								'apps/app_configuration_settings/text',
+								'apps/app_configuration_settings/textarea',
+								'apps/app_configuration_settings/timeseries',
+								'apps/app_configuration_settings/toggle',
+								'apps/app_configuration_settings/vega_lite',
+								'apps/app_configuration_settings/vertical_split_panes'
 							]
 						},
-						'apps/app_configuration-settings/app_styling',
-						'apps/app_debugging',
-						'apps/app_deployment',
-						'apps/public_apps',
+						'apps/app_configuration_settings/app_runnable_triggers',
+						'apps/app_configuration_settings/app_component_configuration',
+						'apps/app_configuration_settings/components_groups',
 						'apps/app_e-commerce'
 					],
 
@@ -554,7 +606,10 @@ const sidebars = {
 						type: 'doc',
 						id: 'misc/guides/index'
 					},
-					items: ['misc/guides/aggrid_table/index']
+					items: [
+						'misc/guides/aggrid_table/index',
+						'misc/guides/table/index'
+					]
 				},
 				'misc/note_of_intent/index',
 				'misc/share_on_hub/index',
diff --git a/src/landing/AppSection.tsx b/src/landing/AppSection.tsx
index 892ba2397..16dce3f3b 100644
--- a/src/landing/AppSection.tsx
+++ b/src/landing/AppSection.tsx
@@ -38,7 +38,7 @@ const tabs = [
 				title: 'Building blocks',
 				description: 'Quickly start building complex apps using our 50 built-in components.',
 				icon: Puzzle,
-				caption: <div>Quickly start building complex apps using our <a href="/docs/apps/app_configuration-settings/app_component_library" target="_blank">50 built-in components</a>.</div>,
+				caption: <div>Quickly start building complex apps using our <a href="/docs/apps/app_configuration_settings/app_component_library" target="_blank">50 built-in components</a>.</div>,
 				video: {
 					videoSrc: '/videos/components.mp4',
 					altText: 'Building blocks',
@@ -98,7 +98,7 @@ const tabs = [
 				title: 'Build BI dashboards with charts',
 				description: 'Build complex apps from atomic components.',
 				icon: BarChart,
-				caption: <div>Windmill embeds several <a href="/docs/apps/app_configuration-settings/app_component_library#charts" target="_blank">charts components</a> with unlimited customization possibilities.</div>,
+				caption: <div>Windmill embeds several <a href="/docs/apps/app_configuration_settings/app_component_library#charts" target="_blank">charts components</a> with unlimited customization possibilities.</div>,
 				video: {
 					videoSrc: '/videos/bi-charts.mp4',
 					altText: 'BI charts',
diff --git a/src/landing/EntrepriseFeatures.tsx b/src/landing/EntrepriseFeatures.tsx
index dd0c0b5d2..f4dcac1b4 100644
--- a/src/landing/EntrepriseFeatures.tsx
+++ b/src/landing/EntrepriseFeatures.tsx
@@ -53,7 +53,7 @@ export default function EnterpriseFeatures() {
 					Enterprise-ready platform
 				</h1>
 				<span className="text-lg text-gray-600 max-w-3xl dark:text-gray-200">
-					Deploy faster, build invincible and reliable workflows in an enterprise-grade platform.
+					Leverage enterprise features, 24/7 support, guidance and advanced infrastructure.
 				</span>
 				<div className="mx-auto w-full">
 					<dl className="grid grid-cols-1 lg:grid-cols-3 border border-gray-50 dark:border-gray-900">