diff --git a/bin/effectListing b/bin/effectListing
new file mode 100755
--- /dev/null
+++ b/bin/effectListing
@@ -0,0 +1,4 @@
+#!/bin/sh
+pnpx vite -c light9/effect/listing/web/vite.config.ts &
+wait
+
diff --git a/light9/web/effects/effects.coffee b/light9/effect/listing/web/Light9EffectListing.ts
rename from light9/web/effects/effects.coffee
rename to light9/effect/listing/web/Light9EffectListing.ts
--- a/light9/web/effects/effects.coffee
+++ b/light9/effect/listing/web/Light9EffectListing.ts
@@ -1,36 +1,106 @@
-Polymer
-  is: "light9-effects"
-  properties: 
-    graph: {type: Object}
-    effectClasses: { type: Array }
-  ready: ->
-    @graph.runHandler(@getClasses.bind(@), 'getClasses')
+import debug from "debug";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { NamedNode } from "n3";
+import { sortBy } from "underscore";
+import { getTopGraph } from "../../../web/RdfdbSyncedGraph";
+import { SyncedGraph } from "../../../web/SyncedGraph";
+export {ResourceDisplay} from "../../../web/ResourceDisplay"
+debug.enable("*");
+const log = debug("listing");
+
+@customElement("light9-effect-listing")
+export class Light9EffectListing extends LitElement {
+  render() {
+    return html`
+      <h1>Effects</h1>
+      <rdfdb-synced-graph></rdfdb-synced-graph>
 
-  getClasses: ->
-    U = (x) => @graph.Uri(x)
-    @effectClasses = @graph.subjects(U('rdf:type'), U(':Effect'))
-    @effectClasses = _.sortBy(@effectClasses, (ec) => @graph.stringValue(ec, U('rdfs:label')))
+      ${this.effectClasses.map((e: NamedNode) => html`<light9-effect-class .uri=${e}></light9-effect-class>`)}
+    `;
+  }
+  graph!: SyncedGraph;
+  effectClasses: NamedNode[] = [];
 
+  constructor() {
+    super();
+    getTopGraph().then((g) => {
+      this.graph = g;
+      this.graph.runHandler(this.getClasses.bind(this), "getClasses");
+    });
+  }
+
+  getClasses() {
+    const U = this.graph.U();
+    this.effectClasses = this.graph.subjects(U("rdf:type"), U(":Effect")) as NamedNode[];
+    this.effectClasses = sortBy(this.effectClasses, (ec: any) => this.graph.stringValue(ec, U("rdfs:label")));
+    this.requestUpdate();
+  }
+}
 
