diff --git a/packages/tools/lib/hbs2ui5/index.js b/packages/tools/lib/hbs2ui5/index.js
index c432dc280bfa..c37ef9066ff9 100644
--- a/packages/tools/lib/hbs2ui5/index.js
+++ b/packages/tools/lib/hbs2ui5/index.js
@@ -3,6 +3,8 @@ const getopts = require('getopts');
 const hbs2lit = require('../hbs2lit');
 const path = require('path');
 const litRenderer = require('./RenderTemplates/LitRenderer');
+const recursiveReadDir = require("recursive-readdir");
+const mkdirp = require('mkdirp');
 
 const args = getopts(process.argv.slice(2), {
 	alias: {
@@ -23,19 +25,29 @@ const onError = (place) => {
 const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
 
 const processFile = (file, outputDir) => {
-
 	const litCode = hbs2lit(file);
-
+	const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
 	const componentNameMatcher = /(\w+)(\.hbs)/gim;
 	const componentName = componentNameMatcher.exec(file)[1];
-	writeRenderers(outputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
+
+	writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
+};
+
+const composeAbsoluteOutputDir = (file, outputDir) => {
+	// (1) Extract the dir structure from the source file path - "src/lvl1/lvl2/MyCompBadge.hbs"
+	// - remove the filename - "src/lvl1/lvl2"
+	// - remove the leading dir - "lvl1/lvl2"
+	const fileDir = file.split(path.sep).slice(1, -1).join(path.sep);
+
+	// (2) Compose full output dir - "dist/generated/templates/lvl1/lvl2"
+	return `${outputDir}${path.sep}${fileDir}`; 
 };
 
 const wrapDirectory = (directory, outputDir) => {
 	directory = path.normalize(directory);
 	outputDir = path.normalize(outputDir);
 
-	fs.readdir(directory, (err, files) => {
+	recursiveReadDir(directory, (err, files) => {
 
 		if (err) {
 			onError('directory');
@@ -43,7 +55,7 @@ const wrapDirectory = (directory, outputDir) => {
 
 		files.forEach(fileName => {
 			if (isHandlebars(fileName)) {
-				processFile(path.join(directory, fileName), outputDir);
+				processFile(fileName, outputDir);
 			}
 		});
 	})
@@ -51,6 +63,10 @@ const wrapDirectory = (directory, outputDir) => {
 
 const writeRenderers = (outputDir, controlName, fileContent) => {
 	try {
+		if (!fs.existsSync(outputDir)) {
+			mkdirp.sync(outputDir);
+		}
+
 		const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.js`;
 
 		// strip DOS line endings because the break the source maps
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 3fcc9e6d5721..d161e5a754c8 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -59,6 +59,7 @@
     "postcss-import": "^12.0.1",
     "properties-reader": "^0.3.1",
     "puppeteer": "^1.11.0",
+    "recursive-readdir": "^2.2.2",
     "rimraf": "^2.6.2",
     "rollup": "^1.1.2",
     "rollup-plugin-babel": "^4.0.3",
diff --git a/yarn.lock b/yarn.lock
index fd04cc6542ef..2257b4d078cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7370,6 +7370,13 @@ readline-sync@^1.4.7:
   resolved "https://registry.yarnpkg.com/readline-sync/-/readline-sync-1.4.10.tgz#41df7fbb4b6312d673011594145705bf56d8873b"
   integrity sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw==
 
+recursive-readdir@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
+  integrity sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==
+  dependencies:
+    minimatch "3.0.4"
+
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"