diff --git a/examples/javascript.jsx b/examples/javascript.jsx
index 6b29fd13..6a8f182f 100644
--- a/examples/javascript.jsx
+++ b/examples/javascript.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable */
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
     setText = e => {
@@ -11,7 +10,7 @@ export default class TodoList extends Component {
     };
     render({ }, { todos, text }) {
         return (
-            <form onSubmit={this.addTodo} action="javascript:">
+            <form onSubmit={this.addTodo}>
                 <label>
                   <span>Add Todo</span>
                   <input value={text} onInput={this.setText} />
diff --git a/examples/react.jsx b/examples/react.jsx
index 0c47cd7b..6e5b15a3 100644
--- a/examples/react.jsx
+++ b/examples/react.jsx
@@ -1,29 +1,23 @@
-import * as React from 'react';
+import React from 'react';
 
-export default class Counter extends React.Component {
-  state = {
-    count: 0
-  };
+function Counter({ name }) {
+    const [count, setCount] = useState(0);
 
-  increment = () => {
-    this.setState({
-      count: (this.state.count + 1)
-    });
-  };
+    function onClick() {
+        setCount(count => count + 1);
+    }
 
-  decrement = () => {
-    this.setState({
-      count: (this.state.count - 1)
-    });
-  };
-
-  render () {
     return (
-      <div>
-        <h1>{this.state.count}</h1>
-        <button onClick={this.increment}>Increment</button>
-        <button onClick={this.decrement}>Decrement</button>
-      </div>
+        <div>
+            <h2
+                style={{
+                    color: 'teal',
+                    fontSize: 24,
+                }}
+            >
+                {name}'s count: {count}
+            </h2>
+            <button onClick={onClick}>+</button>
+        <div/>
     );
-  }
 }
diff --git a/examples/scss.scss b/examples/scss.scss
index 45b14850..e11046b3 100644
--- a/examples/scss.scss
+++ b/examples/scss.scss
@@ -26,7 +26,7 @@ $addon-store-color: #333 !default;
   a {
     color: $addon-store-color;
 
-    &:hover  {
+    &:hover {
       color: darken($addon-store-color, 30%);
     }
 
diff --git a/examples/typescript.ts b/examples/typescript.ts
index a52abff4..d67aadb7 100644
--- a/examples/typescript.ts
+++ b/examples/typescript.ts
@@ -1,7 +1,3 @@
-/**
- * 1. Install "TypeScript" and "TypeScript Syntax" extension for syntax support
- * 2. Set Syntax: TypeScript
- */
 export default class Animal {
     private name : String;
     private age : Number;
diff --git a/examples/vue.vue b/examples/vue.vue
index b45c44d6..92378381 100644
--- a/examples/vue.vue
+++ b/examples/vue.vue
@@ -1,153 +1,38 @@
 <template>
-    <div class="columns">
-        <div class="column is-half is-offset-one-quarter task-list">
-            <div class="box">
-                <h2 class="title">My tasks</h2>
-                <hr>
-                <div class="field has-addons">
-                    <div class="control is-expanded">
-                        <input class="input" type="text" placeholder="New task" v-model="task.body">
-                    </div>
-                    <div class="control">
-                        <a class="button is-primary" @click="createTask()">
-                            Add task
-                        </a>
-                    </div>
-                </div>
-
-                <div class="tabs is-centered">
-                    <ul>
-                        <li :class="{'is-active' : isActive('current')}">
-                            <h3 class="title">
-                                <a href="#" v-on:click.prevent="fetchTaskList()">
-                                    Current task
-                                </a>
-                            </h3>
-                        </li>
-                        <li :class="{'is-active' : isActive('archive')}">
-                            <h3 class="title">
-                                <a href="#" v-on:click.prevent="fetchTaskList(1)">
-                                    Archived tasks
-                                </a>
-                            </h3>
-                        </li>
-                    </ul>
-                </div>
-                <div class="card" v-for="task in list">
-                    <header class="card-header">
-                        <p class="card-header-title">
-                            Task {{ task.id }}
-                        </p>
-                        <a href="#" class="card-header-icon" aria-label="more options"
-                            v-on:click.prevent="archiveTask(task.id)">
-                        <span class="icon">
-                            <i class="fa " :class="{'fa-square-o': !task.archive,
-                            check: !task.archive,
-                            'fa-check-square-o': task.archive,
-                            done: task.archive}" aria-hidden="true"></i>
-                        </span>
-                    </a>
-                </header>
-                <div class="card-content">
-                    <div class="content">
-                        <p v-if="task !== editingTask" @dblclick="editTask(task)" v-bind:title="message">
-                            {{ task.body }}
-                        </p>
-                        <input class="input" v-if="task === editingTask" v-autofocus @keyup.enter="endEditing(task)" @blur="endEditing(task)" type="text" placeholder="New task" v-model="task.body">
-                    </div>
-                </div>
-                <footer class="card-footer">
-                    <a class="card-footer-item" v-on:click.prevent="deleteTask(task.id)">Delete</a>
-                </footer>
-            </div>
-
-        </div>
+    <div id="app">
+        <Users />
     </div>
-</div>
 </template>
 
 <script>
-    /* eslint-disable */
-    export default {
-        directives: {
-            'autofocus': {
-                inserted(el) {
-                    el.focus();
-                }
-            }
-        },
-        data() {
-            return {
-                message: 'Double click for editing.',
-                list: [],
-                task: {
-                    id: '',
-                    body: '',
-                    archive: ''
-                },
-                editingTask: {},
-                activeItem: 'current'
-            }
-        },
-        created() {
-            this.fetchTaskList();
-        },
-        methods: {
-            fetchTaskList(archive = null) {
-                if (archive === null) {
-                    var url = 'current_tasks';
-                    this.setActive('current');
-                } else {
-                    var url = 'archived_tasks';
-                    this.setActive('archive');
-                }
-                axios.get(url).then(result => {
-                    this.list = result.data
-                });
-            },
-            isActive(menuItem) {
-                return this.activeItem === menuItem;
-            },
-            setActive(menuItem) {
-                this.activeItem = menuItem;
-            },
-            createTask() {
-                axios.post('create_task', this.task).then(result => {
-                    this.task.body = '';
-                    this.fetchTaskList();
-                }).catch(err => {
-                    console.log(err);
-                });
-            },
-            editTask(task) {
-                this.editingTask = task;
-            },
-            endEditing(task) {
-                this.editingTask = {};
-                if (task.body.trim() === '') {
-                    this.deleteTask(task.id);
-                } else {
-                    axios.post('edit_task', task).then(result => {
-                        console.log('success!')
-                    }).catch(err => {
-                        console.log(err);
-                    });
-                }
-            },
-            deleteTask(id) {
-                axios.post('delete_task/' + id).then(result => {
-                    this.fetchTaskList();
-                }).catch(err => {
-                    console.log(err);
-                });
+import Users from './components/Users.vue';
+
+export default {
+    name: 'app',
+    components: {
+        Users,
+    },
+    data() {
+        return {
+            employee: {
+                name: '',
+                email: '',
             },
-            archiveTask(id) {
-                axios.post('archive_task/' + id).then(result => {
-                    this.fetchTaskList();
-                }).catch(err => {
-                    console.log(err);
-                });
-            }
-        }
-    }
+        };
+    },
+    methods: {
+        handleSubmit() {
+            console.log('testing handleSubmit');
+        },
+    },
+};
 </script>
+
+<style>
+#app {
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+}
+</style>
diff --git a/package.json b/package.json
index 15da7e0a..84bdb9dc 100755
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.3.4",
         "@meetio/meetio-icons": "^1.10.0",
-        "@meetio/scheme-generator": "^1.1.0",
+        "@meetio/scheme-generator": "^1.3.4",
         "@typescript-eslint/eslint-plugin": "2.15.0",
         "@typescript-eslint/parser": "2.15.0",
         "babel-eslint": "^10.0.3",
diff --git a/schemes/Meetio-Theme-Dark.sublime-color-scheme b/schemes/Meetio-Theme-Dark.sublime-color-scheme
index a176dd98..44f83461 100644
--- a/schemes/Meetio-Theme-Dark.sublime-color-scheme
+++ b/schemes/Meetio-Theme-Dark.sublime-color-scheme
@@ -234,15 +234,20 @@
             "font_style": "italic",
             "foreground": "var(red)"
         },
+        {
+            "name": "MARKUP - Deleted",
+            "scope": "markup.deleted",
+            "foreground": "var(red)"
+        },
         {
             "name": "MARKUP - Inserted",
             "scope": "markup.inserted",
             "foreground": "var(green)"
         },
         {
-            "name": "MARKUP - Deleted",
-            "scope": "markup.deleted",
-            "foreground": "var(red)"
+            "name": "MARKUP - Changed",
+            "scope": "markup.changed",
+            "foreground": "var(orange)"
         },
         {
             "name": "MARKUP - Blockquotes and other quote styles",
@@ -347,8 +352,13 @@
         },
         {
             "name": "META - Object",
-            "scope": "meta.definition.property",
-            "foreground": "var(red)"
+            "scope": "meta.field.declaration",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "META - Diff Header",
+            "scope": "meta.diff, meta.diff.header",
+            "foreground": "var(pink)"
         },
         {
             "name": "PUNCTUATION - Separators such as commas",
@@ -556,6 +566,26 @@
             "scope": "entity.other.pseudo-element",
             "foreground": "var(purple)"
         },
+        {
+            "name": "DIFF - Deleted",
+            "scope": "diff.deleted",
+            "background": "color(var(red) alpha(0.10))"
+        },
+        {
+            "name": "DIFF - Deleted Char",
+            "scope": "diff.deleted.char",
+            "background": "color(var(red) alpha(0.10))"
+        },
+        {
+            "name": "DIFF - Inserted",
+            "scope": "diff.inserted",
+            "background": "color(var(green) alpha(0.10))"
+        },
+        {
+            "name": "DIFF - Inserted Char",
+            "scope": "diff.inserted.char",
+            "background": "color(var(green) alpha(0.10))"
+        },
         {
             "name": "JS - Console, \"console\"",
             "scope": "support.type.object.console,support.class.console",
@@ -566,6 +596,11 @@
             "scope": "support.function.console",
             "foreground": "var(blue)"
         },
+        {
+            "name": "JS - Other property",
+            "scope": "source.js variable.other.property.js",
+            "foreground": "var(blue)"
+        },
         {
             "name": "JSON - Key ",
             "scope": "meta.mapping.key.json string.quoted.double.json",
@@ -581,6 +616,11 @@
             "scope": "source.json meta.mapping.value.json meta.mapping.value.json meta.mapping.key.json string.quoted.double.json",
             "foreground": "var(orange)"
         },
+        {
+            "name": "JSX - Meta",
+            "scope": "meta.jsx.js",
+            "foreground": "var(foreground)"
+        },
         {
             "name": "Python - Declaration function",
             "scope": "source.python meta.function.python storage.type.function.python keyword.declaration.function.python",
diff --git a/schemes/Meetio-Theme-Light.sublime-color-scheme b/schemes/Meetio-Theme-Light.sublime-color-scheme
index 8658a826..c852b300 100644
--- a/schemes/Meetio-Theme-Light.sublime-color-scheme
+++ b/schemes/Meetio-Theme-Light.sublime-color-scheme
@@ -234,15 +234,20 @@
             "font_style": "italic",
             "foreground": "var(red)"
         },
+        {
+            "name": "MARKUP - Deleted",
+            "scope": "markup.deleted",
+            "foreground": "var(red)"
+        },
         {
             "name": "MARKUP - Inserted",
             "scope": "markup.inserted",
             "foreground": "var(green)"
         },
         {
-            "name": "MARKUP - Deleted",
-            "scope": "markup.deleted",
-            "foreground": "var(red)"
+            "name": "MARKUP - Changed",
+            "scope": "markup.changed",
+            "foreground": "var(orange)"
         },
         {
             "name": "MARKUP - Blockquotes and other quote styles",
@@ -347,8 +352,13 @@
         },
         {
             "name": "META - Object",
-            "scope": "meta.definition.property",
-            "foreground": "var(red)"
+            "scope": "meta.field.declaration",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "META - Diff Header",
+            "scope": "meta.diff, meta.diff.header",
+            "foreground": "var(pink)"
         },
         {
             "name": "PUNCTUATION - Separators such as commas",
@@ -556,6 +566,26 @@
             "scope": "entity.other.pseudo-element",
             "foreground": "var(purple)"
         },
+        {
+            "name": "DIFF - Deleted",
+            "scope": "diff.deleted",
+            "background": "color(var(red) alpha(0.10))"
+        },
+        {
+            "name": "DIFF - Deleted Char",
+            "scope": "diff.deleted.char",
+            "background": "color(var(red) alpha(0.10))"
+        },
+        {
+            "name": "DIFF - Inserted",
+            "scope": "diff.inserted",
+            "background": "color(var(green) alpha(0.10))"
+        },
+        {
+            "name": "DIFF - Inserted Char",
+            "scope": "diff.inserted.char",
+            "background": "color(var(green) alpha(0.10))"
+        },
         {
             "name": "JS - Console, \"console\"",
             "scope": "support.type.object.console,support.class.console",
@@ -566,6 +596,11 @@
             "scope": "support.function.console",
             "foreground": "var(blue)"
         },
+        {
+            "name": "JS - Other property",
+            "scope": "source.js variable.other.property.js",
+            "foreground": "var(blue)"
+        },
         {
             "name": "JSON - Key ",
             "scope": "meta.mapping.key.json string.quoted.double.json",
@@ -581,6 +616,11 @@
             "scope": "source.json meta.mapping.value.json meta.mapping.value.json meta.mapping.key.json string.quoted.double.json",
             "foreground": "var(orange)"
         },
+        {
+            "name": "JSX - Meta",
+            "scope": "meta.jsx.js",
+            "foreground": "var(foreground)"
+        },
         {
             "name": "Python - Declaration function",
             "scope": "source.python meta.function.python storage.type.function.python keyword.declaration.function.python",