diff --git a/apps/examples/src/App.vue b/apps/examples/src/App.vue
index 9ec5838..642eb79 100644
--- a/apps/examples/src/App.vue
+++ b/apps/examples/src/App.vue
@@ -10,12 +10,26 @@ import ExampleZoomToLayer from '@/examples/Example-ZoomToLayer.vue'
 import ExampleZoomToLayerRaw from '@/examples/Example-ZoomToLayer.vue?raw'
 import ExampleMapEvents from '@/examples/Example-MapEvents.vue'
 import ExampleMapEventsRaw from '@/examples/Example-MapEvents.vue?raw'
-import ExampleCustomElements from '@/examples/Example-CustomElements.vue'
-import ExampleCustomElementsRaw from '@/examples/Example-CustomElements.vue?raw'
-import { onMounted } from 'vue'
+import ExampleCustomElementsHtml from '@/examples/Example-CustomElements.html?raw'
+import { onMounted, ref } from 'vue'
 import hljs from 'highlight.js'
+import '@geospatial-sdk/elements'
 
+function loadHtmlExample(html: string, root: HTMLElement) {
+  const template = document.createElement('template')
+  template.innerHTML = html
+  const geosdkMap = template.content.querySelector('geosdk-map')!
+  const geosdkScript = template.content.querySelector('script')!
+  const script = document.createElement('script')
+  script.type = 'text/javascript'
+  script.textContent = geosdkScript.textContent
+  root.appendChild(geosdkMap)
+  root.appendChild(script)
+}
+
+const example06_root = ref<HTMLElement>()
 onMounted(() => {
+  loadHtmlExample(ExampleCustomElementsHtml as string, example06_root.value!)
   hljs.highlightAll()
 })
 </script>
@@ -67,9 +81,9 @@ onMounted(() => {
     <ExampleContainer
       example-name="Example 6: show a map using a custom element"
       example-id="example06"
-      :source-code="ExampleCustomElementsRaw"
+      :source-code="ExampleCustomElementsHtml"
     >
-      <ExampleCustomElements></ExampleCustomElements>
+      <div class="w-full h-full" ref="example06_root"></div>
     </ExampleContainer>
   </div>
 </template>
diff --git a/apps/examples/src/examples/Example-CustomElements.html b/apps/examples/src/examples/Example-CustomElements.html
new file mode 100644
index 0000000..6fb836f
--- /dev/null
+++ b/apps/examples/src/examples/Example-CustomElements.html
@@ -0,0 +1,18 @@
+<geosdk-map id="map"></geosdk-map>
+
+<script type="text/javascript">
+  const geosdkMap = document.getElementById('map')
+  geosdkMap.context = {
+    layers: [
+      {
+        type: 'maplibre-style',
+        styleUrl:
+          'https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json'
+      }
+    ],
+    view: {
+      zoom: 12,
+      center: [2.33, 48.86]
+    }
+  }
+</script>
diff --git a/apps/examples/src/examples/Example-CustomElements.vue b/apps/examples/src/examples/Example-CustomElements.vue
deleted file mode 100644
index 43ffd2d..0000000
--- a/apps/examples/src/examples/Example-CustomElements.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { SdkMapElement } from '@geospatial-sdk/elements'
-import '@geospatial-sdk/elements' // this includes the web component
-
-const mapElement = ref<SdkMapElement>()
-onMounted(() => {
-  if (!mapElement.value) return
-  mapElement.value.context = {
-    layers: [
-      {
-        type: 'maplibre-style',
-        styleUrl:
-          'https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json'
-      }
-    ],
-    view: {
-      zoom: 12,
-      center: [2.33, 48.86]
-    }
-  }
-})
-</script>
-
-<template>
-  <geosdk-map ref="mapElement"></geosdk-map>
-</template>