diff --git a/demo/index.html b/demo/index.html
index ef89f527..a00f413f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+
 <head>
   <script src="https://cdn.lrkt-in.com/LogRocket.min.js" crossorigin="anonymous"></script>
   <script>document.location.hostname.includes('gcode-preview.web.app') && window.LogRocket && window.LogRocket.init('x64tmd/gcode-preview-demo');</script>
@@ -15,7 +16,7 @@
       loadAnalytics();
 
       window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
+      function gtag() { dataLayer.push(arguments); }
       gtag('js', new Date());
       gtag('config', 'UA-165890546-1');
     }
@@ -24,84 +25,70 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 
-<body >
+<body>
   <div id="app">
     <div class="widget right bottom border slide-in-right glass is-clipped" v-cloak v-if="thumbnail || model">
-      <img v-if="thumbnail" 
-        draggable="false"
-        id=thumbnail
-        class="is-block is-fullwidth" 
-        alt="thumbnail generated by slicer" 
-        :src="thumbnail" />
+      <img v-if="thumbnail" draggable="false" id=thumbnail class="is-block is-fullwidth"
+        alt="thumbnail generated by slicer" :src="thumbnail" />
       <div class="file-info">
-        
+
         <div class="p-1" v-if="model">
           <div><a :href="model?.original">{{model?.name}}</a> <br>
-            <span v-if="model?.designer" class="is-size-8">by {{model?.designer}}</span></div>
+            <span v-if="model?.designer" class="is-size-8">by {{model?.designer}}</span>
+          </div>
 
           <div class="license is-size-8">{{model?.license}}</div>
         </div>
 
       </div>
     </div>
-    <div class="sidebar p-4 widget left top glass slide-in-left border"  >
-     
-      <h1 class="text-center m-3 mb-5">GCode Preview  
+    <div class="sidebar p-4 widget left top glass slide-in-left border">
+
+      <h1 class="text-center m-3 mb-5">GCode Preview
       </h1>
       <div class="scroll-container">
         <div>
-          <section class="flex is-justify-content-center"> 
+          <section class="flex is-justify-content-center">
             <div class="bulma-select">
-              <select id="settings-presets"
-                  v-cloak
-                  v-model="selectedPreset">
+              <select id="settings-presets" v-cloak v-model="selectedPreset">
                 <option v-for="(preset, name) in presets" :value="name">{{preset.title}}</option>
               </select>
             </div>
           </section>
-          
+
           <div class="bulma-tabs bulma-is-small">
             <ul>
               <li :class="{ 'bulma-is-active': activeTab == 'layers' }"><a @click="selectTab('layers')">Layers</a></li>
               <li :class="{ 'bulma-is-active': activeTab == 'travel' }"><a @click="selectTab('travel')">Travel</a></li>
-              <li :class="{ 'bulma-is-active': activeTab == 'extrusion' }"><a @click="selectTab('extrusion')">Extrusion</a></li>
-              <li :class="{ 'bulma-is-active': activeTab == 'build-volume' }"><a @click="selectTab('build-volume')">Build volume</a></li>
+              <li :class="{ 'bulma-is-active': activeTab == 'extrusion' }"><a
+                  @click="selectTab('extrusion')">Extrusion</a></li>
+              <li :class="{ 'bulma-is-active': activeTab == 'build-volume' }"><a
+                  @click="selectTab('build-volume')">Build volume</a></li>
             </ul>
-          </div>  
+          </div>
           <div class="is-size-7">
             <div class="panel" v-cloak v-show="activeTab == 'layers'">
-              <section  v-if="layerCount > 1">
+              <section v-if="layerCount > 1">
                 <div class="controls">
                   <label>
                     Start Layer
-                  <input type="checkbox" v-model="settings.enableStartLayer" />
+                    <input type="checkbox" v-model="settings.enableStartLayer" />
                   </label>
-                  <label :class="{'has-text-grey' : !settings.enableStartLayer}" ><output id="start-layer-value" >{{settings.startLayer}}</output></label>&nbsp;
-                  <input 
-                  type="range"
-                  min="1"
-                  :max="settings.maxLayer"
-                  id="start-layer"
-                  v-model="settings.startLayer"
-                  :disabled="!settings.enableStartLayer"
-                  />
+                  <label :class="{'has-text-grey' : !settings.enableStartLayer}"><output
+                      id="start-layer-value">{{settings.startLayer}}</output></label>&nbsp;
+                  <input type="range" min="1" :max="settings.maxLayer" id="start-layer" v-model="settings.startLayer"
+                    :disabled="!settings.enableStartLayer" />
                 </div>
                 <div class="controls">
                   <label>
                     End Layer
-                  <input type="checkbox" v-model="settings.enableEndLayer" />
+                    <input type="checkbox" v-model="settings.enableEndLayer" />
                   </label>
-                  <label :class="{'has-text-grey' : !settings.enableEndLayer}"> <output id="end-layer-value" >{{settings.endLayer}}</output></label>&nbsp;
+                  <label :class="{'has-text-grey' : !settings.enableEndLayer}"> <output
+                      id="end-layer-value">{{settings.endLayer}}</output></label>&nbsp;
                   <!-- HACK: extra :value binding to ensure the value is set after the max is updated -->
-                  <input
-                  v-model="settings.endLayer"
-                  type="range"
-                  min="1"
-                  :max="settings.maxLayer"
-                  id="end-layer"
-                  :value="settings.endLayer"
-                  :disabled="!settings.enableEndLayer"
-                  /> 
+                  <input v-model="settings.endLayer" type="range" min="1" :max="settings.maxLayer" id="end-layer"
+                    :value="settings.endLayer" :disabled="!settings.enableEndLayer" />
                 </div>
                 <div class="controls">
                   <label for="single-layer-mode">Single layer mode</label>
@@ -120,66 +107,57 @@ <h1 class="text-center m-3 mb-5">GCode Preview
               <section>
                 <div class="controls">
                   <label for="travel">Render travel</label>
-                  <input type="checkbox" id="travel"  v-model="settings.renderTravel" />
+                  <input type="checkbox" id="travel" v-model="settings.renderTravel" />
                 </div>
                 <div class="controls">
                   <label :class="{'has-text-grey' : !settings.renderTravel}" for="travel-color">Travel color</label>
-                  <input type="color" id="travel-color" v-model="settings.travelColor" :disabled="!settings.renderTravel" />
+                  <input type="color" id="travel-color" v-model="settings.travelColor"
+                    :disabled="!settings.renderTravel" />
                 </div>
               </section>
             </div>
-            
+
             <div class="panel" v-cloak v-show="activeTab == 'extrusion'">
               <section class="mb-0">
                 <div class="controls">
-                  <label for="extrusion">Render extrusion</label
-                  ><input type="checkbox" v-model="settings.renderExtrusion" />
+                  <label for="extrusion">Render extrusion</label><input type="checkbox"
+                    v-model="settings.renderExtrusion" />
                 </div>
               </section>
 
               <div :class="{'has-text-grey': !settings.renderExtrusion}">
-                
+
                 <section>
                   <div class="controls">
-                    <label for="render-tubes">Render as tubes</label
-                    ><input type="checkbox" v-model="settings.renderTubes" :disabled="!settings.renderExtrusion"/>
+                    <label for="render-tubes">Render as tubes</label><input type="checkbox"
+                      v-model="settings.renderTubes" :disabled="!settings.renderExtrusion" />
                   </div>
                   <div class="controls" v-show="!settings.renderTubes">
                     <label>Line width <output>{{settings.lineWidth}}</output></label>&nbsp;
