diff --git a/light9/fade/Light9FadeUi.ts b/light9/fade/Light9FadeUi.ts
--- a/light9/fade/Light9FadeUi.ts
+++ b/light9/fade/Light9FadeUi.ts
@@ -10,12 +10,16 @@ import { SyncedGraph } from "../web/Sync
 export { EditChoice } from "../web/EditChoice";
 export { Light9EffectFader } from "./Light9EffectFader";
 
-debug.enable("*,autodep");
+debug.enable("*,-autodep");
 const log = debug("fade");
 
+class FaderConfig {
+constructor(public uri: NamedNode,public column: number){}
+}
+
 class FadePage {
   constructor(public uri: NamedNode) {}
-  faders: NamedNode[] = [];
+  faders: FaderConfig[] = [];
 }
 class FadePages {
   pages: FadePage[] = [];
@@ -56,7 +60,7 @@ export class Light9FadeUi extends LitEle
           <button @click=${(ev: Event) => this.mapThisToHw(page.uri)}>Map this to hw</button>
           `}
         </legend>
-        ${page.faders.map((fd) => html` <light9-effect-fader .uri=${fd}></light9-effect-fader> `)}
+        ${page.faders.map((fd) => html` <light9-effect-fader .uri=${fd.uri}></light9-effect-fader> `)}
       </fieldset>
     </div>`;
   }
@@ -86,11 +90,11 @@ export class Light9FadeUi extends LitEle
       const fp = new FadePage(page as NamedNode);
       try {
         for (let fader of this.graph.objects(page, U(":fader"))) {
-          fp.faders.push(fader as NamedNode);
+          const colLit = this.graph.stringValue(fader, U(':column'))
+          fp.faders.push(new FaderConfig(fader as NamedNode, parseFloat(colLit)));
         }
         fp.faders.sort((a, b) => {
-          // todo this is supposed to sort by :column so you can reorder
-          return a.value.localeCompare(b.value);
+          return a.column-(b.column);
         });
         fadePages.pages.push(fp);
       } catch (e) {}