diff --git a/client/components/editor/editor-ckeditor.vue b/client/components/editor/editor-ckeditor.vue
index d0e2c1b6..342c64e9 100644
--- a/client/components/editor/editor-ckeditor.vue
+++ b/client/components/editor/editor-ckeditor.vue
@@ -19,6 +19,7 @@ import _ from 'lodash'
 import { get, sync } from 'vuex-pathify'
 import DecoupledEditor from '@requarks/ckeditor5'
 import EditorConflict from './ckeditor/conflict.vue'
+import { html as beautify } from 'js-beautify/js/lib/beautifier.min.js'
 
 /* global siteLangs */
 
@@ -81,7 +82,7 @@ export default {
     }
 
     this.editor.model.document.on('change:data', _.debounce(evt => {
-      this.$store.set('editor/content', this.editor.getData())
+      this.$store.set('editor/content', beautify(this.editor.getData(), { indent_size: 2, end_with_newline: true }))
     }, 300))
 
     this.$root.$on('editorInsert', opts => {
diff --git a/package.json b/package.json
index 26650324..795f6e29 100644
--- a/package.json
+++ b/package.json
@@ -248,6 +248,7 @@
     "i18next-xhr-backend": "3.2.2",
     "ignore-loader": "0.1.2",
     "jest": "25.4.0",
+    "js-beautify": "1.11.0",
     "js-cookie": "2.2.1",
     "mermaid": "8.5.0",
     "mini-css-extract-plugin": "0.9.0",
diff --git a/yarn.lock b/yarn.lock
index 217c8287..df759ad5 100644
Binary files a/yarn.lock and b/yarn.lock differ