-                  <input
-                    type="range"
-                    min="1"
-                    step="0.5"
-                    max="10"
-                    v-model="settings.lineWidth"
-                    :disabled="!settings.renderExtrusion"
-                  />
-                </div>
-                
-                <div class="controls" v-show="settings.renderTubes">
-                  <label>Extrusion width <output>{{settings.extrusionWidth}}</output></label>&nbsp;
-                  <input
-                    type="number"
-                    min="0.05"
-                    max="3.0"
-                    step="0.05"
-                    v-model="settings.extrusionWidth"
-                    :disabled="!settings.renderExtrusion"
-                  />
-                </div>
+                    <input type="range" min="1" step="0.5" max="10" v-model="settings.lineWidth"
+                      :disabled="!settings.renderExtrusion" />
+                  </div>
+
+                  <div class="controls" v-show="settings.renderTubes">
+                    <label>Extrusion width <output>{{settings.extrusionWidth}}</output></label>&nbsp;
+                    <input type="number" min="0.05" max="3.0" step="0.05" v-model="settings.extrusionWidth"
+                      :disabled="!settings.renderExtrusion" />
+                  </div>
                 </section>
 
                 <section class="extrusion-colors">
-                  <div class="flex just-between"># of extrusion colors  <div class="controls">
-                    <button @click="addColor">+</button>
-                    <button @click="removeColor">-</button>
-                  </div></div>
+                  <div class="flex just-between"># of extrusion colors <div class="controls">
+                      <button @click="addColor">+</button>
+                      <button @click="removeColor">-</button>
+                    </div>
+                  </div>
 
                   <div class="controls" v-for="color,index in settings.colors">
                     <label for="extrusion-color-t0">Extrusion color (T{{index}})</label>
-                    <input type="color" v-model="settings.colors[index]" :key="index" :disabled="!settings.renderExtrusion" />
+                    <input type="color" v-model="settings.colors[index]" :key="index"
+                      :disabled="!settings.renderExtrusion" />
                   </div>
-                  
+
                 </section>
 
                 <!-- <section>
@@ -197,7 +175,7 @@ <h1 class="text-center m-3 mb-5">GCode Preview
                   </div>
                   <div class="controls">
                     <label :class="{'has-text-grey' : !settings.highlightLastSegment}" for="last-segment-color">Last segment color</label>
-                    <input type="color" id="last-segment-color" v-model="settings.lastSegmentColor" 
+                    <input type="color" id="last-segment-color" v-model="settings.lastSegmentColor"
                     :disabled="!settings.highlightLastSegment || !settings.renderExtrusion" />
                   </div>
                 </section> -->
@@ -206,26 +184,30 @@ <h1 class="text-center m-3 mb-5">GCode Preview
             </div>
             <div class="panel" v-cloak v-show="activeTab == 'build-volume'">
               <section>
-                <div  class="controls">
+                <div class="controls">
                   <label for="drawBuildVolume">Render build volume</label>
                   <input type="checkbox" v-model="settings.drawBuildVolume" />
                 </div>
                 <div :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" />
+                    <input type="number" v-model="settings.buildVolume.x" step=10
+                      :disabled="!settings.drawBuildVolume" />
                   </div>
-                  <div  class="controls">
+                  <div class="controls">
                     <label for="buildVolumeY">Build volume (y)&nbsp;</label>
-                    <input type="number" v-model="settings.buildVolume.y" step=10 :disabled="!settings.drawBuildVolume" />
+                    <input type="number" v-model="settings.buildVolume.y" step=10
+                      :disabled="!settings.drawBuildVolume" />
                   </div>
-                  <div  class="controls">
+                  <div class="controls">
                     <label for="buildVolumeZ">Build volume (z)&nbsp;</label>
-                    <input type="number" v-model="settings.buildVolume.z" step=10 :disabled="!settings.drawBuildVolume" />
+                    <input type="number" v-model="settings.buildVolume.z" step=10
+                      :disabled="!settings.drawBuildVolume" />
                   </div>
                   <div class="controls">
                     <label for="smallGrid">Small grid</label>
-                    <input type="checkbox" v-model="settings.buildVolume.smallGrid" :disabled="!settings.drawBuildVolume" />
+                    <input type="checkbox" v-model="settings.buildVolume.smallGrid"
+                      :disabled="!settings.drawBuildVolume" />
                   </div>
                 </div>
                 <div class="controls">
@@ -234,10 +216,10 @@ <h1 class="text-center m-3 mb-5">GCode Preview
                 </div>
                 <div class="controls">
                   <label for="bounding-color">Bounding box</label>
-                  <input type="checkbox" v-model="drawBoundingBox" />
+                  <input type="checkbox" v-model="settings.drawBoundingBox" />
                 </div>
                 <div class="controls">
-                  <label for="background-color">Background color</label>
+                  <label for="background-color">Bounding box color</label>
                   <input type="color" v-model="settings.boundingBoxColor" />
                 </div>
               </section>
@@ -247,23 +229,22 @@ <h1 class="text-center m-3 mb-5">GCode Preview
       </div>
       <div>
         <footer class="is-size-7 p-0 has-text-grey-light">
-         
-          
+
+
           <div>
             <a class="has-text-grey-light" href="https://github.com/remcoder/gcode-preview">GitHub</a>
             - <a class="has-text-grey-light" href="/docs">API docs</a>
-            
+
           </div>
           <div>MIT license </div>
         </footer>
       </div>
     </div>
-    <div class="widget top right glass p-3 is-size-7 slide-in-down border"><label class="mr-2">dev mode</label><input v-model="enableDevMode" type="checkbox" /> </div>
+    <div class="widget top right glass p-3 is-size-7 slide-in-down border"><label class="mr-2">dev mode</label><input
+        v-model="enableDevMode" type="checkbox" /> </div>
     <div class="absolute left bottom m-3 has-text-grey slide-in-up">Drop a gcode file to preview it</div>
     <div class="wrapper">
-      <canvas class="preview" :class="{ 'dragging': settings.dragging }" 
-        @update.prevent="update"
-        ></canvas>
+      <canvas class="preview" :class="{ 'dragging': settings.dragging }"></canvas>
     </div>
   </div>
   <script type="importmap">
