diff --git a/static/diagram.js b/static/diagram.js
index 5f503e2..a666c85 100644
--- a/static/diagram.js
+++ b/static/diagram.js
@@ -1,5 +1,5 @@
 var DiagramNode = /** @class */ (function () {
-    function DiagramNode(id, x, y, width, height, label, meta) {
+    function DiagramNode(id, x, y, label, meta) {
         if (meta === void 0) { meta = {}; }
         this.hover = false;
         this.inputHover = false;
@@ -8,11 +8,16 @@ var DiagramNode = /** @class */ (function () {
         this.id = id;
         this.x = x;
         this.y = y;
-        this.width = width;
-        this.height = height;
         this.label = label;
         this.meta = meta;
+        this.resize();
     }
+    DiagramNode.prototype.resize = function () {
+        var textSize = _diagram.ctx.measureText(this.label);
+        var height = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
+        this.width = textSize.width + height;
+        this.height = height;
+    };
     DiagramNode.prototype.pointInNode = function (x, y) {
         if (x < this.x) {
             return false;
@@ -82,7 +87,8 @@ function diagramOnContext(ev) {
     ev.preventDefault();
 }
 var Diagrams = /** @class */ (function () {
-    function Diagrams(canvasId) {
+    function Diagrams(canvasId, editNodeCallback) {
+        if (editNodeCallback === void 0) { editNodeCallback = function () { }; }
         this.nodes = new Array();
         this.connections = new Array();
         this.cameraX = 0; // camera position
@@ -96,6 +102,7 @@ var Diagrams = /** @class */ (function () {
         this.nodeHover = null;
         this.makingConnectionNode = null;
         this.scale = 1.0;
+        this.editNodeCallback = function () { };
         this.canvas = document.getElementById(canvasId);
         if (this.canvas === null) {
             throw "Could not getElementById " + canvasId;
@@ -113,6 +120,7 @@ var Diagrams = /** @class */ (function () {
         this.canvas.onwheel = diagramOnWheel;
         this.canvas.oncontextmenu = diagramOnContext;
         window.onresize = diargramOnResize;
+        this.editNodeCallback = editNodeCallback;
     }
     Diagrams.prototype.onmousemove = function (ev) {
         var canvasRect = this.canvas.getBoundingClientRect();
@@ -188,21 +196,29 @@ var Diagrams = /** @class */ (function () {
         this.panning = true;
     };
     Diagrams.prototype.onmouseup = function (ev) {
+        if (ev.button == 2) {
+            for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) {
+                var node = _a[_i];
+                if (node.pointInNode(this.worldX, this.worldY)) {
+                    this.editNodeCallback(node);
+                }
+            }
+        }
         if (ev.button != 0) {
             return;
         }
         this.panning = false;
         this.nodeDragging = null;
         if (this.makingConnectionNode !== null) {
-            for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) {
-                var node = _a[_i];
+            for (var _b = 0, _c = this.nodes; _b < _c.length; _b++) {
+                var node = _c[_b];
                 if (node == this.makingConnectionNode) {
                     continue;
                 }
                 if (node.pointInInputCircle(this.worldX, this.worldY)) {
                     var connectionExists = false;
-                    for (var _b = 0, _c = this.connections; _b < _c.length; _b++) {
-                        var _d = _c[_b], output = _d[0], input = _d[1];
+                    for (var _d = 0, _e = this.connections; _d < _e.length; _d++) {
+                        var _f = _e[_d], output = _f[0], input = _f[1];
                         if (this.makingConnectionNode.id == output.id && node.id == input.id) {
                             connectionExists = true;
                         }
@@ -214,12 +230,12 @@ var Diagrams = /** @class */ (function () {
             }
             this.makingConnectionNode = null;
         }
-        for (var _e = 0, _f = this.connections; _e < _f.length; _e++) {
-            var _g = _f[_e], output = _g[0], input = _g[1];
-            var _h = output.getOutputCircleXY(), outputX = _h[0], outputY = _h[1];
+        for (var _g = 0, _h = this.connections; _g < _h.length; _g++) {
+            var _j = _h[_g], output = _j[0], input = _j[1];
+            var _k = output.getOutputCircleXY(), outputX = _k[0], outputY = _k[1];
             outputX += this.cameraX;
             outputY += this.cameraY;
-            var _j = input.getInputCircleXY(), inputX = _j[0], inputY = _j[1];
+            var _l = input.getInputCircleXY(), inputX = _l[0], inputY = _l[1];
             inputX += this.cameraX;
             inputY += this.cameraY;
             var dX = Math.abs(outputX - inputX);
@@ -325,9 +341,7 @@ var Diagrams = /** @class */ (function () {
     };
     Diagrams.prototype.addNode = function (id, x, y, label, meta) {
         if (meta === void 0) { meta = {}; }
-        var textSize = this.ctx.measureText(label);
-        var textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
-        this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label, meta));
+        this.nodes.push(new DiagramNode(id, x, y, label, meta));
     };
     Diagrams.prototype.addConnection = function (A, B) {
         this.connections.push([A, B]);
diff --git a/static/diagram.ts b/static/diagram.ts
index bf98942..d48b247 100644
--- a/static/diagram.ts
+++ b/static/diagram.ts
@@ -19,18 +19,22 @@ class DiagramNode {
         id: number,
         x: number, 
         y: number, 
-        width: number,
-        height: number,
         label: string,
         meta: Object = {}
     ){
         this.id = id;
         this.x = x;
         this.y = y;
-        this.width = width;
-        this.height = height;
         this.label = label;
         this.meta = meta;
+        this.resize();
+    }
+
+    resize(){
+        let textSize = _diagram.ctx.measureText(this.label);
+        let height = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
+        this.width = textSize.width + height;
+        this.height = height;
     }
 
     pointInNode(x: number, y: number){
@@ -131,7 +135,9 @@ class Diagrams {
 
     scale: number = 1.0;
 
-    constructor(canvasId: string){
+    editNodeCallback: (node: DiagramNode) => void = function (){};
+
+    constructor(canvasId: string, editNodeCallback: (node: DiagramNode) => void = function (){}){
         this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;
         if (this.canvas === null){
             throw `Could not getElementById ${canvasId}`;
@@ -149,7 +155,7 @@ class Diagrams {
         this.canvas.onwheel = diagramOnWheel;
         this.canvas.oncontextmenu = diagramOnContext;
         window.onresize = diargramOnResize;
-
+        this.editNodeCallback = editNodeCallback;
     }
 
     onmousemove(ev: MouseEvent){
@@ -226,6 +232,13 @@ class Diagrams {
     }
 
     onmouseup(ev: MouseEvent){
+        if (ev.button == 2) {
+            for (let node of this.nodes){
+                if (node.pointInNode(this.worldX, this.worldY)){
+                    this.editNodeCallback(node);
+                }
+            }
+        }
         if (ev.button != 0){
             return;
         }
@@ -389,9 +402,7 @@ class Diagrams {
     }
 
     addNode(id: number, x: number, y: number, label: string, meta: Object = {}){
-        let textSize = this.ctx.measureText(label);
-        let textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
-        this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label, meta));
+        this.nodes.push(new DiagramNode(id, x, y, label, meta));
     }
 
     addConnection(A: DiagramNode, B: DiagramNode){
diff --git a/static/edit.js b/static/edit.js
index c82de41..95fd37a 100644
--- a/static/edit.js
+++ b/static/edit.js
@@ -81,10 +81,66 @@ function onSubmitNewFilter() {
         var3: var3Input.value
     });
 }
+function editNode(node) {
+    console.log(node);
+    var addFilterButton = document.getElementById("filterButton");
+    addFilterButton.click();
+    var name = node.label;
+    // @ts-ignore
+    var type = node.meta.type;
+    // @ts-ignore
+    var var1 = node.meta.var1;
+    // @ts-ignore
+    var var2 = node.meta.var2;
+    if (var2 === undefined) {
+        var2 = "";
+    }
+    // @ts-ignore
+    var var3 = node.meta.var3;
+    if (var3 === undefined) {
+        var3 = "";
+    }
+    var nameInput = document.getElementById("nameInput");
+    nameInput.value = name;
+    var selectType = document.getElementById("typeInput");
+    selectType.value = type;
+    var var1Input = document.getElementById("var1Input");
+    var1Input.value = var1;
+    var var2Input = document.getElementById("var2Input");
+    var2Input.value = var2;
+    var var3Input = document.getElementById("var3Input");
+    var3Input.value = var3;
+    onTypeChange();
+    var submitButton = document.getElementById("submitFilterButton");
+    submitButton.innerHTML = "Save";
+    submitButton.onclick = function () { submitEditNode(node); };
+}
+function submitEditNode(node) {
+    var nameInput = document.getElementById("nameInput");
+    node.label = nameInput.value;
+    var selectType = document.getElementById("typeInput");
+    // @ts-ignore
+    node.meta.type = selectType.value;
+    var var1Input = document.getElementById("var1Input");
+    // @ts-ignore
+    node.meta.var1 = var1Input.value;
+    var var2Input = document.getElementById("var2Input");
+    // @ts-ignore
+    node.meta.var2 = var2Input.value;
+    var var3Input = document.getElementById("var3Input");
+    // @ts-ignore
+    node.meta.var3 = var3Input.value;
+    node.resize();
+}
+function addFilterButtonClicked() {
+    var submitButton = document.getElementById("submitFilterButton");
+    submitButton.onclick = onSubmitNewFilter;
+    submitButton.innerHTML = "Add Filter";
+}
 function newFilterInit() {
     var select = document.getElementById("typeInput");
     select.onchange = onTypeChange;
-    var submitButton = document.getElementById("submitFilterButton");
-    submitButton.onclick = onSubmitNewFilter;
+    var addFilterButton = document.getElementById("filterButton");
+    addFilterButton.onclick = addFilterButtonClicked;
 }
 document.addEventListener('DOMContentLoaded', newFilterInit, false);
diff --git a/static/edit.ts b/static/edit.ts
index 97ba7ab..4fb8914 100644
--- a/static/edit.ts
+++ b/static/edit.ts
@@ -95,11 +95,82 @@ function onSubmitNewFilter(){
     })
 }
 
+function editNode(node: DiagramNode){
+    console.log(node);
+    let addFilterButton = document.getElementById("filterButton") as HTMLButtonElement;
+    addFilterButton.click();
+
+    let name = node.label;
+    // @ts-ignore
+    let type = node.meta.type;
+    // @ts-ignore
+    let var1 = node.meta.var1;
+    // @ts-ignore
+    let var2 = node.meta.var2;
+    if (var2 === undefined){
+        var2 = "";
+    }
+    // @ts-ignore
+    let var3 = node.meta.var3;
+    if (var3 === undefined){
+        var3 = "";
+    }
+
+    let nameInput = document.getElementById("nameInput") as HTMLInputElement;
+    nameInput.value = name;
+
+    let selectType = document.getElementById("typeInput") as HTMLSelectElement;
+    selectType.value = type;
+    
+    let var1Input = document.getElementById("var1Input") as HTMLInputElement;
+    var1Input.value = var1;
+    
+    let var2Input = document.getElementById("var2Input") as HTMLInputElement;
+    var2Input.value = var2;
+
+    let var3Input = document.getElementById("var3Input") as HTMLInputElement;
+    var3Input.value = var3;
+
+    onTypeChange();
+    let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement;
+    submitButton.innerHTML = "Save";
+    submitButton.onclick = function() {submitEditNode(node);}
+}
+
+function submitEditNode(node: DiagramNode){
+    let nameInput = document.getElementById("nameInput") as HTMLInputElement;
+    node.label = nameInput.value;
+
+    let selectType = document.getElementById("typeInput") as HTMLSelectElement;
+    // @ts-ignore
+    node.meta.type = selectType.value
+    
+    let var1Input = document.getElementById("var1Input") as HTMLInputElement;
+    // @ts-ignore
+    node.meta.var1 = var1Input.value;
+    
+    let var2Input = document.getElementById("var2Input") as HTMLInputElement;
+    // @ts-ignore
+    node.meta.var2 = var2Input.value;
+
+    let var3Input = document.getElementById("var3Input") as HTMLInputElement;
+    // @ts-ignore
+    node.meta.var3 = var3Input.value;
+
+    node.resize();
+}
+
+function addFilterButtonClicked(){
+    let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement;
+    submitButton.onclick = onSubmitNewFilter
+    submitButton.innerHTML = "Add Filter"
+}
+
 function newFilterInit(){
     let select = document.getElementById("typeInput") as HTMLSelectElement;
     select.onchange = onTypeChange;
 
-    let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement;
-    submitButton.onclick = onSubmitNewFilter
+    let addFilterButton = document.getElementById("filterButton") as HTMLButtonElement;
+    addFilterButton.onclick = addFilterButtonClicked
 }
 document.addEventListener('DOMContentLoaded', newFilterInit, false);
\ No newline at end of file
diff --git a/templates/diagrams.html b/templates/diagrams.html
index f1053cd..0b52e28 100644
--- a/templates/diagrams.html
+++ b/templates/diagrams.html
@@ -12,7 +12,7 @@
 
 {{ define "left" }}
 <div>
-    <button type="button" class="btn btn-primary btn-block btn-sm" data-bs-toggle="modal" data-bs-target="#FilterModal">
+    <button type="button" id="filterButton" class="btn btn-primary btn-block btn-sm" data-bs-toggle="modal" data-bs-target="#FilterModal">
         Add Filter
     </button>
 </div>
@@ -70,10 +70,10 @@
 <script>
 var diagrams;
 function canvasInit() {
-    diagrams = new Diagrams("canvas");
-    diagrams.addNode(1, 100, 100, "Test");
-    diagrams.addNode(2, 300, 300, "Test2");
-    diagrams.addNode(3, 500, 500, "A much longer name");
+    diagrams = new Diagrams("canvas", editNode);
+    diagrams.addNode(1, 100, 100, "Test", {type: "json"});
+    diagrams.addNode(2, 300, 300, "Test2", {type: "css"});
+    diagrams.addNode(3, 500, 500, "A much longer name", {type: "replace"});
     diagrams.fillParent();
 }
 document.addEventListener('DOMContentLoaded', canvasInit, false);