diff --git a/ui (gen4)/features/all.js b/ui (gen4)/features/all.js
index 5f243b01..f9bb5f4d 100755
--- a/ui (gen4)/features/all.js	
+++ b/ui (gen4)/features/all.js	
@@ -23,6 +23,7 @@ require('features/ui')
 // XXX
 require('features/ui-blank-render')
 require('features/ui-ribbons')
+require('features/ui-preact-render')
 require('features/ui-virtual-dom')
 require('features/ui-react')
 // XXX
diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js
index 6161d8d5..624356a3 100755
--- a/ui (gen4)/features/meta.js	
+++ b/ui (gen4)/features/meta.js	
@@ -67,18 +67,17 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 	'keyboard',
 
 	// XXX use one...
+	//'ui-blank-render',
 	'ui-ribbons-render',
-	'ui-vdom-render',
-	'ui-react-render',
-	'ui-blank-render',
+	'ui-preact-render',
+	//'ui-vdom-render',
+	//'ui-react-render',
 
 	// features...
 	'ui-cursor',
 
 	'ui-single-image',
 
-	// XXX remove this... (at this point this is here only to keep load order consistent)
-	//'ui-partial-ribbons',
 	/*/ XXX has bugs -- non-current ribbons are not always aligned...
 	'ui-partial-ribbons-2',
 		'-ui-partial-ribbons',
diff --git a/ui (gen4)/features/ui-preact-render.js b/ui (gen4)/features/ui-preact-render.js
new file mode 100755
index 00000000..8f8a111f
--- /dev/null
+++ b/ui (gen4)/features/ui-preact-render.js	
@@ -0,0 +1,171 @@
+/**********************************************************************
+* 
+*
+*
+**********************************************************************/
+((typeof define)[0]=='u'?function(f){module.exports=f(require)}:define)
+(function(require){ var module={} // make module AMD/node compatible...
+/*********************************************************************/
+
+var object = require('lib/object')
+var actions = require('lib/actions')
+var features = require('lib/features')
+
+var core = require('features/core')
+
+var ribbons = require('imagegrid/ribbons')
+
+require('ext-lib/preact')
+var h = preact.h
+
+
+/*********************************************************************/
+
+var RibbonsClassPrototype = {
+	// XXX
+}
+RibbonsClassPrototype.__proto__ = ribbons.BaseRibbons.prototype.__proto__
+
+
+var RibbonsPrototype = {
+	// XXX
+}
+RibbonsPrototype.__proto__ = ribbons.BaseRibbons.prototype
+
+
+var Ribbons =
+module.Ribbons =
+object.makeConstructor('Ribbons', 
+	RibbonsClassPrototype,
+	RibbonsPrototype)
+
+
+
+/*********************************************************************/
+
+var RenderActions = actions.Actions({
+	get dom(){
+		return this.ribbons ? this.ribbons.viewer : undefined },
+
+	load: [
+		function(data){
+			return function(){
+				// XXX setup .ribbons
+				var viewer = data.viewer
+				viewer = viewer == null && this.ribbons != null 
+					? this.dom 
+					: viewer
+
+				if(this.ribbons == null){
+					this.ribbons = Ribbons(viewer, this.images)
+					// XXX is this correct???
+					//this.ribbons.__image_updaters = [this.updateImage.bind(this)]
+
+				} else {
+					//this.ribbons.clear()
+					this.ribbons.images = this.images
+				}
+
+				this.reload()
+			}
+		}],
+	reload: [
+		function(){
+			// XXX
+		}],
+	refresh: [
+		function(){
+			// XXX
+		}],
+	clear: [
+		function(){
+			// XXX
+		}],
+
+	resizing: [
+		core.notUserCallable(function(unit, size, overflow){
+			// This is a resizing protocol root function.
+			//
+			// This will never be used directly, but will wrap protocol user
+			// functions.
+			//
+			// As an example see: .viewScale(..)
+
+			// XXX stop current animation...
+			// XXX
+
+			// XXX call .resizingDone(..) when animations done...
+			// XXX
+		})],
+
+	viewScale: ['- Zoom/',
+		function(scale){ 
+			if(scale == null || scale == '?'){
+				return // XXX get scale...
+			}
+
+			this.resizing.chainCall(this, function(){
+				// XXX set scale...
+			}, 'scale', scale)
+		}],
+	fitImage: ['Zoom/Fit image',
+		function(count, overflow){ 
+			if(count == '?'){
+				return // XXX get size...
+			}
+
+			this.resizing.chainCall(this, function(){
+				// XXX
+			}, 'screenwidth', count, overflow)
+		}],
+	fitRibbon: ['Zoom/Fit ribbon vertically',
+		function(count, whole){ 
+			if(count == '?'){
+				return // XXX get size...
+			}
+
+			this.resizing.chainCall(this, function(){
+				// XXX set size...
+			}, 'screenheight', count, whole)
+		}],
+
+	// XXX do we need updateImage here???
+
+	centerImage: ['- Interface/Center an image in ribbon horizontally',
+		function(target, align, offset, scale){ 
+			// XXX
+		}],
+	centerRibbon: ['- Interface/Center a ribbon vertically',
+		function(target){ 
+			// XXX
+		}],
+
+	ribbonRotation: ['- Interface|Ribbon/', 
+		function(angle){ 
+			// XXX
+		}],
+})
+
+var Render = 
+module.Render = core.ImageGridFeatures.Feature({
+	title: '',
+	doc: '',
+
+	tag: 'ui-preact-render',
+	exclusive: ['ui-render'],
+	depends: [
+		// XXX
+	],
+
+	actions: RenderActions, 
+
+	handlers: [
+		// XXX
+	],
+})
+
+
+
+
+/**********************************************************************
+* vim:set ts=4 sw=4 :                               */ return module })
diff --git a/ui (gen4)/package.json b/ui (gen4)/package.json
index 85703946..ad44d731 100755
--- a/ui (gen4)/package.json	
+++ b/ui (gen4)/package.json	
@@ -23,7 +23,7 @@
     "glob": "^4.0.6",
     "guarantee-events": "^1.0.0",
     "ig-actions": "^3.0.0",
-    "ig-features": "^3.1.8",
+    "ig-features": "^3.1.11",
     "ig-object": "^1.0.1",
     "openseadragon": "^2.1.0",
     "preact": "^8.1.0",
diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js
index 941cde93..51dc782b 100755
--- a/ui (gen4)/ui.js	
+++ b/ui (gen4)/ui.js	
@@ -36,7 +36,7 @@ var requirejs_cfg = {
 
 		//'lib/keyboard': './node_modules/ig-keyboard/keyboard',
 		
-		'ext-lib/preact': './node_modules/preact/dist/preact',
+		'ext-lib/preact': './node_modules/preact/dist/preact.dev',
 	},	
 	map: {
 		'*': {