diff --git a/demo/js/app.js b/demo/js/app.js
index 85cde8aa..51834dda 100644
--- a/demo/js/app.js
+++ b/demo/js/app.js
@@ -24,7 +24,6 @@ export const app = (window.app = createApp({
     const dragging = ref(false);
     const settings = ref(Object.assign({}, defaultSettings));
     const enableDevMode = ref(false);
-    const drawBoundingBox = ref(false);
 
     watch(selectedPreset, (preset) => {
       selectPreset(preset);
@@ -36,32 +35,10 @@ export const app = (window.app = createApp({
 
     const removeColor = () => settings.value.colors.pop();
 
-    const update = async (evt) => {
-      model.value = {
-        name: evt.detail.filename
-      };
-      applyDevMode(enableDevMode.value); // HACK: force dev mode to update UI
-      updateUI();
-    };
-
     // Update UI with current preview settings
     const updateUI = async () => {
-      const { parser, sceneManager, countLayers } = preview;
-      const {
-        topLayerColor,
-        lastSegmentColor,
-        buildVolume,
-        singleLayerMode,
-        renderTravel,
-        travelColor,
-        renderExtrusion,
-        lineWidth,
-        renderTubes,
-        extrusionWidth,
-        boundingBoxColor,
-        extrusionColor,
-        backgroundColor
-      } = sceneManager;
+      console.log('Updating UI');
+      const { parser, countLayers, sceneManager } = preview;
       const { thumbnails } = parser.metadata;
 
       // thumbnail.value = thumbnails['220x124']?.src;
@@ -72,33 +49,14 @@ export const app = (window.app = createApp({
       thumbnail.value = thumbnails[largestThumbnailKey]?.src;
 
       layerCount.value = countLayers;
-      const colors = extrusionColor instanceof Array ? extrusionColor : [extrusionColor];
+      sceneManager.endLayer = countLayers;
+
       const currentSettings = {
-        startLayer: 1,
-        enableStartLayer: false,
         maxLayer: countLayers || 1000,
-        endLayer: countLayers,
-        enableEndLayer: false,
-        singleLayerMode,
-        renderTravel,
-        travelColor: '#' + travelColor.getHexString(),
-        renderExtrusion,
-        lineWidth,
-        renderTubes,
-        extrusionWidth,
-        colors: colors.map((c) => '#' + c.getHexString()),
-        topLayerColor: '#' + topLayerColor?.getHexString(),
-        highlightTopLayer: !!topLayerColor,
-        lastSegmentColor: '#' + lastSegmentColor?.getHexString(),
-        highlightLastSegment: !!lastSegmentColor,
-        buildVolume: buildVolume,
-        drawBuildVolume: !!buildVolume,
-        backgroundColor: '#' + backgroundColor.getHexString(),
-        boundingBoxColor
+        endLayer: countLayers
       };
-      console.debug('app settings:', currentSettings);
+
       Object.assign(settings.value, currentSettings);
-      sceneManager.endLayer = countLayers;
 
       applyDevMode(enableDevMode.value);
     };
@@ -113,36 +71,28 @@ export const app = (window.app = createApp({
       const gcodeStream = response.body.pipeThrough(new TextDecoderStream());
 
       const prevDevMode = preview.devMode;
-      // preview.clear();
       preview.devMode = prevDevMode;
 
-      await preview.processGCodeStream(gcodeStream, { render: false }); // rendering will be done reactively
-    };
-
-    const render = async () => {
-      if (loadProgressive.value && preview.job.layers !== null) {
-        await preview.sceneManager.renderAnimated();
-      } else {
-        preview.render();
-      }
+      await preview.processGCodeStream(gcodeStream); // rendering will be done reactively
+      updateUI();
     };
 
     const selectPreset = async (presetName) => {
-      const canvas = document.querySelector('canvas.preview');
+      preview.clear();
       const preset = presets[presetName];
       model.value = preset.model;
 
-      // cascade settings: first defaults, then apply the preset, finally some overrides
       const options = {
         ...defaultSettings,
-        ...preset,
-        canvas,
-        droppable: true,
-        backgroundColor: initialBackgroundColor
+        ...preset
       };
+      if (options.initialCameraPosition) {
+        preview.sceneManager.camera.position.fromArray(options.initialCameraPosition);
+      }
+
+      console.debug('Applying preset', presetName, options);
 
-      // update UI state
-      drawBoundingBox.value = options.boundingBoxColor !== undefined;
+      Object.assign(settings.value, options);
 
       // reset previous state
       const lilGuiElement = document.querySelector('.lil-gui');
@@ -150,34 +100,38 @@ export const app = (window.app = createApp({
       const stats = document.querySelector('.stats');
       if (stats) stats.parentNode.removeChild(stats);
       if (defaultSettings.devMode) defaultSettings.devMode.statsContainer = statsContainer();
-      preview?.dispose();
 
-      window['_preview'] = preview = new GCodePreview(options);
-
-      // resize preview on canvas resize (TODO: move to GCodePreview)
-      if (observer) observer.disconnect();
-      observer = new ResizeObserver(() => preview.sceneManager.resize());
-      observer.observe(canvas);
-
-      applyDevMode(enableDevMode.value); // HACK: force dev mode to update UI
-
-      await loadGCodeFromServer(preset.file);
-      applyDevMode(enableDevMode.value);
-
-      updateUI();
+      loadGCodeFromServer(preset.file);
     };
 
     function applyDevMode(enabled) {
       // these elements will be recreated when changing presets, so we'll look them up dynamically
       document.querySelectorAll('.lil-gui, .stats').forEach((el) => (el.style.display = enabled ? 'block' : 'none'));
     }
+
     watch(enableDevMode, applyDevMode);
 
     onMounted(async () => {
-      await selectPreset(defaultPreset);
+      const canvas = document.querySelector('canvas.preview');
+
+      window['_preview'] = preview = new GCodePreview({
+        ...defaultSettings,
+        canvas: canvas,
+        droppable: true,
+        backgroundColor: initialBackgroundColor
+      });
+
+      // resize preview on canvas resize (TODO: move to GCodePreview)
+      if (observer) observer.disconnect();
+      observer = new ResizeObserver(() => preview.sceneManager.resize());
+      observer.observe(canvas);
+
+      // to update the layer count and the thumbnail when available
+      preview.addEventListener(['jobUpdated', 'streamReadEnd'], () => {
+        updateUI();
+      });
 
       watchEffect(() => {
-        if (!preview) return;
         preview.sceneManager.backgroundColor = settings.value.backgroundColor;
 
         if (preview.sceneManager.buildVolume && settings.value.drawBuildVolume) {
@@ -197,13 +151,12 @@ export const app = (window.app = createApp({
         } else if (preview.sceneManager.buildVolume && !settings.value.drawBuildVolume) {
           preview.sceneManager.buildVolume = undefined;
         }
-        preview.sceneManager.boundingBoxColor = drawBoundingBox.value
-          ? (settings.value.boundingBoxColor ?? 'magenta')
+        preview.sceneManager.boundingBoxColor = settings.value.drawBoundingBox
+          ? settings.value.boundingBoxColor
           : undefined;
       });
 
       watchEffect(() => {
-        if (!preview) return;
         preview.sceneManager.renderTravel = settings.value.renderTravel;
         preview.sceneManager.travelColor = settings.value.travelColor;
         preview.sceneManager.lineWidth = +settings.value.lineWidth;
@@ -218,16 +171,9 @@ export const app = (window.app = createApp({
         preview.sceneManager.lastSegmentColor = settings.value.highlightLastSegment
           ? settings.value.lastSegmentColor
           : undefined;
-
-        // run render after settings have been applied
-        // this is needed to prevent reactivity attaching the render function
-        setTimeout(() => {
-          render();
-        }, 0);
       });
 
       watchEffect(() => {
-        if (!preview) return;
         const startLayer = parseIntOrDefault(settings.value.startLayer, undefined);
         const endLayer = parseIntOrDefault(settings.value.endLayer, undefined);
 
@@ -236,15 +182,15 @@ export const app = (window.app = createApp({
       });
 
       watchEffect(() => {
-        if (!preview) return;
         preview.sceneManager.singleLayerMode = settings.value.singleLayerMode;
       });
 
       watchEffect(() => {
-        if (!preview) return;
         preview.sceneManager.extrusionColor =
           settings.value.colors.length === 1 ? settings.value.colors[0] : settings.value.colors;
       });
+
+      selectPreset(defaultPreset);
     });
 
     return {
@@ -259,11 +205,9 @@ export const app = (window.app = createApp({
       settings,
       loadProgressive,
       enableDevMode,
-      drawBoundingBox,
       selectTab,
       addColor,
       removeColor,
-      update,
       resetUI: updateUI,
       loadGCodeFromServer,
       selectPreset
diff --git a/demo/js/default-settings.js b/demo/js/default-settings.js
index b9d0d9cf..0f8881f8 100644
--- a/demo/js/default-settings.js
+++ b/demo/js/default-settings.js
@@ -29,5 +29,7 @@ export const defaultSettings = {
   highlightLastSegment: false,
   lastSegmentColor: null,
   drawBuildVolume: true,
-  backgroundColor: '#141414'
+  backgroundColor: '#141414',
+  boundingBoxColor: '#A830F8',
+  drawBoundingBox: false
 };
diff --git a/demo/js/presets.js b/demo/js/presets.js
index 0a10c53d..520fa5e0 100644
--- a/demo/js/presets.js
+++ b/demo/js/presets.js
@@ -10,7 +10,7 @@ export const presets = {
     },
     extrusionWidth: 0.45,
     lineHeight: 0.2,
-    extrusionColor: ['#95dfa1'],
+    colors: ['#95dfa1'],
     travelColor: 'red',
     buildVolume: {
       x: 180,
@@ -30,7 +30,7 @@ export const presets = {
     },
     extrusionWidth: 0.5,
     lineHeight: 0.3,
-    extrusionColor: ['#95dfa1'],
+    colors: ['#95dfa1'],
     travelColor: 'red',
     topLayerColor: undefined,
     lastSegmentColor: undefined,
@@ -55,7 +55,7 @@ export const presets = {
     minLayerThreshold: 0.6,
     renderExtrusion: true,
     renderTubes: true,
-    extrusionColor: ['#8782bf'],
+    colors: ['#8782bf'],
     renderTravel: true,
     travelColor: '#00FF00',
     topLayerColor: undefined,
@@ -80,7 +80,7 @@ export const presets = {
     lineHeight: 0.3,
     renderExtrusion: true,
     renderTubes: true,
-    extrusionColor: ['#919191'],
+    colors: ['#919191'],
     renderTravel: true,
     travelColor: '#00FF00',
     topLayerColor: '#aaaaaa',
@@ -101,7 +101,7 @@ export const presets = {
       original: 'https://www.thingiverse.com/thing:387266'
     },
     extrusionWidth: 0.5,
-    extrusionColor: ['orange', 'black', 'white'],
+    colors: ['orange', 'black', 'white'],
     travelColor: 'red',
     topLayerColor: undefined,
     lastSegmentColor: undefined,
@@ -122,7 +122,7 @@ export const presets = {
     },
     extrusionWidth: 0.45,
     lineHeight: 0.2,
-    extrusionColor: ['pink'],
+    colors: ['pink'],
     travelColor: 'red',
     topLayerColor: undefined,
     lastSegmentColor: undefined,
@@ -131,7 +131,8 @@ export const presets = {
       y: 180,
       z: 0
     },
-    boundingBoxColor: 'pink'
+    boundingBoxColor: 'pink',
+    drawBoundingBox: true
   },
   easel: {
     title: 'Easel tool path (cnc)',
diff --git a/src/.eslintrc.js b/src/.eslintrc.js
index a6b11cb7..64a90ba0 100644
--- a/src/.eslintrc.js
+++ b/src/.eslintrc.js
@@ -4,5 +4,14 @@ module.exports = {
   ignorePatterns: ['three-line2'],
   env: {
     browser: true
+  },
+  rules: {
+    'no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        ignoreRestSiblings: true
+      }
+    ]
   }
 };
diff --git a/src/__tests__/gcode-preview.ts b/src/__tests__/gcode-preview.ts
index 5198682b..461315cf 100644
--- a/src/__tests__/gcode-preview.ts
+++ b/src/__tests__/gcode-preview.ts
@@ -7,6 +7,7 @@ import { Job } from '../job';
 import { Interpreter } from '../interpreter';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 import { makeDroppable } from '../extra/dom-utils';
+import { EventsDispatcher } from '../events-dispatcher';
 
 // Mock the dependencies
 vi.mock('../scene-manager');
@@ -92,7 +93,7 @@ describe('GCodePreview', () => {
 
       expect(Job).toHaveBeenCalledWith({ minLayerThreshold: undefined });
       expect(Interpreter).toHaveBeenCalled();
-      expect(SceneManager).toHaveBeenCalledWith(options, mockJob, expect.any(Function));
+      expect(SceneManager).toHaveBeenCalledWith(options, mockJob, expect.any(EventsDispatcher));
       expect(Parser).toHaveBeenCalled();
       expect(preview).toBeInstanceOf(GCodePreview);
     });
@@ -239,13 +240,6 @@ describe('GCodePreview', () => {
       });
     });
 
-    describe('render', () => {
-      it('should call render on renderer', () => {
-        preview.render();
-        expect(mockSceneManager.render).toHaveBeenCalled();
-      });
-    });
-
     describe('dispose', () => {
       it('should dispose renderer', () => {
         preview.dispose();
@@ -313,11 +307,12 @@ describe('GCodePreview', () => {
       lazyPreview.opts = options;
       lazyPreview.job = mockJob;
       lazyPreview._sceneManager = null;
+      lazyPreview.eventsDispatcher = new EventsDispatcher();
 
       // Access renderer getter
       const renderer = lazyPreview.sceneManager;
 
-      expect(SceneManager).toHaveBeenCalledWith(options, mockJob, expect.any(Function));
+      expect(SceneManager).toHaveBeenCalledWith(options, mockJob, lazyPreview.eventsDispatcher);
       expect(renderer).toBe(mockSceneManager);
     });
 
diff --git a/src/__tests__/scene-manager.ts b/src/__tests__/scene-manager.ts
index 9dd2ffc7..58ff7399 100644
--- a/src/__tests__/scene-manager.ts
+++ b/src/__tests__/scene-manager.ts
@@ -4,6 +4,7 @@ import { test, expect, vi, assert } from 'vitest';
 
 import { SceneManager } from '../scene-manager';
 import { GCodeCommand } from '../gcode-parser';
+import { EventsDispatcher } from '../events-dispatcher';
 
 // add a test for destroying the scene manager which should cancel the render loop.
 test('destroying the scene manager should dispose renderer and controls', async () => {
@@ -92,7 +93,6 @@ function createMockSceneManager() {
       dispose: vi.fn(() => {})
     },
     setInches: () => {},
-    nonTravelmoves: [],
     renderExtrusion: () => {},
     renderTravel: () => {},
     addArcSegment: () => {},
@@ -102,6 +102,7 @@ function createMockSceneManager() {
     animate: vi.fn(SceneManager.prototype.animate),
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    cancelAnimation: vi.fn(SceneManager.prototype.cancelAnimation)
+    cancelAnimation: vi.fn(SceneManager.prototype.cancelAnimation),
+    eventsDispatcher: new EventsDispatcher()
   };
 }
diff --git a/src/dev-gui.ts b/src/dev-gui.ts
index 28511d06..32b68e1d 100644
--- a/src/dev-gui.ts
+++ b/src/dev-gui.ts
@@ -215,7 +215,7 @@ class DevGUI {
     //   .onChange(() => {
     //     this.renderer.render();
     //   });
-    devHelpers.add(this.gcodePreview, 'render').listen();
+    devHelpers.add(this.gcodePreview.sceneManager, 'render').listen();
     devHelpers.add(this.gcodePreview, 'clear').listen();
     devHelpers.add(this.gcodePreview, 'dispose').listen();
 
diff --git a/src/events-dispatcher.ts b/src/events-dispatcher.ts
new file mode 100644
index 00000000..6d0eec7c
--- /dev/null
+++ b/src/events-dispatcher.ts
@@ -0,0 +1,22 @@
+export type CallbackFunction = (..._args: unknown[]) => void;
+
+export class EventsDispatcher {
+  private _listeners: { [key: string]: CallbackFunction[] } = {};
+
+  /**
+   * Registers a callback for one or more property change events.
+   * @param events - Event name or array of event names
+   * @param callback - Function to call when the event is emitted
+   */
+  addEventListener(events: string | string[], callback: CallbackFunction) {
+    const eventList = Array.isArray(events) ? events : [events];
+    for (const event of eventList) {
+      if (!this._listeners[event]) this._listeners[event] = [];
+      this._listeners[event]!.push(callback);
+    }
+  }
+
+  emit(event: string, args: unknown): void {
+    (this._listeners[event] || []).forEach((callback) => callback(...(Array.isArray(args) ? args : [args])));
+  }
+}
diff --git a/src/gcode-parser.ts b/src/gcode-parser.ts
index 9a613216..72d5f9e7 100644
--- a/src/gcode-parser.ts
+++ b/src/gcode-parser.ts
@@ -85,7 +85,6 @@ export interface GCodeParameters {
  * Represents a parsed G-code command
  */
 export class GCodeCommand {
-  /* eslint-disable no-unused-vars */
   /**
    * Creates a new GCodeCommand instance
    * @param src - The original G-code line
@@ -99,7 +98,6 @@ export class GCodeCommand {
     public params: GCodeParameters,
     public comment?: string
   ) {}
-  /* eslint-enable no-unused-vars */
 }
 
 export type ParseResult = { metadata: Metadata; commands: GCodeCommand[] };
diff --git a/src/gcode-preview.ts b/src/gcode-preview.ts
index 0a410539..f69b9415 100644
--- a/src/gcode-preview.ts
+++ b/src/gcode-preview.ts
@@ -1,7 +1,8 @@
-import { SceneManager, SceneManagerOptions } from './scene-manager';
+import { SceneManager, SceneManagerOptions, SceneManagerEvent } from './scene-manager';
 import { GCodeCommand, Parser } from './gcode-parser';
-import { Interpreter } from './interpreter';
+import { Interpreter, InterpreterEvent } from './interpreter';
 import { Job } from './job';
+import { CallbackFunction, EventsDispatcher } from './events-dispatcher';
 import { DevGUI, type DevModeOptions } from './dev-gui';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 import { makeDroppable } from './extra/dom-utils';
@@ -18,6 +19,16 @@ type LibOptions = {
 };
 
 export type GCodePreviewOptions = LibOptions & SceneManagerOptions;
+enum GCodePreviewEvent {
+  STREAM_READ_END = 'streamReadEnd'
+}
+export const EventName = {
+  ...SceneManagerEvent,
+  ...InterpreterEvent,
+  ...GCodePreviewEvent
+};
+
+export type EventNameType = (typeof EventName)[keyof typeof EventName];
 
 /**
  * Main G-code preview class that orchestrates rendering and parsing
@@ -40,6 +51,7 @@ export type GCodePreviewOptions = LibOptions & SceneManagerOptions;
  * ```
  */
 export class GCodePreview {
+  private eventsDispatcher = new EventsDispatcher();
   /** Job containing parsed G-code data */
   job: Job;
   /** The WebGL sceneManager instance for direct access to rendering properties */
@@ -48,7 +60,7 @@ export class GCodePreview {
   private _parser: Parser | null;
   private opts: GCodePreviewOptions | null;
 
-  private interpreter = new Interpreter();
+  private interpreter: Interpreter;
 
   // dev mode
   /** Developer mode configuration */
@@ -62,7 +74,7 @@ export class GCodePreview {
   /** The WebGL sceneManager instance for direct access to rendering properties */
   get sceneManager(): SceneManager {
     if (!this._sceneManager) {
-      this._sceneManager = new SceneManager(this.opts, this.job, () => this.stats?.update());
+      this._sceneManager = new SceneManager(this.opts, this.job, this.eventsDispatcher);
     }
     return this._sceneManager;
   }
@@ -102,10 +114,14 @@ export class GCodePreview {
     this._parser = new Parser();
     this.job = new Job({ minLayerThreshold: this.opts.minLayerThreshold });
     this.stats = this.devMode ? new Stats() : undefined;
-    this._sceneManager = new SceneManager(this.opts, this.job, () => this.stats?.update());
+    this._sceneManager = new SceneManager(this.opts, this.job, this.eventsDispatcher);
     this.devMode = opts?.devMode;
+    this.interpreter = new Interpreter(this.eventsDispatcher);
+
+    this.eventsDispatcher.addEventListener(EventName.FRAME_RENDERED, () => this.stats?.update());
 
     this.initStats();
+    this.initGui();
     if (opts.droppable) makeDroppable(this);
   }
 
@@ -154,16 +170,6 @@ export class GCodePreview {
       this.interpreter.execute(commands, this.job);
     }
 
-    console.debug(
-      `out of ${this.interpreter.points} move commands, the following were pruned due to no actual movement:`
-    );
-    console.debug(this.interpreter.retractions, 'retractions');
-    console.debug(this.interpreter.deretractions, 'deretractions');
-    console.debug(this.interpreter.feedrateChanges, 'feedrateChanges');
-    console.debug(this.interpreter.others, 'other');
-
-    console.debug(Math.round(this.interpreter.extrusionDistance), 'total extrusion distance (mm)');
-
     if (!this.job.isPlanar) {
       console.warn('Job is non-planar');
     }
@@ -201,13 +207,7 @@ export class GCodePreview {
     } while (!result.done);
 
     console.debug('total read from stream', Math.floor(size / 1024), 'kB');
-  }
-
-  /**
-   * Renders the current scene
-   */
-  render(): void {
-    this.sceneManager.render();
+    this.eventsDispatcher.emit(EventName.STREAM_READ_END, null);
   }
 
   /**
@@ -226,6 +226,15 @@ export class GCodePreview {
     this.stats = undefined;
   }
 
+  /**
+   * Adds an event listener for triggering callbacks on specific events
+   * @param type - Event type to listen for
+   * @param listener - Callback function to invoke when the event occurs
+   */
+  addEventListener(type: EventNameType | EventNameType[], listener: CallbackFunction): void {
+    this.eventsDispatcher.addEventListener(type, listener);
+  }
+
   /**
    * Initializes the development GUI if enabled
    * @private
@@ -261,4 +270,4 @@ export class GCodePreview {
  * This class provides a simple interface for rendering G-code previews.
  * Most properties and methods are available through the `sceneManager` property.
  */
-export { SceneManager, DevModeOptions, GCodeCommand, Parser };
+export { SceneManager, SceneManagerEvent, DevModeOptions, GCodeCommand, Parser };
diff --git a/src/interpreter.ts b/src/interpreter.ts
index b12fb955..ff00ee6a 100644
--- a/src/interpreter.ts
+++ b/src/interpreter.ts
@@ -1,10 +1,12 @@
 import { Path, PathType } from './path';
 import { GCodeCommand } from './gcode-parser';
 import { Job } from './job';
+import { EventsDispatcher } from './events-dispatcher';
 
-// eslint-disable-next-line no-unused-vars
-type Method = (...args: unknown[]) => unknown;
-// type LookupTable = { [key: string]: Method | undefined };
+type Method = (..._args: unknown[]) => unknown;
+export enum InterpreterEvent {
+  JOB_UPDATED = 'jobUpdated'
+}
 
 /**
  * Interprets and executes G-code commands, updating the job state accordingly
@@ -15,8 +17,7 @@ type Method = (...args: unknown[]) => unknown;
  * including linear moves (G0/G1), arcs (G2/G3), unit changes (G20/G21), and tool selection.
  */
 export class Interpreter {
-  // eslint-disable-next-line no-unused-vars
-  [key: string]: (...args: unknown[]) => unknown;
+  [key: string]: EventsDispatcher | Method;
 
   // TODO: maybe these props should move to the Job class
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -43,6 +44,13 @@ export class Interpreter {
   // @ts-ignore
   public extrusionDistance = 0;
 
+  private eventsDispatcher: EventsDispatcher;
+
+  constructor(eventsDispatcher?: EventsDispatcher) {
+    this.eventsDispatcher = eventsDispatcher ?? new EventsDispatcher();
+    console.log(this.eventsDispatcher);
+  }
+
   /**
    * Executes an array of G-code commands, updating the provided job
    * @param commands - Array of GCodeCommand objects to execute
@@ -61,6 +69,7 @@ export class Interpreter {
       }
     });
     job.finishPath();
+    this.eventsDispatcher.emit(InterpreterEvent.JOB_UPDATED, job);
 
     return job;
   }
diff --git a/src/path.ts b/src/path.ts
index ac950eaa..187c94e2 100644
--- a/src/path.ts
+++ b/src/path.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { BufferGeometry, Vector3 } from 'three';
 import { ExtrusionGeometry } from './extrusion-geometry';
 import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
diff --git a/src/scene-manager.ts b/src/scene-manager.ts
index dcdef194..7c8325bf 100644
--- a/src/scene-manager.ts
+++ b/src/scene-manager.ts
@@ -29,6 +29,33 @@ import {
   MathUtils,
   LineBasicMaterial
 } from 'three';
+import { EventsDispatcher } from './events-dispatcher';
+
+export enum SceneManagerEvent {
+  BUILD_VOLUME_CHANGE = 'buildVolumeChange',
+  EXTRUSION_COLOR_CHANGE = 'extrusionColorChange',
+  BACKGROUND_COLOR_CHANGE = 'backgroundColorChange',
+  TRAVEL_COLOR_CHANGE = 'travelColorChange',
+  TOP_LAYER_COLOR_CHANGE = 'topLayerColorChange',
+  LAST_SEGMENT_COLOR_CHANGE = 'lastSegmentColorChange',
+  BOUNDING_BOX_COLOR_CHANGE = 'boundingBoxColorChange',
+  RENDER_EXTRUSION_CHANGE = 'renderExtrusionChange',
+  RENDER_TRAVEL_CHANGE = 'renderTravelChange',
+  RENDER_TUBES_CHANGE = 'renderTubesChange',
+  SINGLE_LAYER_MODE_CHANGE = 'singleLayerModeChange',
+  LINE_WIDTH_CHANGE = 'lineWidthChange',
+  START_LAYER_CHANGE = 'startLayerChange',
+  END_LAYER_CHANGE = 'endLayerChange',
+  AMBIENT_LIGHT_CHANGE = 'ambientLightChange',
+  DIRECTIONAL_LIGHT_CHANGE = 'directionalLightChange',
+  BRIGHTNESS_CHANGE = 'brightnessChange',
+  BOUNDING_BOX_MESH_CHANGE = 'boundingBoxMeshChange',
+  LINE_HEIGHT_CHANGE = 'lineHeightChange',
+  EXTRUSION_WIDTH_CHANGE = 'extrusionWidthChange',
+  DISABLE_GRADIENT_CHANGE = 'disableGradientChange',
+  ANIMATION_COMPLETE = 'animationComplete',
+  FRAME_RENDERED = 'frameRendered'
+}
 
 export type BuildVolumeDef = Pick<BuildVolume, 'x' | 'y' | 'z' | 'smallGrid'>;
 
@@ -51,8 +78,6 @@ export type SceneManagerOptions = {
   lineWidth?: number;
   /** Height of extruded lines */
   lineHeight?: number;
-  /** List of G-code commands considered non-travel moves */
-  nonTravelMoves?: string[];
   /** Minimum layer height threshold */
   minLayerThreshold?: number;
   /** Whether to render extrusion paths */
@@ -97,36 +122,34 @@ export class SceneManager {
   /** Canvas element being rendered to */
   canvas: HTMLCanvasElement;
   /** Whether to render extrusion paths */
-  renderExtrusion = true;
+  private _renderExtrusion = true;
   /** Whether to render travel moves */
-  renderTravel = false;
+  private _renderTravel = false;
   /** Whether to render paths as 3D tubes */
-  renderTubes = false;
+  private _renderTubes = false;
   /** Width of extruded material */
-  extrusionWidth?: number;
+  private _extrusionWidth?: number;
   /** Width of rendered lines */
-  lineWidth?: number;
+  private _lineWidth?: number;
   /** Height of extruded lines */
-  lineHeight = 0.2;
+  private _lineHeight = 0.2;
   /** First layer to render (1-based index) */
-  _startLayer?: number;
+  private _startLayer?: number;
   /** Last layer to render (1-based index) */
-  _endLayer?: number;
+  private _endLayer?: number;
   /** Whether single layer mode is enabled */
-  _singleLayerMode = false;
+  private _singleLayerMode = false;
   /** Build volume dimensions */
   private _buildVolume?: BuildVolume;
   /** Initial camera position [x, y, z] */
-  initialCameraPosition = [-100, 400, 450];
+  private initialCameraPosition = [-100, 400, 450];
   /** Whether to use inches instead of millimeters */
-  inches = false;
-  /** List of G-code commands considered non-travel moves */
-  nonTravelmoves: string[] = [];
+  private _inches = false;
   /** Disable color gradient between layers */
-  disableGradient = false;
+  private _disableGradient = false;
   job: Job;
   /** Bounding box mesh */
-  private boundingBoxMesh?: LineBox;
+  private _boundingBoxMesh?: LineBox;
   /** Color for the bounding box */
   private _boundingBoxColor?: Color;
 
@@ -166,18 +189,20 @@ export class SceneManager {
   /** Last render time in milliseconds */
   lastRenderTime = 0;
   /** Whether to render in wireframe mode */
-  _wireframe = false;
+  private _wireframe = false;
   /** Whether to preserve drawing buffer */
   private preserveDrawingBuffer = false;
   private currentChunk: Group;
-  private onFrame: () => void;
+  private eventsDispatcher: EventsDispatcher = new EventsDispatcher();
+
+  private _renderTimeout: ReturnType<typeof setTimeout>;
 
   /**
    * Creates a new SceneManager instance
    * @param opts - Configuration options
    * @throws Error if no canvas element is provided
    */
-  constructor(opts: SceneManagerOptions, job: Job, onFrame?: () => void) {
+  constructor(opts: SceneManagerOptions, job: Job, eventsDispatcher?: EventsDispatcher) {
     this.job = job;
     this.scene = new Scene();
     this.scene.background = this._backgroundColor;
@@ -201,10 +226,9 @@ export class SceneManager {
     this.initialCameraPosition = opts.initialCameraPosition ?? this.initialCameraPosition;
     this.renderExtrusion = opts.renderExtrusion ?? this.renderExtrusion;
     this.renderTravel = opts.renderTravel ?? this.renderTravel;
-    this.nonTravelmoves = opts.nonTravelMoves ?? this.nonTravelmoves;
     this.renderTubes = opts.renderTubes ?? this.renderTubes;
     this.extrusionWidth = opts.extrusionWidth;
-    this.onFrame = onFrame;
+    this.eventsDispatcher = eventsDispatcher ?? this.eventsDispatcher;
 
     if (opts.boundingBoxColor !== undefined) {
       this._boundingBoxColor = new Color(opts.boundingBoxColor);
@@ -257,6 +281,9 @@ export class SceneManager {
 
     this.initScene();
     this.animate();
+    this.eventsDispatcher.addEventListener(SceneManagerEvent.ANIMATION_COMPLETE, () => {
+      this.setRerenderListeners();
+    });
   }
 
   /**
@@ -275,15 +302,15 @@ export class SceneManager {
     if (!value) {
       this._buildVolume?.dispose();
       this._buildVolume = undefined;
-      return;
-    }
-
-    this._buildVolume = new BuildVolume(value.x, value.y, value.z, value.smallGrid, this.scene);
+    } else {
+      this._buildVolume = new BuildVolume(value.x, value.y, value.z, value.smallGrid, this.scene);
 
-    if (this._buildVolume) {
-      this.disposables.push(this._buildVolume);
-      this._buildVolume.update();
+      if (this._buildVolume) {
+        this.disposables.push(this._buildVolume);
+        this._buildVolume.update();
+      }
     }
+    this.eventsDispatcher.emit(SceneManagerEvent.BUILD_VOLUME_CHANGE, this._buildVolume);
   }
 
   /**
@@ -331,6 +358,7 @@ export class SceneManager {
     }
 
     this.materials[0].uniforms.uColor.value = this._extrusionColor;
+    this.eventsDispatcher.emit(SceneManagerEvent.EXTRUSION_COLOR_CHANGE, this._extrusionColor);
   }
 
   /**
@@ -348,6 +376,7 @@ export class SceneManager {
   set backgroundColor(value: number | string | Color) {
     this._backgroundColor = new Color(value);
     this.scene.background = this._backgroundColor;
+    this.eventsDispatcher.emit(SceneManagerEvent.BACKGROUND_COLOR_CHANGE, this._backgroundColor);
   }
 
   /**
@@ -364,6 +393,7 @@ export class SceneManager {
    */
   set travelColor(value: number | string | Color) {
     this._travelColor = new Color(value);
+    this.eventsDispatcher.emit(SceneManagerEvent.TRAVEL_COLOR_CHANGE, this._travelColor);
   }
 
   /**
@@ -380,6 +410,7 @@ export class SceneManager {
    */
   set topLayerColor(value: ColorRepresentation | undefined) {
     this._topLayerColor = value !== undefined ? new Color(value) : undefined;
+    this.eventsDispatcher.emit(SceneManagerEvent.TOP_LAYER_COLOR_CHANGE, this._topLayerColor);
   }
 
   /**
@@ -396,6 +427,7 @@ export class SceneManager {
    */
   set lastSegmentColor(value: ColorRepresentation | undefined) {
     this._lastSegmentColor = value !== undefined ? new Color(value) : undefined;
+    this.eventsDispatcher.emit(SceneManagerEvent.LAST_SEGMENT_COLOR_CHANGE, this._lastSegmentColor);
   }
 
   /**
@@ -414,6 +446,8 @@ export class SceneManager {
     this._boundingBoxColor = value !== undefined ? new Color(value) : undefined;
 
     this.renderBoundingBox();
+
+    this.eventsDispatcher.emit(SceneManagerEvent.BOUNDING_BOX_COLOR_CHANGE, this._boundingBoxColor);
   }
 
   /**
@@ -436,6 +470,71 @@ export class SceneManager {
     }
 
     this.updateClippingPlanes();
+    this.eventsDispatcher.emit(SceneManagerEvent.START_LAYER_CHANGE, [this._startLayer]);
+  }
+
+  get renderExtrusion(): boolean {
+    return this._renderExtrusion;
+  }
+  set renderExtrusion(value: boolean) {
+    this._renderExtrusion = value;
+    this.eventsDispatcher.emit(SceneManagerEvent.RENDER_EXTRUSION_CHANGE, [this._renderExtrusion]);
+  }
+
+  get renderTravel(): boolean {
+    return this._renderTravel;
+  }
+  set renderTravel(value: boolean) {
+    this._renderTravel = value;
+    this.eventsDispatcher.emit(SceneManagerEvent.RENDER_TRAVEL_CHANGE, this._renderTravel);
+  }
+
+  get renderTubes(): boolean {
+    return this._renderTubes;
+  }
+  set renderTubes(value: boolean) {
+    this._renderTubes = value;
+    this.eventsDispatcher.emit(SceneManagerEvent.RENDER_TUBES_CHANGE, this._renderTubes);
+  }
+
+  get boundingBoxMesh(): LineBox | undefined {
+    return this._boundingBoxMesh;
+  }
+  set boundingBoxMesh(value: LineBox | undefined) {
+    this._boundingBoxMesh = value;
+    this.eventsDispatcher.emit(SceneManagerEvent.BOUNDING_BOX_MESH_CHANGE, this._boundingBoxMesh);
+  }
+
+  get lineWidth(): number | undefined {
+    return this._lineWidth;
+  }
+  set lineWidth(value: number | undefined) {
+    this._lineWidth = value;
+    this.eventsDispatcher.emit(SceneManagerEvent.LINE_WIDTH_CHANGE, this._lineWidth);
+  }
+
+  get lineHeight(): number {
+    return this._lineHeight;
+  }
+  set lineHeight(value: number) {
+    this._lineHeight = value;
+    this.eventsDispatcher.emit(SceneManagerEvent.LINE_HEIGHT_CHANGE, [this._lineHeight]);
+  }
+
+  get extrusionWidth(): number | undefined {
+    return this._extrusionWidth;
+  }
+  set extrusionWidth(value: number | undefined) {
+    this._extrusionWidth = value;
+    this.eventsDispatcher.emit(SceneManagerEvent.EXTRUSION_WIDTH_CHANGE, [this._extrusionWidth]);
+  }
+
+  get disableGradient(): boolean {
+    return this._disableGradient;
+  }
+  set disableGradient(value: boolean) {
+    this._disableGradient = value;
+    this.eventsDispatcher.emit(SceneManagerEvent.DISABLE_GRADIENT_CHANGE, [this._disableGradient]);
   }
 
   /**
@@ -527,7 +626,6 @@ export class SceneManager {
    * @param value - Layer number to end rendering at
    */
   set endLayer(value: number | undefined) {
-    // console.debug('set endLayer', value);
     if (typeof value === 'number') {
       this._endLayer = MathUtils.clamp(value, 1, this.job.countLayers);
     } else {
@@ -566,6 +664,7 @@ export class SceneManager {
     } else {
       this._startLayer = this.prevStartLayer;
     }
+    this.eventsDispatcher.emit(SceneManagerEvent.SINGLE_LAYER_MODE_CHANGE, [this._singleLayerMode]);
   }
 
   get ambientLight(): number {
@@ -613,16 +712,38 @@ export class SceneManager {
     this.animationFrameId = requestAnimationFrame(() => this.animate());
     this.controls.update();
     this.renderer.render(this.scene, this.camera);
-    this.onFrame?.();
+    this.eventsDispatcher.emit(SceneManagerEvent.FRAME_RENDERED, null);
   }
 
   /**
-   * Initializes the Three.js scene by clearing the existing model
+   * Initializes the Three.js scene by creating all necessary objects
    * @remarks
-   * Clears all existing scene objects and disposables, then adds build volume visualization
+   * Adds build volume visualization
    * and lighting if 3D tube rendering is enabled.
    */
   private initScene(): void {
+    this.group = this.group ?? this.createGroup('allLayers');
+    this.currentChunk = this.group;
+
+    this.renderPathIndex = 0;
+
+    this.renderPaths();
+
+    this.renderBoundingBox();
+
+    if (this._buildVolume) {
+      this.disposables.push(this._buildVolume);
+      this._buildVolume.update();
+    }
+    this.scene.add(this.group);
+  }
+
+  /** Resets the scene by clearing all existing objects and re-initializing
+   * @remarks
+   * Disposes of all materials and geometries, removes all children from the main group,
+   * and calls initScene to set up a fresh scene.
+   */
+  private resetScene() {
     this.materials = [];
 
     // Recursively remove all children from the main group and their descendants from the scene
@@ -640,15 +761,7 @@ export class SceneManager {
       removeRecursively(this.group);
     }
 
-    // while (this.disposables.length > 0) {
-    //   const disposable = this.disposables.pop();
-    //   if (disposable) disposable.dispose();
-    // }
-
-    if (this._buildVolume) {
-      this.disposables.push(this._buildVolume);
-      this._buildVolume.update();
-    }
+    this.initScene();
   }
 
   /**
@@ -677,19 +790,10 @@ export class SceneManager {
    */
   render(): void {
     const startRender = performance.now();
-    this.group = this.group ?? this.createGroup('allLayers');
-    this.currentChunk = this.group;
-    this.initScene();
-
-    this.renderPathIndex = 0;
 
-    this.renderPaths();
-    if (this.boundingBoxColor !== undefined) {
-      this.renderBoundingBox();
-    }
+    this.resetScene();
 
-    this.scene.add(this.group);
-    this.renderer.render(this.scene, this.camera);
+    this.renderer?.render(this.scene, this.camera);
     this.lastRenderTime = performance.now() - startRender;
   }
 
@@ -703,12 +807,10 @@ export class SceneManager {
     // sensible default for pathCount
     pathCount = pathCount ?? Math.floor(this.job.paths.length / 60);
 
-    this.initScene();
-
     this.renderPathIndex = 0;
 
     if (this.renderPathIndex >= this.job.paths.length - 1) {
-      this.render();
+      this.renderPaths();
     } else {
       return this.renderFrameLoop(pathCount > 0 ? Math.min(pathCount, this.job.paths.length) : 1);
     }
@@ -723,6 +825,7 @@ export class SceneManager {
     return new Promise((resolve) => {
       const loop = () => {
         if (this.renderPathIndex >= this.job.paths.length - 1) {
+          this.eventsDispatcher.emit(SceneManagerEvent.ANIMATION_COMPLETE, [this._buildVolume]);
           resolve();
         } else {
           this.renderFrame(pathCount);
@@ -750,17 +853,17 @@ export class SceneManager {
     this.currentChunk = chunk;
     const endPathNumber = Math.min(this.renderPathIndex + pathCount, this.job.paths.length - 1);
     this.renderPaths(endPathNumber);
-    if (this._boundingBoxColor !== undefined) {
-      this.renderBoundingBox();
-    }
+    this.renderBoundingBox();
     this.renderPathIndex = endPathNumber;
+
+    this.renderBoundingBox();
     this.group?.add(chunk);
+    this.renderer.render(this.scene, this.camera);
   }
 
   private renderBoundingBox(): void {
     if (!this.job) return;
     if (!this.job.boundingBox.isValid) {
-      console.error('Invalid bounding box, skipping rendering');
       return;
     }
 
@@ -772,7 +875,6 @@ export class SceneManager {
 
       this.scene.add(this.boundingBoxMesh);
     }
-
     this.boundingBoxMesh.visible = this._boundingBoxColor !== undefined;
     (this.boundingBoxMesh.material as LineBasicMaterial).color = this._boundingBoxColor;
   }
@@ -792,6 +894,8 @@ export class SceneManager {
     this.endLayer = Infinity;
     this._singleLayerMode = false;
     this.job = undefined;
+    this.scene.remove(this.boundingBoxMesh);
+    this.boundingBoxMesh = undefined;
   }
 
   resize(): void {
@@ -831,9 +935,9 @@ export class SceneManager {
       this.renderPathsAsLines(this.job.travels.slice(this.renderPathIndex, endPathNumber), this._travelColor);
     }
 
-    if (this.renderExtrusion) {
+    if (this.renderExtrusion && this.job?.toolPaths.length > 0) {
       this.job.toolPaths.forEach((toolPaths, index) => {
-        const color = Array.isArray(this._extrusionColor) ? this._extrusionColor[index] : this._extrusionColor;
+        const color = Array.isArray(this.extrusionColor) ? this.extrusionColor[index] : this.extrusionColor;
         if (this.renderTubes) {
           this.renderPathsAsTubes(toolPaths.slice(this.renderPathIndex, endPathNumber), color);
         } else {
@@ -937,6 +1041,30 @@ export class SceneManager {
     return batchedMesh;
   }
 
+  private setRerenderListeners() {
+    const eventsRequiringRerender = [
+      SceneManagerEvent.BACKGROUND_COLOR_CHANGE,
+      SceneManagerEvent.BUILD_VOLUME_CHANGE,
+      SceneManagerEvent.EXTRUSION_COLOR_CHANGE,
+      SceneManagerEvent.LINE_WIDTH_CHANGE,
+      SceneManagerEvent.RENDER_TUBES_CHANGE,
+      SceneManagerEvent.BOUNDING_BOX_COLOR_CHANGE,
+      SceneManagerEvent.SINGLE_LAYER_MODE_CHANGE,
+      SceneManagerEvent.TRAVEL_COLOR_CHANGE,
+      SceneManagerEvent.RENDER_EXTRUSION_CHANGE,
+      SceneManagerEvent.TOP_LAYER_COLOR_CHANGE,
+      SceneManagerEvent.LAST_SEGMENT_COLOR_CHANGE,
+      SceneManagerEvent.RENDER_TRAVEL_CHANGE
+    ];
+    const rerenderDebounce = 100;
+    this.eventsDispatcher.addEventListener(eventsRequiringRerender, () => {
+      if (this._renderTimeout) clearTimeout(this._renderTimeout);
+      this._renderTimeout = setTimeout(() => {
+        this.render();
+      }, rerenderDebounce);
+    });
+  }
+
   saveCamera() {
     localStorage.setItem('cameraPosition', JSON.stringify(this.camera.position));
     localStorage.setItem('cameraRotation', JSON.stringify(this.camera.rotation));
diff --git a/src/thumbnail.ts b/src/thumbnail.ts
index 505cea69..288f4bdc 100644
--- a/src/thumbnail.ts
+++ b/src/thumbnail.ts
@@ -15,10 +15,10 @@ export class Thumbnail {
    * @param charLength - Expected length of base64 characters
    */
   constructor(
-    public size: string, // eslint-disable-line no-unused-vars
-    public width: number, // eslint-disable-line no-unused-vars
-    public height: number, // eslint-disable-line no-unused-vars
-    public charLength: number // eslint-disable-line no-unused-vars
+    public size: string,
+    public width: number,
+    public height: number,
+    public charLength: number
   ) {}
 
   /**
