diff --git a/packages/x-components/src/x-modules/device/components/device-detector.vue b/packages/x-components/src/x-modules/device/components/device-detector.vue
index a9dbfa9c4c..3498584cba 100644
--- a/packages/x-components/src/x-modules/device/components/device-detector.vue
+++ b/packages/x-components/src/x-modules/device/components/device-detector.vue
@@ -17,7 +17,7 @@
   type MaxWidth = number;
 
   /**
-   * This component helps detecting or setting a device, that can be used later to create
+   * This component helps to detect or setting a device, that can be used later to create
    * different layouts optimized for different devices. This detected device is available under
    * the {@link XComponentAliasAPI.device} property.
    *
@@ -154,7 +154,7 @@ name given an object containing all the possible breakpoints.
 
 _Try resizing the browser window!_
 
-```vue
+```vue live
 <template>
   <div>
     <DeviceDetector :breakpoints="breakpoints" />
@@ -190,7 +190,7 @@ matter what the window width is.
 
 _Try resizing the window to check that it never changes_
 
-```vue
+```vue live
 <template>
   <div>
     <DeviceDetector force="mobile" :breakpoints="breakpoints" />
@@ -226,7 +226,7 @@ payload. This device is stored in a data variable and then displayed.
 
 _Try resizing the browser window!_
 
-```vue
+```vue live
 <template>
   <div>
     <DeviceDetector :breakpoints="breakpoints" @DeviceProvided="storeDevice" />