-Polymer
-  is: "light9-effect-class"
-  properties: 
-    graph: {type: Object}
-    uri: {type: Object}
-    
-  onAdd: ->
-    @$.songEffects.body = {drop: @uri.value}
-    @$.songEffects.generateRequest()
-    
-  onMomentaryPress: ->
-    @$.songEffects.body = {drop: @uri.value, event: 'start'}
-    @lastPress = @$.songEffects.generateRequest()
-    @lastPress.completes.then (request) =>
-      @lastMomentaryNote = request.response.note
-      
-  onMomentaryRelease: ->
-    return unless @lastMomentaryNote
-    @$.songEffects.body = {drop: @uri.value, note: @lastMomentaryNote}
-    @lastMomentaryNote = null
-    @$.songEffects.generateRequest()
-  
\ No newline at end of file
+@customElement("light9-effect-class")
+export class Light9EffectClass extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        padding: 5px;
+        border: 1px solid green;
+        background: #1e271e;
+        margin-bottom: 3px;
+      }
+      a {
+        color: #7992d0;
+        background: #00000859;
+        min-width: 4em;
+        min-height: 2em;
+        display: inline-block;
+        text-align: center;
+        vertical-align: middle;
+      }
+      resource-display {
+        min-width: 12em;
+        font-size: 180%;
+      }
+    `,
+  ];
+  render() {
+    if (!this.uri) {
+      return html`loading...`;
+    }
+    return html`
+      Effect
+      <resource-display .uri=${this.uri} rename></resource-display>
+      <a href="../live?effect=${this.uri.value}">Edit</a>
+      <iron-ajax id="songEffects" url="/effectEval/songEffects" method="POST" content-type="application/x-www-form-urlencoded"></iron-ajax>
+      <span style="float:right">
+        <button disabled @click=${this.onAdd}>Add to current song</button>
+        <button disabled @mousedown=${this.onMomentaryPress} @mouseup=${this.onMomentaryRelease}>Add momentary</button>
+      </span>
+    `;
+  }
+  graph!: SyncedGraph;
+  uri?: NamedNode;
+
+  onAdd() {
+    // this.$.songEffects.body = { drop: this.uri.value };
+    // this.$.songEffects.generateRequest();
+  }
+
+  onMomentaryPress() {
+    // this.$.songEffects.body = { drop: this.uri.value, event: "start" };
+    // this.lastPress = this.$.songEffects.generateRequest();
+    // return this.lastPress.completes.then((request: { response: { note: any } }) => {
+    //   return (this.lastMomentaryNote = request.response.note);
+    // });
+  }
+
+  onMomentaryRelease() {
+    // if (!this.lastMomentaryNote) {
+    //   return;
+    // }
+    // this.$.songEffects.body = { drop: this.uri.value, note: this.lastMomentaryNote };
+    // this.lastMomentaryNote = null;
+    // return this.$.songEffects.generateRequest();
+  }
+}
diff --git a/light9/web/effects/index.html b/light9/effect/listing/web/index.html
rename from light9/web/effects/index.html
rename to light9/effect/listing/web/index.html
--- a/light9/web/effects/index.html
+++ b/light9/effect/listing/web/index.html
@@ -1,82 +1,12 @@
 <!doctype html>
 <html>
   <head>
-    <title>subserver effects2</title>
+    <title>effect listing</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="/style.css">
-    <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
-    <script src="/lib/debug/debug-build.js"></script>
-    <script>
-     debug.enable('*');
-    </script>
-    <link rel="import" href="/lib/polymer/polymer.html">
-    <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
-    <script src="/node_modules/n3/n3-browser.js"></script>
-    <script src="/lib/async/dist/async.js"></script>
-    <script src="/lib/underscore/underscore-min.js"></script>
-    <link rel="import" href="/rdfdb-synced-graph.html">
-    <link rel="import" href="/resource-display.html">
+    <link rel="stylesheet" href="./style.css">    
+    <script type="module" src="../effectListing/Light9EffectListing"></script>
   </head>
   <body>
-    <!-- replaces effects.jade for subserver -->
-
-    <dom-module id="light9-effect-class">
-      <template>
-        <style>
-         :host {
-             display: block;
-             padding: 5px;
-             border: 1px solid green;
-             background: #1e271e;
-             margin-bottom: 3px;
-         }
-         a {
-             color: #7992d0;
-             background: #00000859;
-             min-width: 4em;
-             min-height: 2em;
-             display: inline-block;
-             text-align: center;
-             vertical-align: middle;
-         }
-         resource-display {
-             min-width: 12em;
-             font-size: 180%;
-         }
-        </style>
-
-        Effect
-        <resource-display graph="{{graph}}" uri="{{uri}}" rename></resource-display>
-        <a href="../live?effect={{uri.value}}">Edit</a>
-        <iron-ajax id="songEffects"
-                   url="/effectEval/songEffects"
-                   method="POST"
-                   content-type="application/x-www-form-urlencoded"></iron-ajax>
-        <span style="float:right">
-          <button on-click="onAdd">Add to current song</button>
-          <button on-mousedown="onMomentaryPress"
-                  on-mouseup="onMomentaryRelease">Add momentary</button>
-        </span>
-
-      </template>
-    </dom-module>
-    
-    <dom-module id="light9-effects">
-      <template>
-        <style>
-        </style>
-        <h1>Effects</h1>
-        <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
-
-        <template is="dom-repeat" items="{{effectClasses}}">
-          <light9-effect-class graph="{{graph}}" uri="{{item}}"></light9-effect-class>
-        </template>
-        
-      </template>
-    </dom-module>       
-
-    <light9-effects></light9-effects>
-
-    <script src="effects.js"></script>
+    <light9-effect-listing></light9-effect-listing>
   </body>
 </html>
diff --git a/light9/effect/listing/web/vite.config.ts b/light9/effect/listing/web/vite.config.ts
new file mode 100644
--- /dev/null
+++ b/light9/effect/listing/web/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+
+const servicePort = 8218;
+export default defineConfig({
+  base: "/effectListing/",
+  root: "./light9/effect/listing/web",
+  publicDir: "../web",
+  server: {
+    host: "0.0.0.0",
+    strictPort: true,
+    port: servicePort + 100,
+    hmr: {
+      port: servicePort + 200,
+    },
+  },
+  clearScreen: false,
+  define: {
+    global: {},
+  },
+});
diff --git a/show/dance2019/networking.n3 b/show/dance2019/networking.n3
--- a/show/dance2019/networking.n3
+++ b/show/dance2019/networking.n3
@@ -20,6 +20,7 @@ sh:netHome
   :webServer        <http://localhost:8200/>;
   :timeline         <http://localhost:8216/>;
   :live             <http://localhost:8217/>;
+  :effectListing    <http://localhost:8218/>;
   
   :collector        <http://localhost:8202/>;
   :collectorZmq     <http://localhost:8203/> .
@@ -37,3 +38,4 @@ sh:netHome
 :vidref           :urlPath "vidref" .
 :timeline         :urlPath "timeline" .
 :live             :urlPath "live" .
+:effectListing    :urlPath "effectListing" .
\ No newline at end of file