diff --git a/src/App.svelte b/src/App.svelte
index e65b5fd..5175345 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,12 +1,17 @@
 <script>
   import { onMount } from "svelte";
-  import { addNode, nodes, inputs, output, filters, previewCommand } from "./stores.js";
-  import Input from "./Input.svelte";
-  import Output from "./Output.svelte";
+  import {
+    selectedFilter,
+    addNode,
+    nodes,
+    inputs,
+    output,
+    filters,
+    previewCommand,
+  } from "./stores.js";
   import Filter from "./Filter.svelte";
   import FilterPicker from "./FilterPicker.svelte";
   import Graph from "./Graph.svelte";
-  // import GraphOld from "./GraphOld.svelte";
   import { FFmpeg } from "@ffmpeg/ffmpeg";
   import { fetchFile, toBlobURL } from "@ffmpeg/util";
   import { dndzone } from "svelte-dnd-action";
@@ -46,18 +51,22 @@
       for (let vid of $inputs) {
         await ffmpeg.writeFile(vid.name, await fetchFile("/" + vid.name));
       }
-      let clist = $previewCommand.replaceAll('"', '').replace("ffmpeg", "").split(" ").filter(i => i.trim() != '');
+      let clist = $previewCommand
+        .replaceAll('"', "")
+        .replace("ffmpeg", "")
+        .split(" ")
+        .filter((i) => i.trim() != "");
       console.log("command", clist);
-			// command.push("-pix_fmt");
-			// command.push("yuv420p");
-			// command.push("out.mp4");
+      // command.push("-pix_fmt");
+      // command.push("yuv420p");
+      // command.push("out.mp4");
       await ffmpeg.exec(clist, TIMEOUT);
       // await ffmpeg.exec(["-f", "lavfi", "-i", "color=size=1280x720:rate=25:color=red", "-t", "5", "out.mp4"])
       const data = await ffmpeg.readFile("out.mp4");
       rendering = false;
       videoValue = URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" }));
     } catch (e) {
-			console.log(e);
+      console.log(e);
       log += "Failed";
     }
     rendering = false;
@@ -84,11 +93,6 @@
     ffmpegLoaded = true;
   }
 
-
-
-
-
-
   function handleFilterSort(e) {
     filters.set(e.detail.items);
   }
@@ -105,50 +109,49 @@
 <main>
   <section class="header">
     <h1>FFmpeg Explorer</h1>
-    <p>
-      A tool to help you explore <a href="https://www.ffmpeg.org/" target="_blank">FFmpeg</a>
-      filters and options. To use: select one or more input videos (there are currently two options),
-      export and add some filters, and then hit "render" to preview the output in browser. Note: this
-      is a work in progress, many things may still be broken! Only audio to audio and video to video
-      filters are included. If it hangs/crashes refresh the page. Post issues/feedback to
-      <a href="https://github.com/antiboredom/ffmpeg-explorer/" target="_blank">GitHub</a>. By
-      <a href="https://lav.io" target="_blank">Sam Lavigne</a>.
-    </p>
+    <div class="help">
+      <p>
+        A tool to help you explore <a href="https://www.ffmpeg.org/" target="_blank">FFmpeg</a>
+        filters. To use:
+      </p>
+      <ol>
+        <li>Add filters from the list on the left.</li>
+        <li>Click on filters in the center panel to edit options.</li>
+        <li>Hit "render" to preview the output in browser.</li>
+        <li>For more complex filtergraphs, disable "automatic layout."</li>
+      </ol>
+      <p>
+        Note: this is a work in progress, many things may still be broken! If it hangs/crashes
+        refresh the page. Post issues/feedback to
+        <a href="https://github.com/antiboredom/ffmpeg-explorer/" target="_blank">GitHub</a>. By
+        <a href="https://lav.io" target="_blank">Sam Lavigne</a>.
+      </p>
+    </div>
   </section>
   <!-- {message} -->
   <section class="command">
     <h3>Output Command</h3>
     <div class="inner-command">
-      <textarea readonly class="actual-command" bind:this={commandRef}>{$previewCommand}</textarea>
+      <textarea readonly class="actual-command" bind:this={commandRef} on:click={() => commandRef.select()}>{$previewCommand}</textarea>
       <div>
         <button on:click={copyCommand}>Copy Command</button>
       </div>
     </div>
   </section>
 
