diff --git a/Frontend/src/assets/sampleHtml.html b/Frontend/src/assets/sampleHtml.html
new file mode 100644
index 0000000..a3c6a41
--- /dev/null
+++ b/Frontend/src/assets/sampleHtml.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example Page</title>
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>That's paragraph</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/Frontend/src/components/common/InsertTemplateComponent.vue b/Frontend/src/components/common/InsertTemplateComponent.vue
index d80c240..6548764 100644
--- a/Frontend/src/components/common/InsertTemplateComponent.vue
+++ b/Frontend/src/components/common/InsertTemplateComponent.vue
@@ -4,7 +4,7 @@ import sampleXML from "@/assets/sampleXml.xml?raw"
 import sampleXSLT from "@/assets/sampleXslt.xml?raw"
 import sampleXSD from "@/assets/sampleXsd.xml?raw"
 import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
-
+import sampleHTML from "@assets/sampleHtml.html?raw"
 
 const props = defineProps(
     {
@@ -32,7 +32,9 @@ function setDefault() {
         case "xquery":
             emit(emitName, sampleXQuery)
             break;
-        
+        case "html":
+            emit(emitName,sampleHTML);
+            break;
         default:
             emit(emitName, sampleXML)
             break;
diff --git a/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue b/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
new file mode 100644
index 0000000..059217e
--- /dev/null
+++ b/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const props = defineProps(
+    {
+        formatType: {type:String,required:true},
+        code: {type:String,required:true},
+    }
+)
+
+const emit = defineEmits([
+    'update:result'
+])
+
+function process(){
+
+}
+
+</script>
+
+<template>
+<button class="tool-button" @click="process()">{{ formatType }}</button>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/router/index.ts b/Frontend/src/router/index.ts
index 99858a0..a4af1bd 100644
--- a/Frontend/src/router/index.ts
+++ b/Frontend/src/router/index.ts
@@ -5,6 +5,7 @@ const restMock = import("@views/RestMockView.vue")
 
 const jsonFormatter = import("@views/JsonFormatterView.vue")
 const xmlFormatter = import("@views/XmlFormatterView.vue")
+const HtmlFormatterView = import("@views/HtmlFormatterView.vue")
 
 const xsltTool = import("@views/XSLTView.vue")
 const xsdTool = import("@views/XSDView.vue")
@@ -27,6 +28,11 @@ const routes = [
     name: 'jsonFormatter',
     component: () => jsonFormatter
   },
+  {
+    path: '/format/html',
+    name: 'htmlFormatter',
+    component: () => HtmlFormatterView
+  },
   {
     path: '/xml/xpath',
     name: 'xpath',
diff --git a/Frontend/src/views/HtmlFormatterView.vue b/Frontend/src/views/HtmlFormatterView.vue
new file mode 100644
index 0000000..4627f8f
--- /dev/null
+++ b/Frontend/src/views/HtmlFormatterView.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
+import { ref } from 'vue';
+
+
+const html = ref('');
+
+function clear() {
+    html.value = '';
+}
+
+function setTextFieldValue(data: string) {
+    html.value = data
+}
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col w-full h-full gap-4">
+        <div id="toolbar" class="flex flex-col gap-4 items-center lg:flex-row place-content-between">
+            <span class="dark:text-slate-100">HTML Formatter</span>
+            <div class="flex flex-wrap gap-2 justify-center">
+                <InsertTemplateComponent stylized-name="HTML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
+                <button class="tool-button" @click="clear()">Clear</button>
+            </div>
+        </div>
+        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />
+    </div>
+</template>
\ No newline at end of file
