diff --git a/services/web/app/views/project/editor.jade b/services/web/app/views/project/editor.jade
index a780b4a790..01e1a8b88f 100644
--- a/services/web/app/views/project/editor.jade
+++ b/services/web/app/views/project/editor.jade
@@ -86,6 +86,11 @@ block content
 		.modal-footer
 			button.btn.btn-info(ng-click="done()") #{translate("ok")}
 
+	script(type="text/ng-template", id="lockEditorModalTemplate")
+		.modal-header
+			h3 {{ title }}
+		.modal-body(ng-bind-html="message")
+
 block requirejs
 	script(type="text/javascript" src='/socket.io/socket.io.js')
 
diff --git a/services/web/public/coffee/ide/editor/controllers/SavingNotificationController.coffee b/services/web/public/coffee/ide/editor/controllers/SavingNotificationController.coffee
index f9c68ca05f..3a4ac123ec 100644
--- a/services/web/public/coffee/ide/editor/controllers/SavingNotificationController.coffee
+++ b/services/web/public/coffee/ide/editor/controllers/SavingNotificationController.coffee
@@ -10,12 +10,16 @@ define [
 		$(window).bind 'beforeunload', () =>
 			warnAboutUnsavedChanges()
 
+		lockEditorModal = null # modal showing "connection lost"
+		MAX_UNSAVED_SECONDS = 15 # lock the editor after this time if unsaved
+
 		$scope.docSavingStatus = {}
 		pollSavedStatus = () ->
 			oldStatus = $scope.docSavingStatus
 			oldUnsavedCount = $scope.docSavingStatusCount
 			newStatus = {}
 			newUnsavedCount = 0
+			maxUnsavedSeconds = 0
 
 			for doc_id, doc of Document.openDocs
 				saving = doc.pollSavedStatus()
@@ -23,13 +27,26 @@ define [
 					newUnsavedCount++
 					if oldStatus[doc_id]?
 						newStatus[doc_id] = oldStatus[doc_id]
-						newStatus[doc_id].unsavedSeconds += 1
+						t = newStatus[doc_id].unsavedSeconds += 1
+						if t > maxUnsavedSeconds
+							maxUnsavedSeconds = t
 					else
 						newStatus[doc_id] = {
 							unsavedSeconds: 0
 							doc: ide.fileTreeManager.findEntityById(doc_id)
 						}
 
+			if newUnsavedCount > 0 and t > MAX_UNSAVED_SECONDS and not lockEditorModal
+				lockEditorModal = ide.showLockEditorMessageModal(
+						"Connection lost"
+						"Sorry, the connection to the server is down."
+					)
+				lockEditorModal.result.finally () ->
+					lockEditorModal = null # unset the modal if connection comes back
+
+			if lockEditorModal and newUnsavedCount is 0
+				lockEditorModal.dismiss "connection back up"
+
 			# for performance, only update the display if the old or new
 			# counts of unsaved files are nonzeror.  If both old and new
 			# unsaved counts are zero then we know we are in a good state
diff --git a/services/web/public/coffee/ide/services/ide.coffee b/services/web/public/coffee/ide/services/ide.coffee
index 6741f041ba..57e0bbef3d 100644
--- a/services/web/public/coffee/ide/services/ide.coffee
+++ b/services/web/public/coffee/ide/services/ide.coffee
@@ -40,6 +40,19 @@ define [
 					message: -> message
 			}
 
+		ide.showLockEditorMessageModal = (title, message) ->
+			# modal to block the editor when connection is down
+			$modal.open {
+				templateUrl: "lockEditorModalTemplate"
+				controller:  "GenericMessageModalController"
+				backdrop:    "static" # prevent dismiss by click on background
+				keyboard:    false    # prevent dismiss via keyboard
+				resolve:
+					title:   -> title
+					message: -> message
+				windowClass: "lock-editor-modal"
+			}
+
 		return ide
 	]
 
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index afbcdae7f7..c42d210ae0 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -259,6 +259,16 @@
 	margin-bottom:0px;
 }
 
+// vertically centre the "connection down" modal so it does not hide
+// the reconnecting indicator
+
+.modal.lock-editor-modal {
+	display: flex !important;
+	.modal-dialog {
+		margin: auto;
+	}
+}
+
 .sl_references_search_hint-varDefault {
 	position: absolute;
 	bottom: -22px;