diff --git a/website/content/docs/api.mdx b/website/content/docs/api.mdx
index 35b242d297..323fec7bd8 100644
--- a/website/content/docs/api.mdx
+++ b/website/content/docs/api.mdx
@@ -52,7 +52,7 @@ getContents(index: Number = 0, length: Number = remaining): Delta
 **Examples**
 
 ```javascript
-var delta = quill.getContents();
+const delta = quill.getContents();
 ```
 
 ### getLength
@@ -68,7 +68,7 @@ getLength(): Number
 **Examples**
 
 ```javascript
-var length = quill.getLength();
+const length = quill.getLength();
 ```
 
 ### getText
@@ -86,7 +86,7 @@ getText(index: Number = 0, length: Number = remaining): String
 **Examples**
 
 ```javascript
-var text = quill.getText(0, 10);
+const text = quill.getText(0, 10);
 ```
 
 ### insertEmbed
@@ -364,12 +364,12 @@ getSelection(focus = false): { index: Number, length: Number }
 **Examples**
 
 ```javascript
-var range = quill.getSelection();
+const range = quill.getSelection();
 if (range) {
   if (range.length == 0) {
     console.log('User cursor is at index', range.index);
   } else {
-    var text = quill.getText(range.index, range.length);
+    const text = quill.getText(range.index, range.length);
     console.log('User has highlighted: ', text);
   }
 } else {
@@ -539,7 +539,7 @@ quill.on('selection-change', function (range, oldRange, source) {
     if (range.length == 0) {
       console.log('User cursor is on', range.index);
     } else {
-      var text = quill.getText(range.index, range.length);
+      const text = quill.getText(range.index, range.length);
       console.log('User has highlighted', text);
     }
   } else {
@@ -642,13 +642,13 @@ Quill.find(domNode: Node, bubble: boolean = false): Blot | Quill
 **Examples**
 
 ```javascript
-var container = document.querySelector('#container');
-var quill = new Quill(container);
+const container = document.querySelector('#container');
+const quill = new Quill(container);
 console.log(Quill.find(container) === quill); // Should be true
 
 quill.insertText(0, 'Hello', 'link', 'https://world.com');
-var linkNode = document.querySelector('#container a');
-var linkBlot = Quill.find(linkNode);
+const linkNode = document.querySelector('#container a');
+const linkBlot = Quill.find(linkNode);
 ```
 
 ### getIndex #experimental
@@ -762,11 +762,11 @@ Quill.import(path): any
 **Examples**
 
 ```javascript
-var Parchment = Quill.import('parchment');
-var Delta = Quill.import('delta');
+const Parchment = Quill.import('parchment');
+const Delta = Quill.import('delta');
 
-var Toolbar = Quill.import('modules/toolbar');
-var Link = Quill.import('formats/link');
+const Toolbar = Quill.import('modules/toolbar');
+const Link = Quill.import('formats/link');
 // Similar to ES6 syntax `import Link from 'quill/formats/link';`
 ```
 
@@ -785,7 +785,7 @@ Quill.register(defs: { [String]: any }, supressWarning: Boolean = false)
 **Examples**
 
 ```javascript
-var Module = Quill.import('core/module');
+const Module = Quill.import('core/module');
 
 class CustomModule extends Module {}
 
@@ -817,7 +817,7 @@ addContainer(domNode: Node, refNode?: Node): Element
 **Examples**
 
 ```javascript
-var container = quill.addContainer('ql-custom');
+const container = quill.addContainer('ql-custom');
 ```
 
 ### getModule
@@ -833,5 +833,5 @@ getModule(name: String): any
 **Examples**
 
 ```javascript
-var toolbar = quill.getModule('toolbar');
+const toolbar = quill.getModule('toolbar');
 ```
