diff --git a/benchmark/data/todolist.json b/benchmark/data/todolist.json
index c0eaf7434..4cc480a0e 100644
--- a/benchmark/data/todolist.json
+++ b/benchmark/data/todolist.json
@@ -1,4 +1,3 @@
-
 {
   "categories": [{
     "color": "red",
diff --git a/docs/scripts/helpers.js b/docs/scripts/helpers.js
index 95f82c523..9868ed64d 100644
--- a/docs/scripts/helpers.js
+++ b/docs/scripts/helpers.js
@@ -37,7 +37,12 @@ hexo.extend.helper.register('page_nav', function () {
 })
 
 hexo.extend.helper.register('raw', function (filepath) {
-  const content = readFileSync(resolve(this.view_dir, filepath))
+  const content = readFileSync(resolve(this.view_dir, filepath), 'utf8')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
   return content
 })
 
diff --git a/docs/themes/navy/layout/playground.swig b/docs/themes/navy/layout/playground.swig
index 089e34025..a30cd8a85 100644
--- a/docs/themes/navy/layout/playground.swig
+++ b/docs/themes/navy/layout/playground.swig
@@ -2,9 +2,11 @@
   <div class="wrapper">
     <h1 class="inner">{{__('playground.title')}}</h1>
     <div class="row inner">
-      <div id="editorEl">{{__('playground.loading')}}</div>
-      <div id="previewEl">{{__('playground.loading')}}</div>
+      <div class="col">
+        <div id="editorEl">{{ raw('partial/demo.liquid') }}</div>
+        <div id="dataEl">{}</div>
+      </div>
+      <div class="col" id="previewEl">{{__('playground.loading')}}</div>
     </div>
-    <script id="sourceEl" type="text/plain">{{ raw('partial/demo.liquid') }}</script>
   </div>
 </div>
diff --git a/docs/themes/navy/source/css/_partial/playground.styl b/docs/themes/navy/source/css/_partial/playground.styl
index cc9bf468b..38ece91e5 100644
--- a/docs/themes/navy/source/css/_partial/playground.styl
+++ b/docs/themes/navy/source/css/_partial/playground.styl
@@ -11,16 +11,21 @@
     flex-wrap: wrap;
     justify-content: space-between
     margin-bottom: 30px
-    > div
-      flex: 0 0 100%
-      height: 400px
+    font-size: 1em
+    .col
+      flex: 1 1 100%
       margin-bottom: 30px
 
   @media mq-normal
     .row
       flex-wrap: nowrap;
-      > div
-        flex: 0 1 49%
+    .col:first-child
+      margin-right: 15px
 
-  #editorEl, #previewEl
-    font-size: 1em
+  #editorEl
+    height: 40vh
+  #dataEl
+    height: 28vh
+    margin-top: 2vh
+  #previewEl
+    height: 70vh
diff --git a/docs/themes/navy/source/js/main.js b/docs/themes/navy/source/js/main.js
index 4bdebe6ca..d25a9ca58 100644
--- a/docs/themes/navy/source/js/main.js
+++ b/docs/themes/navy/source/js/main.js
@@ -57,17 +57,23 @@
 
 (function() {
   // playground
-  /* global liquidjs, sourceEl, ace */
+  /* global liquidjs, ace */
   if (!location.pathname.match(/playground.html$/)) return;
   const engine = new liquidjs.Liquid();
   const editor = createEditor('editorEl', 'liquid');
+  const dataEditor = createEditor('dataEl', 'json');
   const preview = createEditor('previewEl', 'html');
   preview.setReadOnly(true);
   preview.renderer.setShowGutter(false);
   preview.renderer.setPadding(20);
 
-  editor.setValue(getInitialValue(), 1);
+  const init = parseArgs(location.hash.slice(1));
+  if (init) {
+    editor.setValue(init.tpl, 1);
+    dataEditor.setValue(init.data, 1);
+  }
   editor.on('change', update);
+  dataEditor.on('change', update);
   update();
 
   function createEditor(id, lang) {
@@ -82,18 +88,25 @@
     return editor;
   }
 
-  function getInitialValue() {
+  function parseArgs(hash) {
+    if (!hash) return;
     try {
-      return atou(location.hash.slice(1)) || sourceEl.textContent
+      let [tpl, data] = hash.split(',').map(atou);
+      data = data || '{}';
+      return { tpl, data };
     } catch (e) {}
-    return sourceEl.textContent
+  }
+
+  function serializeArgs(obj) {
+    return utoa(obj.tpl) + ',' + utoa(obj.data);
   }
 
   async function update() {
     const tpl = editor.getValue();
-    history.replaceState({}, '', '#' + utoa(tpl));
+    const data = dataEditor.getValue();
+    history.replaceState({}, '', '#' + serializeArgs({tpl, data}));
     try {
-      const html = await engine.parseAndRender(tpl);
+      const html = await engine.parseAndRender(tpl, JSON.parse(data));
       preview.setValue(html, 1);
     } catch (err) {
       preview.setValue(err.stack, 1);
@@ -102,11 +115,11 @@
   }
 
   function atou(str) {
-    return decodeURIComponent(escape(atob(str)))
+    return decodeURIComponent(escape(atob(str)));
   }
 
   function utoa(str) {
-    return btoa(unescape(encodeURIComponent(str)))
+    return btoa(unescape(encodeURIComponent(str)));
   }
 }());