diff --git a/docs/user-manual/assets/models/index.md b/docs/user-manual/assets/models/index.md
index 408d3e8366..e2c5935e10 100644
--- a/docs/user-manual/assets/models/index.md
+++ b/docs/user-manual/assets/models/index.md
@@ -7,7 +7,7 @@ sidebar_position: 4
 
 PlayCanvas supports a wide variety of formats, such as glTF binary (GLB), FBX, COLLADA and obj. We recommend using the GLB format for best results.
 
-Uploading one of these files will create a [Source Asset][3] of type 'Model' and will produce several [Target Assets][4] including a '[Template]'[7] with the model hierarchy and 'Render' assets. You can add an instance of the 'Template' in your game.
+Uploading one of these files will create a [Source Asset][3] of type 'Model' and will produce several [Target Assets][4] including a '[Template][7]' with the model hierarchy and 'Render' assets. You can add an instance of the 'Template' in your game.
 
 Learn more about:
 
diff --git a/docs/user-manual/assets/preloading-and-streaming.md b/docs/user-manual/assets/preloading-and-streaming.md
index a39ca11a54..1d378a6558 100644
--- a/docs/user-manual/assets/preloading-and-streaming.md
+++ b/docs/user-manual/assets/preloading-and-streaming.md
@@ -36,10 +36,10 @@ In many cases, you don't wish assets to "popup" as they load. It's preferable to
 Here is some example javascript which shows you how you might load a set of assets using a tag.
 
 ```javascript
-var assets = this.app.assets.findByTag("level-1");
-var count = 0;
+const assets = this.app.assets.findByTag("level-1");
+let count = 0;
 
-for (var i = 0; i < assets.length; i++) {
+for (let i = 0; i < assets.length; i++) {
     assets[i].once("load", function () {
         count++;
         if (count === assets.length) {
diff --git a/docs/user-manual/assets/types/css.md b/docs/user-manual/assets/types/css.md
index cb3be09b54..6d4a8991a6 100644
--- a/docs/user-manual/assets/types/css.md
+++ b/docs/user-manual/assets/types/css.md
@@ -10,10 +10,10 @@ The loaded CSS asset resource is just a string. You can use the string as you li
 
 ```javascript
 // get asset from registry by id
-var asset = app.assets.get(32);
+const asset = app.assets.get(32);
 
 // create element
-var style = document.createElement('style');
+const style = document.createElement('style');
 style.type = "text/css";
 style.textContent = asset.resource || '';
 document.head.appendChild(style);
diff --git a/docs/user-manual/assets/types/html.md b/docs/user-manual/assets/types/html.md
index fedb18fae1..2de4c937e2 100644
--- a/docs/user-manual/assets/types/html.md
+++ b/docs/user-manual/assets/types/html.md
@@ -10,10 +10,10 @@ The loaded HTML asset is just a string. You can use that string as you like - a
 
 ```javascript
 // get asset from registry by id
-var asset = app.assets.get(32);
+const asset = app.assets.get(32);
 
 // create element
-var div = document.createElement('div');
+const div = document.createElement('div');
 div.innerHTML = asset.resource || '';
 document.body.appendChild(div);
 
diff --git a/docs/user-manual/assets/types/json.md b/docs/user-manual/assets/types/json.md
index 591997078a..1a1e88a2fa 100644
--- a/docs/user-manual/assets/types/json.md
+++ b/docs/user-manual/assets/types/json.md
@@ -29,7 +29,7 @@ JsonScript.attributes.add('jsonAsset', { type: 'asset', assetType: 'json' });
 JsonScript.prototype.initialize = function () {
     if (this.jsonAsset) {
         // Get the JSON asset's resource (an object)
-        var jsonData = this.jsonAsset.resource;
+        const jsonData = this.jsonAsset.resource;
 
         // Example: Accessing data from the JSON object
         if (jsonData.someDataField) {
diff --git a/docs/user-manual/assets/types/shader.md b/docs/user-manual/assets/types/shader.md
index a63fd0fabe..182cc7190d 100644
--- a/docs/user-manual/assets/types/shader.md
+++ b/docs/user-manual/assets/types/shader.md
@@ -7,9 +7,9 @@ A shader asset contains GLSL code. You can create a new Shader asset by clicking
 To edit a Shader asset, right click on it in the Editor and select Edit. Here's an example on using Shader assets to create a custom material.
 
 ```javascript
