diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
deleted file mode 100644
index 70ffe2b..0000000
--- a/.github/workflows/deploy-pages.yml
+++ /dev/null
@@ -1,63 +0,0 @@
-name: Deploy static content to Pages
-
-on:
-  push:
-    branches: [$default-branch]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '>=18'
-
-      - name: Defining environment variables
-        run: |
-          echo "VITE_SERVER_URL=https://server.json.ms" > .env
-          echo "VITE_DEMO_PREVIEW_URL=https://demo.json.ms" >> .env
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Build project
-        run: yarn build-only
-
-      - name: Copy index.html to 404.html
-        run: cp ./dist/index.html ./dist/404.html
-
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./dist
-
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
diff --git a/package.json b/package.json
index 26e499c..78af4ee 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@json.ms/www",
   "private": true,
   "type": "module",
-  "version": "1.2.18",
+  "version": "1.2.19",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",
diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index f287ab8..51af7a5 100644
--- a/src/components/ActionBar.vue
+++ b/src/components/ActionBar.vue
@@ -4,7 +4,7 @@ import {useStructure} from '@/composables/structure';
 import {useLayout} from '@/composables/layout';
 import {useGlobalStore} from '@/stores/global';
 import {computed} from "vue";
-import {useTypings} from "@/composables/typings";
+import {useSyncing} from "@/composables/syncing";
 import {useModelStore} from "@/stores/model";
 import TriggerMenu from "@/components/TriggerMenu.vue";
 import type {IStructure, IStructureData} from "@/interfaces";
@@ -45,7 +45,7 @@ const onSetAsDefaultValues = () => {
 }
 
 const onSyncWithLocalOnly = () => {
-  useTypings().syncToFolder(modelStore.structure, 'typescript', ['data']);
+  useSyncing().syncToFolder(modelStore.structure, ['data']);
   userDataSaved.value = true;
   setTimeout(() => userDataSaved.value = false, 1000);
 }
diff --git a/src/components/FileFieldItem.vue b/src/components/FileFieldItem.vue
index ee5dcb5..1137021 100644
--- a/src/components/FileFieldItem.vue
+++ b/src/components/FileFieldItem.vue
@@ -6,6 +6,7 @@ import {useDisplay} from "vuetify";
 import {useGlobalStore} from "@/stores/global";
 import ImgTag from "@/components/ImgTag.vue";
 import VideoPlayer from "@/components/VideoPlayer.vue";