diff --git a/website/content/docs/configuration.mdx b/website/content/docs/configuration.mdx
index 72fcaf5b9c..1fb1d3b16b 100644
--- a/website/content/docs/configuration.mdx
+++ b/website/content/docs/configuration.mdx
@@ -10,17 +10,17 @@ Quill allows several ways to customize it to suit your needs. This section is de
 Quill requires a container where the editor will be appended. You can pass in either a CSS selector or a DOM object.
 
 ```javascript
-var editor = new Quill('.editor');  // First matching element will be used
+const editor = new Quill('.editor');  // First matching element will be used
 ```
 
 ```javascript
-var container = document.getElementById('editor');
-var editor = new Quill(container);
+const container = document.getElementById('editor');
+const editor = new Quill(container);
 ```
 
 ```javascript
-var container = $('.editor').get(0);
-var editor = new Quill(container);
+const container = $('.editor').get(0);
+const editor = new Quill(container);
 ```
 
 ### Options
@@ -28,7 +28,7 @@ var editor = new Quill(container);
 To configure Quill, pass in an options object:
 
 ```javascript
-var options = {
+const options = {
   debug: 'info',
   modules: {
     toolbar: '#toolbar'
@@ -37,7 +37,7 @@ var options = {
   readOnly: true,
   theme: 'snow'
 };
-var editor = new Quill('#editor', options);
+const editor = new Quill('#editor', options);
 ```
 
 The following keys are recognized:
diff --git a/website/content/docs/modules.mdx b/website/content/docs/modules.mdx
index 72008ccec6..e90eb7bcf8 100644
--- a/website/content/docs/modules.mdx
+++ b/website/content/docs/modules.mdx
@@ -7,7 +7,7 @@ Modules allow Quill's behavior and functionality to be customized. Several offic
 To enable a module, simply include it in Quill's configuration.
 
 ```javascript
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     'history': {          // Enable with custom configurations
       'delay': 2500,
@@ -26,8 +26,8 @@ The [Clipboard](/docs/modules/clipboard/), [Keyboard](/docs/modules/keyboard/),
 Modules may also be extended and re-registered, replacing the original module. Even required modules may be re-registered and replaced.
 
 ```javascript