-var vertexShader = this.app.assets.find('my_vertex_shader');
-var fragmentShader = this.app.assets.find('my_fragment_shader');
-var shaderDefinition = {
+const vertexShader = this.app.assets.find('my_vertex_shader');
+const fragmentShader = this.app.assets.find('my_fragment_shader');
+const shaderDefinition = {
     attributes: {
         aPosition: pc.SEMANTIC_POSITION,
         aUv0: pc.SEMANTIC_TEXCOORD0
@@ -18,7 +18,7 @@ var shaderDefinition = {
     fshader: fragmentShader.resource
 };
 
-var shader = new pc.Shader(this.app.graphicsDevice, shaderDefinition);
-var material = new pc.Material();
+const shader = new pc.Shader(this.app.graphicsDevice, shaderDefinition);
+const material = new pc.Material();
 material.setShader(shader);
 ```
diff --git a/docs/user-manual/assets/types/text.md b/docs/user-manual/assets/types/text.md
index 483d01a8f0..0388c8cdc3 100644
--- a/docs/user-manual/assets/types/text.md
+++ b/docs/user-manual/assets/types/text.md
@@ -22,7 +22,7 @@ TextScript.attributes.add('textAsset', { type: 'asset', assetType: 'text' });
 TextScript.prototype.initialize = function() {
     if (this.textAsset) {
         // Get the Text asset's resource (a string)
-        var textData = this.textAsset.resource;
+        const textData = this.textAsset.resource;
         
         // Output the content of the text asset
         console.log('Content of text asset: ', textData);
diff --git a/docs/user-manual/getting-started/your-first-app.md b/docs/user-manual/getting-started/your-first-app.md
index c69864166f..8e0fcbb3bb 100644
--- a/docs/user-manual/getting-started/your-first-app.md
+++ b/docs/user-manual/getting-started/your-first-app.md
@@ -96,11 +96,11 @@ Movement.prototype.initialize = function() {
 // update code called every frame
 Movement.prototype.update = function(dt) {
     // get which keys are pressed
-    var keyboard = this.app.keyboard;
-    var left  = keyboard.isPressed(pc.KEY_LEFT);
-    var right = keyboard.isPressed(pc.KEY_RIGHT);
-    var up    = keyboard.isPressed(pc.KEY_UP);
-    var down  = keyboard.isPressed(pc.KEY_DOWN);
+    const keyboard = this.app.keyboard;
+    const left  = keyboard.isPressed(pc.KEY_LEFT);
+    const right = keyboard.isPressed(pc.KEY_RIGHT);
+    const up    = keyboard.isPressed(pc.KEY_UP);
+    const down  = keyboard.isPressed(pc.KEY_DOWN);
 
     // move this entity based on which keys are pressed
     // dt is the time in seconds since the last frame and stands for 'delta time'
diff --git a/docs/user-manual/graphics/advanced-rendering/hardware-instancing.md b/docs/user-manual/graphics/advanced-rendering/hardware-instancing.md
index b198e04164..86a92cf1b3 100644
--- a/docs/user-manual/graphics/advanced-rendering/hardware-instancing.md
+++ b/docs/user-manual/graphics/advanced-rendering/hardware-instancing.md
@@ -15,14 +15,14 @@ Populate a vertex buffer with per instance matrices to provide their world matri
 
 ```javascript
 // store matrices for individual instances into array
-var matrices = new Float32Array(instanceCount * 16);
-var matrix = new pc.Mat4();
-var matrixIndex = 0;
-for (var i = 0; i < instanceCount; i++) {
+const matrices = new Float32Array(instanceCount * 16);
+const matrix = new pc.Mat4();
+let matrixIndex = 0;
+for (let i = 0; i < instanceCount; i++) {
     matrix.setTRS(pos, pc.Vec3.ZERO, pc.Vec3.ONE);
 
     // copy matrix elements into array of floats
-    for (var m = 0; m < 16; m++)
+    for (let m = 0; m < 16; m++)
         matrices[matrixIndex++] = matrix.data[m];
 }
 ```
@@ -30,9 +30,14 @@ for (var i = 0; i < instanceCount; i++) {
 Create a VertexBuffer which stores per-instance state and initialize it with the matrices. In the following example, we use `pc.VertexFormat.defaultInstancingFormat` which allows us to store a per-instance Mat4 matrix. Then we enable instancing on a MeshInstance, which contains the mesh geometry we want to instance.
 
 ```javascript
-var instanceCount = 10;
-var vertexBuffer = new pc.VertexBuffer(this.app.graphicsDevice, pc.VertexFormat.defaultInstancingFormat,
-                                        instanceCount, pc.BUFFER_STATIC, matrices);
+const instanceCount = 10;
+const vertexBuffer = new pc.VertexBuffer(
+    this.app.graphicsDevice,
+    pc.VertexFormat.defaultInstancingFormat,
+    instanceCount,
+    pc.BUFFER_STATIC,
+    matrices
+);
 meshInst.setInstancing(vertexBuffer);
 ```
 
diff --git a/docs/user-manual/optimization/runtime-devicepixelratio.md b/docs/user-manual/optimization/runtime-devicepixelratio.md
index 65c846e553..140e4c3e6c 100644
--- a/docs/user-manual/optimization/runtime-devicepixelratio.md
+++ b/docs/user-manual/optimization/runtime-devicepixelratio.md
@@ -20,7 +20,7 @@ Ideally, we want the best of both worlds where users on high-tier devices will r
 The Device pixel ratio can be changed at runtime via the property [`pc.GraphicsDevice#maxPixelRatio`][4]:
 
 ```javascript
-var device = pc.Application.getApplication().graphicsDevice;
+const device = pc.Application.getApplication().graphicsDevice;
 if (highTierDevice) {
     // Use the default device pixel ratio of the device
     device.maxPixelRatio = window.devicePixelRatio;
@@ -49,7 +49,7 @@ An example for mobile can be found below (correct at time of writing Thu 30 Jul
 
 ```javascript
 function isLowQualityGPU() {
-    var renderer = pc.Application.getApplication().graphicsDevice.unmaskedRenderer;
+    const renderer = pc.Application.getApplication().graphicsDevice.unmaskedRenderer;
 
     // Only check the GPU if we are on mobile
     if (renderer && pc.platform.mobile) {
diff --git a/docs/user-manual/publishing/web/communicating-webpage.md b/docs/user-manual/publishing/web/communicating-webpage.md
index 7f9311bf5a..824dc1f893 100644
--- a/docs/user-manual/publishing/web/communicating-webpage.md
+++ b/docs/user-manual/publishing/web/communicating-webpage.md
@@ -14,11 +14,10 @@ Common to both methods of hosting you should think about what features of your P
 Here is a simple example where we show a couple of different ways of exposing an API from a PlayCanvas application to a web page.
 
 ```javascript
-
 // method one: define a global function to set the score
 window.setScore = function (score) {
-    var app = pc.Application.getApplication();
-    var entity = app.root.findByName("Score Keeper");
+    const app = pc.Application.getApplication();
+    const entity = app.root.findByName("Score Keeper");
     entity.script.scoreKeeper.setScore(score);
 }
 
@@ -41,7 +40,7 @@ ScoreKeeper.prototype.setScore = function (score) {
 window.setScore(10);
 
 // method two:
-var app = pc.Application.getApplication();
+const app = pc.Application.getApplication();
 app.fire("score:set", 10);
 
 ```
@@ -61,7 +60,7 @@ If you add `/e` after `https://playcanv.as` in the URL, this will give you a ver
 ```html
 <iframe loading="lazy" id="app-frame" src="https://playcanv.as/e/p/example/">
 <script>
-var iframe = document.getElementById("app-frame");
+const iframe = document.getElementById("app-frame");
 iframe.contentWindow.postMessage({
     score: 10,
 }, "https://playcanv.as");
@@ -73,13 +72,13 @@ In your application
 ```javascript
 window.addEventListener("message", function (event) {
     if (event.origin === "http://example.com") { // always check message came from your website
-        var score = event.data.score;
+        const score = event.data.score;
 
         // call API method one:
         window.setScore(score);
 
         // call API method two:
-        var app = pc.Application.getApplication();
+        const app = pc.Application.getApplication();
         app.fire("score:set", score);
     }
 }, false);
@@ -142,10 +141,10 @@ For example:
     <script src="__start__.js"></script>
     <script src="__loading__.js"></script>
     <script>
-    var app = pc.Application.getApplication();
+    const app = pc.Application.getApplication();
     app.on("start", function () {
         // get the root of the scene.
-        var hierarchy = app.root.getChildren()[0];
+        const hierarchy = app.root.children[0];
 
         // do other stuff here
     });
diff --git a/docs/user-manual/publishing/web/self-hosting-for-beginners.md b/docs/user-manual/publishing/web/self-hosting-for-beginners.md
index 86899e8f8a..e192bf148b 100644
--- a/docs/user-manual/publishing/web/self-hosting-for-beginners.md
+++ b/docs/user-manual/publishing/web/self-hosting-for-beginners.md
@@ -56,7 +56,7 @@ When writing PlayCanvas applications, no code you write in PlayCanvas runs serve
 In the web stack, the server is not the only place where we can do programming and respond to user input. Client-side refers to code running inside your browser. This code is always in Javascript, which is the language that browsers run. With client-side javascript you can perform many different operations. In the simplest case, you can modify the HTML page that was downloaded from the server
 
 ```javascript
-var title = document.getElementById("title");
+const title = document.getElementById("title");
 title.innerHTML = "This is the new title";
 ```
 
diff --git a/docs/user-manual/scripting/communication.md b/docs/user-manual/scripting/communication.md
index cfd8abfadf..f501534b21 100644
--- a/docs/user-manual/scripting/communication.md
+++ b/docs/user-manual/scripting/communication.md
@@ -21,8 +21,8 @@ Trigger an event using `fire()`. In this example, the player script fires a `mov
 var Player = pc.createScript('player');
 
 Player.prototype.update = function (dt) {
-    var x = 1;
-    var y = 1;
+    const x = 1;
+    const y = 1;
     this.fire('move', x, y);
 };
 ```
@@ -37,7 +37,7 @@ Display.attributes.add('playerEntity', { type: 'entity' });
 
 Display.prototype.initialize = function () {
     // method to call when player moves
-    var onPlayerMove = function(x, y) {
+    const onPlayerMove = function(x, y) {
         console.log(x, y);
     };
 
@@ -65,8 +65,8 @@ Firing the `player:move` event:
 var Player = pc.createScript('player');
 
 Player.prototype.update = function (dt) {
-    var x = 1;
-    var y = 1;
+    const x = 1;
+    const y = 1;
     this.app.fire('player:move', x, y);
 };
 ```
@@ -78,7 +78,7 @@ var Display = pc.createScript('display');
 
 Display.prototype.initialize = function () {
     // method to call when player moves
-    var onPlayerMove = function(x, y) {
+    const onPlayerMove = function(x, y) {
         console.log(x, y);
     };
 
diff --git a/docs/user-manual/scripting/creating-new.md b/docs/user-manual/scripting/creating-new.md
index ca896a75ee..68338282dd 100644
--- a/docs/user-manual/scripting/creating-new.md
+++ b/docs/user-manual/scripting/creating-new.md
@@ -24,7 +24,7 @@ Scripts are shown by their name, when you select a script to add it to a compone
 If you want to dynamically add scripts while your application is running you can do so from the script component
 
 ```javascript
-var entity = new pc.Entity();
+const entity = new pc.Entity();
 entity.addComponent("script");
 entity.script.create("rotate", {
     attributes: {
diff --git a/docs/user-manual/scripting/migration-guide.md b/docs/user-manual/scripting/migration-guide.md
index eae826343e..2f4fee4cde 100644
--- a/docs/user-manual/scripting/migration-guide.md
+++ b/docs/user-manual/scripting/migration-guide.md
@@ -76,8 +76,8 @@ MyScript.attributes.add('speed', { type: 'number', default: 10 });
 
 // initialize code called once per entity
 MyScript.prototype.initialize = function() {
-    var app = this.app;       // application instance is available as this.app
-    var entity = this.entity; // entity property already set up
+    const app = this.app;       // application instance is available as this.app
+    const entity = this.entity; // entity property already set up
 };
 
 // update code called every frame
@@ -132,7 +132,7 @@ MyScript.prototype.initialize = function() {
 Next, we will transfer the legacy project's scene hierarchy across. The PlayCanvas Editor supports a copy and paste operation between two Editor instances. However, this operation fails if legacy script components are in the selection. Therefore, you should first delete all script components from your legacy script project. To do this, select all entities with legacy script components. You can do this by running the following JavaScript in the browser's JavaScript console:
 
 ```javascript
-var entities = editor.call('entities:list').filter(function(entity) {
+const entities = editor.call('entities:list').filter(function(entity) {
     return entity.has('components.script');
 });
 if (entities.length) {
diff --git a/docs/user-manual/scripting/script-attributes.md b/docs/user-manual/scripting/script-attributes.md
index d39e158699..9b360d78b1 100644
--- a/docs/user-manual/scripting/script-attributes.md
+++ b/docs/user-manual/scripting/script-attributes.md
@@ -166,7 +166,7 @@ Here's an example of accessing the above attributes in a script:
 ```javascript
 MyScript.prototype.update = function (dt) {
     if (this.gameConfig.godMode) {
-        for (var i = 0; i < this.gameConfig.numEnemies; i++) {
+        for (let i = 0; i < this.gameConfig.numEnemies; i++) {
             // ...
         }
     }
diff --git a/docs/user-manual/templates/index.md b/docs/user-manual/templates/index.md
index 48a6f9e821..21a0eb29be 100644
--- a/docs/user-manual/templates/index.md
+++ b/docs/user-manual/templates/index.md
@@ -88,8 +88,8 @@ You modify the position of Tree1/Sphere. This creates an override on the positio
 You can instantiate Template Assets at runtime like so:
 
 ```javascript
-var templateAsset = this.app.assets.get(templateAssetId);
-var instance = templateAsset.resource.instantiate();
+const templateAsset = this.app.assets.get(templateAssetId);
+const instance = templateAsset.resource.instantiate();
 this.app.root.addChild(instance);
 ```