-  <section class="inputs">
-    <div class="section-header">
-      <h3>Inputs</h3>
-      <button on:click={newInput}>Add Input</button>
-    </div>
-    {#each $nodes as node, index}
-      {#if node.nodeType === "input"}
-        <Input bind:filename={node.data.name} id={node.id} {index} />
-      {/if}
-    {/each}
-  </section>
-
   <section class="log">
     <h3>FFmpeg Log</h3>
     <textarea readonly class="the-log" bind:this={logbox}>{log}</textarea>
   </section>
 
   <section class="preview">
-    {#if rendering}
-      <div class="rendering-video"><span>Rendering...</span></div>
-    {/if}
-    <video controls src={videoValue} />
-    <div style="text-align: right;margin-top:5px;">
+    <div class="vid-holder">
+      {#if rendering}
+        <div class="rendering-video"><span>Rendering...</span></div>
+      {/if}
+      <video controls src={videoValue} />
+    </div>
+    <div style="text-align: right;padding-top:5px;">
       <button on:click={render} disabled={!ffmpegLoaded || rendering}>
         {#if ffmpegLoaded}
           {#if rendering}
@@ -163,58 +166,39 @@
     </div>
   </section>
 
-  <section class="output">
-    <h3>Output</h3>
-		{#each $nodes as node}
-			{#if node.nodeType==="output"}
-				<Output bind:filename={node.data.name} />
-			{/if}
-		{/each}
-  </section>
-
   <section class="filters">
     <h3>Filters (click to add)</h3>
-    <div class="inner-filters">
-      <div class="filter-picker">
-        <FilterPicker select={"video"} />
-      </div>
-      <div
-        class="filters-holder"
-        use:dndzone={{ items: $filters }}
-        on:consider={handleFilterSort}
-        on:finalize={handleFilterSort}
-      >
-        {#each $nodes as f (f.id)}
-          {#if f.nodeType === "filter"}
-            <div class="filter">
-              <Filter bind:filter={f.data} />
-            </div>
-          {/if}
-        {/each}
-      </div>
+    <div class="filter-picker">
+      <FilterPicker select={"video"} />
     </div>
   </section>
 
-  <!-- <section class="graph"> -->
-  <!--   <GraphOld /> -->
-  <!-- </section> -->
-
   <section class="graph">
     <Graph />
   </section>
+
+  <section class="filter-editor">
+    {#if $selectedFilter && $nodes.length > 0 && $nodes[$selectedFilter]}
+      <Filter bind:filter={$nodes[$selectedFilter].data} />
+    {/if}
+  </section>
 </main>
 
 <style>
   main {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 300px 1fr 1fr 1fr 1fr 300px;
     grid-template-areas:
-      "hdr cmd cmd"
-      "inp log prv"
-      "out log prv"
-      "flt flt flt";
+      "hdr log log log prv prv"
+      "hdr cmd cmd cmd prv prv"
+      "flt gra gra gra gra edt";
+    /* grid-template-rows: 16% 17% 77%; */
+    grid-template-rows: 15% 15% calc(70% - 40px);
+    padding: 10px;
     grid-gap: 20px;
-    padding: 20px;
+    height: 100vh;
+    border: 1px solid blue;
+    align-items: stretch;
   }
 
   section {
@@ -228,6 +212,7 @@
 
   .header {
     grid-area: hdr;
+    overflow: scroll;
   }
 
   .command {
@@ -236,17 +221,26 @@
     flex-direction: column;
   }
 
-  .inputs {
-    grid-area: inp;
-  }
-
   .preview {
     grid-area: prv;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: stretch;
   }
 
-  .output {
-    grid-area: out;
+  .preview video {
+    width: 100%;
+    /* object-fit: contain; */
+    flex: 1;
+  }
+
+  .vid-holder {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    height: calc(100% - 30px);
   }
 
   .log {
@@ -255,19 +249,25 @@
     flex-direction: column;
   }
 
-  .inner-filters {
+  .filters {
+    grid-area: flt;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .graph {
+    grid-area: gra;
     display: flex;
   }
 
-  .filters {
-    grid-area: flt;
+  .filter-editor {
+    grid-area: edt;
+    display: flex;
   }
 
   .filter-picker {
-    max-height: 500px;
-    width: 400px;
-
-    position: sticky;
+    /* max-height: 500px; */
+    /* width: 400px; */
     top: 0;
     left: 0;
     overflow: scroll;
@@ -302,14 +302,20 @@
   .inner-command {
     display: flex;
     align-items: center;
-    margin: 10px 0px;
     flex: 1;
   }
 
+  textarea {
+    outline: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    resize: none;
+  }
+
   .actual-command {
     border: none;
     margin-right: 10px;
-    resize: none;
     flex: 1;
     font: inherit;
     padding: 5px;
@@ -324,6 +330,7 @@
   .the-log {
     border: none;
     resize: none;
+    padding: 5px;
     flex: 1;
   }
   .rendering-video {
@@ -339,6 +346,17 @@
     justify-content: center;
   }
 
+  .help {
+    font-size: 0.9em;
+  }
+  ol {
+    margin: 5px 0px;
+    padding-left: 20px;
+  }
+  ol li {
+    margin-bottom: 5px;
+  }
+
   @media only screen and (max-width: 1400px) {
     .filters-holder {
       grid-template-columns: repeat(2, 1fr);
@@ -368,9 +386,6 @@
       padding: 10px;
       box-shadow: 2px 2px 0px #000;
     }
-    .inner-filters {
-      display: block;
-    }
     .filter-picker {
       width: 100%;
       margin-bottom: 20px;
diff --git a/src/Filter.svelte b/src/Filter.svelte
index fe28ded..ba940b7 100644
--- a/src/Filter.svelte
+++ b/src/Filter.svelte
@@ -7,7 +7,7 @@
     description: "",
   };
 
-  let show = false;
+  let show = true;
 
   function remove() {
 		removeNode(filter.id);
@@ -27,12 +27,6 @@
 <div class="filter-holder">
   <div class="head">
     <div class="name"><h3>{filter.name}</h3></div>
-    <div>
-      {#if filter.params && filter.params.length > 0}
-        <button on:click={() => (show = !show)}>{show ? "Hide" : "Show"} Options</button>
-      {/if}
-      <button on:click={remove}>X</button>
-    </div>
   </div>
 
   <div class="description">
@@ -93,6 +87,8 @@
     /* border: 1px solid #999; */
     border: 1px solid var(--b1);
     /* box-shadow: 5px 5px 0px #000; */
+		overflow-y: scroll;
+		flex: 1;
   }
   .filter-holder,
   input,
@@ -123,7 +119,11 @@
   }
   .p-value {
     display: flex;
+		justify-content: stretch;
   }
+	input {
+	width: 100%;
+	}
   input[type="range"] {
     margin-right: 5px;
   }
diff --git a/src/FilterEditor b/src/FilterEditor
new file mode 100644
index 0000000..e69de29
diff --git a/src/FilterPicker.svelte b/src/FilterPicker.svelte
index 0628ef1..f73cff5 100644
--- a/src/FilterPicker.svelte
+++ b/src/FilterPicker.svelte
@@ -47,7 +47,7 @@
 
 <div class="holder">
   <div class="search">
-    <input placeholder="Search Filters" on:keyup={update} bind:value={q} type="text" />
+    <input placeholder="Search Filters" on:keyup={update} bind:value={q} type="text" /><button on:click={() => {reset(); update();}}>X</button>
     <select on:change={reset} bind:value={select}>
       <option value="video">Video Filters</option>
       <option value="audio">Audio Filters</option>
@@ -73,12 +73,16 @@
   }
   .search {
     display: flex;
-    justify-items: stretch;
+    justify-content: stretch;
   }
   input {
+		width: 100%;
     flex: 1;
-    margin-right: 10px;
   }
+	button {
+	margin-left: 1px;
+	margin-right: 10px;
+	}
   .type {
     color: #999;
     font-size: 0.8em;
diff --git a/src/FitComp.svelte b/src/FitComp.svelte
index 56299fd..12ead8c 100644
--- a/src/FitComp.svelte
+++ b/src/FitComp.svelte
@@ -9,4 +9,4 @@
 		if ($auto) fitView();
 	});
 </script>
-<button>Fit</button>
+
diff --git a/src/Graph.svelte b/src/Graph.svelte
index dfe97c9..608da7a 100644
--- a/src/Graph.svelte
+++ b/src/Graph.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { nodes, edges, auto } from "./stores.js";
+  import { addNode, nodes, edges, auto, selectedFilter } from "./stores.js";
   import {
     SvelteFlowProvider,
     SvelteFlow,
@@ -14,36 +14,63 @@
     ffmpeg: Node,
   };
 
-  const defaultEdgeOptions = {
-    deletable: true,
-  };
-
-  function onEdgeUpdate(e) {
-    console.log(e);
+  function onClick(e) {
+    if (e.detail.nodeType === "filter") {
+      const newSelected = $nodes.findIndex((n) => n.id === e.detail.id);
+      if (newSelected > -1) {
+        $selectedFilter = newSelected;
+      }
+    }
   }
 
-  function onEdgeUpdateStart(e) {
-    console.log(e);
-  }
+	function addInput() {
+		addNode({ name: "shoe.mp4" }, "input");
+	}
+
 
-  function onEdgeUpdateEnd(e) {
-    console.log(e);
-  }
-  function onMoveStart(e) {
-    console.log(e);
-  }
-  function onConnect(e) {
-    console.log("connect", e);
-  }
 </script>
 
 <SvelteFlowProvider>
-	<FitComp/>
-  <label for="auto"><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label>
-  <div style="width: 900px; height: 500px;">
-    <SvelteFlow {nodeTypes} {nodes} {edges} snapGrid={[10, 10]} fitView>
-      <Controls />
-      <Background variant={BackgroundVariant.Dots} />
-    </SvelteFlow>
+  <div class="holder">
+    <FitComp />
+		<div class="nav">
+			<button on:click={addInput}>Add Input</button>
+			<label for="auto"
+				><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label
+			>
+		</div>
+    <div class="flow">
+      <div style="height: 100%; width: 100%">
+        <SvelteFlow
+          nodesConnectable={!auto}
+          panOnDrag={!auto}
+          edgesUpdatable={!auto}
+          connectOnClick={true}
+          nodesFocusable={!auto}
+          edgesFocusable={!auto}
+          on:nodeclick={onClick}
+          {nodeTypes}
+          {nodes}
+          {edges}
+          snapGrid={[10, 10]}
+          fitView
+        >
+          <Controls />
+          <Background variant={BackgroundVariant.Dots} />
+        </SvelteFlow>
+      </div>
+    </div>
   </div>
 </SvelteFlowProvider>
+
+<style>
+  .holder {
+    flex-direction: column;
+    display: flex;
+		flex: 1;
+  }
+  .flow {
+    flex: 1;
+		margin-top: 10px;
+  }
+</style>
diff --git a/src/app.css b/src/app.css
index 3eb3aa5..6e78712 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,12 +2,12 @@
   box-sizing: border-box;
 }
 :root {
-    /* --b1: #004dff; */
-    /* --b2: #f19696b3; */
-    --b1: #004dff;
-    --b2: #ffdadab3;
-		/* --b1: #ff0000; */
-		/* --b2: #b6e3f2b3; */
+  /* --b1: #004dff; */
+  /* --b2: #f19696b3; */
+  --b1: #004dff;
+  --b2: #ffdadab3;
+  /* --b1: #ff0000; */
+  /* --b2: #b6e3f2b3; */
 }
 
 a {
@@ -15,8 +15,8 @@ a {
 }
 
 a:hover {
-	background-color: var(--b1);
-	color: #fff;
+  background-color: var(--b1);
+  color: #fff;
 }
 
 body {
@@ -24,6 +24,11 @@ body {
   font:
     16px Times,
     serif;
+  margin: 0;
+}
+
+input {
+	outline: none;
 }
 textrea,
 select,
@@ -32,26 +37,26 @@ button {
   font: inherit;
 }
 
-button, input:not([type="range"]) , select {
-	border: 1px solid var(--b1);
-	background-color: white;
-	box-shadow: 2px 2px 0px var(--b2);
+button,
+input:not([type="range"]),
+select {
+  border: 1px solid var(--b1);
+  background-color: white;
+  box-shadow: 2px 2px 0px var(--b2);
 }
 button:active {
-	position: relative;
-	top: 2px;
-	left: 2px;
-	box-shadow: none;
-}
-video {
-  width: 100%;
+  position: relative;
+  top: 2px;
+  left: 2px;
+  box-shadow: none;
 }
 
+
 input[type="range"] {
-   -webkit-appearance: none;
-    appearance: none;
-    background: transparent;
-    cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
 }
 
 /* Removes default focus */
@@ -62,53 +67,53 @@ input[type="range"]:focus {
 /***** Chrome, Safari, Opera and Edge Chromium styles *****/
 /* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
-   background-color: var(--b1);
-   border-radius: 0;
-   height: 0.3rem;  
+  background-color: var(--b1);
+  border-radius: 0;
+  height: 0.3rem;
 }
 
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
-   appearance: none;
-   margin-top: -5px; /* Centers thumb on the track */
+  appearance: none;
+  margin-top: -5px; /* Centers thumb on the track */
 
-   /*custom styles*/
-   background-color: var(--b1);
-   height: 15px;
-   width: 10px;
+  /*custom styles*/
+  background-color: var(--b1);
+  height: 15px;
+  width: 10px;
 }
 
-input[type="range"]:focus::-webkit-slider-thumb {   
+input[type="range"]:focus::-webkit-slider-thumb {
   /* border: 1px solid #053a5f; */
 }
 
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
-   background-color: var(--b1);
-   border-radius: 0;
-   height: 0.3rem;  
+  background-color: var(--b1);
+  border-radius: 0;
+  height: 0.3rem;
 }
 
 /* slider thumb */
 input[type="range"]::-moz-range-thumb {
-   border: none; /*Removes extra border that FF applies*/
-   border-radius: 0; /*Removes default border-radius that FF applies*/
+  border: none; /*Removes extra border that FF applies*/
+  border-radius: 0; /*Removes default border-radius that FF applies*/
 
-   /*custom styles*/
-   background-color: var(--b1);
-   height: 15px;
-   width: 10px;
+  /*custom styles*/
+  background-color: var(--b1);
+  height: 15px;
+  width: 10px;
 }
 
 input[type="range"]:focus::-moz-range-thumb {
 }
 .svelte-flow__node {
-	border-radius: 0px !important;
-	border: 1px solid var(--b1) !important;
+  border-radius: 0px !important;
+  border: 1px solid var(--b1) !important;
 }
 
 .svelte-flow__attribution {
-	display: none !important;
+  display: none !important;
 }
diff --git a/src/nodes/Node.svelte b/src/nodes/Node.svelte
index b4de612..fb25537 100644
--- a/src/nodes/Node.svelte
+++ b/src/nodes/Node.svelte
@@ -1,28 +1,96 @@
 <script lang="ts">
   import { Handle, Position } from "@xyflow/svelte";
+  import { removeNode } from "../stores.js";
 
-  export let data = { name: "", inputs: [], outputs: [], onChange: () => {} };
+  export let data = { nodeType: "", name: "", inputs: [], outputs: [] };
+  export let id;
+
+  function remove() {
+    removeNode(id);
+  }
 </script>
 
-<div class="node">
-  {data.name}
+<div class="node {data.nodeType}">
+  <div class="head">
+    <div class="node-type">{data.nodeType}</div>
+    <button on:click={remove}>X</button>
+  </div>
+  <div class="body">
+    {#if data.nodeType == "input"}
+      <select bind:value={data.name}>
+        <option value="punch.mp4">punch.mp4</option>
+        <option value="shoe.mp4">shoe.mp4</option>
+      </select>
+    {:else}
+      {data.name}
+    {/if}
+  </div>
 </div>
 {#each data.inputs as inp, index}
-  <Handle type="target" position={Position.Left} id={inp + "_" + index} style="top: {index*10}px; background-color: {inp == 'v' ? 'blue' : 'red'}"  />
+  <Handle
+    type="target"
+    position={Position.Left}
+    id={inp + "_" + index}
+    class="handle {inp}"
+    style="top: {index * 12 + 4}px; left: -7px;">{inp}</Handle
+  >
 {/each}
 {#each data.outputs as out, index}
-  <Handle type="source" id={out + "_" + index} position={Position.Right} style="top: {index*10}px; background-color: {out == 'v' ? 'blue' : 'red'}"  />
+  <Handle
+    type="source"
+    id={out + "_" + index}
+    position={Position.Right}
+    class="handle {out}"
+    style="top: {index * 12 + 4}px; left: 107%;">{out}</Handle
+  >
 {/each}
-<!-- <Handle type="source" position={Position.Right} id="a" style="top: 10px;" on:connect /> -->
-<!-- <Handle -->
-<!--   type="source" -->
-<!--   position={Position.Right} -->
-<!--   id="b" -->
-<!--   style="top: auto; bottom: 10px;" -->
-<!--   on:connect -->
-<!-- /> -->
+
 <style>
-	.node {
-		padding: 5px;
-	}
+  :global(:root) {
+    --edge-color: var(--b1) !important;
+    --edge-color-selected: black;
+  }
+  :global(.svelte-flow__node) {
+    box-shadow: 2px 2px 0px var(--b2);
+  }
+  :global(.svelte-flow__node.selected) {
+    outline: 1px solid var(--b1) !important;
+  }
+  :global(.handle) {
+    width: 10px !important;
+    height: 10px !important;
+    border: 1px solid var(--b1) !important;
+    border-radius: 0px !important;
+    background-color: white !important;
+    font-size: 10px;
+    line-height: 6px;
+  }
+  :global(.handle.a) {
+    /* border: 1px solid var(--b2) !important; */
+  }
+  .node {
+    padding: 5px;
+  }
+  .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 5px;
+  }
+  .head button {
+    font-size: 10px;
+    line-height: 8px;
+    padding: 2px 2px;
+    margin-left: 10px;
+  }
+  .node-type {
+    font-size: 0.8em;
+    color: #999;
+  }
+  .node.input {
+  }
+  .node.filter {
+  }
+  .node.output {
+  }
 </style>
diff --git a/src/stores.js b/src/stores.js
index 93a20ca..be462dd 100644
--- a/src/stores.js
+++ b/src/stores.js
@@ -7,6 +7,7 @@ import { writable, derived, get } from "svelte/store";
 export const nodes = writable([]);
 export const edges = writable([]);
 export const auto = writable(true);
+export const selectedFilter = writable();
 
 const PREFIX = "";
 
@@ -146,19 +147,22 @@ export const previewCommand = derived([edges, nodes], ([$edges, $nodes]) => {
     const source = $nodes.find((n) => n.id === e.source);
     const target = $nodes.find((n) => n.id === e.target);
 
-    if (source.nodeType === "input") {
-      if (e.sourceHandle.includes("v")) {
-        edgeIds[e.id] = inputIds[source.id] + ":v";
-      }
-      if (e.sourceHandle.includes("a")) {
-        edgeIds[e.id] = inputIds[source.id] + ":a";
-      }
-    }
+		if (source && target) {
 
-    if (target.nodeType === "output") {
-      const outType = e.targetHandle.includes("a") ? "aud_out" : "vid_out";
-      edgeIds[e.id] = outType;
-    }
+			if (source.nodeType === "input") {
+				if (e.sourceHandle.includes("v")) {
+					edgeIds[e.id] = inputIds[source.id] + ":v";
+				}
+				if (e.sourceHandle.includes("a")) {
+					edgeIds[e.id] = inputIds[source.id] + ":a";
+				}
+			}
+
+			if (target.nodeType === "output") {
+				const outType = e.targetHandle.includes("a") ? "aud_out" : "vid_out";
+				edgeIds[e.id] = outType;
+			}
+		}
   }
 
   for (let n of $nodes.filter((n) => n.nodeType == "filter")) {
@@ -330,6 +334,7 @@ export function addNode(data, type) {
     }
   }
 
+	data.nodeType = type;
   data.inputs = ins;
   data.outputs = outs;
 
@@ -347,9 +352,9 @@ export function addNode(data, type) {
     const isAuto = get(auto);
 
     if (isAuto) {
-      const w = 100;
+      const w = 120;
       const h = 50;
-      const margin = 10;
+      const margin = 50;
       let prev = null;
 
       for (let n of _nodes) {
@@ -362,7 +367,7 @@ export function addNode(data, type) {
       for (let n of _nodes) {
         if (n.nodeType === "filter") {
 					let _w = prev && prev.width ? prev.width : w;
-          n.position = { x: prev ? prev.position.x + _w + margin : 0, y: -30 };
+          n.position = { x: prev ? prev.position.x + _w + margin : 0, y: -50 };
           prev = n;
         }
       }
@@ -374,8 +379,13 @@ export function addNode(data, type) {
         }
       }
     }
+		if (node.nodeType === "filter") {
+			selectedFilter.set(_nodes.length - 1);
+		}
     return _nodes;
   });
+
+
 }
 
 export function removeNode(id) {