diff --git a/README.md b/README.md
index e4c69f96..369be881 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,8 @@
-ImageFlow
 ImageBoard
+ImageFlow
 
 ========
 
-
-
 * [ ] figure out UI/functional separation -- ui is in module wrapper?
 * [ ] is there a module for generating forms from parameters?
 * [ ] commandline runnability?
@@ -16,7 +14,7 @@ ImageBoard
 * [ ] click to expand for all images
 * [ ] "add a new step" menu
 
-* [ ] allow passing data as data-uri or Image object, if both of neighboring pair has ability?
+* [ ] allow passing data as data-uri or Image object, or stream, or ndarray or ImageData array, if both of neighboring pair has ability?
 * [ ] ...could we directly include package.json for module descriptions? At least as a fallback.
 
 * [ ] BUG: this doesn't work for defaults:  imageboard.loadImage('examples/grid.png', function() {
diff --git a/dist/imageboard.css b/dist/imageboard.css
index d8ff2723..612c464b 100644
--- a/dist/imageboard.css
+++ b/dist/imageboard.css
@@ -13,6 +13,10 @@ body {
   border-bottom: 1px dashed #ccc;
 }
 
+.panel img {
+  max-width: 100%;
+}
+
 .instructions {
   color: #aaa;
 }
@@ -36,5 +40,4 @@ body {
 
 .mod-image-select #drop img {
   width: 100%;
-  max-width: 800px;
 }
diff --git a/dist/imageboard.js b/dist/imageboard.js
index e423b372..655ceb14 100644
--- a/dist/imageboard.js
+++ b/dist/imageboard.js
@@ -24323,13 +24323,19 @@ ImageBoard = function ImageBoard(options) {
     steps[steps.length - 1].module.setup();
   }
 