-var Clipboard = Quill.import('modules/clipboard');
-var Delta = Quill.import('delta');
+const Clipboard = Quill.import('modules/clipboard');
+const Delta = Quill.import('delta');
 
 class PlainClipboard extends Clipboard {
   convert(html = null) {
@@ -43,7 +43,7 @@ class PlainClipboard extends Clipboard {
 Quill.register('modules/clipboard', PlainClipboard, true);
 
 // Will be created with instance of PlainClipboard
-var quill = new Quill('#editor');
+const quill = new Quill('#editor');
 ```
 
 *Note: This particular example was selected to show what is possible. It is often easier to just use an API or configuration the existing module exposes. In this example, the existing Clipboard's [addMatcher](/docs/modules/clipboard/#addmatcher) API is suitable for most paste customization scenarios.*
diff --git a/website/content/docs/modules/clipboard.mdx b/website/content/docs/modules/clipboard.mdx
index 67119223fc..6896d12163 100644
--- a/website/content/docs/modules/clipboard.mdx
+++ b/website/content/docs/modules/clipboard.mdx
@@ -65,7 +65,7 @@ quill.clipboard.dangerouslyPasteHTML(5, '&nbsp;<b>World</b>');
 An array of matchers can be passed into Clipboard's configuration options. These will be appended after Quill's own default matchers.
 
 ```javascript
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     clipboard: {
       matchers: [
diff --git a/website/content/docs/modules/history.mdx b/website/content/docs/modules/history.mdx
index 69a0ba2883..b0fc5df42b 100644
--- a/website/content/docs/modules/history.mdx
+++ b/website/content/docs/modules/history.mdx
@@ -29,7 +29,7 @@ By default all changes, whether originating from user input or programmatically
 ### Example
 
 ```javascript
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     history: {
       delay: 2000,
diff --git a/website/content/docs/modules/keyboard.mdx b/website/content/docs/modules/keyboard.mdx
index dec5e8779f..339e8ceab2 100644
--- a/website/content/docs/modules/keyboard.mdx
+++ b/website/content/docs/modules/keyboard.mdx
@@ -105,7 +105,7 @@ quill.keyboard.addBinding({ key: Keyboard.keys.ENTER }, {
 When an Array, handler will be called if *any* of the specified formats are active. When an Object, *all* specified formats conditions must be met. In either case, the format property of the context parameter will be an Object of all current active formats, the same returned by `quill.getFormat()`.
 
 ```js
-var context = {
+const context = {
   format: {
     list: true,       // must be on a list, but can be any value
     script: 'super',  // must be exactly 'super', 'sub' will not suffice
@@ -162,7 +162,7 @@ Adding a binding with `quill.keyboard.addBinding` will not run before Quill's be
 Each binding config must contain `key` and `handler` options, and may optionally include any of the `context` options.
 
 ```javascript
-var bindings = {
+const bindings = {
   // This will overwrite the default binding also named 'tab'
   tab: {
     key: 9,
@@ -197,7 +197,7 @@ var bindings = {
   }
 };
 
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     keyboard: {
       bindings: bindings
diff --git a/website/content/docs/modules/syntax.mdx b/website/content/docs/modules/syntax.mdx
index 4311436cde..0921c58eec 100644
--- a/website/content/docs/modules/syntax.mdx
+++ b/website/content/docs/modules/syntax.mdx
@@ -21,7 +21,7 @@ hljs.configure({   // optionally configure hljs
   languages: ['javascript', 'ruby', 'python']
 });
 
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     syntax: true,              // Include syntax module
     toolbar: [['code-block']]  // Include button in toolbar
diff --git a/website/content/docs/modules/toolbar.mdx b/website/content/docs/modules/toolbar.mdx
index 6f81375829..10927f42b0 100644
--- a/website/content/docs/modules/toolbar.mdx
+++ b/website/content/docs/modules/toolbar.mdx
@@ -58,7 +58,7 @@ The Toolbar module allow users to easily format Quill's contents.
 It can be configured with a custom container and handlers.
 
 ```javascript
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: {
       container: '#toolbar', // Selector for toolbar container
@@ -73,7 +73,7 @@ var quill = new Quill('#editor', {
 Because the `container` option is so common, a top level shorthand is also allowed.
 
 ```javascript
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     // Equivalent to { toolbar: { container: '#toolbar' }}
     toolbar: '#toolbar'
@@ -88,9 +88,9 @@ Toolbar controls can either be specified by a simple array of format names or a
 To begin with the simpler array option:
 
 ```javascript
-var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];
+const toolbarOptions = ['bold', 'italic', 'underline', 'strike'];
 
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: toolbarOptions
   }
@@ -100,13 +100,13 @@ var quill = new Quill('#editor', {
 Controls can also be grouped by one level of nesting an array. This will wrap controls in a `<span>` with class name `ql-formats`, providing structure for themes to utilize. For example [Snow](/docs/themes/#snow/) adds extra spacing between control groups.
 
 ```javascript
-var toolbarOptions = [['bold', 'italic'], ['link', 'image']];
+const toolbarOptions = [['bold', 'italic'], ['link', 'image']];
 ```
 
 Buttons with custom values can be specified with an Object with the name of the format as its only key.
 
 ```javascript
-var toolbarOptions = [{ header: '3' }];
+const toolbarOptions = [{ header: '3' }];
 ```
 
 Dropdowns are similarly specified by an Object, but with an array of possible values. CSS is used to control the visual labels for dropdown options.
@@ -115,7 +115,7 @@ Dropdowns are similarly specified by an Object, but with an array of possible va
 // Note false, not 'normal', is the correct value
 // quill.format('size', false) removes the format,
 // allowing default styling to work
-var toolbarOptions = [
+const toolbarOptions = [
   { size: [ 'small', false, 'large', 'huge' ]}
 ];
 ```
@@ -123,7 +123,7 @@ var toolbarOptions = [
 Note [Themes](/docs/themes/) may also specify default values for dropdowns. For example, [Snow](/docs/themes/#snow/) provides a default list of 35 colors for the `color` and `background` formats, if set to an empty array.
 
 ```javascript
-var toolbarOptions = [
+const toolbarOptions = [
   ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
   ['blockquote', 'code-block'],
 
@@ -143,7 +143,7 @@ var toolbarOptions = [
   ['clean']                                         // remove formatting button
 ];
 
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: toolbarOptions
   },
@@ -174,7 +174,7 @@ For use cases requiring even more customization, you can manually create a toolb
 
 <!-- Initialize editor with toolbar -->
 <script>
-  var quill = new Quill('#editor', {
+  const quill = new Quill('#editor', {
     modules: {
       toolbar: '#toolbar'
     }
@@ -196,13 +196,13 @@ Note by supplying your own HTML element, Quill searches for particular input ele
 <div id="editor"></div>
 
 <script>
-  var quill = new Quill('#editor', {
+  const quill = new Quill('#editor', {
     modules: {
       toolbar: '#toolbar',
     },
   });
 
-  var customButton = document.querySelector('#custom-button');
+  const customButton = document.querySelector('#custom-button');
   customButton.addEventListener('click', function () {
     console.log('Clicked!');
   });
@@ -216,12 +216,12 @@ The toolbar controls by default applies and removes formatting, but you can also
 Handler functions will be bound to the toolbar (so using `this` will refer to the toolbar instance) and passed the `value` attribute of the input if the corresponding format is inactive, and `false` otherwise. Adding a custom handler will overwrite the default toolbar and theme behavior.
 
 ```javascript
-var toolbarOptions = {
+const toolbarOptions = {
   handlers: {
     // handlers object will be merged with default handlers object
     link: function (value) {
       if (value) {
-        var href = prompt('Enter the URL');
+        const href = prompt('Enter the URL');
         this.quill.format('link', href);
       } else {
         this.quill.format('link', false);
@@ -230,13 +230,13 @@ var toolbarOptions = {
   }
 };
 
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: toolbarOptions
   }
 });
 
 // Handlers can also be added post initialization
-var toolbar = quill.getModule('toolbar');
+const toolbar = quill.getModule('toolbar');
 toolbar.addHandler('image', showImageUI);
 ```
diff --git a/website/content/docs/quickstart.mdx b/website/content/docs/quickstart.mdx
index 825571245d..0f54efe5d6 100644
--- a/website/content/docs/quickstart.mdx
+++ b/website/content/docs/quickstart.mdx
@@ -20,7 +20,7 @@ The best way to get started is to try a simple example. Quill is initialized wit
 
 <!-- Initialize Quill editor -->
 <script>
-  var quill = new Quill('#editor', {
+  const quill = new Quill('#editor', {
     theme: 'snow'
   });
 </script>
diff --git a/website/content/docs/themes.mdx b/website/content/docs/themes.mdx
index e4ae5aa9ff..44706100b8 100644
--- a/website/content/docs/themes.mdx
+++ b/website/content/docs/themes.mdx
@@ -12,7 +12,7 @@ Themes allow you to easily make your editor look good with minimal effort. Quill
 
 <script src="{{site.cdn}}{{site.version}}/quill.js"></script>
 <script>
-  var quill = new Quill('#editor', {
+  const quill = new Quill('#editor', {
     theme: 'bubble', // Specify theme in configuration
   });
 </script>
diff --git a/website/content/guides/cloning-medium-with-parchment.mdx b/website/content/guides/cloning-medium-with-parchment.mdx
index 283e5e6266..b02da15856 100644
--- a/website/content/guides/cloning-medium-with-parchment.mdx
+++ b/website/content/guides/cloning-medium-with-parchment.mdx
@@ -53,7 +53,7 @@ We follow Medium's example here in using `strong` and `em` tags but you could ju
 Quill.register(BoldBlot);
 Quill.register(ItalicBlot);
 
-var quill = new Quill('#editor');
+const quill = new Quill('#editor');
 
 quill.insertText(0, 'Test', { bold: true });
 quill.formatText(0, 4, 'italic', true);
diff --git a/website/content/guides/designing-the-delta-format.mdx b/website/content/guides/designing-the-delta-format.mdx
index 657e3cf74b..452cf62093 100644
--- a/website/content/guides/designing-the-delta-format.mdx
+++ b/website/content/guides/designing-the-delta-format.mdx
@@ -16,7 +16,7 @@ Let's start at the basics with just plain text. There already is a ubiquitous fo
 Arrays are the only other ordered data type available, so we use an array of objects. This also allows us to leverage JSON for compatibility with a breadth of tools.
 
 ```javascript
-var content = [
+const content = [
   { text: 'Hello' },
   { text: 'World', bold: true }
 ];
@@ -25,7 +25,7 @@ var content = [
 We can add italics, underline, and other formats to the main object if we want to; but it is cleaner to separate `text` from all of this so we organize formatting under one field, which we will name `attributes`.
 
 ```javascript
-var content = [
+const content = [
   { text: 'Hello' },
   { text: 'World', attributes: { bold: true } }
 ];
@@ -37,7 +37,7 @@ var content = [
 Even with our simple Delta format so far, it is unpredictable since the above "Hello World" example can be represented differently, so we cannot predict which will be generated:
 
 ```javascript
-var content = [
+const content = [
   { text: 'Hel' },
   { text: 'lo' },
   { text: 'World', attributes: { bold: true } }
@@ -56,7 +56,7 @@ We do not define the set of possible attributes, nor their meanings, but we do a
 So if we had the following, the only conclusion we can draw is `a` is different from `b`, but not what `a` or `b` means.
 
 ```javascript
-var content = [{
+const content = [{
   text: "Mystery",
   attributes: {
     a: true,
@@ -68,7 +68,7 @@ var content = [{
 It is up to the implementer to pick appropriate names:
 
 ```javascript
-var content = [{
+const content = [{
   text: "Mystery",
   attributes: {
     italic: true,
@@ -93,7 +93,7 @@ This unambiguous predictability makes Deltas easier to work with, both because y
 Line formats affect the contents of an entire line, so they present an interesting challenge for our compact and canonical constraints. A seemingly reasonable way to represent centered text would be the following:
 
 ```javascript
-var content = [
+const content = [
   { text: "Hello", attributes: { align: "center" } },
   { text: "\nWorld" }
 ];
@@ -102,7 +102,7 @@ var content = [
 But what if the user deletes the newline character? If we just naively get rid of the newline character, the Delta would now look like this:
 
 ```javascript
-var content = [
+const content = [
   { text: "Hello", attributes: { align: "center" } },
   { text: "World" }
 ];
@@ -111,7 +111,7 @@ var content = [
 Is this line still centered? If the answer is no, then our representation is not compact, since we do not need the attribute object and can combine the two strings:
 
 ```javascript
-var content = [
+const content = [
   { text: "HelloWorld" }
 ];
 ```
@@ -123,7 +123,7 @@ So we cannot just naively get rid of the newline character. We also have to eith
 What if we removed the newline from the following?
 
 ```javascript
-var content = [
+const content = [
   { text: "Hello", attributes: { align: "center" } },
   { text: "\n" },
   { text: "World", attributes: { align: "right" } }
@@ -138,7 +138,7 @@ To solve this, Quill "adds" a newline to all documents and always ends Deltas wi
 
 ```javascript
 // Hello World on two lines
-var content = [
+const content = [
   { text: "Hello" },
   { text: "\n", attributes: { align: "center" } },
   { text: "World" },
@@ -152,13 +152,13 @@ var content = [
 We want to add embedded content like images or video. Strings were natural to use for text but we have a lot more options for embeds. Since there are different types of embeds, our choice just needs to include this type information, and then the actual content. There are many reasonable options here but we will use an object whose only key is the embed type and the value is the content representation, which may have any type or value.
 
 ```javascript
-var img = {
+const img = {
   image: {
     url: 'https://quilljs.com/logo.png'
   }
 };
 
-var f = {
+const f = {
   formula: 'e=mc^2'
 };
 ```
@@ -166,7 +166,7 @@ var f = {
 Similar to text, images might have some defining characteristics, and some transient ones. We used `attributes` for text content and can use the same `attributes` field for images. But because of this, we can keep the general structure we have been using, but should rename our `text` key into something more general. For reasons we will explore later, we will choose the name `insert`. Putting this all together we have:
 
 ```javascript
-var content = [{
+const content = [{
   insert: 'Hello'
 }, {
   insert: 'World',
@@ -191,7 +191,7 @@ To describe deleting text, we need to know where and how many characters to dele
 One reasonable way to describe a deletion is to explicitly store its index and length.
 
 ```javascript
-var delta = [{
+const delta = [{
   delete: {
     index: 4,
     length: 1
@@ -215,7 +215,7 @@ Now that Deltas may be describing changes to a non-empty document, `{ insert: "H
 Similar to deletes, we need to specify the range of text to format, along with the format change itself. Formatting exists in the `attributes` object, so a simple solution is to provide an additional `attributes` object to merge with the existing one. This merge is shallow to keep things simple. We have not found a use case that is compelling enough to require a deep merge and warrants the added complexity.
 
 ```javascript
-var delta = [{
+const delta = [{
   format: {
     index: 4,
     length: 1
@@ -231,7 +231,7 @@ The special case is when we want to remove formatting. We will use `null` for th
 **Note:** We now have to be careful with indexes at the application layer. As mentioned earlier, Deltas do not ascribe any inherent meaning to any the `attributes`' key-value pairs, nor any embed types or values. Deltas do not know an image does not have duration, text does not have alternative texts, and videos cannot be bolded. The following is a *legal* Delta that might have been the result of applying other *legal* Deltas, by an application not being careful of format ranges.
 
 ```javascript
-var delta = [{
+const delta = [{
   insert: {
     image: "https://imgur.com/"
   },
@@ -276,7 +276,7 @@ This necessitates the creation of a new Operation, that will simply mean "keep t
 ```javascript
 // Starting with "HelloWorld",
 // bold "Hello", and insert a space right after it
-var change = [
+const change = [
   { format: true, attributes: { bold: true } },  // H
   { format: true, attributes: { bold: true } },  // e
   { format: true, attributes: { bold: true } },  // l
@@ -296,7 +296,7 @@ Since every character is described, explicit indexes and lengths are no longer n
 Therefore, we can make the easy optimization to merge adjacent equal Operations, re-introducing *length*. If the last Operation is a `retain` we can simply drop it, for it simply instructs to "do nothing to the rest of the document".
 
 ```javascript
-var change = [
+const change = [
   { format: 5, attributes: { bold: true } }
   { insert: ' ' }
 ]
@@ -305,7 +305,7 @@ var change = [
 Furthermore, you might notice that a `retain` is in some ways just a special case of `format`. For instance, there is no practical difference between `{ format: 1, attributes: {} }` and `{ retain: 1 }`. Compacting would drop the empty `attributes` object leaving us with just `{ format: 1 }`, creating a canonicalization conflict. Thus, in our example we will simply combine `format` and `retain`, and keep the name `retain`.
 
 ```javascript
-var change = [
+const change = [
   { retain: 5, attributes: { bold: true } },
   { insert: ' ' }
 ]
@@ -320,7 +320,7 @@ Right now we have an easy to use JSON Array that describes rich text. This is gr
 At the time of Delta's inception, it was not possible to sub-class an Array. For this reason Deltas are expressed as Objects, with a single property `ops` that stores an array of Operations like the ones we have been discussing.
 
 ```javascript
-var delta = {
+const delta = {
   ops: [{
     insert: 'Hello'
   }, {
diff --git a/website/content/guides/how-to-customize-quill.mdx b/website/content/guides/how-to-customize-quill.mdx
index 1d74f83397..aedb02afc4 100644
--- a/website/content/guides/how-to-customize-quill.mdx
+++ b/website/content/guides/how-to-customize-quill.mdx
@@ -36,7 +36,7 @@ Like Quill's core itself, many [modules](/docs/modules/) expose additional confi
 Otherwise, if you would like to drastically change functionality an existing module already covers, you can simply not include it&mdash;or explicitly exclude it when a theme includes it by default&mdash;and implement the functionality to your liking external to Quill, using the same [API](/docs/api/) the default module uses.
 
 ```js
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: false    // Snow includes toolbar by default
   },
@@ -60,13 +60,13 @@ Quill allows modification and extension of the contents and formats that it unde
 Quill uses classes, instead of inline style attributes, when possible, but both are implemented for you to pick and choose. A live example of this is implemented as a [Playground snippet](/playground/#class-vs-inline-style).
 
 ```js
-var ColorClass = Quill.import('attributors/class/color');
-var SizeStyle = Quill.import('attributors/style/size');
+const ColorClass = Quill.import('attributors/class/color');
+const SizeStyle = Quill.import('attributors/style/size');
 Quill.register(ColorClass, true);
 Quill.register(SizeStyle, true);
 
 // Initialize as you would normally
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: true
   },
@@ -79,7 +79,7 @@ var quill = new Quill('#editor', {
 In addition to choosing the particular Attributor, you can also customize existing ones. Here is an example of the font whitelist to add additional fonts.
 
 ```js
-var FontAttributor = Quill.import('attributors/class/font');
+const FontAttributor = Quill.import('attributors/class/font');
 FontAttributor.whitelist = [
   'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'
 ];
@@ -102,12 +102,12 @@ Note you still need to add styling for these classes into your CSS files.
 Formats represented by Blots can also be customized. Here is how you would change the DOM Node used to represent bold formatting.
 
 ```js
-var Bold = Quill.import('formats/bold');
+const Bold = Quill.import('formats/bold');
 Bold.tagName = 'B';   // Quill uses <strong> by default
 Quill.register(Bold, true);
 
 // Initialize as you would normally
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: true
   },
@@ -120,7 +120,7 @@ var quill = new Quill('#editor', {
 You can also extend existing formats. Here is a quick ES6 implementation of a list item that does not permit formatting its contents. Code blocks are implemented in exactly this way.
 
 ```js
-var ListItem = Quill.import('formats/list/item');
+const ListItem = Quill.import('formats/list/item');
 
 class PlainListItem extends ListItem {
   formatAt(index, length, name, value) {
@@ -135,7 +135,7 @@ class PlainListItem extends ListItem {
 Quill.register(PlainListItem, true);
 
 // Initialize as you would normally
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: true
   },
diff --git a/website/content/guides/upgrading-to-1-0.mdx b/website/content/guides/upgrading-to-1-0.mdx
index 550ee810dd..4adfa4f564 100644
--- a/website/content/guides/upgrading-to-1-0.mdx
+++ b/website/content/guides/upgrading-to-1-0.mdx
@@ -55,36 +55,36 @@ To realize the full benefits of 1.0, it is encouraged to take a fresh view of Qu
 The default [Delta](/docs/delta/) representation of some content has changed. In all cases the old format is still supported in methods using Deltas as in input, such as `setContents` and `updateContents`. But outputted Deltas, such as the ones reported by `text-change` and `getContents` will be in the new form. Since [Parchment](https://github.com/quilljs/parchment) now allows custom content and formats, it is possible to customize these Delta representations entirely.
 
 ```javascript
-var newImage = {
+const newImage = {
   insert: { image: 'url' }
 };
-var oldImage = {
+const oldImage = {
   insert: 1,
   attributes: {
     image: 'url'
   }
 };
 
-var newOrderedList = {
+const newOrderedList = {
   insert: '\n',
   attributes: {
     list: 'ordered'
   }
 };
-var oldOrderedList = {
+const oldOrderedList = {
   insert: '\n',
   attributes: {
     list: true
   }
 };
 
-var newBullettedList = {
+const newBullettedList = {
   insert: '\n',
   attributes: {
     list: 'bullet'
   }
 };
-var oldBullettedList = {
+const oldBullettedList = {
   insert: '\n',
   attributes: {
     bullet: true
diff --git a/website/content/guides/why-quill.mdx b/website/content/guides/why-quill.mdx
index 6574ee4dd8..4ac196af97 100644
--- a/website/content/guides/why-quill.mdx
+++ b/website/content/guides/why-quill.mdx
@@ -33,7 +33,7 @@ Cross platform support is important to many Javascript libraries, but the criter
 All of these benefits come in an easy to use package. Quill ships with sane defaults you can immediately use with just a few lines of Javascript:
 
 ```js
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: { toolbar: true },
   theme: 'snow'
 });