diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue
index 3d046d3d32d812041e5f01ed54ecfba675791741..e954fd38fc9166c9fc3d2e9a8eb6ef7c12160305 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -42,7 +42,7 @@ export default {
 </script>
 
 <template>
-<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable" :disabled="binary">
+<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable && !activeFile.render_error" :disabled="binary">
   <i :class="buttonIcon"></i>
   <span>{{buttonLabel}}</span>
 </button>
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index a10d439fb650a9f04360e4966a00dd75e17976a6..d8de022335b0cccc848476aa15a502fb7de96680 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -23,5 +23,10 @@ export default {
 </script>
 
 <template>
-<div v-html="activeFile.html"></div>
+<div>
+  <div v-if="!activeFile.render_error" v-html="activeFile.html"></div>
+  <div v-if="activeFile.render_error" class="vertical-center render-error">
+    <p class="text-center">The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.</p>
+  </div>
+</div>
 </template>
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index 72436688f87cc0fa8d61f543a919edc253df8ad3..385a69e0389ef2351751e1260dc6a1eafaf31fde 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -154,16 +154,19 @@ const RepoHelper = {
           RepoHelper.setBinaryDataAsBase64(data);
           Store.setViewToPreview();
         } else if (!Store.isPreviewView()) {
-          Service.getRaw(data.raw_path)
+          if(!data.render_error){
+            Service.getRaw(data.raw_path)
             .then((rawResponse) => {
               Store.blobRaw = rawResponse.data;
               data.plain = rawResponse.data;
-
               RepoHelper.setFile(data, file);
             }).catch(RepoHelper.loadingError);
+          }
         }
 
-        if (Store.isPreviewView()) RepoHelper.setFile(data, file);
+        if (Store.isPreviewView()){
+          RepoHelper.setFile(data, file);
+        }
 
         // if the file tree is empty
         if (Store.files.length === 0) {
@@ -187,6 +190,9 @@ const RepoHelper = {
 
     newFile.url = file.url || location.pathname;
     newFile.url = file.url;
+    if(newFile.render_error === 'too_large'){
+      newFile.tooLarge = true;
+    }
     newFile.newContent = '';
 
     Store.addToOpenedFiles(newFile);
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index d43f5fd37ef9d08c73e12de72c596a8e0a1180a1..e18af246c55455a99dfb636c1ee7223cf8a623b9 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -128,3 +128,11 @@ of the body element here, we negate cascading side effects but allow momentum sc
 [v-cloak] {
   display: none;
 }
+
+.vertical-center {
+  min-height: 100%;
+  min-height: 100vh;
+
+  display: flex;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 389a57e06b152426d47c5639e3cb955b661074ea..a3457179d16cd9e74041e48f3190d22a1cb38cfc 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -369,6 +369,13 @@
   }
 }
 
+.render-error {
+  min-height: calc(100vh - 63px);
+  p {
+    width: 100%;
+  }
+}
+
 @keyframes blockTextShine {
   0% {
     transform: translateX(-468px);