diff --git a/wherehows-web/app/components/ace-editor.js b/wherehows-web/app/components/ace-editor.js
new file mode 100644
index 0000000000..76ddc169f5
--- /dev/null
+++ b/wherehows-web/app/components/ace-editor.js
@@ -0,0 +1,68 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  random: Math.floor(Math.random() * 10000),
+  content: Ember.computed({
+    get: function () {
+      if (!this.editor) {
+        return undefined;
+      }
+      if (arguments.length == 1) {
+        return this.editor.getSession().getValue();
+      }
+      return undefined;
+    },
+    set: function (key, val) {
+      if (!this.editor) {
+        this.preset = val;
+        return val;
+      }
+      var cursor = this.editor.getCursorPosition();
+      this.editor.getSession().setValue(val);
+      this.editor.moveCursorToPosition(cursor);
+      return val;
+    }
+  }),
+  didInsertElement: function () {
+    this.editor = window.ace.edit(this.random + '_editor');
+    this.editor.$blockScrolling = Infinity;
+    this.editor.setTheme('ace/theme/github');
+    this.editor.getSession().setMode('ace/mode/sql');
+    this.editor.setReadOnly(false);
+    var self = this;
+    this.editor.on('change', function () {
+      self.notifyPropertyChange('content');
+    });
+
+    if (this.preset) {
+      this.set('content', this.preset);
+      this.preset = null;
+    }
+  },
+  actions: {
+    save: function () {
+      var url = this.get('savePath');
+      url = url.replace(/\{.\w+\}/, this.get('itemId'))
+      var method = 'POST';
+      var token = $("#csrfToken").val().replace('/', '');
+      var data = {"csrfToken": token};
+      data[this.get('saveParam')] = this.editor.getSession().getValue()
+      $.ajax({
+        url: url,
+        method: method,
+        headers: {
+          'Csrf-Token': token
+        },
+        dataType: 'json',
+        data: data
+      }).done(function (data, txt, xhr) {
+        if (data && data.status && data.status != "success") {
+          Notify.toast("Failed to update data", "Failed to update data within editor", "error")
+        }
+      }).fail(function (xhr, txt, err) {
+        Notify.toast("Failed to update data", "Failed to update data within editor", "error")
+      })
+
+    }
+  }
+});
diff --git a/wherehows-web/app/templates/components/ace-editor.hbs b/wherehows-web/app/templates/components/ace-editor.hbs
new file mode 100644
index 0000000000..e95e20df43
--- /dev/null
+++ b/wherehows-web/app/templates/components/ace-editor.hbs
@@ -0,0 +1,10 @@
+<pre id='{{random}}_editor' class="editor-wrapper"></pre>
+<div class="row">
+  <div class="col-xs-6 col-xs-offset-6 pull-right text-right">
+    <button type="button"
+            class="btn btn-primary"
+      {{action "save"}}>
+      Update
+    </button>
+  </div>
+</div>
\ No newline at end of file