+import {blobFileList} from "@/composables/syncing";
 
 const value = defineModel<any>({ required: true });
 const {
@@ -40,12 +41,15 @@ const thumbnailSize = (file: IFile): { width: number, height: number } => {
   };
 }
 const isImage = (file: IFile): boolean => {
-  return file.meta.type.startsWith('image/');
+  return file.meta.type?.startsWith('image/') || false;
 }
 const isVideo = (file: IFile): boolean => {
-  return file.meta.type.startsWith('video/');
+  return file.meta.type?.startsWith('video/') || false;
 }
 const src = computed((): string => {
+  if (file.path && blobFileList[file.path]) {
+    return blobFileList[file.path];
+  }
   if (file.path && (file.path.startsWith('http://') || file.path.startsWith('https://'))) {
     return file.path;
   }
@@ -60,7 +64,7 @@ const onDownloadFile = (file: IFile) => {
     .then(blob => {
       const link = document.createElement('a');
       link.href = URL.createObjectURL(blob);
-      link.download = file.meta.originalFileName;
+      link.download = file.meta.originalFileName || 'unknown';
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
@@ -155,12 +159,11 @@ const onRemoveFile = (file: IFile) => {
                 v-bind="props"
                 :disabled="disabled"
                 :size="smAndDown ? 'small' : 'default'"
-                color="error"
                 variant="text"
                 icon
                 @click="() => onRemoveFile(file)"
               >
-                <v-icon icon="mdi-trash-can-outline" />
+                <v-icon icon="mdi-close" />
               </v-btn>
             </template>
           </v-tooltip>
diff --git a/src/components/FileManager.vue b/src/components/FileManager.vue
index e3ab295..8b05516 100644
--- a/src/components/FileManager.vue
+++ b/src/components/FileManager.vue
@@ -7,12 +7,15 @@ import ImgTag from '@/components/ImgTag.vue';
 import VideoPlayer from '@/components/VideoPlayer.vue';
 import {downloadFilesAsZip, getFileIcon, phpStringSizeToBytes} from '@/utils';
 import ModalDialog from '@/components/ModalDialog.vue';
+import {isFolderSynced, useSyncing, blobFileList} from "@/composables/syncing";
 
 const globalStore = useGlobalStore();
+const syncing = useSyncing();
 const structure = defineModel<IStructure>({ required: true });
-const { selected = [], serverSettings, canUpload = false, canDelete = false, canSelect = false, canDownload = false } = defineProps<{
+const { selected = [], serverSettings, canUpload = false, canAddToLocal = false, canDelete = false, canSelect = false, canDownload = false } = defineProps<{
   selected?: IFile[],
   canUpload?: boolean,
+  canAddToLocal?: boolean,
   canDelete?: boolean,
   canSelect?: boolean,
   canDownload?: boolean,
@@ -105,68 +108,116 @@ const onFileClick = (file: IFile) => {
 }
 
 const load = () => {
-  if (structure.value.endpoint) {
-    loading.value = true;
-    return Services.get(structure.value.server_url + '/file/list/' + structure.value.hash, {
+  loading.value = true;
+  Promise.all([
+    isFolderSynced(structure.value) ? syncing.getFiles(structure.value) : [],
+    structure.value.endpoint ? Services.get(structure.value.server_url + '/file/list/' + structure.value.hash, {
       'Content-Type': 'application/json',
       'X-Jms-Api-Key': structure.value.server_secret,
-    })
-      .then(response => files.value = response)
-      .then(() => {
-        selectedFiles.value = [];
-        selected.forEach(selectedFile => {
-          const file = files.value.find(file => file.path === selectedFile.path);
-          if (file) {
-            selectedFiles.value.push(file);
+    }) : []
+  ]).then(([syncResponse, endpointResponse]) => {
+    files.value = [];
+    syncResponse.forEach(item => {
+      if (!['data.json', 'structure.json', 'structure.yml', 'default.ts', 'index.ts', 'typings.ts', 'settings.json'].includes(item.path)) {
+        files.value.push({
+          path: item.path,
+          meta: {
+            type: item.file.type,
+            width: item.width,
+            height: item.height,
+            size: item.file.size,
+            timestamp: item.file.lastModified / 1000,
+            originalFileName: item.file.name,
           }
-        })
-      })
-      .catch(globalStore.catchError)
-      .finally(() => loading.value = false);
-  }
+        });
+      }
+    });
+
+    endpointResponse.forEach((item: IFile) => {
+      files.value.push(item);
+    });
+
+    selectedFiles.value = [];
+    selected.forEach(selectedFile => {
+      const file = files.value.find(file => file.path === selectedFile.path);
+      if (file) {
+        selectedFiles.value.push(file);
+      }
+    })
+  })
+    .catch(globalStore.catchError)
+    .finally(() => loading.value = false);
 }
 
-const promptUpload = () => {
+const promptUpload = (type: 'remote' | 'local' | null = null) => {
   const fileInput = document.createElement('input');
   fileInput.type = 'file';
   fileInput.multiple = true;
   if (globalStore.fileManager.accept) {
     fileInput.accept = globalStore.fileManager.accept;
   }
+  if (type === null && canAddToLocal) {
+    type = 'local';
+  }
+  if (type === null && canUpload) {
+    type = 'remote';
+  }
   fileInput.addEventListener('change', function() {
-    if (fileInput.files && fileInput.files.length > 0) {
-      upload(fileInput.files);
+    if (fileInput.files && fileInput.files.length > 0 && type) {
+      upload(fileInput.files, type);
     }
   });
   fileInput.click();
 }
 
-const upload = async (fileList: FileList) => {
+const upload = async (fileList: FileList, type: 'remote' | 'local') => {
   uploading.value = true;
   uploadProgress.value = 0;
   const promises = [];
-  for (let i = 0; i < fileList.length; i++) {
-    const file = fileList[i];
-    if (file.size > phpStringSizeToBytes(serverSettings.uploadMaxSize)) {
-      globalStore.catchError(new Error(
-        'This file is exceeding the maximum size of ' + serverSettings.uploadMaxSize + ' defined by the server.'
-      ));
+  if (type === 'remote') {
+    for (let i = 0; i < fileList.length; i++) {
+      const file = fileList[i];
+      if (file.size > phpStringSizeToBytes(serverSettings.uploadMaxSize)) {
+        globalStore.catchError(new Error(
+          'This file is exceeding the maximum size of ' + serverSettings.uploadMaxSize + ' defined by the server.'
+        ));
+      }
     }
   }
   for (let i = 0; i < fileList.length; i++) {
     const file = fileList[i];
-    promises.push(
-      Services.upload(structure.value.server_url + '/file/upload/' + structure.value.hash, file, progress => uploadProgress.value = progress, {
-        'X-Jms-Api-Key': structure.value.server_secret,
-      })
-      .then(response => {
-        if (!files.value.find(item => item.path === response.internalPath)) {
-          files.value.push({
-            'path': response.internalPath,
-            'meta': response.meta,
-          })
-        }
+    if (type === 'remote') {
+      promises.push(
+        Services.upload(structure.value.server_url + '/file/upload/' + structure.value.hash, file, progress => uploadProgress.value = progress, {
+          'X-Jms-Api-Key': structure.value.server_secret,
+        })
+        .then(response => {
+          if (!files.value.find(item => item.path === response.internalPath)) {
+            files.value.push({
+              'path': response.internalPath,
+              'meta': response.meta,
+            })
+          }
+        }))
+    } else if (type === 'local') {
+      const folder = 'files';
+      promises.push(syncing.addFile(structure.value, file, folder).then(async () => {
+        const path = folder + '/' + file.name;
+        const metadata = await syncing.getFileMetadata(file, path);
+        syncing.loadBlob(file, path)
+        files.value.push({
+          path,
+          meta: {
+            type: file.type,
+            width: metadata.width,
+            height: metadata.height,
+            size: file.size,
+            timestamp: file.lastModified / 1000,
+            originalFileName: file.name,
+          }
+        });
       }))
+    }
   }
   return Promise.all(promises)
     .catch(globalStore.catchError)
@@ -187,23 +238,33 @@ const remove = () => {
       const promises = [];
       for (let i = 0; i < selectedFiles.value.length; i++) {
         const file = selectedFiles.value[i];
-        promises.push(
-          Services.delete(structure.value.server_url + '/file/delete/' + structure.value.hash + '/' + file.path, {
-            'X-Jms-Api-Key': structure.value.server_secret,
-          })
-            .then(() => {
-              selectedFiles.value = selectedFiles.value.filter(item => item.path !== file.path);
-              files.value = files.value.filter(item => item.path !== file.path);
+        const removeCallback = () => {
+          selectedFiles.value = selectedFiles.value.filter(item => item.path !== file.path);
+          files.value = files.value.filter(item => item.path !== file.path);
+        }
+        if (file.path && blobFileList[file.path]) {
+          promises.push(
+            syncing.removeFile(structure.value, file.path)
+              .then(removeCallback)
+          );
+        } else {
+          promises.push(
+            Services.delete(structure.value.server_url + '/file/delete/' + structure.value.hash + '/' + file.path, {
+              'X-Jms-Api-Key': structure.value.server_secret,
             })
-        );
+              .then(removeCallback)
+          );
+        }
       }
       return Promise.all(promises)
         .catch(err => {
           reject();
           globalStore.catchError(err);
         })
-        .finally(resolve)
-        .finally(() => deleting.value = false);
+        .finally(() => {
+          resolve();
+          deleting.value = false;
+        })
     })
   });
 }
@@ -220,7 +281,7 @@ const select = () => {
 const download = () => {
   downloading.value = true;
   nextTick(() => {
-    downloadFilesAsZip(selectedFiles.value.map(item => serverSettings.publicUrl + item.path), false, 'jsonms-file-download.zip', globalStore.userSettings.data.editorTabSize);
+    downloadFilesAsZip(selectedFiles.value.map(item => (item.path && blobFileList[item.path]) || (serverSettings.publicUrl + item.path)), false, 'jsonms-file-download.zip', globalStore.userSettings.data.editorTabSize);
     downloading.value = false;
   })
 }
@@ -334,7 +395,7 @@ watch(() => globalStore.fileManager.visible, () => {
       @dragover.prevent.stop="onDragEnter"
       @dragleave.prevent.stop="onDragLeave"
     >
-      <div v-if="loading || filteredFiles.length === 0 || !structure.endpoint" class="d-flex align-center justify-center text-center" style="height: 33dvh">
+      <div v-if="loading || filteredFiles.length === 0" class="d-flex align-center justify-center text-center" style="height: 33dvh">
         <v-progress-circular
           v-if="loading"
           size="96"
@@ -349,7 +410,13 @@ watch(() => globalStore.fileManager.visible, () => {
           flat
         >
           <v-empty-state
-            v-if="structure.endpoint"
+            v-if="!isFolderSynced(structure) && !structure.endpoint"
+            icon="mdi-help-network-outline"
+            title="No endpoint or syncing detected"
+            text="Files cannot be loaded without a synced local directory or a properly configured endpoint. Please check your project's settings in advanced mode."
+          />
+          <v-empty-state
+            v-else-if="structure.endpoint || isFolderSynced(structure)"
             icon="mdi-file-hidden"
             title="Empty"
             text="No files available yet."
@@ -389,12 +456,12 @@ watch(() => globalStore.fileManager.visible, () => {
               <div class="bg-blue-grey-lighten-4">
                 <ImgTag
                   v-if="item.meta.type?.startsWith('image')"
-                  :src="serverSettings.publicUrl + item.path"
+                  :src="blobFileList[item.path || 'unknown'] || (serverSettings.publicUrl + item.path)"
                   :aspect-ratio="(item.meta.width || 1) / (item.meta.height || 1)"
                 />
                 <VideoPlayer
                   v-else-if="item.meta.type?.startsWith('video')"
-                  :src="serverSettings.publicUrl + item.path"
+                  :src="blobFileList[item.path || 'unknown'] || (serverSettings.publicUrl + item.path)"
                   :aspect-ratio="(item.meta.width || 1) / (item.meta.height || 1)"
                 />
                 <v-sheet v-else>
@@ -440,6 +507,17 @@ watch(() => globalStore.fileManager.visible, () => {
       </div>
     </v-card-text>
     <v-card-actions>
+      <v-btn
+        v-if="canAddToLocal"
+        :loading="uploading"
+        :disabled="uploading"
+        :color="uploading ? undefined : 'secondary'"
+        prepend-icon="mdi-upload"
+        text="Add to local"
+        variant="outlined"
+        class="px-3"
+        @click="() => promptUpload('local')"
+      />
       <v-btn
         v-if="canUpload"
         :loading="uploading"
@@ -449,7 +527,7 @@ watch(() => globalStore.fileManager.visible, () => {
         text="Upload"
         variant="outlined"
         class="px-3"
-        @click="promptUpload"
+        @click="() => promptUpload('remote')"
       />
       <v-menu location="top">
         <template #activator="{ props }">
diff --git a/src/components/JSONms.vue b/src/components/JSONms.vue
index f78117a..cff5a0a 100644
--- a/src/components/JSONms.vue
+++ b/src/components/JSONms.vue
@@ -16,7 +16,6 @@ import {useUserData} from '@/composables/user-data';
 import {type RouteLocationNormalizedGeneric, useRoute} from 'vue-router';
 import router from '@/router';
 import {useStructure} from '@/composables/structure';
-import {useTypings} from '@/composables/typings';
 import {useLayout} from '@/composables/layout';
 import {useShortcut} from '@/composables/shortcut';
 import {deepToRaw, getStructure} from '@/utils';
@@ -26,6 +25,7 @@ import Docs from '@/components/Docs.vue';
 import FileManager from '@/components/FileManager.vue';
 import {useModelStore} from '@/stores/model';
 import structureMd from "../../docs/structure.md";
+import {useSyncing} from "@/composables/syncing";
 
 // Model & Props
 const structure = defineModel<IStructure>({ required: true });
@@ -47,7 +47,7 @@ const dataEditor = ref<InstanceType<typeof DataEditor> | null>();
 const { serverSettings, structureParsedData, structureStates, structureHasSettingsError, getAvailableSection, deleteStructure, getAvailableLocale, structureHasSection, structureHasLocale, saveStructure, canSaveStructure, canDeleteStructure, resetStructure } = useStructure();
 const { fetchUserData, canSave, saveUserData, downloading, userDataLoaded, userDataLoading, setUserData } = useUserData();
 const { sendMessageToIframe } = useIframe();
-const { syncFromFolder, autoAskToSyncFolder, syncToFolder, unSyncFolder, stopWatchSnapshotDirectory, watchSnapshotDirectory, isFolderSynced } = useTypings();
+const { isFolderSynced, syncFromFolder, autoAskToSyncFolder, syncToFolder, unSyncFolder, stopWatchSnapshotDirectory, watchSnapshotDirectory } = useSyncing();
 
 globalStore.initUserSettings();
 
@@ -156,7 +156,7 @@ const onSaveStructure = () => {
     modelStore.structure.content = modelStore.temporaryContent || modelStore.structure.content;
     saveStructure().then(() => {
       bottomSheetData.value = { text: 'Structure saved!', color: 'success', icon: 'mdi-check' };
-      syncToFolder(modelStore.structure, 'typescript', ['structure', 'default', 'typings', 'settings', 'index']);
+      syncToFolder(modelStore.structure, ['structure', 'default', 'typings', 'settings', 'index']);
       const newModel = modelStore.structure;
       globalStore.addStructure(newModel);
       updateRoute(newModel.hash, getAvailableSection(), getAvailableLocale()).then(() => {
@@ -219,7 +219,7 @@ const onApplyJsonContent = (json: any) => {
 let oldModel: IStructure | null = null;
 const onStructureChange = (model: IStructure) => {
   if (oldModel) {
-    unSyncFolder(oldModel, 'typescript');
+    unSyncFolder(oldModel);
   }
   oldModel = model;
   resetStructure();
@@ -232,7 +232,7 @@ const onStructureChange = (model: IStructure) => {
     dataEditor.value?.resetValidation()
   }
   if (globalStore.session.loggedIn) {
-    autoAskToSyncFolder(model, 'typescript');
+    autoAskToSyncFolder(model);
   }
 }
 
@@ -259,7 +259,7 @@ watch(() => [
 ], autoSyncCallback, { deep: true });
 autoSyncCallback();
 window.addEventListener('fs-change', () => {
-  syncFromFolder(structure.value, 'typescript');
+  syncFromFolder(structure.value);
 })
 
 const refreshUserData = async (): Promise<any> => {
@@ -311,7 +311,7 @@ if (globalStore.userSettings.data.userDataAutoFetch) {
   refreshUserData();
 }
 if (globalStore.session.loggedIn) {
-  autoAskToSyncFolder(modelStore.structure, 'typescript');
+  autoAskToSyncFolder(modelStore.structure);
 }
 </script>
 
@@ -520,7 +520,8 @@ if (globalStore.session.loggedIn) {
     :selected="globalStore.fileManager.selected"
     :can-select="globalStore.fileManager.canSelect"
     :can-upload="globalStore.session.loggedIn"
-    :can-delete="globalStore.session.loggedIn"
+    :can-add-to-local="isFolderSynced(structure)"
+    :can-delete="globalStore.session.loggedIn || isFolderSynced(structure)"
     :server-settings="serverSettings"
     can-download
   />
diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue
index 8e25b2d..f70592f 100644
--- a/src/components/ModalDialog.vue
+++ b/src/components/ModalDialog.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 const visible = defineModel<boolean>({ required: true });
-const { title, prependIcon, maxWidth } = defineProps<{
+const { title, prependIcon } = defineProps<{
   title?: string,
   prependIcon?: string,
   color?: string,
   text?: string,
-  maxWidth?: number | string,
 }>();
 </script>
 
@@ -19,7 +18,6 @@ const { title, prependIcon, maxWidth } = defineProps<{
       :text="text"
       :color="color"
       :prepend-icon="prependIcon"
-      :max-width="maxWidth"
     >
       <template #append>
         <div class="d-flex align-center" style="gap: 1rem">
diff --git a/src/components/StructureEditor.vue b/src/components/StructureEditor.vue
index 0b6cf93..6422625 100644
--- a/src/components/StructureEditor.vue
+++ b/src/components/StructureEditor.vue
@@ -11,6 +11,7 @@ import '@/plugins/aceeditor';
 import {useGlobalStore} from '@/stores/global';
 import {useTypings} from "@/composables/typings";
 import {useModelStore} from "@/stores/model";
+import {useSyncing} from "@/composables/syncing";
 // import yaml from 'js-yaml';
 
 const emit = defineEmits(['save', 'create', 'change', 'focus', 'blur']);
@@ -22,7 +23,8 @@ const { columns = false, userData } = defineProps<{
 }>();
 const { canSaveStructure, yamlException, structureStates } = useStructure();
 const modelStore = useModelStore();
-const { getTypescriptTypings, getTypescriptDefaultObj, isFolderSynced, lastStateTimestamp, askToSyncFolder, unSyncFolder } = useTypings();
+const { getTypescriptTypings, getTypescriptDefaultObj, lastStateTimestamp } = useTypings();
+const { isFolderSynced, askToSyncFolder, unSyncFolder } = useSyncing();
 const showParsingDelay = ref(false);
 const progressBarValue = ref(0);
 const progressBarCompleted = ref(false);
@@ -32,7 +34,7 @@ const blueprintEditorTypings: Ref<VAceEditorInstance | null> = ref(null);
 const blueprintEditorDefault: Ref<VAceEditorInstance | null> = ref(null);
 const blueprintTypings = ref('')
 const blueprintDefault = ref('')
-const blueprintLanguage = ref<'typescript' | 'php'>('typescript')
+const blueprintLanguage = ref<'typescript'>('typescript')
 
 const sectionMenu = ref(false);
 
@@ -210,10 +212,10 @@ watch(tab, () => {
 updateBlueprintContent();
 
 const onUnSync = () => {
-  unSyncFolder(modelStore.structure, 'typescript', true);
+  unSyncFolder(modelStore.structure, true);
 }
 const onSync = () => {
-  askToSyncFolder(modelStore.structure, 'typescript');
+  askToSyncFolder(modelStore.structure);
 }
 
 let lastPosition: { row: number, column: number } | null;
@@ -546,7 +548,7 @@ watch(() => globalStore.userSettings.data, () => {
             >
               <template #activator="{ props }">
                 <v-btn
-                  v-if="isFolderSynced(modelStore.structure, 'typescript')"
+                  v-if="isFolderSynced(modelStore.structure)"
                   v-bind="props"
                   :key="lastStateTimestamp"
                   color="secondary"
@@ -580,7 +582,7 @@ watch(() => globalStore.userSettings.data, () => {
                 size="small"
               />
               <v-tooltip
-                v-if="isFolderSynced(modelStore.structure, 'typescript')"
+                v-if="isFolderSynced(modelStore.structure)"
                 text="Save (CTRL+S)"
                 location="bottom"
               >
diff --git a/src/components/UserSettingsDialog.vue b/src/components/UserSettingsDialog.vue
index 8440c63..ae4f9e9 100644
--- a/src/components/UserSettingsDialog.vue
+++ b/src/components/UserSettingsDialog.vue
@@ -3,9 +3,9 @@ import {useGlobalStore} from "@/stores/global";
 import {computed, ref, watch} from "vue";
 import type {IUserSettings} from "@/interfaces";
 import {deepToRaw, objectsAreDifferent} from "@/utils";
-import {useTypings} from "@/composables/typings";
 import {useModelStore} from "@/stores/model";
 import ModalDialog from '@/components/ModalDialog.vue';
+import {useSyncing} from "@/composables/syncing";
 
 const visible = defineModel<boolean>('visible', { required: true });
 const globalStore = useGlobalStore();
@@ -64,7 +64,7 @@ const hasChanges = computed((): boolean => {
 
 const apply = () => {
   globalStore.setUserSettings(userSettings.value);
-  useTypings().syncToFolder(modelStore.structure, 'typescript');
+  useSyncing().syncToFolder(modelStore.structure);
   visible.value = false;
 }
 
@@ -91,6 +91,49 @@ watch(() => visible.value, () => {
     <v-card-text class="bg-background pa-4">
       <v-row>
         <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
+          <v-card title="Structure Editor">
+            <v-card-text class="d-flex flex-column" style="gap: 1rem">
+              <v-switch
+                v-model="userSettings.editorLiveUpdate"
+                color="primary"
+                label="Live update"
+                hint="Your admin panel will refresh automatically whenever you make a change, but it might slow down if your YAML file gets too big."
+                persistent-hint
+                inset
+              />
+              <v-number-input
+                v-model="userSettings.editorUpdateTimeout"
+                :disabled="userSettings.editorLiveUpdate"
+                label="Update timeout (milliseconds)"
+                hint="There will be a delay of X milliseconds before the admin panel updates after a change."
+                persistent-hint
+              />
+              <v-switch
+                v-model="userSettings.editorAutoSyncFrom"
+                color="primary"
+                label="Auto-sync from local files"
+                hint="Updates the structure automatically whenever changes are detected in your locally synced files."
+                persistent-hint
+                inset
+              />
+              <v-number-input
+                v-model="userSettings.editorAutoSyncInterval"
+                :disabled="!userSettings.editorAutoSyncFrom"
+                label="Update timeout (milliseconds)"
+                hint="There will be a delay of X milliseconds before the structure updates after a change."
+                persistent-hint
+              />
+              <v-switch
+                v-model="userSettings.autoCleanData"
+                color="primary"
+                label="Auto-Clean Data"
+                hint="Data is auto-cleaned on every edit. Anything not matching the updated structure will be lost."
+                persistent-hint
+                inset
+              />
+            </v-card-text>
+          </v-card>
+
           <v-card title="Code Editor">
             <v-card-text class="d-flex flex-column" style="gap: 1rem">
               <v-number-input
@@ -116,6 +159,21 @@ watch(() => visible.value, () => {
               />
             </v-card-text>
           </v-card>
+        </v-col>
+        <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
+
+          <v-card title="Data Form">
+            <v-card-text class="d-flex flex-column" style="gap: 1rem">
+              <v-switch
+                v-model="userSettings.userDataAutoFetch"
+                color="primary"
+                label="Auto-fetch"
+                hint="Data will be automatically retrieved when the structure is loaded."
+                persistent-hint
+                inset
+              />
+            </v-card-text>
+          </v-card>
 
           <v-card title="Layout">
             <v-card-text class="d-flex flex-column" style="gap: 1rem">
@@ -153,63 +211,6 @@ watch(() => visible.value, () => {
               />
             </v-card-text>
           </v-card>
-        </v-col>
-        <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
-          <v-card title="Structure Editor">
-            <v-card-text class="d-flex flex-column" style="gap: 1rem">
-              <v-switch
-                v-model="userSettings.editorLiveUpdate"
-                color="primary"
-                label="Live update"
-                hint="Your admin panel will refresh automatically whenever you make a change, but it might slow down if your YAML file gets too big."
-                persistent-hint
-                inset
-              />
-              <v-number-input
-                v-model="userSettings.editorUpdateTimeout"
-                :disabled="userSettings.editorLiveUpdate"
-                label="Update timeout (milliseconds)"
-                hint="There will be a delay of X milliseconds before the admin panel updates after a change."
-                persistent-hint
-              />
-              <v-switch
-                v-model="userSettings.editorAutoSyncFrom"
-                color="primary"
-                label="Auto-sync from local files"
-                hint="Updates the structure automatically whenever changes are detected in your locally synced files."
-                persistent-hint
-                inset
-              />
-              <v-number-input
-                v-model="userSettings.editorAutoSyncInterval"
-                :disabled="!userSettings.editorAutoSyncFrom"
-                label="Update timeout (milliseconds)"
-                hint="There will be a delay of X milliseconds before the structure updates after a change."
-                persistent-hint
-              />
-              <v-switch
-                v-model="userSettings.autoCleanData"
-                color="primary"
-                label="Auto-Clean Data"
-                hint="Data is auto-cleaned on every edit. Anything not matching the updated structure will be lost."
-                persistent-hint
-                inset
-              />
-            </v-card-text>
-          </v-card>
-
-          <v-card title="User Form">
-            <v-card-text class="d-flex flex-column" style="gap: 1rem">
-              <v-switch
-                v-model="userSettings.userDataAutoFetch"
-                color="primary"
-                label="Auto-fetch"
-                hint="Data will be automatically retrieved when the structure is loaded."
-                persistent-hint
-                inset
-              />
-            </v-card-text>
-          </v-card>
 
           <v-card title="Synchronization">
             <v-card-text class="d-flex flex-column" style="gap: 1rem">
@@ -221,13 +222,13 @@ watch(() => visible.value, () => {
                 persistent-hint
               />
 
-              <v-alert
-                type="warning"
-                variant="tonal"
-                density="compact"
-              >
-                To prevent accidental overriding, <strong>Read From</strong> values are only synchronized once when loading the project.
-              </v-alert>
+<!--              <v-alert-->
+<!--                type="warning"-->
+<!--                variant="tonal"-->
+<!--                density="compact"-->
+<!--              >-->
+<!--                To prevent accidental overriding, <strong>Read From</strong> values are only synchronized once when loading the project.-->
+<!--              </v-alert>-->
 
               <v-select
                 v-model="syncingFrom"
diff --git a/src/composables/changes.ts b/src/composables/changes.ts
index 2f64871..06573aa 100644
--- a/src/composables/changes.ts
+++ b/src/composables/changes.ts
@@ -1,6 +1,6 @@
 import { objectsAreDifferent } from '@/utils';
 import { useGlobalStore } from '@/stores/global';
-import type { RouteLocationNormalizedGeneric } from 'vue-router';
+import type {NavigationGuardNext, RouteLocationNormalizedGeneric} from 'vue-router';
 import Router from '@/router';
 
 let initialized = false;
@@ -19,7 +19,7 @@ export function useChanges(router: typeof Router) {
     };
     window.addEventListener('beforeunload', beforeUnloadCallback);
 
-    router.beforeResolve((to, from, next) => {
+    router.beforeResolve((to: RouteLocationNormalizedGeneric, from: RouteLocationNormalizedGeneric, next: NavigationGuardNext) => {
       if (!from.name) {
         return next();
       }
diff --git a/src/composables/structure.ts b/src/composables/structure.ts
index 2020e86..40b5dbf 100644
--- a/src/composables/structure.ts
+++ b/src/composables/structure.ts
@@ -22,8 +22,8 @@ import defaultStructure  from '@/assets/default-structure.json';
 import {Composer, Parser, LineCounter, Document } from 'yaml'
 import merge from 'ts-deepmerge';
 import {useModelStore} from '@/stores/model';
-import {useTypings} from "@/composables/typings";
 import {parseYamlAndFindPaths, type PathValue} from "@/composables/yaml";
+import {useSyncing} from "@/composables/syncing";
 
 export interface EditorAnnotation {
   row: number,
@@ -501,7 +501,7 @@ export function useStructure() {
       }
 
       const saveCallback = () => {
-        useTypings().syncToFolder(structure, 'typescript', ['structure', 'typings', 'default', 'settings', 'index']);
+        useSyncing().syncToFolder(structure, ['structure', 'typings', 'default', 'settings', 'index']);
         structureStates.value.saved = true;
         setTimeout(() => structureStates.value.saved = false, 2000);
       }
diff --git a/src/composables/syncing.ts b/src/composables/syncing.ts
new file mode 100644
index 0000000..9e1f124
--- /dev/null
+++ b/src/composables/syncing.ts
@@ -0,0 +1,519 @@
+import type {IStructure} from "@/interfaces";
+import {useTypings} from "@/composables/typings";
+import {useModelStore} from "@/stores/model";
+import {useGlobalStore} from "@/stores/global";
+import {useStructure} from "@/composables/structure";
+import {deepToRaw} from '@/utils';
+import {useUserData} from "@/composables/user-data";
+import {ref} from "vue";
+
+declare global {
+  export interface Window {
+    showDirectoryPicker: (options: { id: string, mode: 'read' | 'readwrite' }) => Promise<FileSystemDirectoryHandle>;
+  }
+}
+
+type Snapshot = Map<string, FileMeta>
+type ReadFileResult = {
+  path: string
+  file: File
+  width?: number
+  height?: number
+}
+type FileMeta = {
+  lastModified: number
+  size: number
+}
+
+export const blobFileList: {[key: string]: string} = {};
+const syncHandleRef: {[key: string]: FileSystemDirectoryHandle | null} = {}
+const localStorageHandleKey = 'jsonms/typings:handle-list';
+const localStorageExplanationsKey = 'jsonms/typings:explanations';
+
+let previousSnapshot: Snapshot
+let snalshopCheckInterval: any
+
+export const lastStateTimestamp = ref(0);
+export const isFolderSynced = (structure: IStructure): boolean => {
+  const hash = structure.hash ?? 'unknown';
+  const id = `${hash}`;
+  return !!(syncHandleRef[id]);
+}
+
+export function useSyncing() {
+
+  const modelStore = useModelStore();
+  const globalStore = useGlobalStore();
+  const { serverSettings, getParsedStructureData } = useStructure();
+  const { getParsedUserData } = useUserData();
+  const { getTypescriptTypings, getTypescriptDefaultObj } = useTypings();
+
+  const autoAskToSyncFolder = async (structure: IStructure) => {
+    const hash = structure.hash ?? 'unknown';
+    const id = `${hash}`;
+    const keys = JSON.parse(localStorage.getItem(localStorageHandleKey) || '[]');
+    keys.forEach((key: string) => {
+      if (key === id && !syncHandleRef[id]) {
+        globalStore.setPrompt({
+          ...globalStore.prompt,
+          visible: true,
+          title: 'Local Folder Syncing',
+          icon: 'mdi-sync',
+          body: 'This project was previously synced to your local folder. For security reasons, your browser resets this permission whenever the page loses its session. Would you like to resume syncing?',
+          btnText: 'Resume',
+          btnColor: 'secondary',
+          callback: () => new Promise((resolve, reject) => {
+            askToSyncFolder(structure).then(() => {
+              resolve();
+            }).catch(reject);
+          }),
+          cancelCallback: () => new Promise(resolve => {
+            let keys = JSON.parse(localStorage.getItem(localStorageHandleKey) || '[]');
+            keys = keys.filter((key: string) => key !== id);
+            localStorage.setItem(localStorageHandleKey, JSON.stringify(keys));
+            resolve();
+          }),
+        });
+      }
+    })
+  }
+
+  const askToSyncFolder = async (structure: IStructure) => {
+    const explanationCallback = async () => {
+      const hash = structure.hash ?? 'unknown';
+      const id = `${hash}`;
+      syncHandleRef[id] = await window.showDirectoryPicker({
+        id,
+        mode: 'readwrite',
+      });
+
+      if (syncHandleRef[id]) {
+        let keys = JSON.parse(localStorage.getItem(localStorageHandleKey) || '[]');
+        keys = keys.filter((key: string) => key !== id);
+        keys.push(id);
+        localStorage.setItem(localStorageHandleKey, JSON.stringify(keys));
+        await syncFromFolder(structure);
+        if (globalStore.session.loggedIn) {
+          await syncToFolder(structure);
+        }
+      }
+    }
+    const acknowledgedExplanations = localStorage.getItem(localStorageExplanationsKey);
+    if (!acknowledgedExplanations) {
+      globalStore.setPrompt({
+        ...globalStore.prompt,
+        visible: true,
+        title: 'Read Carefully',
+        icon: 'mdi-alert',
+        body: 'You will need to select a folder where the structure, user data, typings, and default object structure in JSON format will be updated in real-time on your local machine. We recommend using a folder named "jms" within your "src" directory. For security reasons, your browser requires session-based permission for local folder synchronization, so you will need to reselect this folder each time you refresh or return to this page.',
+        btnText: 'Proceed',
+        btnColor: 'warning',
+        callback: () => new Promise((resolve, reject) => {
+          localStorage.setItem(localStorageExplanationsKey, '1');
+          explanationCallback().then(() => {
+            resolve();
+          }).catch(reject)
+        }),
+      });
+    } else {
+      await explanationCallback();
+    }
+  }
+
+  const unSyncFolder = async (structure: IStructure, clean = false) => {
+    const hash = structure.hash ?? 'unknown';
+    const id = `${hash}`;
+
+    if (clean) {
+      delete syncHandleRef[id];
+      let keys = JSON.parse(localStorage.getItem(localStorageHandleKey) || '{}');
+      keys = keys.filter((key: string) => key !== id);
+      localStorage.setItem(localStorageHandleKey, JSON.stringify(keys));
+    }
+
+    lastStateTimestamp.value = new Date().getTime();
+  }
+
+  const syncToFolder = async (structure: IStructure, types: ('structure' | 'typings' | 'default' | 'data' | 'settings' | 'index')[] = ['structure', 'default', 'typings', 'data', 'settings', 'index']) => {
+    const id = `${structure.hash ?? 'unknown'}`;
+    const oneTab = ' '.repeat(globalStore.userSettings.data.editorTabSize);
+    if (syncHandleRef[id]) {
+      const structuredData = getParsedStructureData(structure);
+      const fileSaveList: {
+        writableStream: FileSystemWritableFileStream,
+        content: string
+      }[] = [];
+
+      // structure.yml
+      if (globalStore.userSettings.data.blueprintsWriteToStructure && types.includes('structure')) {
+        await (async () => {
+          if (syncHandleRef[id]) {
+            const fileHandle = await syncHandleRef[id].getFileHandle('structure.yml', { create: true });
+            const file = await fileHandle.getFile();
+            const existingData = await file.text();
+            const content = structure.content;
+            if (existingData !== content) {
+              const writableStream = await fileHandle.createWritable();
+              fileSaveList.push({ writableStream, content });
+            }
+          }
+        })();
+
+        await (async () => {
+          if (syncHandleRef[id]) {
+            const fileHandle = await syncHandleRef[id].getFileHandle('structure.json', { create: true });
+            const file = await fileHandle.getFile();
+            const existingData = await file.text();
+            const content = JSON.stringify(structuredData, null, globalStore.userSettings.data.editorTabSize);
+            if (existingData !== content) {
+              const writableStream = await fileHandle.createWritable();
+              fileSaveList.push({ writableStream, content });
+            }
+          }
+        })();
+      }
+
+      // typings.yml
+      if (globalStore.userSettings.data.blueprintsWriteToTypings && types.includes('typings')) {
+        await (async () => {
+          if (syncHandleRef[id]) {
+            const fileHandle = await syncHandleRef[id].getFileHandle('typings.ts', {create: true});
+            const file = await fileHandle.getFile();
+            const existingData = await file.text();
+            const content = getTypescriptTypings(structuredData);
+            if (existingData !== content) {
+              const writableStream = await fileHandle.createWritable();
+              fileSaveList.push({ writableStream, content });
+            }
+          }
+        })();
+      }
+
+      // default.ts
+      if (globalStore.userSettings.data.blueprintsWriteToDefault && types.includes('default')) {
+        await (async () => {
+          if (syncHandleRef[id]) {
+            const fileHandle = await syncHandleRef[id].getFileHandle('default.ts', {create: true});
+            const file = await fileHandle.getFile();
+            const existingData = await file.text();
+            const content = getTypescriptDefaultObj(structuredData);
+            if (existingData !== content) {
+              const writableStream = await fileHandle.createWritable();
+              fileSaveList.push({ writableStream, content });
+            }
+          }
+        })();
+      }
+
+      // settings.ts
+      if (globalStore.userSettings.data.blueprintsWriteToSettings && types.includes('settings')) {
+        await (async () => {
+          if (syncHandleRef[id]) {
+            const fileHandle = await syncHandleRef[id].getFileHandle('settings.json', {create: true});
+            const file = await fileHandle.getFile();
+            const existingData = await file.text();
+            const content = JSON.stringify(serverSettings.value, null, globalStore.userSettings.data.editorTabSize);
+            if (existingData !== content) {
+              const writableStream = await fileHandle.createWritable();
+              fileSaveList.push({ writableStream, content });
+            }
+          }
+        })();
+      }
+
+      // data.json
+      if (globalStore.userSettings.data.blueprintsWriteToData && types.includes('data')) {
+        await (async () => {
+          if (syncHandleRef[id]) {
+            const content = JSON.stringify(deepToRaw(modelStore.userData), null, globalStore.userSettings.data.editorTabSize);
+            const fileHandle = await syncHandleRef[id].getFileHandle('data.json', {create: true});
+            const file = await fileHandle.getFile();
+            const existingData = await file.text();
+            if (existingData !== content) {
+              const writableStream = await fileHandle.createWritable();
+              fileSaveList.push({ writableStream, content });
+            }
+          }
+        })();
+      }
+
+      // index.ts
+      if (globalStore.userSettings.data.blueprintsWriteToIndex && types.includes('index')) {
+        await (async () => {
+          if (syncHandleRef[id]) {
+            const fileHandle = await syncHandleRef[id].getFileHandle('index.ts', {create: true});
+            const file = await fileHandle.getFile();
+            const existingData = await file.text();
+            let content = ''
+
+            if (globalStore.userSettings.data.blueprintsWriteToTypings) {
+              content += `import { type JmsSectionKey, type JmsLocaleKey, type JmsData } from './typings';\n`;
+            }
+            if (globalStore.userSettings.data.blueprintsWriteToDefault) {
+              content += `import { defaultData, locales } from './default';\n`
+            }
+            if (globalStore.userSettings.data.blueprintsWriteToData) {
+              content += `import data from './data.json';\n`
+            }
+            if (globalStore.userSettings.data.blueprintsWriteToStructure) {
+              content += `import structure from './structure.json';\n`
+            }
+            if (globalStore.userSettings.data.blueprintsWriteToSettings) {
+              content += `import settings from './settings.json';\n`
+            }
+
+            content += `\nexport {\n`;
+            if (globalStore.userSettings.data.blueprintsWriteToTypings) {
+              content += `${oneTab}type JmsSectionKey,\n`;
+              content += `${oneTab}type JmsLocaleKey,\n`;
+              content += `${oneTab}type JmsData,\n`;
+            }
+            if (globalStore.userSettings.data.blueprintsWriteToDefault) {
+              content += `${oneTab}locales,\n`;
+              content += `${oneTab}defaultData,\n`;
+            }
+            if (globalStore.userSettings.data.blueprintsWriteToData) {
+              content += `${oneTab}data,\n`;
+            }
+            if (globalStore.userSettings.data.blueprintsWriteToStructure) {
+              content += `${oneTab}structure,\n`;
+            }
+            if (globalStore.userSettings.data.blueprintsWriteToSettings) {
+              content += `${oneTab}settings,\n`;
+            }
+            content += `}\n`;
+
+            content = content.trim();
+            if (existingData !== content) {
+              const writableStream = await fileHandle.createWritable();
+              fileSaveList.push({ writableStream, content });
+            }
+          }
+        })();
+      }
+
+      if (fileSaveList.length > 0) {
+        const promises = fileSaveList.map(async fileHandle => {
+          await fileHandle.writableStream.write(fileHandle.content);
+          await fileHandle.writableStream.close();
+        });
+
+        // Wait for all write operations to complete
+        await Promise.all(promises);
+      }
+    }
+
+    lastStateTimestamp.value = new Date().getTime();
+  }
+
+  const syncFromFolder = async (structure: IStructure, types: ('data' | 'structure')[] = ['data', 'structure']) => {
+    const id = `${structure.hash ?? 'unknown'}`;
+    if (syncHandleRef[id]) {
+
+      // data.json
+      if (globalStore.userSettings.data.blueprintsReadFromData && types.includes('data')) {
+        await (async () => {
+          if (syncHandleRef[id]) {
+            try {
+              const fileHandle = await syncHandleRef[id].getFileHandle('data.json');
+              const file = await fileHandle.getFile();
+              const content = await file.text();
+              const json = JSON.parse(content);
+              const parsedStructure = getParsedStructureData(structure);
+              const parsedData = getParsedUserData(parsedStructure, json);
+              modelStore.setUserData(parsedData, true);
+            } catch (e) {
+              console.error(e);
+            }
+          }
+        })();
+      }
+
+      // structure.yml
+      if ((globalStore.userSettings.data.blueprintsReadFromStructure || !globalStore.session.loggedIn) && types.includes('structure')) {
+        await (async () => {
+          if (syncHandleRef[id]) {
+            try {
+              const fileHandle = await syncHandleRef[id].getFileHandle('structure.yml');
+              const file = await fileHandle.getFile();
+              modelStore.structure.content = await file.text();
+            } catch (e) {
+              console.error(e);
+            }
+          }
+        })();
+      }
+    }
+
+    lastStateTimestamp.value = new Date().getTime();
+  }
+
+  const readAllFiles = async (
+    dir: FileSystemDirectoryHandle,
+    prefix = ''
+  ): Promise<ReadFileResult[]> => {
+    const files: ReadFileResult[] = []
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    for await (const [name, handle] of dir.entries()) {
+      const path = prefix ? `${prefix}/${name}` : name
+
+      if (handle.kind === 'file') {
+        const file = await (handle as FileSystemFileHandle).getFile();
+        const metadata = await getFileMetadata(file, path);
+        loadBlob(file, path);
+        files.push(metadata)
+      } else if (handle.kind === 'directory') {
+        files.push(
+          ...(await readAllFiles(handle as FileSystemDirectoryHandle, path))
+        )
+      }
+    }
+
+    return files
+  }
+
+  const loadBlob = async (file: File, path: string): Promise<void> => {
+    blobFileList[path] = URL.createObjectURL(file);
+  }
+
+  const getFileMetadata = async (file: File, path: string): Promise<ReadFileResult> => {
+    let width = undefined;
+    let height = undefined;
+    if (file.type.startsWith('image')) {
+      const bitmap = await createImageBitmap(file)
+      width = bitmap.width;
+      height = bitmap.height;
+    }
+    return { path, file, width, height };
+  }
+
+  const getFiles = async (structure: IStructure): Promise<ReadFileResult[]> => {
+    const id = `${structure.hash ?? 'unknown'}`;
+    if (syncHandleRef[id]) {
+      return await readAllFiles(syncHandleRef[id]);
+    }
+    return [];
+  }
+
+  const addFile = async (
+    structure: IStructure,
+    file: File,
+    folder = ''
+  ): Promise<void> => {
+    const id = `${structure.hash ?? 'unknown'}`;
+    if (syncHandleRef[id]) {
+      let dir = syncHandleRef[id];
+      if (folder) {
+        dir = await syncHandleRef[id].getDirectoryHandle(folder, { create: true })
+      }
+      const handle = await dir.getFileHandle(file.name, { create: true })
+      const writable = await handle.createWritable()
+      await writable.write(file)
+      await writable.close()
+    }
+  }
+
+  const scanSnapshotDir = async (
+    dir: FileSystemDirectoryHandle,
+    prefix = ''
+  ): Promise<Snapshot> => {
+    const snapshot: Snapshot = new Map()
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    for await (const [name, handle] of dir.entries()) {
+      const path = `${prefix}/${name}`
+
+      if (handle.kind === 'file') {
+        const file = await handle.getFile()
+        snapshot.set(path, {
+          lastModified: file.lastModified,
+          size: file.size,
+        })
+      } else {
+        const sub = await scanSnapshotDir(handle, path)
+        sub.forEach((v, k) => snapshot.set(k, v))
+      }
+    }
+
+    return snapshot
+  }
+
+  const snapshotsEqual = (a: Snapshot, b: Snapshot): boolean => {
+    if (!a || !b || a.size !== b.size) return false
+
+    for (const [path, meta] of a) {
+      const other = b.get(path)
+      if (!other) return false
+      if (
+        meta.lastModified !== other.lastModified ||
+        meta.size !== other.size
+      ) {
+        return false
+      }
+    }
+
+    return true
+  }
+
+  const watchSnapshotDirectory = async (
+    intervalMs = 1000
+  ): Promise<void> => {
+    snalshopCheckInterval = setInterval(async () => {
+      for (const id of Object.keys(syncHandleRef)) {
+        const root = syncHandleRef[id]
+        if (root) {
+          const current = await scanSnapshotDir(root)
+          if (!snapshotsEqual(previousSnapshot, current)) {
+            window.dispatchEvent(new Event('fs-change'))
+            previousSnapshot = current
+          }
+        }
+      }
+    }, intervalMs)
+  }
+
+  const stopWatchSnapshotDirectory = () => {
+    clearInterval(snalshopCheckInterval);
+  }
+
+  const removeFile = async (structure: IStructure, path: string): Promise<void> => {
+    return new Promise(async resolve => {
+      const id = `${structure.hash ?? 'unknown'}`;
+      if (syncHandleRef[id]) {
+        const parts = path.split('/').filter(Boolean)
+        const name = parts.pop()!
+        let dir = syncHandleRef[id];
+        for (const part of parts) {
+          dir = await dir.getDirectoryHandle(part)
+        }
+        await dir.removeEntry(name);
+        return resolve();
+      }
+      return resolve();
+    })
+  }
+
+  return {
+    isFolderSynced,
+    autoAskToSyncFolder,
+    askToSyncFolder,
+    unSyncFolder,
+    syncToFolder,
+    syncFromFolder,
+    readAllFiles,
+    getFiles,
+    scanSnapshotDir,
+    snapshotsEqual,
+    watchSnapshotDirectory,
+    stopWatchSnapshotDirectory,
+    syncHandleRef,
+    lastStateTimestamp,
+    loadBlob,
+    removeFile,
+    addFile,
+    getFileMetadata,
+  }
+}
diff --git a/src/composables/typings.ts b/src/composables/typings.ts
index 48bf88d..e3ee4af 100644
--- a/src/composables/typings.ts
+++ b/src/composables/typings.ts
@@ -1,17 +1,9 @@
-import type {IField, IStructure} from '@/interfaces';
-import {deepToRaw, isFieldI18n, isFieldType, loopThroughFields} from '@/utils';
-import {useModelStore} from "@/stores/model";
-import {useGlobalStore} from "@/stores/global";
-import {ref} from "vue";
+import type {IField} from '@/interfaces';
+import {isFieldI18n, isFieldType, loopThroughFields} from '@/utils';
+import {useGlobalStore} from "@/stores/global";;
 import {useStructure} from "@/composables/structure";
 import {useUserData} from "@/composables/user-data";
 
-declare global {
-  export interface Window {
-    showDirectoryPicker: (options: { id: string, mode: 'read' | 'readwrite' }) => Promise<FileSystemDirectoryHandle>;
-  }
-}
-
 type JmsStructure = {
   name: string,
   fields: {
@@ -20,334 +12,12 @@ type JmsStructure = {
   }[]
 }
 
-type FileMeta = {
-  lastModified: number
-  size: number
-}
-
-type Snapshot = Map<string, FileMeta>
-
-let previousSnapshot: Snapshot
-let snalshopCheckInterval: any
-
-const syncHandleRef: {[key: string]: FileSystemDirectoryHandle | null} = {}
-export const lastStateTimestamp = ref(0);
-const localStorageHandleKey = 'jsonms/typings:handle-list';
-const localStorageExplanationsKey = 'jsonms/typings:explanations';
-
-export const isFolderSynced = (structure: IStructure, language: 'typescript' | 'php'): boolean => {
-  const hash = structure.hash ?? 'unknown';
-  const id = `${hash}_${language}`;
-  return !!(syncHandleRef[id]);
-}
-
 export function useTypings() {
 
-  const modelStore = useModelStore();
   const globalStore = useGlobalStore();
-  const { serverSettings, structureParsedData, getParsedStructureData } = useStructure();
+  const { structureParsedData } = useStructure();
   const { getParsedUserData } = useUserData();
 
-  const autoAskToSyncFolder = async (structure: IStructure, language: 'typescript' | 'php') => {
-    const hash = structure.hash ?? 'unknown';
-    const id = `${hash}_${language}`;
-    const keys = JSON.parse(localStorage.getItem(localStorageHandleKey) || '[]');
-    keys.forEach((key: string) => {
-      if (key === id && !syncHandleRef[id]) {
-        globalStore.setPrompt({
-          ...globalStore.prompt,
-          visible: true,
-          title: 'Local Folder Syncing',
-          icon: 'mdi-sync',
-          body: 'This project was previously synced to your local folder. For security reasons, your browser resets this permission whenever the page loses its session. Would you like to resume syncing?',
-          btnText: 'Resume',
-          btnColor: 'secondary',
-          callback: () => new Promise((resolve, reject) => {
-            askToSyncFolder(structure, language).then(() => {
-              resolve();
-            }).catch(reject);
-          }),
-          cancelCallback: () => new Promise(resolve => {
-            let keys = JSON.parse(localStorage.getItem(localStorageHandleKey) || '[]');
-            keys = keys.filter((key: string) => key !== id);
-            localStorage.setItem(localStorageHandleKey, JSON.stringify(keys));
-            resolve();
-          }),
-        });
-      }
-    })
-  }
-
-  const askToSyncFolder = async (structure: IStructure, language: 'typescript' | 'php') => {
-    const explanationCallback = async () => {
-      const hash = structure.hash ?? 'unknown';
-      const id = `${hash}_${language}`;
-      syncHandleRef[id] = await window.showDirectoryPicker({
-        id,
-        mode: 'readwrite',
-      });
-
-      if (syncHandleRef[id]) {
-        let keys = JSON.parse(localStorage.getItem(localStorageHandleKey) || '[]');
-        keys = keys.filter((key: string) => key !== id);
-        keys.push(id);
-        localStorage.setItem(localStorageHandleKey, JSON.stringify(keys));
-        await syncFromFolder(structure, language);
-        if (globalStore.session.loggedIn) {
-          await syncToFolder(structure, language);
-        }
-      }
-    }
-    const acknowledgedExplanations = localStorage.getItem(localStorageExplanationsKey);
-    if (!acknowledgedExplanations) {
-      globalStore.setPrompt({
-        ...globalStore.prompt,
-        visible: true,
-        title: 'Read Carefully',
-        icon: 'mdi-alert',
-        body: 'You will need to select a folder where the structure, user data, typings, and default object structure in JSON format will be updated in real-time on your local machine. We recommend using a folder named "jms" within your "src" directory. For security reasons, your browser requires session-based permission for local folder synchronization, so you will need to reselect this folder each time you refresh or return to this page.',
-        btnText: 'Proceed',
-        btnColor: 'warning',
-        callback: () => new Promise((resolve, reject) => {
-          localStorage.setItem(localStorageExplanationsKey, '1');
-          explanationCallback().then(() => {
-            resolve();
-          }).catch(reject)
-        }),
-      });
-    } else {
-      await explanationCallback();
-    }
-  }
-
-  const unSyncFolder = async (structure: IStructure, language: 'typescript' | 'php', clean = false) => {
-    const hash = structure.hash ?? 'unknown';
-    const id = `${hash}_${language}`;
-
-    if (clean) {
-      delete syncHandleRef[id];
-      let keys = JSON.parse(localStorage.getItem(localStorageHandleKey) || '{}');
-      keys = keys.filter((key: string) => key !== id);
-      localStorage.setItem(localStorageHandleKey, JSON.stringify(keys));
-    }
-
-    lastStateTimestamp.value = new Date().getTime();
-  }
-
-  const syncToFolder = async (structure: IStructure, language: 'typescript' | 'php', types: ('structure' | 'typings' | 'default' | 'data' | 'settings' | 'index')[] = ['structure', 'default', 'typings', 'data', 'settings', 'index']) => {
-    const id = `${structure.hash ?? 'unknown'}_${language}`;
-    const oneTab = ' '.repeat(globalStore.userSettings.data.editorTabSize);
-    if (syncHandleRef[id]) {
-      const structuredData = getParsedStructureData(structure);
-      const fileSaveList: {
-        writableStream: FileSystemWritableFileStream,
-        content: string
-      }[] = [];
-
-      // structure.yml
-      if (globalStore.userSettings.data.blueprintsWriteToStructure && types.includes('structure')) {
-        await (async () => {
-          if (syncHandleRef[id]) {
-            const fileHandle = await syncHandleRef[id].getFileHandle('structure.yml', { create: true });
-            const file = await fileHandle.getFile();
-            const existingData = await file.text();
-            const content = structure.content;
-            if (existingData !== content) {
-              const writableStream = await fileHandle.createWritable();
-              fileSaveList.push({ writableStream, content });
-            }
-          }
-        })();
-
-        await (async () => {
-          if (syncHandleRef[id]) {
-            const fileHandle = await syncHandleRef[id].getFileHandle('structure.json', { create: true });
-            const file = await fileHandle.getFile();
-            const existingData = await file.text();
-            const content = JSON.stringify(structuredData, null, globalStore.userSettings.data.editorTabSize);
-            if (existingData !== content) {
-              const writableStream = await fileHandle.createWritable();
-              fileSaveList.push({ writableStream, content });
-            }
-          }
-        })();
-      }
-
-      // typings.yml
-      if (globalStore.userSettings.data.blueprintsWriteToTypings && types.includes('typings')) {
-        await (async () => {
-          if (syncHandleRef[id]) {
-            const fileHandle = await syncHandleRef[id].getFileHandle('typings.ts', {create: true});
-            const file = await fileHandle.getFile();
-            const existingData = await file.text();
-            const content = getTypescriptTypings(structuredData);
-            if (existingData !== content) {
-              const writableStream = await fileHandle.createWritable();
-              fileSaveList.push({ writableStream, content });
-            }
-          }
-        })();
-      }
-
-      // default.ts
-      if (globalStore.userSettings.data.blueprintsWriteToDefault && types.includes('default')) {
-        await (async () => {
-          if (syncHandleRef[id]) {
-            const fileHandle = await syncHandleRef[id].getFileHandle('default.ts', {create: true});
-            const file = await fileHandle.getFile();
-            const existingData = await file.text();
-            const content = getTypescriptDefaultObj(structuredData);
-            if (existingData !== content) {
-              const writableStream = await fileHandle.createWritable();
-              fileSaveList.push({ writableStream, content });
-            }
-          }
-        })();
-      }
-
-      // settings.ts
-      if (globalStore.userSettings.data.blueprintsWriteToSettings && types.includes('settings')) {
-        await (async () => {
-          if (syncHandleRef[id]) {
-            const fileHandle = await syncHandleRef[id].getFileHandle('settings.json', {create: true});
-            const file = await fileHandle.getFile();
-            const existingData = await file.text();
-            const content = JSON.stringify(serverSettings.value, null, globalStore.userSettings.data.editorTabSize);
-            if (existingData !== content) {
-              const writableStream = await fileHandle.createWritable();
-              fileSaveList.push({ writableStream, content });
-            }
-          }
-        })();
-      }
-
-      // data.json
-      if (globalStore.userSettings.data.blueprintsWriteToData && types.includes('data')) {
-        await (async () => {
-          if (syncHandleRef[id]) {
-            const content = JSON.stringify(deepToRaw(modelStore.userData), null, globalStore.userSettings.data.editorTabSize);
-            const fileHandle = await syncHandleRef[id].getFileHandle('data.json', {create: true});
-            const file = await fileHandle.getFile();
-            const existingData = await file.text();
-            if (existingData !== content) {
-              const writableStream = await fileHandle.createWritable();
-              fileSaveList.push({ writableStream, content });
-            }
-          }
-        })();
-      }
-
-      // index.ts
-      if (globalStore.userSettings.data.blueprintsWriteToIndex && types.includes('index')) {
-        await (async () => {
-          if (syncHandleRef[id]) {
-            const fileHandle = await syncHandleRef[id].getFileHandle('index.ts', {create: true});
-            const file = await fileHandle.getFile();
-            const existingData = await file.text();
-            let content = ''
-
-            if (globalStore.userSettings.data.blueprintsWriteToTypings) {
-              content += `import { type JmsSectionKey, type JmsLocaleKey, type JmsData } from './typings';\n`;
-            }
-            if (globalStore.userSettings.data.blueprintsWriteToDefault) {
-              content += `import { defaultData, locales } from './default';\n`
-            }
-            if (globalStore.userSettings.data.blueprintsWriteToData) {
-              content += `import data from './data.json';\n`
-            }
-            if (globalStore.userSettings.data.blueprintsWriteToStructure) {
-              content += `import structure from './structure.json';\n`
-            }
-            if (globalStore.userSettings.data.blueprintsWriteToSettings) {
-              content += `import settings from './settings.json';\n`
-            }
-
-            content += `\nexport {\n`;
-            if (globalStore.userSettings.data.blueprintsWriteToTypings) {
-              content += `${oneTab}type JmsSectionKey,\n`;
-              content += `${oneTab}type JmsLocaleKey,\n`;
-              content += `${oneTab}type JmsData,\n`;
-            }
-            if (globalStore.userSettings.data.blueprintsWriteToDefault) {
-              content += `${oneTab}locales,\n`;
-              content += `${oneTab}defaultData,\n`;
-            }
-            if (globalStore.userSettings.data.blueprintsWriteToData) {
-              content += `${oneTab}data,\n`;
-            }
-            if (globalStore.userSettings.data.blueprintsWriteToStructure) {
-              content += `${oneTab}structure,\n`;
-            }
-            if (globalStore.userSettings.data.blueprintsWriteToSettings) {
-              content += `${oneTab}settings,\n`;
-            }
-            content += `}\n`;
-
-            content = content.trim();
-            if (existingData !== content) {
-              const writableStream = await fileHandle.createWritable();
-              fileSaveList.push({ writableStream, content });
-            }
-          }
-        })();
-      }
-
-      if (fileSaveList.length > 0) {
-        const promises = fileSaveList.map(async fileHandle => {
-          await fileHandle.writableStream.write(fileHandle.content);
-          await fileHandle.writableStream.close();
-        });
-
-        // Wait for all write operations to complete
-        await Promise.all(promises);
-      }
-    }
-
-    lastStateTimestamp.value = new Date().getTime();
-  }
-
-  const syncFromFolder = async (structure: IStructure, language: 'typescript' | 'php', types: ('data' | 'structure')[] = ['data', 'structure']) => {
-    const id = `${structure.hash ?? 'unknown'}_${language}`;
-    if (syncHandleRef[id]) {
-
-      // data.json
-      if (globalStore.userSettings.data.blueprintsReadFromData && types.includes('data')) {
-        await (async () => {
-          if (syncHandleRef[id]) {
-            try {
-              const fileHandle = await syncHandleRef[id].getFileHandle('data.json');
-              const file = await fileHandle.getFile();
-              const content = await file.text();
-              const json = JSON.parse(content);
-              const parsedStructure = getParsedStructureData(structure);
-              const parsedData = getParsedUserData(parsedStructure, json);
-              modelStore.setUserData(parsedData, true);
-            } catch (e) {
-              console.error(e);
-            }
-          }
-        })();
-      }
-
-      // structure.yml
-      if ((globalStore.userSettings.data.blueprintsReadFromStructure || !globalStore.session.loggedIn) && types.includes('structure')) {
-        await (async () => {
-          if (syncHandleRef[id]) {
-            try {
-              const fileHandle = await syncHandleRef[id].getFileHandle('structure.yml');
-              const file = await fileHandle.getFile();
-              modelStore.structure.content = await file.text();
-            } catch (e) {
-              console.error(e);
-            }
-          }
-        })();
-      }
-    }
-
-    lastStateTimestamp.value = new Date().getTime();
-  }
-
   const getStructureName = (path: string): string => {
     const keys = path.split('.');
     let name = ''
@@ -553,84 +223,12 @@ export function useTypings() {
     return result.trim();
   }
 
-  const scanSnapshotDir = async (
-    dir: FileSystemDirectoryHandle,
-    prefix = ''
-  ): Promise<Snapshot> => {
-    const snapshot: Snapshot = new Map()
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    for await (const [name, handle] of dir.entries()) {
-      const path = `${prefix}/${name}`
-
-      if (handle.kind === 'file') {
-        const file = await handle.getFile()
-        snapshot.set(path, {
-          lastModified: file.lastModified,
-          size: file.size,
-        })
-      } else {
-        const sub = await scanSnapshotDir(handle, path)
-        sub.forEach((v, k) => snapshot.set(k, v))
-      }
-    }
-
-    return snapshot
-  }
-
-  const snapshotsEqual = (a: Snapshot, b: Snapshot): boolean => {
-    if (!a || !b || a.size !== b.size) return false
-
-    for (const [path, meta] of a) {
-      const other = b.get(path)
-      if (!other) return false
-      if (
-        meta.lastModified !== other.lastModified ||
-        meta.size !== other.size
-      ) {
-        return false
-      }
-    }
-
-    return true
-  }
-
-  const watchSnapshotDirectory = async (
-    intervalMs = 1000
-  ): Promise<void> => {
-    snalshopCheckInterval = setInterval(async () => {
-      for (const id of Object.keys(syncHandleRef)) {
-        const root = syncHandleRef[id]
-        if (root) {
-          const current = await scanSnapshotDir(root)
-          if (!snapshotsEqual(previousSnapshot, current)) {
-            window.dispatchEvent(new Event('fs-change'))
-            previousSnapshot = current
-          }
-        }
-      }
-    }, intervalMs)
-  }
-
-  const stopWatchSnapshotDirectory = () => {
-    clearInterval(snalshopCheckInterval);
-  }
-
   return {
-    syncHandleRef,
-    autoAskToSyncFolder,
-    askToSyncFolder,
-    unSyncFolder,
-    syncToFolder,
-    syncFromFolder,
-    isFolderSynced,
-    getTypescriptTypings,
+    getStructureName,
+    getFieldType,
+    getTemplateStructures,
+    getFileStructures,
     getTypescriptDefaultObj,
-    lastStateTimestamp,
-    scanSnapshotDir,
-    snapshotsEqual,
-    watchSnapshotDirectory,
-    stopWatchSnapshotDirectory,
+    getTypescriptTypings,
   }
 }
diff --git a/src/composables/user-data.ts b/src/composables/user-data.ts
index 3b7c0c9..4cf0948 100644
--- a/src/composables/user-data.ts
+++ b/src/composables/user-data.ts
@@ -19,11 +19,12 @@ import {
   getFieldDefaultValue,
   isValidField,
   isFieldI18n,
-  fieldHasChildren
+  fieldHasChildren,
+  cleanProperties,
 } from '@/utils';
 import Rules from '@/rules';
 import {useModelStore} from '@/stores/model';
-import {useTypings, isFolderSynced, lastStateTimestamp} from "@/composables/typings";
+import {isFolderSynced, lastStateTimestamp, useSyncing} from "@/composables/syncing";
 import {useStructure} from "@/composables/structure";
 
 const loading = ref(false);
@@ -51,7 +52,7 @@ export function useUserData() {
 
   const canInteractWithSyncedFolder = computed((): boolean => {
     // lastStateTimestamp is a hack to force digestion of typings
-    return lastStateTimestamp.value > 0 && isFolderSynced(modelStore.structure, 'typescript');
+    return lastStateTimestamp.value > 0 && isFolderSynced(modelStore.structure);
   })
 
   const userDataHasChanged = computed((): boolean => objectsAreDifferent(modelStore.userData, modelStore.originalUserData));
@@ -255,7 +256,7 @@ export function useUserData() {
         return saveUserDataSimple(structure, data).then(response => {
           setUserData(response.data, true);
           if (!onlyEndpoint) {
-            useTypings().syncToFolder(structure, 'typescript', ['data']);
+            useSyncing().syncToFolder(structure, ['data']);
           }
           saved.value = true;
           setTimeout(() => saved.value = false, 1000);
@@ -263,7 +264,7 @@ export function useUserData() {
         })
         .catch(reason => {
           if (canInteractWithSyncedFolder.value && !onlyEndpoint) {
-            useTypings().syncToFolder(structure, 'typescript', ['data']);
+            useSyncing().syncToFolder(structure, ['data']);
             saved.value = true;
             setTimeout(() => saved.value = false, 1000);
           }
@@ -273,7 +274,7 @@ export function useUserData() {
       } else {
         setUserData(data, true);
         if (!onlyEndpoint) {
-          useTypings().syncToFolder(structure, 'typescript', ['data']);
+          useSyncing().syncToFolder(structure, ['data']);
         }
         resolve(data);
       }
@@ -326,7 +327,7 @@ export function useUserData() {
       // Files
       if (isFieldType(field, 'file')) {
         if (typeof overrideValue === 'object' && overrideValue !== null && typeof overrideValue.path === 'string' && typeof overrideValue.meta === 'object') {
-          return parent[key] = overrideValue;
+          return parent[key] = cleanProperties(overrideValue, defaultValue);
         } else if (Array.isArray(overrideValue)) {
           parent[key] = [];
           overrideValue.forEach(value => {
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 4bcfc1b..57d4622 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -52,6 +52,7 @@ export interface IError {
 
 export interface IFile {
   path: string | null,
+  blob?: string | undefined,
   meta: {
     type?: string,
     size?: number | null,
diff --git a/src/utils.ts b/src/utils.ts
index c98cdea..11bd2ce 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -677,3 +677,36 @@ export function formatDate(date: Date, format = 'YYYY-MM-DD HH:mm:ss') {
     .replace('mm', minutes)
     .replace('ss', seconds);
 }
+
+export function cleanProperties(data: any, defaultValue: any): any {
+  const result: any = Array.isArray(defaultValue) ? [] : {}
+
+  for (const key in defaultValue) {
+    const defVal = defaultValue[key]
+    const dataVal = data?.[key]
+
+    if (
+      defVal !== null &&
+      typeof defVal === 'object' &&
+      !Array.isArray(defVal)
+    ) {
+      result[key] =
+        dataVal !== null &&
+        typeof dataVal === 'object' &&
+        !Array.isArray(dataVal)
+          ? cleanProperties(dataVal, defVal)
+          : defVal
+    } else if (Array.isArray(defVal)) {
+      result[key] = Array.isArray(dataVal) ? dataVal : defVal
+    } else {
+      if (dataVal === null || defVal === null) {
+        result[key] = dataVal !== undefined ? dataVal : defVal
+      } else {
+        result[key] =
+          typeof dataVal === typeof defVal ? dataVal : defVal
+      }
+    }
+  }
+
+  return result
+}