diff --git a/src/components/code-snippet/__tests__/__snapshots__/code-snippet.test.js.snap b/src/components/code-snippet/__tests__/__snapshots__/code-snippet.test.js.snap
index f58fcca7d..3f628a620 100644
--- a/src/components/code-snippet/__tests__/__snapshots__/code-snippet.test.js.snap
+++ b/src/components/code-snippet/__tests__/__snapshots__/code-snippet.test.js.snap
@@ -92,7 +92,7 @@ See the example: https://docs.mapbox.com//site"
         <input
           name="data"
           type="hidden"
-          value="{\\"title\\":\\"My Code\\",\\"html\\":\\"<h1>gurd murn!</h1>\\",\\"description\\":\\"cool code by mapbox\\\\n\\\\nSee the example: [https://docs.mapbox.com//site](https://docs.mapbox.com//site)\\",\\"tags\\":[\\"mapbox\\",\\"maps\\"],\\"css\\":\\"h1 {color: red}\\",\\"js\\":\\"console.log('hurn')\\",\\"css_external\\":\\"\\",\\"js_external\\":\\"\\"}"
+          value="{\\"title\\":\\"My Code\\",\\"html\\":\\"<h1>gurd murn!</h1>\\",\\"html_pre_processor\\":\\"none\\",\\"description\\":\\"cool code by mapbox\\\\n\\\\nSee the example: [https://docs.mapbox.com//site](https://docs.mapbox.com//site)\\",\\"tags\\":[\\"mapbox\\",\\"maps\\"],\\"css\\":\\"h1 {color: red}\\",\\"css_pre_processor\\":\\"none\\",\\"js\\":\\"console.log('hurn')\\",\\"js_pre_processor\\":\\"none\\",\\"css_external\\":\\"\\",\\"js_external\\":\\"\\"}"
         />
         <input
           className="btn btn--s cursor-pointer round"
@@ -264,7 +264,7 @@ See the example: https://docs.mapbox.com//mapbox-gl-js/example/simple-map/"
         <input
           name="data"
           type="hidden"
-          value="{\\"title\\":\\"Display a map\\",\\"html\\":\\"\\\\n<div id='map'></div>\\\\n\\\\n\\\\n\\",\\"description\\":\\"Initialize a map in an HTML element with Mapbox GL JS.\\\\n\\\\nSee the example: [https://docs.mapbox.com//mapbox-gl-js/example/simple-map/](https://docs.mapbox.com//mapbox-gl-js/example/simple-map/)\\",\\"tags\\":[\\"mapbox\\",\\"maps\\"],\\"css\\":\\"\\\\n    body { margin: 0; padding: 0; }\\\\n        #map { position: absolute; top: 0; bottom: 0; width: 100%; };\\\\n\\",\\"js\\":\\"\\\\nmapboxgl.accessToken = '<your access token here>';\\\\nvar map = new mapboxgl.Map({\\\\n    container: 'map', // container id\\\\n    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location\\\\n    center: [-74.50, 40], // starting position [lng, lat]\\\\n    zoom: 9 // starting zoom\\\\n});\\\\n\\",\\"css_external\\":\\"https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css\\",\\"js_external\\":\\"https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js\\"}"
+          value="{\\"title\\":\\"Display a map\\",\\"html\\":\\"\\\\n<div id='map'></div>\\\\n\\\\n\\\\n\\",\\"html_pre_processor\\":\\"none\\",\\"description\\":\\"Initialize a map in an HTML element with Mapbox GL JS.\\\\n\\\\nSee the example: [https://docs.mapbox.com//mapbox-gl-js/example/simple-map/](https://docs.mapbox.com//mapbox-gl-js/example/simple-map/)\\",\\"tags\\":[\\"mapbox\\",\\"maps\\"],\\"css\\":\\"\\\\n    body { margin: 0; padding: 0; }\\\\n        #map { position: absolute; top: 0; bottom: 0; width: 100%; };\\\\n\\",\\"css_pre_processor\\":\\"none\\",\\"js\\":\\"\\\\nmapboxgl.accessToken = '<your access token here>';\\\\nvar map = new mapboxgl.Map({\\\\n    container: 'map', // container id\\\\n    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location\\\\n    center: [-74.50, 40], // starting position [lng, lat]\\\\n    zoom: 9 // starting zoom\\\\n});\\\\n\\",\\"js_pre_processor\\":\\"none\\",\\"css_external\\":\\"https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css\\",\\"js_external\\":\\"https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js\\"}"
         />
         <input
           className="btn btn--s cursor-pointer round"
diff --git a/src/components/edit/__tests__/__snapshots__/edit.test.js.snap b/src/components/edit/__tests__/__snapshots__/edit.test.js.snap
index a4060ea99..408e29b99 100644
--- a/src/components/edit/__tests__/__snapshots__/edit.test.js.snap
+++ b/src/components/edit/__tests__/__snapshots__/edit.test.js.snap
@@ -27,13 +27,13 @@ Array [
     <input
       name="css"
       type="hidden"
-      value="body { margin: 0; padding: 0; }
+      value="body { margin: 0; padding: 0; background: yellow; }
         #map { position: absolute; top: 0; bottom: 0; width: 100%; };"
     />
     <input
       name="html"
       type="hidden"
-      value="<div id='map'></div>"
+      value="<h1>hello world!</h1><div id='map'></div>"
     />
     <input
       name="js"
@@ -77,7 +77,7 @@ See the example: https://docs.mapbox.com//mapbox-gl-js/example/simple-map/"
     <input
       name="data"
       type="hidden"
-      value="{\\"title\\":\\"Display a map\\",\\"html\\":\\"<div id='map'></div>\\",\\"description\\":\\"Initialize a map in an HTML element with Mapbox GL JS.\\\\n\\\\nSee the example: [https://docs.mapbox.com//mapbox-gl-js/example/simple-map/](https://docs.mapbox.com//mapbox-gl-js/example/simple-map/)\\",\\"tags\\":[\\"mapbox\\",\\"maps\\"],\\"css\\":\\"body { margin: 0; padding: 0; }\\\\n        #map { position: absolute; top: 0; bottom: 0; width: 100%; };\\",\\"js\\":\\"var map = new mapboxgl.Map({\\\\n    container: 'map', // container id\\\\n    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location\\\\n    center: [-74.50, 40], // starting position [lng, lat]\\\\n    zoom: 9 // starting zoom\\\\n});\\",\\"css_external\\":\\"https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css\\",\\"js_external\\":\\"https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js\\",\\"head\\":\\"<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />\\"}"
+      value="{\\"title\\":\\"Display a map\\",\\"html\\":\\"<h1>hello world!</h1><div id='map'></div>\\",\\"html_pre_processor\\":\\"none\\",\\"description\\":\\"Initialize a map in an HTML element with Mapbox GL JS.\\\\n\\\\nSee the example: [https://docs.mapbox.com//mapbox-gl-js/example/simple-map/](https://docs.mapbox.com//mapbox-gl-js/example/simple-map/)\\",\\"tags\\":[\\"mapbox\\",\\"maps\\"],\\"css\\":\\"body { margin: 0; padding: 0; background: yellow; }\\\\n        #map { position: absolute; top: 0; bottom: 0; width: 100%; };\\",\\"css_pre_processor\\":\\"none\\",\\"js\\":\\"var map = new mapboxgl.Map({\\\\n    container: 'map', // container id\\\\n    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location\\\\n    center: [-74.50, 40], // starting position [lng, lat]\\\\n    zoom: 9 // starting zoom\\\\n});\\",\\"js_pre_processor\\":\\"none\\",\\"css_external\\":\\"https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css\\",\\"js_external\\":\\"https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js\\",\\"head\\":\\"<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />\\"}"
     />
     <input
       className="btn btn--s cursor-pointer round"
diff --git a/src/components/edit/__tests__/edit-test-cases.js b/src/components/edit/__tests__/edit-test-cases.js
index c9d98124b..dc8855281 100644
--- a/src/components/edit/__tests__/edit-test-cases.js
+++ b/src/components/edit/__tests__/edit-test-cases.js
@@ -10,9 +10,9 @@ testCases.basic = {
   component: Edit,
   description: 'Basic example',
   props: {
-    html: "<div id='map'></div>",
+    html: "<h1>hello world!</h1><div id='map'></div>",
     css:
-      'body { margin: 0; padding: 0; }\n        #map { position: absolute; top: 0; bottom: 0; width: 100%; };',
+      'body { margin: 0; padding: 0; background: yellow; }\n        #map { position: absolute; top: 0; bottom: 0; width: 100%; };',
     frontMatter: {
       description: 'Initialize a map in an HTML element with Mapbox GL JS.',
       pathname: '/mapbox-gl-js/example/simple-map/',
@@ -29,7 +29,7 @@ testCases.basic = {
 };
 
 const code = helpers.extractor(
-  "<!DOCTYPE html>\n<html>\n<head>\n<meta charset='utf-8' />\n<title>Display a map</title>\n<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />\n<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n<style>\n    body { margin: 0; padding: 0; }\n        #map { position: absolute; top: 0; bottom: 0; width: 100%; };\n</style><style>body {background: red;}</style>\n</head>\n<body>\n<div id='map'></div>\n<script>\nmapboxgl.accessToken = '<your access token here>';\nvar map = new mapboxgl.Map({\n    container: 'map', // container id\n    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location\n    center: [-74.50, 40], // starting position [lng, lat]\n    zoom: 9 // starting zoom\n});\n</script>\n\n</body>\n</html>"
+  "<!DOCTYPE html>\n<html>\n<head>\n<meta charset='utf-8' />\n<title>Display a map</title>\n<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />\n<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n<style>\n    body { margin: 0; padding: 0; }\n        #map { position: absolute; top: 0; bottom: 0; width: 100%; }\n</style><style>h1 {color: red;}</style>\n</head>\n<body>\n<h1>Hello world!</h1><div id='map'></div>\n<script>\nconsole.log('hi')</script>\n\n</body>\n</html>"
 );
 
 testCases.basicWithHelpers = {
diff --git a/src/components/edit/edit.js b/src/components/edit/edit.js
index ab0ca22c1..8ddd293f5 100644
--- a/src/components/edit/edit.js
+++ b/src/components/edit/edit.js
@@ -87,10 +87,13 @@ export default class Edit extends React.Component {
             value={JSON.stringify({
               title: projectMeta.title,
               html: html,
+              html_pre_processor: 'none',
               description: projectMeta.description,
               tags: projectMeta.tags,
               css: css,
+              css_pre_processor: 'none',
               js: js,
+              js_pre_processor: 'none',
               css_external:
                 resources && resources.css ? resources.css.join(';') : '',
               js_external: