diff --git a/docs/.vuepress/components/CommonmarkSandbox.vue b/docs/.vuepress/components/CommonmarkSandbox.vue
new file mode 100644
index 00000000..26a0377f
--- /dev/null
+++ b/docs/.vuepress/components/CommonmarkSandbox.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="container-item">
+        <textarea @input="processMarkdown">{{markdownInput}}</textarea>
+      </div>
+      <div class="container-item display" v-html="markdownHtml"></div>
+    </div>
+    <div class="footer">
+      <p>
+        <em>
+          * Please note that this tool can be used to evaluate how commonmark
+          will react to certain markdown input. There is no guarantee that results
+          here and in an Android application that uses Markwon will be the same.
+          Especially if raw HTML is involved.
+        </em>
+      </p>
+      <p>
+        <em>
+          ** For a little more sophisticated commonmark sandbox editor
+          <a href="https://spec.commonmark.org/dingus/">the dingus</a> can be used.
+        </em>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import commonmark from "commonmark";
+
+const parser = new commonmark.Parser();
+const writer = new commonmark.HtmlRenderer();
+
+const initialMarkdown = `# Header 1\n\n*Hello* __there!__`;
+
+export default {
+  name: "CommonmarkSandbox",
+  data() {
+    return {
+      markdownInput: initialMarkdown,
+      markdownHtml: writer.render(parser.parse(initialMarkdown))
+    };
+  },
+  methods: {
+    processMarkdown(e) {
+      const input = e.target.value;
+      const parsed = parser.parse(input);
+      this.markdownHtml = writer.render(parsed);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+}
+.container-item {
+  flex: 4;
+  padding: 0.5em;
+}
+.container textarea {
+  width: 100%;
+  height: 100%;
+  resize: vertical;
+  min-height: 20em;
+  padding: 0px;
+  margin: 0px;
+}
+.display {
+  flex: 5;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.footer {
+    color: #666;
+    font-size: 0.85em;
+}
+</style>
+
+
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 5c63daf9..ab5c22d5 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -13,6 +13,7 @@ module.exports = {
         nav: [
             { text: 'Install', link: '/docs/install.md' },
             { text: 'Changelog', link: '/CHANGELOG.md' },
+            { text: 'Sandbox', link: '/sandbox.md' },
             { text: 'Github', link: 'https://github.com/noties/Markwon' }
         ],
         sidebar: [
diff --git a/docs/.vuepress/override.styl b/docs/.vuepress/override.styl
index 08764d10..1e96c201 100644
--- a/docs/.vuepress/override.styl
+++ b/docs/.vuepress/override.styl
@@ -2,7 +2,7 @@ $textColor = #000000
 $accentColor = #4CAF50
 
 a.sidebar-link {
-    font-weight: bold;
+    font-weight: 500;
 }
 
 .sidebar-sub-headers a.sidebar-link {
@@ -15,6 +15,7 @@ a.sidebar-link {
 
 .sidebar-heading {
     color: $textColor;
+    font-weight: 600;
 }
 
 .sidebar-heading.open, .sidebar-heading:hover {
diff --git a/docs/.vuepress/style.styl b/docs/.vuepress/style.styl
index 3e7c379a..cae5a235 100644
--- a/docs/.vuepress/style.styl
+++ b/docs/.vuepress/style.styl
@@ -4,4 +4,8 @@ div[class~=language-gradle]:before {
 
 div[class~=language-proguard]:before {
     content:"proguard"
+}
+
+div[class~=language-groovy]:before {
+    content:"gradle"
 }
\ No newline at end of file
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 77f560a6..79159931 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -2471,6 +2471,24 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
     },
+    "commonmark": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/commonmark/-/commonmark-0.28.1.tgz",
+      "integrity": "sha1-Buq41SM4uDn6Gi11rwCF7tGxvq4=",
+      "requires": {
+        "entities": "~ 1.1.1",
+        "mdurl": "~ 1.0.1",
+        "minimist": "~ 1.2.0",
+        "string.prototype.repeat": "^0.2.0"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        }
+      }
+    },
     "component-emitter": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
@@ -9060,6 +9078,11 @@
         }
       }
     },
+    "string.prototype.repeat": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz",
+      "integrity": "sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8="
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
diff --git a/docs/package.json b/docs/package.json
index 9ba0ddb5..ba7c3704 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -3,6 +3,7 @@
     "docs:build": "node ./collectArtifacts.js && vuepress build"
   },
   "dependencies": {
+    "commonmark": "^0.28.1",
     "markdown-it-task-lists": "^2.1.1",
     "vuepress": "^0.14.2"
   }
diff --git a/docs/sandbox.md b/docs/sandbox.md
new file mode 100644
index 00000000..87a09091
--- /dev/null
+++ b/docs/sandbox.md
@@ -0,0 +1,3 @@
+# Commonmark Sandbox
+
+<CommonmarkSandbox />
\ No newline at end of file