diff --git a/app/models/blob.rb b/app/models/blob.rb
index 801d344280367e7da09afe43915cb0019f68c5ee..0c1730f6801bc467e99ea1ec846069ff202e2f9e 100644
--- a/app/models/blob.rb
+++ b/app/models/blob.rb
@@ -58,6 +58,10 @@ class Blob < SimpleDelegator
     binary? && extname.downcase.delete('.') == 'sketch'
   end
 
+  def balsamiq?
+    binary? && extname.downcase.delete('.') == 'bmpr'
+  end
+
   def stl?
     extname.downcase.delete('.') == 'stl'
   end
@@ -87,6 +91,8 @@ class Blob < SimpleDelegator
       'sketch'
     elsif stl?
       'stl'
+    elsif balsamiq?
+      'bmpr'
     elsif text?
       'text'
     else
diff --git a/app/views/projects/blob/_bmpr.html.haml b/app/views/projects/blob/_bmpr.html.haml
new file mode 100644
index 0000000000000000000000000000000000000000..048bdf9dcb5a654b5c0302c07f16a4dfef3c672a
--- /dev/null
+++ b/app/views/projects/blob/_bmpr.html.haml
@@ -0,0 +1,5 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('balsamiq_viewer')
+
+.file-content#js-balsamiq-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
\ No newline at end of file
diff --git a/app/views/projects/blob/balsamiq_viewer.js b/app/views/projects/blob/balsamiq_viewer.js
new file mode 100644
index 0000000000000000000000000000000000000000..b60cfe165a4e94fa15db45ed4ca1ff4020dc4c09
--- /dev/null
+++ b/app/views/projects/blob/balsamiq_viewer.js
@@ -0,0 +1,3 @@
+import renderBalsamiq from './balsamiq';
+
+document.addEventListener('DOMContentLoaded', renderBalsamiq);
\ No newline at end of file
diff --git a/config/webpack.config.js b/config/webpack.config.js
index e3bc939d578475be85987ab3a9d446935db22350..42638d47cfadd6f7fdb05d4bacc8b29147a9ccfe 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -39,6 +39,7 @@ var config = {
     notebook_viewer:      './blob/notebook_viewer.js',
     sketch_viewer:        './blob/sketch_viewer.js',
     pdf_viewer:           './blob/pdf_viewer.js',
+    balsamiq_viewer:      './blob/balsamiq_viewer.js',
     profile:              './profile/profile_bundle.js',
     protected_branches:   './protected_branches/protected_branches_bundle.js',
     protected_tags:       './protected_tags',
diff --git a/db/schema.rb b/db/schema.rb
index 3422847d72985ee7cd5c37e04342067e7b793cbf..ceae051db0c60ebe31b5286afd7c0a395408efbd 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -950,9 +950,9 @@ ActiveRecord::Schema.define(version: 20170408033905) do
     t.boolean "lfs_enabled"
     t.text "description_html"
     t.boolean "only_allow_merge_if_all_discussions_are_resolved"
-    t.integer "auto_cancel_pending_pipelines", default: 0, null: false
     t.boolean "printing_merge_request_link_enabled", default: true, null: false
     t.string "import_jid"
+    t.integer "auto_cancel_pending_pipelines", default: 0, null: false
   end
 
   add_index "projects", ["ci_id"], name: "index_projects_on_ci_id", using: :btree