diff --git a/packages/playground/index.html b/packages/playground/index.html
index b253aff90e..804dac7919 100644
--- a/packages/playground/index.html
+++ b/packages/playground/index.html
@@ -4,12 +4,60 @@
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="@popperjs/core" content="2.11.8" />
+		<meta name="@rooks/use-mutation-observer" content="4.11.2" />
 		<meta name="@talend/locales-design-system" content="7.15.1" />
 		<meta name="@talend/locales-tui-components" content="11.4.5" />
 		<meta name="@talend/locales-tui-containers" content="9.1.3" />
 		<meta name="@talend/locales-tui-faceted-search" content="11.3.0" />
 		<meta name="@talend/locales-tui-forms" content="10.2.4" />
 		<meta name="@talend/icons" content="7.7.1" />
+		<meta name="ace-builds" content="1.32.6" />
+		<meta name="ajv" content="6.12.6" />
+		<meta name="ally.js" content="1.4.1" />
+		<meta name="axios" content="0.21.4" />
+		<meta name="classnames" content="2.3.1" />
+		<meta name="core-js-bundle" content="3.36.0" />
+		<meta name="d3" content="7.8.5" />
+		<meta name="focus-outline-manager" content="1.0.2" />
+		<meta name="history" content="5.3.0" />
+		<meta name="hoist-non-react-statics" content="3.3.2" />
+		<meta name="i18next" content="23.10.0" />
+		<meta name="immutable" content="4.3.5" />
+		<meta name="json-logic-js" content="2.0.2" />
+		<meta name="lodash" content="4.17.21" />
+		<meta name="platform" content="1.3.3" />
+		<meta name="preact" content="10.19.6" />
+		<meta name="prop-types" content="15.8.1" />
+		<meta name="react-ace" content="10.1.0" />
+		<meta name="react-autowhatever" content="10.2.0" />
+		<meta name="react-debounce-input" content="3.3.0" />
+		<meta name="react-dom" content="18.2.0" />
+		<meta name="react-draggable" content="4.4.6" />
+		<meta name="react-hook-form" content="7.50.1" />
+		<meta name="react-i18next" content="13.5.0" />
+		<meta name="react-is" content="17.0.2" />
+		<meta name="react-jsonschema-form" content="0.51.0" />
+		<meta name="react-lifecycles-compat" content="3.0.4" />
+		<meta name="react-popper" content="2.3.0" />
+		<meta name="react-redux" content="7.2.9" />
+		<meta name="react-router-dom" content="6.3.0" />
+		<meta name="react-router" content="6.3.0" />
+		<meta name="react-side-effect" content="2.1.2" />
+		<meta name="react-transition-group" content="4.4.5" />
+		<meta name="react-virtualized" content="9.22.5" />
+		<meta name="react" content="18.2.0" />
+		<meta name="recharts" content="2.12.1" />
+		<meta name="redux-saga" content="1.3.0" />
+		<meta name="redux-thunk" content="2.4.2" />
+		<meta name="redux" content="4.2.1" />
+		<meta name="regenerator-runtime" content="0.14.1" />
+		<meta name="rx" content="4.1.0" />
+		<meta name="rxjs" content="6.6.7" />
+		<meta name="scroll-smooth" content="1.1.1" />
+		<meta name="simplebar" content="6.2.5" />
+		<meta name="styled-components" content="5.3.11" />
+		<meta name="uuid" content="8.3.2" />
 		<script type="text/javascript">
 			window.basename = '/';
 			var process = { browser: true, env: { NODE_ENV: 'development' } };