+  // by default, always begin with an ImageSelect module
   addStep('image-select');
 
   function setup() {
 
     steps.forEach(function forEachStep(step, index) {
 
-      if (step.module.setup) step.module.setup();
+      // different behavior for first step:
+      var onComplete = (index !== 0) ? false : function (image) {
+        run(image); // begin run on image selection
+      }
+
+      if (step.module.setup) step.module.setup(onComplete);
 
     });
 
@@ -24337,17 +24343,19 @@ ImageBoard = function ImageBoard(options) {
 
   setup();
 
-  // need prev() next() functions
-
   function run() {
 
+    var lastImage;
+
     steps.forEach(function forEachStep(step) {
 
-      // step.module.run(onComplete);// initial image
+      step.module.run(lastImage, function onComplete(image) {
+        lastImage = image;
+      });
 
     });
 
-    // return image;
+    return lastImage;
 
   }
 
@@ -24391,8 +24399,7 @@ module.exports = {
   // But 'image-select' is not set up that way; it's UI. But it's special.
   'image-select': function ImageSelect() {
 
-    var imageselect, 
-        image;
+    var imageselect;
 
     function setup(onComplete) {
       imageselect = require('./modules/ImageSelect.js')({
@@ -24401,9 +24408,8 @@ module.exports = {
       });
     }
 
-    function run() {
-      image = imageselect.getImage();
-      return image;
+    function run(image, onComplete) {
+      if (onComplete) onComplete(get());
     }
 
     function get() {
@@ -24433,7 +24439,7 @@ module.exports = {
     function setup() {
 
       $(options.container).append('<div class="panel ' + selector + ' ' + uniqueSelector + '"></div>');
-      el = $(uniqueSelector);
+      el = $('.' + uniqueSelector);
 
     }
 
@@ -24442,9 +24448,6 @@ module.exports = {
       options = options || {};
       options.format = options.format || "jpg";
 
-      // is global necessary? this is for browsers only
-      //global.Buffer = require('buffer');
-
       var getPixels = require("get-pixels"),
           savePixels = require("save-pixels"),
           base64 = require('base64-stream');
@@ -24471,32 +24474,16 @@ module.exports = {
 
         var buffer = base64.encode();
         savePixels(pixels, options.format)
-          .pipe(buffer)
+          .on('end', function() {
 
-// so this line needs time to run asynchronously. Look into how stream callbacks work, or if we can chain a .something(function(){}) to do the rest
+          var image = new Image();
 
-pix = buffer;
-        var image = new Image();
-
-/*
-// these two won't work if run on the same line -- something needs to load
-imageboard.steps[1].module.run(imageboard.steps[0].module.get());
-$('.panel').last().html('<img src="data:image/jpeg;base64,'+pix.read().toString()+'" />')
-*/
-
-
-// asynchronicity problem;
-// this doesn't work, what's a real event: 
-        buffer.on('write', function() {
-
-          image.src = buffer.read().toString();
- 
-    console.log(image)
           el.html(image)
           if (onComplete) onComplete(image);
 
-        });
+          image.src = 'data:image/' + options.format + ';base64,' + buffer.read().toString();
 
+        }).pipe(buffer);
 
       });
 
@@ -24576,7 +24563,7 @@ module.exports = function ImageSelect(options) {
     for (var i = 0, f; f = files[i]; i++) {
       // Read the File objects in this FileList.
 
-      reader = new FileReader()
+      reader = new FileReader();
       reader.onload = function(e) {
         // we should trigger "load" event here
 
@@ -24589,7 +24576,7 @@ module.exports = function ImageSelect(options) {
         options.output(image);
       }
       reader.readAsDataURL(f);
- 
+
     }
   }
 
diff --git a/index.html b/index.html
index 395ae1b1..411ac550 100644
--- a/index.html
+++ b/index.html
@@ -45,11 +45,11 @@ var pix;
 
         imageboard = ImageBoard();
 
-        imageboard.loadImage('examples/grid.png', function() {
+//        imageboard.loadImage('examples/grid.png', function() {
 
-          $('body').append(imageboard.run());
+//          $('body').append(imageboard.run());
 
-        });
+//        });
 
         imageboard.addStep('passthrough');
 
diff --git a/src/ImageBoard.js b/src/ImageBoard.js
index 3b93f629..150cec21 100644
--- a/src/ImageBoard.js
+++ b/src/ImageBoard.js
@@ -17,13 +17,19 @@ ImageBoard = function ImageBoard(options) {
     steps[steps.length - 1].module.setup();
   }
 
+  // by default, always begin with an ImageSelect module
   addStep('image-select');
 
   function setup() {
 
     steps.forEach(function forEachStep(step, index) {
 
-      if (step.module.setup) step.module.setup();
+      // different behavior for first step:
+      var onComplete = (index !== 0) ? false : function (image) {
+        run(image); // begin run on image selection
+      }
+
+      if (step.module.setup) step.module.setup(onComplete);
 
     });
 
@@ -31,17 +37,19 @@ ImageBoard = function ImageBoard(options) {
 
   setup();
 
-  // need prev() next() functions
-
   function run() {
 
+    var lastImage;
+
     steps.forEach(function forEachStep(step) {
 
-      // step.module.run(onComplete);// initial image
+      step.module.run(lastImage, function onComplete(image) {
+        lastImage = image;
+      });
 
     });
 
-    // return image;
+    return lastImage;
 
   }
 
diff --git a/src/Modules.js b/src/Modules.js
index 9e1f861a..5c7479bb 100644
--- a/src/Modules.js
+++ b/src/Modules.js
@@ -9,8 +9,7 @@ module.exports = {
   // But 'image-select' is not set up that way; it's UI. But it's special.
   'image-select': function ImageSelect() {
 
-    var imageselect, 
-        image;
+    var imageselect;
 
     function setup(onComplete) {
       imageselect = require('./modules/ImageSelect.js')({
@@ -19,9 +18,8 @@ module.exports = {
       });
     }
 
-    function run() {
-      image = imageselect.getImage();
-      return image;
+    function run(image, onComplete) {
+      if (onComplete) onComplete(get());
     }
 
     function get() {
@@ -51,7 +49,7 @@ module.exports = {
     function setup() {
 
       $(options.container).append('<div class="panel ' + selector + ' ' + uniqueSelector + '"></div>');
-      el = $(uniqueSelector);
+      el = $('.' + uniqueSelector);
 
     }
 
@@ -60,9 +58,6 @@ module.exports = {
       options = options || {};
       options.format = options.format || "jpg";
 
-      // is global necessary? this is for browsers only
-      //global.Buffer = require('buffer');
-
       var getPixels = require("get-pixels"),
           savePixels = require("save-pixels"),
           base64 = require('base64-stream');
@@ -89,32 +84,16 @@ module.exports = {
 
         var buffer = base64.encode();
         savePixels(pixels, options.format)
-          .pipe(buffer)
+          .on('end', function() {
 
-// so this line needs time to run asynchronously. Look into how stream callbacks work, or if we can chain a .something(function(){}) to do the rest
+          var image = new Image();
 
-pix = buffer;
-        var image = new Image();
-
-/*
-// these two won't work if run on the same line -- something needs to load
-imageboard.steps[1].module.run(imageboard.steps[0].module.get());
-$('.panel').last().html('<img src="data:image/jpeg;base64,'+pix.read().toString()+'" />')
-*/
-
-
-// asynchronicity problem;
-// this doesn't work, what's a real event: 
-        buffer.on('write', function() {
-
-          image.src = buffer.read().toString();
- 
-    console.log(image)
           el.html(image)
           if (onComplete) onComplete(image);
 
-        });
+          image.src = 'data:image/' + options.format + ';base64,' + buffer.read().toString();
 
+        }).pipe(buffer);
 
       });
 
diff --git a/src/modules/ImageSelect.js b/src/modules/ImageSelect.js
index 34afa8d6..c51bda48 100644
--- a/src/modules/ImageSelect.js
+++ b/src/modules/ImageSelect.js
@@ -32,7 +32,7 @@ module.exports = function ImageSelect(options) {
     for (var i = 0, f; f = files[i]; i++) {
       // Read the File objects in this FileList.
 
-      reader = new FileReader()
+      reader = new FileReader();
       reader.onload = function(e) {
         // we should trigger "load" event here
 
@@ -45,7 +45,7 @@ module.exports = function ImageSelect(options) {
         options.output(image);
       }
       reader.readAsDataURL(f);
- 
+
     }
   }