diff --git a/light9/fade/Light9FadeUi.ts b/light9/fade/Light9FadeUi.ts
--- a/light9/fade/Light9FadeUi.ts
+++ b/light9/fade/Light9FadeUi.ts
@@ -1,16 +1,26 @@
 import debug from "debug";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { NamedNode } from "n3";
+import * as N3 from "n3";
+import { NamedNode, Quad } from "n3";
+import { Patch } from "../web/patch";
 import { getTopGraph } from "../web/RdfdbSyncedGraph";
-import { shortShow } from "../web/show_specific";
+import { showRoot } from "../web/show_specific";
 import { SyncedGraph } from "../web/SyncedGraph";
 export { EditChoice } from "../web/EditChoice";
 export { Light9EffectFader } from "./Light9EffectFader";
 
-debug.enable("*");
+debug.enable("*,autodep");
 const log = debug("fade");
 
+class FadePage {
+  constructor(public uri: NamedNode) {}
+  faders: NamedNode[] = [];
+}
+class FadePages {
+  pages: FadePage[] = [];
+}
+
 @customElement("light9-fade-ui")
 export class Light9FadeUi extends LitElement {
   static styles = [
@@ -27,35 +37,77 @@ export class Light9FadeUi extends LitEle
 
       <h1>Fade</h1>
 
+      ${(this.fadePages?.pages || []).map(this.renderPage)}
 
-      ${this.faders.map((fd) => html` <light9-effect-fader .uri=${fd}></light9-effect-fader> `)}
+      <div><button @click=${this.addPage}>Add new page</button></div>
     `;
   }
+  private renderPage(page: FadePage): TemplateResult {
+    return html`<div>
+      <fieldset>
+        <legend>Page <resource-display rename .uri=${page.uri}></resource-display></legend>
+        ${page.faders.map((fd) => html` <light9-effect-fader .uri=${fd}></light9-effect-fader> `)}
+      </fieldset>
+    </div>`;
+  }
 
   graph!: SyncedGraph;
+  ctx: NamedNode = new NamedNode(showRoot + "/fade");
 
-  @property() faders: NamedNode[] = [];
+  @property() fadePages?: FadePages;
 
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
-      // todo: start with a page, then find the faders on that page
-      this.faders = [
-        g.Uri(`:show/${shortShow}/fadePage1f0`),
-        g.Uri(`:show/${shortShow}/fadePage1f1`),
-        g.Uri(`:show/${shortShow}/fadePage1f2`),
-        g.Uri(`:show/${shortShow}/fadePage1f3`),
-        g.Uri(`:show/${shortShow}/fadePage1f4`),
-        g.Uri(`:show/${shortShow}/fadePage1f5`),
-        g.Uri(`:show/${shortShow}/fadePage1f6`),
-        g.Uri(`:show/${shortShow}/fadePage1f7`),
-      ];
+      this.graph.runHandler(this.compile.bind(this), `faders layout`);
     });
   }
   connectedCallback(): void {
     super.connectedCallback();
   }
-}
 
+  compile() {
+    const U = this.graph.U();
+    this.fadePages = undefined;
+    const fadePages = new FadePages();
+    for (let page of this.graph.subjects(U("rdf:type"), U(":FadePage"))) {
+      const fp = new FadePage(page as NamedNode);
+      try {
+        for (let fader of this.graph.objects(page, U(":fader"))) {
+          fp.faders.push(fader as NamedNode);
+        }
+        fp.faders.sort((a, b) => {
+          // todo this is supposed to sort by :column so you can reorder
+          return a.value.localeCompare(b.value);
+        });
+        fadePages.pages.push(fp);
+      } catch (e) {}
+    }
+    fadePages.pages.sort((a, b) => {
+      return a.uri.value.localeCompare(b.uri.value);
+    });
+    this.fadePages = fadePages;
+  }
 
+  addPage() {
+    const U = this.graph.U();
+    const uri = this.graph.nextNumberedResource(showRoot + "/fadePage");
+    const adds = [
+      //
+      new Quad(uri, U("rdf:type"), U(":FadePage"), this.ctx),
+      new Quad(uri, U("rdfs:label"), N3.DataFactory.literal("unnamed"), this.ctx),
+    ];
+    for (let n = 1; n <= 8; n++) {
+      const f = this.graph.nextNumberedResource(showRoot + "/fader");
+      const s = this.graph.nextNumberedResource(showRoot + "/faderset");
+      adds.push(new Quad(uri, U(":fader"), f, this.ctx));
+      adds.push(new Quad(f, U("rdf:type"), U(":Fader"), this.ctx));
+      adds.push(new Quad(f, U(":column"), N3.DataFactory.literal("" + n), this.ctx));
+      adds.push(new Quad(f, U(":setting"), s, this.ctx));
+      adds.push(new Quad(s, U(":effectAttr"), U(":strength"), this.ctx));
+      adds.push(new Quad(s, U(":value"), this.graph.LiteralRoundedFloat(0), this.ctx));
+    }
+    this.graph.applyAndSendPatch(new Patch([], adds));
+  }
+}