diff --git a/README.md b/README.md
index 529509e..88872de 100644
--- a/README.md
+++ b/README.md
@@ -263,6 +263,13 @@ 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(() => {
diff --git a/src/js/easymde.js b/src/js/easymde.js
index a4c3059..1a87b85 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;
@@ -2012,6 +2013,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) {
@@ -2117,11 +2136,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';
@@ -2129,13 +2148,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 502b29d..0d788f5 100644
--- a/types/easymde.d.ts
+++ b/types/easymde.d.ts
@@ -183,6 +183,7 @@ declare namespace EasyMDE {
         autoRefresh?: boolean | { delay: number; };
         blockStyles?: BlockStyleOptions;
         element?: HTMLElement;
+        extractYaml?: (yaml: string) => void;
         forceSync?: boolean;
         hideIcons?: ReadonlyArray<ToolbarButton>;
         indentWithTabs?: boolean;