diff --git a/static/js/annotation.js b/static/js/annotation.js
index d0d26b1..2a4df4d 100644
--- a/static/js/annotation.js
+++ b/static/js/annotation.js
@@ -1,14 +1,34 @@
 'use strict';
 
-oml.ui.annotation = function(data, $iframe) {
+oml.ui.annotation = function(annotation, $iframe) {
     var $arrayEditable = Ox.ArrayEditable({
         editing: true,
+        items: (annotation.comments || []).map(function(comment) {
+            comment.editable = true
+            return comment
+        }),
         type: 'textarea'
     }).css({
         minHeight: '16px'
+    }).bindEvent({
+        submit: function(data) {
+            var comment = Ox.getObjectById(annotation.comments, data.id)
+            if (comment) {
+                comment.value = data.value
+                comment.modified = (new Date).toISOString()
+            } else {
+                annotation.comments.push({
+                    created: data.created || (new Date).toISOString(),
+                    modified: (new Date).toISOString(),
+                    id: data.id,
+                    value: data.value
+                })
+            }
+            that.triggerEvent('change')
+        }
     });
     var that = Ox.Element().attr({
-        id: 'a-' + data.id
+        id: 'a-' + annotation.id
     }).addClass(
         'OxSelectable'
     ).css({
@@ -21,10 +41,10 @@ oml.ui.annotation = function(data, $iframe) {
             fontSize: '14px',
             lineHeight: '21px',
             padding: '8px'
-        }).html(Ox.encodeHTMLEntities(data.text).replace(/\n/g, '<br/>')).on({
+        }).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
             click: function(event) {
                 $iframe.postMessage('selectAnnotation', {
-                    id: data.id
+                    id: annotation.id
                 })
             }
         })
diff --git a/static/js/viewer.js b/static/js/viewer.js
index 8cb4842..848364a 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -46,6 +46,7 @@ oml.ui.viewer = function() {
     function saveAnnotations(data) {
         if (data) {
             data.created = data.created || (new Date).toISOString();
+            data.comments = data.comments || [];
             annotations.push(data);
         }
         localStorage[item + '.annotations'] = JSON.stringify(annotations)
@@ -57,6 +58,14 @@ oml.ui.viewer = function() {
         saveAnnotations()
     }
 
+    var annotationEvents = {
+        change: function() {
+            console.log('change...')
+            console.log(annotations)
+            saveAnnotations()
+        }
+    }
+
     that.updateElement = function() {
         item = ui.item;
         if (item && item.length) {
@@ -75,7 +84,7 @@ oml.ui.viewer = function() {
                         if (event == 'addAnnotation') {
                             console.log('adding', data.id)
                             saveAnnotations(data);
-                            var $annotation = oml.ui.annotation(data, $iframe)
+                            var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
                             oml.$ui.annotationFolder.append($annotation);
                             $annotation.annotate();
                         } else if (event == 'removeAnnotation') {
@@ -93,7 +102,7 @@ oml.ui.viewer = function() {
                         init: function() {
                             loadAnnotations(function(annotations) {
                                 annotations.forEach(function(data) {
-                                    var $annotation = oml.ui.annotation(data, $iframe)
+                                    var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
                                     oml.$ui.annotationFolder.append($annotation);
                                 })
                                 // fixme: trigger loaded event from reader instead?