diff --git a/demo/index.html b/demo/index.html
index 1ef4fa84..5e98a351 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -207,7 +207,7 @@ <h1 class="text-center m-3 mb-5">GCode Preview
                   <label for="drawBuildVolume">Render build volume</label>
                   <input type="checkbox" v-model="settings.drawBuildVolume" />
                 </div>
-                <div :class="{'has-text-grey' : !settings.drawBuildVolume}">
+                <div v-if="settings.buildVolume" :class="{'has-text-grey' : !settings.drawBuildVolume}">
                   <div class="controls">
                     <label for="buildVolumeX">Build volume (x)&nbsp;</label>
                     <input type="number" v-model="settings.buildVolume.x" step=10 :disabled="!settings.drawBuildVolume" />
diff --git a/demo/js/app.js b/demo/js/app.js
index cb82d367..f6b31438 100644
--- a/demo/js/app.js
+++ b/demo/js/app.js
@@ -197,6 +197,13 @@ export const app = (window.app = createApp({
       });
 
       watchEffect(() => {
+        preview.buildVolume = settings.value.drawBuildVolume ? settings.value.buildVolume : undefined;
+        if (preview.buildVolume) {
+          preview.buildVolume.x = +settings.value.buildVolume.x;
+          preview.buildVolume.y = +settings.value.buildVolume.y;
+          preview.buildVolume.z = +settings.value.buildVolume.z;
+        }
+
         preview.renderTravel = settings.value.renderTravel;
         preview.travelColor = settings.value.travelColor;
         preview.lineWidth = +settings.value.lineWidth;