diff --git a/.github/workflows/publish-lib.yml b/.github/workflows/publish-lib.yml
new file mode 100644
index 000000000..ef44cb558
--- /dev/null
+++ b/.github/workflows/publish-lib.yml
@@ -0,0 +1,65 @@
+name: Publish Library to NPM
+
+# Trigger on tag push
+on:
+  push:
+    tags:
+      - 'API-v*'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      # Setup Node.js environment
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+
+      # Extract version from tag
+      - name: Extract API version
+        run: echo "API_VERSION=${GITHUB_REF_NAME#API-v}" >> $GITHUB_ENV
+
+      # Setup Bun
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      # Update version in source code
+      - name: Update API version constant
+        run: |
+          sed -i "s/COCKPIT_WIDGET_API_VERSION = '.*'/COCKPIT_WIDGET_API_VERSION = '${{ env.API_VERSION }}'/" src/libs/external-api/api.ts
+
+      # Install dependencies
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+      
+      # Build library
+      - name: Build library
+        run: bun run build:lib
+        working-directory: .
+      
+      # Create package.json for distribution
+      - name: Create package.json for library
+        run: |
+          cd dist/lib
+          {
+            echo '{
+              "name": "@bluerobotics/cockpit-api",
+              "version": "'${{ env.API_VERSION }}'",
+              "main": "cockpit-external-api.umd.js",
+              "module": "cockpit-external-api.es.js",
+              "publishConfig": {
+                "access": "public"
+              }
+            }'
+          } > package.json
+      
+      # Publish to NPM
+      - name: Publish to NPM
+        run: npm publish
+        working-directory: dist/lib
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/package.json b/package.json
index f8674b64a..9a9f1144f 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..fd01ebfdc 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"
@@ -54,10 +55,11 @@
 
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
-import { computed, defineProps, onBeforeMount, ref, toRefs, watch } from 'vue'
+import { computed, defineProps, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 
 import { defaultBlueOsAddress } from '@/assets/defaults'
 import Snackbar from '@/components/Snackbar.vue'
+import { listenDataLakeVariable } from '@/libs/actions/data-lake'
 import { isValidURL } from '@/libs/utils'
 import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
@@ -65,7 +67,7 @@ import type { Widget } from '@/types/widgets'
 const interfaceStore = useAppInterfaceStore()
 
 const widgetStore = useWidgetManagerStore()
-
+const iframe = ref()
 const props = defineProps<{
   /**
    * Widget reference
@@ -96,17 +98,32 @@ const updateURL = (): void => {
   openSnackbar.value = true
 }
 
-onBeforeMount(() => {
-  if (Object.keys(widget.value.options).length !== 0) {
+const apiEventCallback = (event: MessageEvent): void => {
+  if (event.data.type !== 'cockpit:listenToDatalakeVariables') {
     return
   }
+  const { variable } = event.data
+  listenDataLakeVariable(variable, (value) => {
+    iframe.value.contentWindow.postMessage({ type: 'cockpit:datalakeVariable', variable, value }, '*')
+  })
+}
 
+onBeforeMount((): void => {
+  window.addEventListener('message', apiEventCallback, true)
+
+  if (Object.keys(widget.value.options).length !== 0) {
+    return
+  }
   widget.value.options = {
     source: defaultBlueOsAddress,
   }
   inputURL.value = defaultBlueOsAddress
 })
 
+onBeforeUnmount((): void => {
+  window.removeEventListener('message', apiEventCallback, true)
+})
+
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 const iframeStyle = computed<string>(() => {
diff --git a/src/libs/external-api/api.ts b/src/libs/external-api/api.ts
new file mode 100644
index 000000000..2ad255286
--- /dev/null
+++ b/src/libs/external-api/api.ts
@@ -0,0 +1,43 @@
+import { CallbackRateLimiter } from './callback-rate-limiter'
+
+/**
+ * Current version of the Cockpit Widget API
+ */
+export const COCKPIT_WIDGET_API_VERSION = '0.0.0'
+
+/**
+ * Listens to updates for a specific datalake variable.
+ * This function sets up a message listener that receives updates from the parent window
+ * and forwards them to the callback function, respecting the specified rate limit.
+ * @param {string} variableId - The name of the datalake variable to listen to
+ * @param {Function} callback - The function to call when the variable is updated
+ * @param {number} maxRateHz - The maximum rate (in Hz) at which updates should be received. Default is 10 Hz
+ * @example
+ * ```typescript
+ * // Listen to updates at 5Hz
+ * listenToDatalakeVariable('cockpit-memory-usage', (value) => {
+ *   console.log('Memory Usage:', value);
+ * }, 5);
+ * ```
+ */
+export function listenToDatalakeVariable(variableId: string, callback: (data: any) => void, maxRateHz = 10): void {
+  // Convert Hz to minimum interval in milliseconds
+  const minIntervalMs = 1000 / maxRateHz
+  const rateLimiter = new CallbackRateLimiter(minIntervalMs)
+
+  const message = {
+    type: 'cockpit:listenToDatalakeVariables',
+    variable: variableId,
+    maxRateHz: maxRateHz,
+  }
+  window.parent.postMessage(message, '*')
+
+  window.addEventListener('message', function handler(event) {
+    if (event.data.type === 'cockpit:datalakeVariable' && event.data.variable === variableId) {
+      // Only call callback if we haven't exceeded the rate limit
+      if (rateLimiter.canCall()) {
+        callback(event.data.value)
+      }
+    }
+  })
+}
diff --git a/src/libs/external-api/callback-rate-limiter.ts b/src/libs/external-api/callback-rate-limiter.ts
new file mode 100644
index 000000000..1ebf35592
--- /dev/null
+++ b/src/libs/external-api/callback-rate-limiter.ts
@@ -0,0 +1,29 @@
+/**
+ * A simple rate limiter for callbacks that ensures a minimum time interval between calls
+ */
+export class CallbackRateLimiter {
+  private lastCallTime: number
+
+  /**
+   * Creates a new CallbackRateLimiter
+   * @param {number} minIntervalMs - The minimum time (in milliseconds) that must pass between calls
+   */
+  constructor(private minIntervalMs: number) {}
+
+  /**
+   * Checks if enough time has passed to allow another call
+   * @returns {boolean} true if enough time has passed since the last call, false otherwise
+   */
+  public canCall(): boolean {
+    const now = Date.now()
+    const lastCall = this.lastCallTime || 0
+    const timeSinceLastCall = now - lastCall
+
+    if (timeSinceLastCall >= this.minIntervalMs) {
+      this.lastCallTime = now
+      return true
+    }
+
+    return false
+  }
+}
diff --git a/src/libs/external-api/examples/test.html b/src/libs/external-api/examples/test.html
new file mode 100644
index 000000000..3fb90b106
--- /dev/null
+++ b/src/libs/external-api/examples/test.html
@@ -0,0 +1,34 @@
+<!--
+This is a test page to test the datalake consumption of the external-api library, in a widget
+to test, run "python -m http.server" in the cockpit root directory and create an iframe widget with the url
+http://localhost:8000/src/libs/external-api/examples/test.html
+This should be served independently of the cockpit app in order to test the "same-origin" policies
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            background-color: white;
+        }
+    </style>
+</head>
+<body>
+    <h1>Datalake consumption test</h1>
+    <div id="pitchDisplay"></div>
+    <div id="rollDisplay"></div>
+
+    <script src="/dist/lib/cockpit-external-api.browser.js"></script>
+    <script>
+        CockpitAPI.listenToDatalakeVariable('ATTITUDE/pitch', function(data) {
+          document.getElementById('pitchDisplay').innerText = 'Pitch (1Hz): ' + data;
+        }, 1);
+        CockpitAPI.listenToDatalakeVariable('ATTITUDE/roll', function(data) {
+
+          document.getElementById('rollDisplay').innerText = 'Roll (10Hz): ' + data;
+        }, 10);
+    </script>
+</body>
+</html>
diff --git a/src/libs/vehicle/ardupilot/ardupilot.ts b/src/libs/vehicle/ardupilot/ardupilot.ts
index 2e8269425..a3779ccb5 100644
--- a/src/libs/vehicle/ardupilot/ardupilot.ts
+++ b/src/libs/vehicle/ardupilot/ardupilot.ts
@@ -1,6 +1,12 @@
 import { differenceInMilliseconds } from 'date-fns'
 import { unit } from 'mathjs'
 
+import {
+  createDataLakeVariable,
+  DataLakeVariable,
+  getDataLakeVariableInfo,
+  setDataLakeVariableData,
+} from '@/libs/actions/data-lake'
 import { sendMavlinkMessage } from '@/libs/communication/mavlink'
 import type { MAVLinkMessageDictionary, Package, Type } from '@/libs/connection/m2r/messages/mavlink2rest'
 import {
@@ -45,6 +51,7 @@ import type { MetadataFile } from '@/types/ardupilot-metadata'
 import { type MissionLoadingCallback, type Waypoint, defaultLoadingCallback } from '@/types/mission'
 
 import * as Vehicle from '../vehicle'
+import { flattenData } from './data-flattener'
 import { defaultMessageFrequency } from './defaults'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -294,6 +301,30 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
       return
     }
 
+    const messageType = mavlink_message.message.type
+
+    // Special handling for NAMED_VALUE_FLOAT messages
+    if (messageType === 'NAMED_VALUE_FLOAT') {
+      const name = (mavlink_message.message.name as string[]).join('').replace(/\0/g, '')
+      const path = `${messageType}/${name}`
+      if (getDataLakeVariableInfo(path) === undefined) {
+        createDataLakeVariable(new DataLakeVariable(path, path, 'number'))
+      }
+      setDataLakeVariableData(path, mavlink_message.message.value)
+      return
+    }
+
+    // For all other messages, use the flattener
+    const flattened = flattenData(mavlink_message.message)
+    flattened.forEach(({ path, value }) => {
+      if (value === null) return
+      if (typeof value !== 'string' && typeof value !== 'number') return
+      if (getDataLakeVariableInfo(path) === undefined) {
+        createDataLakeVariable(new DataLakeVariable(path, path, typeof value === 'string' ? 'string' : 'number'))
+      }
+      setDataLakeVariableData(path, value)
+    })
+
     // Update our internal messages
     this._messages.set(mavlink_message.message.type, { ...mavlink_message.message, epoch: new Date().getTime() })
 
diff --git a/src/libs/vehicle/ardupilot/data-flattener.ts b/src/libs/vehicle/ardupilot/data-flattener.ts
new file mode 100644
index 000000000..755ace42d
--- /dev/null
+++ b/src/libs/vehicle/ardupilot/data-flattener.ts
@@ -0,0 +1,104 @@
+/**
+ * Result of flattening a data structure
+ */
+export type FlattenedPair = {
+  /**
+   * Full path to the data, including message type and field name
+   * e.g. "ATTITUDE/roll" or "NAMED_VALUE_FLOAT/GpsHDOP"
+   */
+  path: string
+  /**
+   * The actual value of the field after flattening
+   * - Primitive values are kept as-is
+   * - String arrays are joined
+   * - Number arrays create multiple entries
+   */
+  value: string | number | boolean
+  /**
+   * The type of the flattened value
+   * Used to create the appropriate DataLakeVariable
+   */
+  type: 'string' | 'number' | 'boolean'
+}
+
+/**
+ * Type guard to check if a value is an array of numbers
+ * @param {unknown[]} data The data to check
+ * @returns {data is number[]} True if the array contains numbers
+ */
+function isNumberArray(data: unknown[]): data is number[] {
+  return typeof data[0] === 'number'
+}
+
+/**
+ * Type guard to check if a value is an array of strings
+ * @param {unknown[]} data The data to check
+ * @returns {data is string[]} True if the array contains strings
+ */
+function isStringArray(data: unknown[]): data is string[] {
+  return typeof data[0] === 'string'
+}
+
+/**
+ * Flattens complex data structures into simple types that can be stored in the data lake
+ * @param {Record<string, unknown>} data The data to flatten
+ * @returns {FlattenedPair[]} Array of flattened path/value pairs
+ */
+export function flattenData(data: Record<string, unknown>): FlattenedPair[] {
+  if (!('type' in data)) return []
+  const messageName = data.type as string
+
+  // Special handling for NAMED_VALUE_FLOAT messages
+  if (messageName === 'NAMED_VALUE_FLOAT') {
+    const name = (data.name as string[]).join('').replace(/\0/g, '')
+    return [
+      {
+        path: `${messageName}/${name}`,
+        type: 'number',
+        value: data.value as number,
+      },
+      ...Object.entries(data)
+        .filter(([key]) => !['name', 'value', 'type'].includes(key))
+        .map(([key, value]) => ({
+          path: `${messageName}/${key}`,
+          type: typeof value as 'string' | 'number' | 'boolean',
+          value: value as string | number | boolean,
+        })),
+    ]
+  }
+
+  // For all other messages
+  return Object.entries(data)
+    .filter(([key]) => key !== 'type')
+    .flatMap(([key, value]) => {
+      if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+        return [
+          {
+            path: `${messageName}/${key}`,
+            type: typeof value as 'string' | 'number' | 'boolean',
+            value,
+          },
+        ]
+      }
+      if (Array.isArray(value)) {
+        if (value.length === 0) return []
+        if (isNumberArray(value)) {
+          return value.map((item, index) => ({
+            path: `${messageName}/${key}/${index}`,
+            type: 'number',
+            value: item,
+          }))
+        }
+        if (isStringArray(value)) {
+          return [
+            {
+              path: `${messageName}/${key}`,
+              type: 'string',
+              value: value.join(''),
+            },
+          ]
+        }
+      }
+      return []
+    })
+}
diff --git a/vite.config.ts b/vite.config.ts
index 3bbdf9ef0..628b3a513 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([
@@ -44,13 +46,15 @@ export default defineConfig({
     vuetify({
       autoImport: true,
     }),
-    VitePWA({
-      registerType: 'autoUpdate',
-      devOptions: {
-        enabled: true,
-      },
-      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
-    }),
+    // Only include PWA plugin when NOT building the library
+    !isLibrary &&
+      VitePWA({
+        registerType: 'autoUpdate',
+        devOptions: {
+          enabled: true,
+        },
+        includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
+      }),
   ].filter(Boolean),
   define: {
     'process.env': {},
@@ -70,4 +74,47 @@ 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'),
+      name: 'CockpitAPI',
+      formats: ['es', 'umd', 'iife'],
+      fileName: (format: string) => {
+        switch (format) {
+          case 'iife':
+            return 'cockpit-external-api.browser.js'
+          default:
+            return `cockpit-external-api.${format}.js`
+        }
+      },
+    },
+    rollupOptions: {
+      external: ['vue', 'vuetify'],
+      output: {
+        globals: {
+          vue: 'Vue',
+          vuetify: 'Vuetify',
+        },
+      },
+    },
+    outDir: 'dist/lib',
+    // Add copyPublicDir: false to prevent copying public assets
+    copyPublicDir: false,
+  },
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default defineConfig((_configEnv) => {
+  if (isLibrary) {
+    // For library builds, merge the base config with library-specific settings
+    return {
+      ...baseConfig,
+      ...libraryConfig,
+    } as any
+  }
+  return baseConfig as any
 })