diff --git a/README.md b/README.md
index 5a5d4965..d6d04d75 100644
--- a/README.md
+++ b/README.md
@@ -261,13 +261,20 @@ const editor = new EasyMDE({
     previewClass: "my-custom-styling",
     previewClass: ["my-custom-styling", "more-custom-styling"],
 
+    extractYaml: (yaml) => {
+         // Extracts yaml from Markdown, use a third party parser to convert to json
+         // ----
+         // Key: value
+         // ---
+        console.log(yaml);
+    }
     previewRender: (plainText) => customMarkdownParser(plainText), // Returns HTML from a custom parser
     previewRender: (plainText, preview) => { // Async method
         setTimeout(() => {
             preview.innerHTML = customMarkdownParser(plainText);
         }, 250);
 
-        // If you return null, the innerHTML of the preview will not 
+        // If you return null, the innerHTML of the preview will not
         // be overwritten. Useful if you control the preview node's content via
         // vdom diffing.
         // return null;
diff --git a/src/js/easymde.js b/src/js/easymde.js
index 52169631..2b68fb96 100644
--- a/src/js/easymde.js
+++ b/src/js/easymde.js
@@ -10,6 +10,7 @@ require('codemirror/addon/display/autorefresh.js');
 require('codemirror/addon/selection/mark-selection.js');
 require('codemirror/addon/search/searchcursor.js');
 require('codemirror/mode/gfm/gfm.js');
+require('codemirror/mode/yaml-frontmatter/yaml-frontmatter.js');
 require('codemirror/mode/xml/xml.js');
 var CodeMirrorSpellChecker = require('codemirror-spell-checker');
 var marked = require('marked').marked;
@@ -2010,6 +2011,24 @@ EasyMDE.prototype.updateStatusBar = function (itemName, content) {
  */
 EasyMDE.prototype.markdown = function (text) {
     if (marked) {
+        // remove yaml-frontmatter from preview
+        if (text.indexOf('---') === 0) {
+            var yaml = text.substring(3);
+            var closeIdx = yaml.indexOf('---');
+            if (closeIdx === -1) {
+                // yaml-frontmatter can be closed with ...
+                closeIdx = yaml.indexOf('...');
+            }
+            if (closeIdx != -1) {
+                text = text.substring(closeIdx + 6);
+                yaml = yaml.substring(0, closeIdx);
+            } else {
+                text = '';
+            }
+            if (this.options.extractYaml) {
+                this.options.extractYaml(yaml);
+            }
+        }
         // Initialize
         var markedOptions;
         if (this.options && this.options.renderingConfig && this.options.renderingConfig.markedOptions) {
@@ -2115,11 +2134,11 @@ EasyMDE.prototype.render = function (el) {
     document.addEventListener('keydown', this.documentOnKeyDown, false);
 
     var mode, backdrop;
-
+    var defaultMode = 'yaml-frontmatter';
     // CodeMirror overlay mode
     if (options.overlayMode) {
         CodeMirror.defineMode('overlay-mode', function (config) {
-            return CodeMirror.overlayMode(CodeMirror.getMode(config, options.spellChecker !== false ? 'spell-checker' : 'gfm'), options.overlayMode.mode, options.overlayMode.combine);
+            return CodeMirror.overlayMode(CodeMirror.getMode(config, options.spellChecker !== false ? 'spell-checker' : defaultMode), options.overlayMode.mode, options.overlayMode.combine);
         });
 
         mode = 'overlay-mode';
@@ -2127,13 +2146,13 @@ EasyMDE.prototype.render = function (el) {
         backdrop.gitHubSpice = false;
     } else {
         mode = options.parsingConfig;
-        mode.name = 'gfm';
+        mode.name = defaultMode;
         mode.gitHubSpice = false;
     }
     if (options.spellChecker !== false) {
         mode = 'spell-checker';
         backdrop = options.parsingConfig;
-        backdrop.name = 'gfm';
+        backdrop.name = defaultMode;
         backdrop.gitHubSpice = false;
 
         if (typeof options.spellChecker === 'function') {
diff --git a/types/easymde.d.ts b/types/easymde.d.ts
index decd4ca9..cb16b539 100644
--- a/types/easymde.d.ts
+++ b/types/easymde.d.ts
@@ -182,6 +182,7 @@ declare namespace EasyMDE {
         autoRefresh?: boolean | { delay: number; };
         blockStyles?: BlockStyleOptions;
         element?: HTMLElement;
+        extractYaml?: (yaml: string) => void;
         forceSync?: boolean;
         hideIcons?: ReadonlyArray<ToolbarButton>;
         indentWithTabs?: boolean;