diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index d93e66351a..d8a1100c65 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import CodeMirror from 'codemirror';
+import emmet from '@emmetio/codemirror-plugin';
 import beautifyJS from 'js-beautify';
 import { withTranslation } from 'react-i18next';
 import 'codemirror/mode/css/css';
@@ -54,6 +55,7 @@ import * as ToastActions from '../actions/toast';
 import * as ConsoleActions from '../actions/console';
 
 search(CodeMirror);
+emmet(CodeMirror);
 
 const beautifyCSS = beautifyJS.css;
 const beautifyHTML = beautifyJS.html;
@@ -103,6 +105,11 @@ class Editor extends React.Component {
       keyMap: 'sublime',
       highlightSelectionMatches: true, // highlight current search match
       matchBrackets: true,
+      mode: 'text/html',
+      emmet: {
+        preview: true,
+        markTagPairs: true,
+      },
       lint: {
         onUpdateLinting: ((annotations) => {
           this.props.hideRuntimeErrorWarning();
@@ -121,6 +128,7 @@ class Editor extends React.Component {
 
     this._cm.setOption('extraKeys', {
       Tab: (cm) => {
+        if (!cm.execCommand('emmetExpandAbbreviation')) return;
         // might need to specify and indent more?
         const selection = cm.doc.getSelection();
         if (selection.length > 0) {
@@ -129,6 +137,8 @@ class Editor extends React.Component {
           cm.replaceSelection(' '.repeat(INDENTATION_AMOUNT));
         }
       },
+      Enter: 'emmetInsertLineBreak',
+      Esc: 'emmetResetAbbreviation',
       [`${metaKey}-Enter`]: () => null,
       [`Shift-${metaKey}-Enter`]: () => null,
       [`${metaKey}-F`]: 'findPersistent',
@@ -184,7 +194,7 @@ class Editor extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.file.content !== prevProps.file.content &&
-        this.props.file.content !== this._cm.getValue()) {
+      this.props.file.content !== this._cm.getValue()) {
       const oldDoc = this._cm.swapDoc(this._docs[this.props.file.id]);
       this._docs[prevProps.file.id] = oldDoc;
       this._cm.focus();
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 7fc22f8e2e..ef507b35b0 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -395,3 +395,7 @@ pre.CodeMirror-line {
 .editor__unsaved-changes {
   margin-left: #{2 / $base-font-size}rem;
 }
+
+.emmet-close-tag,.emmet-open-tag{
+  text-decoration: underline;
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 98e283194f..bce5c711ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3003,6 +3003,11 @@
       "integrity": "sha512-MwfwXHDh6ptZGLEtNLPXp2Wghteav7mzpT2Mcwl3NZWKF814i5hhHnNkVrcQQEuxUroSWQqzxLkMKSb+nhPang==",
       "dev": true
     },
+    "@emmetio/codemirror-plugin": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emmetio/codemirror-plugin/-/codemirror-plugin-1.2.1.tgz",
+      "integrity": "sha512-XXJO5742H6Vu6TcLnigLlS8vj7hAjbv68T/RNfTub77B6+iGGeTOr9tcMQx/1tNmi5D+f4Sh6/60su13ed6wRA=="
+    },
     "@emotion/babel-utils": {
       "version": "0.6.10",
       "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.10.tgz",
diff --git a/package.json b/package.json
index f4ee76eb5a..2ccda95fd6 100644
--- a/package.json
+++ b/package.json
@@ -140,6 +140,7 @@
     "@babel/core": "^7.8.4",
     "@babel/polyfill": "^7.8.3",
     "@babel/register": "^7.8.3",
+    "@emmetio/codemirror-plugin": "^1.2.1",
     "archiver": "^1.1.0",
     "async": "^2.6.3",
     "axios": "^0.18.1",