diff --git a/package.json b/package.json
index 47e311fa0..64a32a2fd 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "serve": "vite preview",
     "test:ci": "vitest --coverage --run",
     "test:unit": "vitest",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
+    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "build:lib": "BUILD_MODE=library vite build"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
diff --git a/src/components/widgets/IFrame.vue b/src/components/widgets/IFrame.vue
index 7d1328a89..6cf50803c 100644
--- a/src/components/widgets/IFrame.vue
+++ b/src/components/widgets/IFrame.vue
@@ -3,6 +3,7 @@
     <teleport to=".widgets-view">
       <iframe
         v-show="iframe_loaded"
+        ref="iframe"
         :src="widget.options.source"
         :style="iframeStyle"
         frameborder="0"
@@ -60,12 +61,15 @@ import { defaultBlueOsAddress } from '@/assets/defaults'
 import Snackbar from '@/components/Snackbar.vue'
 import { isValidURL } from '@/libs/utils'
 import { useAppInterfaceStore } from '@/stores/appInterface'
+import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Widget } from '@/types/widgets'
+import { listenCockpitActionVariable } from '@/libs/actions/data-lake'
+
 const interfaceStore = useAppInterfaceStore()
 
 const widgetStore = useWidgetManagerStore()
-
+const iframe = ref()
 const props = defineProps<{
   /**
    * Widget reference
@@ -97,10 +101,24 @@ const updateURL = (): void => {
 }
 
 onBeforeMount(() => {
+  window.addEventListener(
+    'message',
+    (event) => {
+      if (event.data.type !== 'cockpit:listenToDatalakeVariables') {
+        return
+      }
+      const { variable } = event.data
+      console.log('asked to listen to ', variable)
+      listenCockpitActionVariable(variable, (value) => {
+        iframe.value.contentWindow.postMessage({ type: 'cockpit:datalakeVariable', variable, value }, '*')
+      })
+    },
+    false
+  )
+
   if (Object.keys(widget.value.options).length !== 0) {
     return
   }
-
   widget.value.options = {
     source: defaultBlueOsAddress,
   }
diff --git a/src/libs/actions/data-lake.ts b/src/libs/actions/data-lake.ts
index faa3072fe..7ece20827 100644
--- a/src/libs/actions/data-lake.ts
+++ b/src/libs/actions/data-lake.ts
@@ -36,7 +36,7 @@ export const createCockpitActionVariable = (
   initialValue?: string | number | boolean
 ): void => {
   if (cockpitActionVariableInfo[variable.id]) {
-    throw new Error(`Cockpit action variable with id '${variable.id}' already exists. Update it instead.`)
+    console.warn(`Cockpit action variable with id '${variable.id}' already exists. Update it instead.`)
   }
   cockpitActionVariableInfo[variable.id] = variable
   cockpitActionVariableData[variable.id] = initialValue
diff --git a/src/libs/vehicle/ardupilot/ardupilot.ts b/src/libs/vehicle/ardupilot/ardupilot.ts
index 2e8269425..94025ab0b 100644
--- a/src/libs/vehicle/ardupilot/ardupilot.ts
+++ b/src/libs/vehicle/ardupilot/ardupilot.ts
@@ -46,6 +46,7 @@ import { type MissionLoadingCallback, type Waypoint, defaultLoadingCallback } fr
 
 import * as Vehicle from '../vehicle'
 import { defaultMessageFrequency } from './defaults'
+import { CockpitActionVariable, createCockpitActionVariable, setCockpitActionVariableData, updateCockpitActionVariableInfo } from '@/libs/actions/data-lake'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type ArduPilot = ArduPilotVehicle<any>
@@ -408,6 +409,8 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
         this._attitude.roll = attitude.roll
         this._attitude.pitch = attitude.pitch
         this._attitude.yaw = attitude.yaw
+        createCockpitActionVariable(new CockpitActionVariable('mainvehicle.attitude.yaw', 'mainvehicle.attitude.yaw', 'number'), attitude.yaw)
+        setCockpitActionVariableData('mainvehicle.attitude.yaw', attitude.yaw)
         this.onAttitude.emit()
         break
       }
diff --git a/vite.config.ts b/vite.config.ts
index 3bbdf9ef0..994cb736b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,8 +10,10 @@ import { getVersion } from './src/libs/non-browser-utils'
 // Check if we're running in Electron mode or building the application
 const isElectron = process.env.ELECTRON === 'true'
 const isBuilding = process.argv.includes('build')
+const isLibrary = process.env.BUILD_MODE === 'library'
 
-export default defineConfig({
+// Base configuration that will be merged
+const baseConfig = {
   plugins: [
     (isElectron || isBuilding) &&
       electron([
@@ -70,4 +72,40 @@ export default defineConfig({
   server: {
     host: '0.0.0.0',
   },
-})
+}
+
+// Library-specific configuration
+const libraryConfig = {
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/libs/external-api/api.ts'), // Change this to your library file
+      name: 'YourLibrary', // Change this to your library name
+      formats: ['es', 'umd'],
+      fileName: (format: string) => `cockpit-external-api.${format}.js`
+    },
+    rollupOptions: {
+      external: ['vue', 'vuetify'], // Add your external dependencies
+      output: {
+        globals: {
+          vue: 'Vue',
+          vuetify: 'Vuetify'
+        }
+      }
+    },
+    outDir: 'dist/lib', // Separate output directory for library builds
+    minify: false, // Disable minification for now
+  }
+}
+
+export default defineConfig((_configEnv) => {
+  if (isLibrary) {
+    // For library builds, merge the base config with library-specific settings
+    return {
+      ...baseConfig,
+      ...libraryConfig
+    }
+  }
+
+  // For regular builds, return the base config as-is
+  return baseConfig
+})
\ No newline at end of file