diff --git a/packages/playground/mockVite/kit.js b/packages/playground/mockVite/kit.js
new file mode 100644
index 0000000000..f387c33d22
--- /dev/null
+++ b/packages/playground/mockVite/kit.js
@@ -0,0 +1,162 @@
+import http from 'https';
+import url from 'url';
+
+function getTriggerInfo(req) {
+	return {
+		...req.query,
+		args: req.body,
+	};
+}
+
+function basicAuth(args) {
+	let comment;
+	let status;
+	if (!args['basicAuth.url']) {
+		comment = 'no url';
+		status = 'KO';
+	} else if (!args['basicAuth.password']) {
+		comment = 'no password';
+		status = 'KO';
+	} else if (!args['basicAuth.username']) {
+		comment = 'no username';
+		status = 'KO';
+	}
+
+	if (!status) {
+		if (args['basicAuth.username'] === args['basicAuth.password']) {
+			comment = 'Yes username === password';
+			status = 'OK';
+		} else {
+			status = 'KO';
+			comment = 'invalid credentials';
+		}
+	}
+	return { comment, status };
+}
+
+function urlValidation({ arg0 }) {
+	if (arg0) {
+		const parsed = url.parse(arg0);
+		if (!parsed.protocol) {
+			return { comment: `no protocol: ${arg0}`, status: 'KO' };
+		}
+		if (!parsed.hostname) {
+			return { comment: `no hostname: ${arg0}`, status: 'KO' };
+		}
+	}
+	return { status: 'OK' };
+}
+
+function guessTableSchema() {
+	return { status: 'OK' };
+}
+
+function reloadForm({ id }) {
+	if (!id) {
+		return add.ui;
+	}
+	return basic;
+}
+
+function suggestionForDemo() {
+	return {
+		cacheable: true,
+		items: [
+			{ id: 'clafoutis', label: 'Clafoutis aux poires et aux fruits' },
+			{ id: 'conchiglioni-au-thon', label: 'Conchiglioni au thon' },
+			{ id: 'coquillettes-crevettes', label: 'coquillettes aux crevettes' },
+			{ id: 'crumble', label: 'Crumble a la danette' },
+			{ id: 'pomme-savane', label: 'Pomme savane' },
+			{ id: 'tarte-au-citron', label: 'Tarte  au citron' },
+		],
+	};
+}
+
+const cache = {};
+
+function suggestionBig() {
+	if (cache.photos) {
+		return cache.photos;
+	}
+	return res => {
+		let body = '';
+		function onData(chunk) {
+			console.log('onData', chunk);
+			body += chunk;
+		}
+		function onEnd() {
+			console.log('onEnd', body);
+			cache.photos = {
+				cacheable: true,
+				items: JSON.parse(body).map(item => ({ id: item.id.toString(), label: item.title })),
+			};
+			res.json(cache.photos);
+		}
+		function onResponse(resp) {
+			console.log(`Got response: ${resp.statusCode}`);
+			resp.on('data', onData);
+			resp.on('end', onEnd);
+		}
+		function onError(e) {
+			console.error(e.message);
+		}
+		http.get('https://jsonplaceholder.typicode.com/photos', onResponse).on('error', onError);
+	};
+}
+
+function updateProperties({ type }) {
+	switch (type) {
+		case 'clafoutis':
+		case 'pomme-savane':
+		case 'crumble':
+		case 'tarte-au-citron':
+			return { data: 'yes !' };
+		case 'coquillettes-crevettes':
+			return { data: 'this is not a dessert !' };
+		default:
+			return { data: 'don t know that' };
+	}
+}
+
+function giveMeFive() {
+	return res => {
+		res.status(500).json({
+			timestamp: 1548781374412,
+			status: 500,
+			error: 'Internal Server Error',
+			exception: 'javax.ws.rs.ClientErrorException',
+			message: 'An internal server error occurs',
+			path: '/proxy/v1/action/execute/dataset',
+		});
+	};
+}
+
+const TRIGGERS = {
+	validation: {
+		urlValidation,
+	},
+	healthcheck: {
+		basicAuth,
+	},
+	schema: {
+		guessTableSchema,
+	},
+	reloadForm: {
+		'builtin::root::reloadFromId': reloadForm,
+	},
+	suggestions: {
+		suggestionForDemo,
+		suggestionBig,
+	},
+	update: {
+		updateProperties,
+	},
+	error: {
+		giveMeFive,
+	},
+};
+
+export function trigger(req) {
+	const info = getTriggerInfo(req);
+	return TRIGGERS[info.type][info.action](info.args);
+}
diff --git a/packages/playground/mockVite/mock/header-bar/products-list.json b/packages/playground/mockVite/mock/header-bar/products-list.json
new file mode 100644
index 0000000000..0037a33d19
--- /dev/null
+++ b/packages/playground/mockVite/mock/header-bar/products-list.json
@@ -0,0 +1,26 @@
+[
+  {
+    "id": "TMC",
+    "name": "Management Console",
+    "url": "https://www.talend.com/products#tmc",
+    "icon": "tmc"
+  },
+  {
+    "id": "TDP",
+    "name": "Data Preparation",
+    "url": "https://www.talend.com/products#tdp",
+    "icon": "tdp"
+  },
+  {
+    "id": "TIPAAS",
+    "name": "TIPAAS",
+    "url": "https://www.talend.com/products#tipaas",
+    "icon": "tic"
+  },
+  {
+    "id": "TDC",
+    "name": "Catalog",
+    "url": "https://www.talend.com/products#tdc",
+    "icon": "tdc"
+  }
+]
diff --git a/packages/playground/mockVite/mock/kit/example.json b/packages/playground/mockVite/mock/kit/example.json
new file mode 100644
index 0000000000..cec63cee94
--- /dev/null
+++ b/packages/playground/mockVite/mock/kit/example.json
@@ -0,0 +1,343 @@
+{
+  "metadata": {
+    "children": [],
+    "id": "example",
+    "label": "Form example",
+    "name": "example",
+    "version": 0
+  },
+  "ui": {
+    "jsonSchema": {
+      "properties": {
+        "array": {
+          "type": "object",
+          "properties": {
+            "strings": {
+              "type": "array",
+              "items": {
+                "type": "string",
+                "enum": ["red", "green", "blue"]
+              }
+            },
+            "keyvalue": {
+              "default": [
+                {
+                  "value": "value",
+                  "key": "key"
+                }
+              ],
+              "title": "key value",
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "value": {
+                    "title": "Value",
+                    "type": "string",
+                    "default": ""
+                  },
+                  "key": {
+                    "title": "Key",
+                    "type": "string",
+                    "default": ""
+                  }
+                }
+              }
+            }
+          }
+        },
+        "triggers": {
+          "login": {
+            "type": "string"
+          },
+          "password": {
+            "type": "string"
+          },
+          "url": {
+            "pattern": "^(http://|https://).*",
+            "title": "URL",
+            "type": "string"
+          }
+        },
+        "example": {
+          "properties": {
+            "code": {
+              "type": "string"
+            },
+            "string": {
+              "type": "string"
+            },
+            "datalist": {
+              "type": "string"
+            },
+            "datalistRestricted": {
+              "type": "string"
+            },
+            "multiSelect": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "tags": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          },
+          "type": "object",
+          "required": ["url", "login", "password"]
+        }
+      },
+      "title": "example",
+      "type": "object"
+    },
+    "properties": {
+      "example": {
+        "datalist": "clafoutis",
+        "$datalist_name": "Clafoutis aux poires et aux fruits",
+        "tags": ["clafoutis"],
+        "$tags_name": ["Clafoutis aux poires et aux fruits"],
+        "multiSelect": ["1"],
+        "$multiSelect_name": ["accusamus beatae ad facilis cum similique qui sunt"]
+      },
+      "triggers": {
+        "login": "login",
+        "password": "login",
+        "url": "http://www.example.com"
+      },
+      "array": {
+        "strings": ["red"],
+        "keyvalue": [{ "value": "value", "key": "key" }]
+      }
+    },
+    "uiSchema": [
+      {
+        "title": "Example",
+        "widget": "tabs",
+        "items": [
+          {
+            "title": "Advanced Widget",
+            "widget": "fieldset",
+            "items": [
+              {
+                "key": "example.code",
+                "title": "Code",
+                "widget": "code",
+                "options": {
+                  "language": "python",
+                  "height": "300px"
+                }
+              },
+              {
+                "key": "example.datalist",
+                "title": "Datalist",
+                "titleMap": [],
+                "triggers": [
+                  {
+                    "action": "suggestionForDemo",
+                    "family": "remote",
+                    "type": "suggestions",
+                    "onEvent": "focus",
+                    "parameters": [
+                      {
+                        "path": "example.datalist",
+                        "key": "id"
+                      }
+                    ]
+                  }
+                ],
+                "widget": "datalist"
+              },
+              {
+                "key": "example.datalistRestricted",
+                "restricted": true,
+                "title": "Datalist (restricted)",
+                "titleMap": [],
+                "triggers": [
+                  {
+                    "action": "suggestionForDemo",
+                    "family": "remote",
+                    "type": "suggestions",
+                    "onEvent": "focus",
+                    "parameters": [
+                      {
+                        "path": "example.datalistRestricted",
+                        "key": "id"
+                      }
+                    ]
+                  }
+                ],
+                "widget": "datalist"
+              },
+              {
+                "key": "example.tags",
+                "title": "multiSelectTag",
+                "titleMap": [],
+                "triggers": [
+                  {
+                    "action": "suggestionForDemo",
+                    "family": "remote",
+                    "type": "suggestions",
+                    "onEvent": "focus",
+                    "parameters": [
+                      {
+                        "path": "example.tags",
+                        "key": "id"
+                      }
+                    ]
+                  }
+                ],
+                "widget": "multiSelectTag"
+              },
+              {
+                "key": "example.multiSelect",
+                "title": "multiSelect",
+                "titleMap": [],
+                "triggers": [
+                  {
+                    "action": "suggestionBig",
+                    "family": "remote",
+                    "type": "suggestions",
+                    "onEvent": "focus",
+                    "parameters": [
+                      {
+                        "path": "example.multiSelect",
+                        "key": "id"
+                      }
+                    ]
+                  }
+                ],
+                "widget": "multiSelect"
+              }
+            ]
+          },
+          {
+            "title": "Triggers",
+            "widget": "fieldset",
+            "items": [
+              {
+                "widget": "button",
+                "key": "example.neededToDisplayTheError",
+                "type": "button",
+                "title": "Give me HTTP five",
+                "triggers": [
+                  {
+                    "action": "giveMeFive",
+                    "family": "test",
+                    "options": [],
+                    "parameters": [
+                      {
+                        "key": "type",
+                        "path": "example.type"
+                      }
+                    ],
+                    "type": "error"
+                  }
+                ]
+              },
+              {
+                "key": "triggers.url",
+                "placeholder": "url",
+                "widget": "text"
+              },
+              {
+                "key": "triggers.login",
+                "placeholder": "login",
+                "widget": "text"
+              },
+              {
+                "key": "triggers.password",
+                "placeholder": "password",
+                "type": "password",
+                "widget": "text"
+              },
+              {
+                "key": "my.bad.i.need.a.key",
+                "title": "Validate auth",
+                "triggers": [
+                  {
+                    "action": "basicAuth",
+                    "family": "Example",
+                    "parameters": [
+                      {
+                        "key": "basicAuth.username",
+                        "path": "example.login"
+                      },
+                      {
+                        "key": "basicAuth.password",
+                        "path": "example.password"
+                      },
+                      {
+                        "key": "basicAuth.url",
+                        "path": "example.url"
+                      }
+                    ],
+                    "options": ["triggers.url", "triggers.password", "triggers.login"],
+                    "type": "healthcheck"
+                  }
+                ],
+                "widget": "button"
+              }
+            ]
+          },
+          {
+            "title": "Arrays",
+            "widget": "fieldset",
+            "items": [
+              {
+                "key": "array.strings",
+                "title": "Strings",
+                "widget": "array",
+                "items": [
+                  {
+                    "key": "array.strings[]",
+                    "widget": "select",
+                    "titleMap": [
+                      { "name": "red", "value": "red" },
+                      { "name": "green", "value": "green" },
+                      { "name": "blue", "value": "blue" }
+                    ]
+                  }
+                ]
+              },
+              {
+                "placeholder": "key value",
+                "key": "array.keyvalue",
+                "itemWidget": "collapsibleFieldset",
+                "itemTitle": "Column",
+                "itemManaged": true,
+                "items": [
+                  {
+                    "key": "array.keyvalue[]",
+                    "items": [
+                      {
+                        "widget": "columns",
+                        "items": [
+                          {
+                            "placeholder": "key",
+                            "widget": "text",
+                            "title": "Key",
+                            "key": "array.keyvalue[].key",
+                            "required": true
+                          },
+                          {
+                            "placeholder": "value",
+                            "widget": "text",
+                            "title": "Value",
+                            "key": "array.keyvalue[].value"
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/packages/playground/mockVite/mock/kit/index.js b/packages/playground/mockVite/mock/kit/index.js
new file mode 100644
index 0000000000..39d543a44b
--- /dev/null
+++ b/packages/playground/mockVite/mock/kit/index.js
@@ -0,0 +1,8 @@
+/* eslint-disable global-require */
+import example from './example.json';
+import validation from './validation.json';
+
+export default {
+	example,
+	validation,
+};
diff --git a/packages/playground/mockVite/mock/kit/validation.json b/packages/playground/mockVite/mock/kit/validation.json
new file mode 100644
index 0000000000..9b5bac4748
--- /dev/null
+++ b/packages/playground/mockVite/mock/kit/validation.json
@@ -0,0 +1,118 @@
+{
+  "metadata": {
+    "children": [],
+    "id": "desert",
+    "label": "Desert",
+    "name": "desert",
+    "version": 0
+  },
+  "ui": {
+    "jsonSchema": {
+      "properties": {
+        "configuration": {
+          "properties": {
+            "solrDataset": {
+              "properties": {
+                "schema": {
+                  "items": {
+                    "title": "schema",
+                    "type": "string"
+                  },
+                  "title": "schema",
+                  "type": "array"
+                },
+                "solrUrl": {
+                  "properties": {
+                    "password": {
+                      "title": "password",
+                      "type": "string"
+                    },
+                    "login": {
+                      "title": "login",
+                      "type": "string"
+                    },
+                    "url": {
+                      "pattern": "^(http://|https://).*",
+                      "title": "URL",
+                      "type": "string"
+                    }
+                  },
+                  "required": ["url"],
+                  "title": "solrUrl",
+                  "type": "object"
+                }
+              },
+              "required": ["core"],
+              "title": "solrDataset",
+              "type": "object"
+            }
+          },
+          "title": "configuration",
+          "type": "object"
+        }
+      },
+      "required": [],
+      "title": "Input",
+      "type": "object"
+    },
+    "properties": {},
+    "uiSchema": [
+      {
+        "items": [
+          {
+            "key": "configuration.solrDataset.solrUrl.url",
+            "placeholder": "url",
+            "required": true,
+            "title": "URL",
+            "widget": "text"
+          },
+          {
+            "key": "configuration.solrDataset.solrUrl.login",
+            "placeholder": "login",
+            "required": false,
+            "title": "login",
+            "widget": "text"
+          },
+          {
+            "key": "configuration.solrDataset.solrUrl.password",
+            "placeholder": "password",
+            "required": false,
+            "title": "password",
+            "type": "password",
+            "widget": "text"
+          },
+          {
+            "key": "button_healthcheck_configuration.solrDataset.solrUrl",
+            "title": "Validate Datastore",
+            "triggers": [
+              {
+                "action": "basicAuth",
+                "family": "Solr",
+                "parameters": [
+                  {
+                    "key": "basicAuth.username",
+                    "path": "configuration.solrDataset.solrUrl.login"
+                  },
+                  {
+                    "key": "basicAuth.password",
+                    "path": "configuration.solrDataset.solrUrl.password"
+                  },
+                  {
+                    "key": "basicAuth.url",
+                    "path": "configuration.solrDataset.solrUrl.url"
+                  }
+                ],
+                "type": "healthcheck"
+              }
+            ],
+            "widget": "button"
+          }
+        ],
+        "key": "configuration.solrDataset.solrUrl",
+        "placeholder": "solrUrl",
+        "required": false,
+        "title": "solrUrl"
+      }
+    ]
+  }
+}
diff --git a/packages/playground/mockVite/server.js b/packages/playground/mockVite/server.js
new file mode 100644
index 0000000000..296d6d8c97
--- /dev/null
+++ b/packages/playground/mockVite/server.js
@@ -0,0 +1,66 @@
+import fs from 'fs';
+import path from 'path';
+
+import { trigger } from './kit';
+import forms from './mock/kit';
+
+const API_MOCK_ENDPOINT = '/api/mock';
+export default [
+	{
+		url: '/api/v1/forms',
+		method: 'post',
+		response: ({ body }) => {
+			return {
+				code: 200,
+				data: body,
+			};
+		},
+	},
+	{
+		url: '/api/v1/forms/:formId', // ":formId" est un placeholder pour le paramètre
+		method: 'get',
+		response: ({ query, params }) => {
+			console.log('query', query);
+			console.log('params', params);
+			if (!query || !query.formId) {
+				return { code: 404, message: 'Form not found' };
+			}
+			const formData = forms[query.formId];
+			if (!formData) {
+				return { code: 404, message: 'Form not found' };
+			}
+			return formData;
+		},
+	},
+
+	{
+		url: '/api/v1/application/action',
+		method: 'post',
+		response: ({ body, response }) => {
+			const result = trigger({ body });
+			if (typeof result === 'function') {
+				result(response);
+				return null;
+			}
+			return result;
+		},
+	},
+	{
+		url: `${API_MOCK_ENDPOINT}/:path*`,
+		method: 'get',
+		response: ({ query }) => {
+			const urlPath = `/${query.path.join('/')}`;
+			const mockFilePath = path.resolve(__dirname, `./mock/${urlPath}.json`);
+			try {
+				const content = fs.readFileSync(mockFilePath, 'utf-8');
+				return JSON.parse(content);
+			} catch (error) {
+				console.error(`Unable to load mock file "${mockFilePath}" due to:`, error);
+				return {
+					code: 400,
+					data: 'Bad Request',
+				};
+			}
+		},
+	},
+];
diff --git a/packages/playground/package.json b/packages/playground/package.json
index d9017520fb..cc0b0ebd9d 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -39,8 +39,10 @@
     "esbuild-plugin-react-virtualized": "^1.0.4",
     "express": "^4.18.2",
     "i18next-http-backend": "^1.4.5",
+    "mockjs": "^1.1.0",
     "sass": "^1.71.1",
     "vite": "^5.2.8",
+    "vite-plugin-mock": "^3.0.1",
     "webpack": "^5.90.3"
   },
   "dependencies": {
diff --git a/packages/playground/src/app/components/ComponentFormSandbox.jsx b/packages/playground/src/app/components/ComponentFormSandbox.jsx
index d524f0e023..291152fd6f 100644
--- a/packages/playground/src/app/components/ComponentFormSandbox.jsx
+++ b/packages/playground/src/app/components/ComponentFormSandbox.jsx
@@ -11,11 +11,11 @@ import HeaderBar from '@talend/react-containers/lib/HeaderBar';
 import SidePanel from '@talend/react-containers/lib/SidePanel';
 import UIForm from '@talend/react-forms';
 
+import example from '../../../mockBackend/mock/kit/example.json';
+
 // test new behavior on non css module files
 import './ComponentFormSandbox.scss';
 
-const example = require('../../../mockBackend/mock/kit/example.json');
-
 const { isComponentFormDirty } = ComponentForm.selectors;
 const { setComponentFormDirtyState } = ComponentForm.actions;
 
diff --git a/packages/playground/vite.config.js b/packages/playground/vite.config.js
index a9cd955665..c320dfcf03 100644
--- a/packages/playground/vite.config.js
+++ b/packages/playground/vite.config.js
@@ -1,13 +1,19 @@
 import react from '@vitejs/plugin-react';
 import fixReactVirtualized from 'esbuild-plugin-react-virtualized';
+import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { defineConfig } from 'vite';
+import { viteMockServe } from 'vite-plugin-mock';
 
 // https://vitejs.dev/config/
 export default defineConfig({
 	plugins: [
 		react(),
+		viteMockServe({
+			mockPath: 'mockVite',
+			localEnabled: true,
+		}),
 		{
 			name: 'configure-static-files',
 			configureServer(server) {