diff --git a/src/components/Form.vue b/src/components/Form.vue
index 90152d8cafdd82291af3533c1a61d75cff1f1f6b..68c8662723e362420e1866c9361d2b1c6f7443bf 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+
 const emit = defineEmits(["playLottie", "pauseLottie"]);
 const vorname = defineModel("vorname");
 const nachname = defineModel("nachname");
 const funktionZeileEins = defineModel("funktionZeileEins");
 const funktionZeileZwei = defineModel("funktionZeileZwei");
 const BBEcke = defineModel("BBEcke");
+import jsonDraft from "../assets/job.json";
 
 function startAnimation() {
   emit("playLottie", true);
@@ -15,6 +17,36 @@ function pauseAnimation() {
   emit("pauseLottie", true);
   emit("playLottie", false);
 }
+
+function writeJson() {
+  // nützlich, um den Datenpfad vom src im template oder output in Actions zu ändern, wenn wir das machen wollen
+  // wir können ein Benutzer fragen, ob sie ihr Neutzername eingeben können und das output einfach zu seiner Downloads Ordner schicken. 
+  if (window.navigator.userAgent.indexOf("Windows") != -1) {
+    console.log("The user is running Windows");
+  } else if (window.navigator.userAgent.indexOf("Mac OS") != -1) {
+    console.log("The user is running Mac OS");
+  } else if (window.navigator.userAgent.indexOf("Linux") != -1) {
+    console.log("The user is running Linux");
+  } else {
+    console.log("The user's operating system could not be determined");
+  }
+
+  jsonDraft.template.composition = "BB" + BBEcke.value;
+  jsonDraft.assets[0].value = String(vorname.value);
+  jsonDraft.assets[1].value = String(nachname.value);
+  jsonDraft.assets[2].value = String(funktionZeileEins.value);
+  jsonDraft.assets[3].value = String(funktionZeileZwei.value);
+
+  download(JSON.stringify(jsonDraft), "Bauchbinde_" + nachname.value + ".json", "text/plain");
+}
+
+function download(content: string, fileName: string, contentType: string) {
+  const a = document.createElement("a");
+  const file = new Blob([content], { type: contentType });
+  a.href = URL.createObjectURL(file);
+  a.download = fileName;
+  a.click();
+}
 </script>
 
 <template>
@@ -52,6 +84,11 @@ function pauseAnimation() {
           Animation Pausieren
         </button>
       </div>
+      <div class="row">
+        <button class="jsonGenerate-btn" @click="writeJson">
+          Animation erzeugen
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -105,6 +142,19 @@ function pauseAnimation() {
   border: 1px solid #e31818;
 }
 
+.jsonGenerate-btn {
+  color: white;
+  font-size: 16px;
+  background-color: #266ca3;
+  font-weight: bold;
+  float: right;
+}
+
+.jsonGenerate-btn:hover {
+  background-color: white;
+  color: #266ca3;
+  border: 1px solid #266ca3;
+}
 .inputField {
   width: 98%;
 }