diff --git a/client/editor.js b/client/editor.js
index 30eb2667..fdcfdd03 100644
--- a/client/editor.js
+++ b/client/editor.js
@@ -9,6 +9,7 @@ const changeGlyph = (method, argument) => {
   Meteor.call(method, argument, function(err, data) {
     Session.set('editor.glyph', data);
     stage = new stages.strokes(data);
+    stage.refresh();
   });
 }
 
@@ -32,6 +33,7 @@ Template.editor.events({
   'click svg .selectable': function(event) {
     // We avoid the arrow function here so that this is bound to the template.
     stage.handleEvent(event, this);
+    stage.refresh();
   }
 });
 
diff --git a/client/lib/abstract.js b/client/lib/abstract.js
index 26529aa4..a4bbd9f8 100644
--- a/client/lib/abstract.js
+++ b/client/lib/abstract.js
@@ -2,6 +2,10 @@ if (this.stages !== undefined) throw new Error('Redifining stages global!');
 this.stages = {};
 
 stages.AbstractStage = class AbstractStage {
+  // Initialize this stage's internal state. The glyph may already include
+  // output from this stage. If the internal state can be initialized in such
+  // a way to achieve that output, it should be; doing so allows users to make
+  // some edits, switch to another glyph, and later resume where they left off.
   constructor(glyph) {
     // Session variables the interface by which the stage interacts with UI:
     //   - type - String type of this stage.
@@ -20,16 +24,17 @@ stages.AbstractStage = class AbstractStage {
     Session.set('stage.points', undefined);
     Session.set('stage.instructions', undefined);
     Session.set('stage.status', undefined);
+    this.colors = ['#0074D9', '#2ECC40', '#FFDC00', '#FF4136', '#7FDBFF',
+                   '#001F3F', '#39CCCC', '#3D9970', '#01FF70', '#FF851B'];
     this.glyph = glyph;
   }
-  getColors() {
-    return ['#0074D9', '#2ECC40', '#FFDC00', '#FF4136', '#7FDBFF',
-            '#001F3F', '#39CCCC', '#3D9970', '#01FF70', '#FF851B'];
-  }
+  // Update the stage's internal state and the editor.glyph Session variable
+  // based on the event.
   handleEvent(event, template) {
     assert(false, 'handleEvent was not implemented!');
   }
-  refresh(glyph) {
+  // Refresh the stage UI based on the current state of this stage.
+  refresh() {
     assert(false, 'refresh was not implemented!');
   }
 }
diff --git a/client/lib/strokes.js b/client/lib/strokes.js
index e2819551..d5841813 100644
--- a/client/lib/strokes.js
+++ b/client/lib/strokes.js
@@ -36,19 +36,16 @@ stages.strokes = class StrokesStage extends stages.AbstractStage {
       this.strokes.map((stroke) => include[stroke] = false);
       glyph.stages.strokes.map((stroke) => include[stroke] = true);
     }
-    this.refresh();
   }
   handleEvent(event, template) {
     assert(this.include.hasOwnProperty(template.d));
     this.include[template.d] = !this.include[template.d];
-    this.refresh();
-  }
-  refresh(glyph) {
-    this.glyph = glyph || this.glyph;
     this.glyph.stages.strokes = this.strokes.filter((x) => this.include[x]);
     Session.set('editor.glyph', this.glyph);
+  }
+  refresh() {
     Session.set('stage.paths',
-                getStrokePaths(this.strokes, this.include, super.getColors()));
+                getStrokePaths(this.strokes, this.include, this.colors));
     const data = cjklib.getCharacterData(this.glyph.character);
     const actual = this.glyph.stages.strokes.length;
     const expected = this.glyph.metadata.strokes || data.strokes;