tabs / loading, saving works fully

public/assets/icons/pen-to-square-regular-full.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#cfcfcf" d="M505 122.9L517.1 135C526.5 144.4 526.5 159.6 517.1 168.9L488 198.1L441.9 152L471 122.9C480.4 113.5 495.6 113.5 504.9 122.9zM273.8 320.2L408 185.9L454.1 232L319.8 366.2C316.9 369.1 313.3 371.2 309.4 372.3L250.9 389L267.6 330.5C268.7 326.6 270.8 323 273.7 320.1zM437.1 89L239.8 286.2C231.1 294.9 224.8 305.6 221.5 317.3L192.9 417.3C190.5 425.7 192.8 434.7 199 440.9C205.2 447.1 214.2 449.4 222.6 447L322.6 418.4C334.4 415 345.1 408.7 353.7 400.1L551 202.9C579.1 174.8 579.1 129.2 551 101.1L538.9 89C510.8 60.9 465.2 60.9 437.1 89zM152 128C103.4 128 64 167.4 64 216L64 488C64 536.6 103.4 576 152 576L424 576C472.6 576 512 536.6 512 488L512 376C512 362.7 501.3 352 488 352C474.7 352 464 362.7 464 376L464 488C464 510.1 446.1 528 424 528L152 528C129.9 528 112 510.1 112 488L112 216C112 193.9 129.9 176 152 176L264 176C277.3 176 288 165.3 288 152C288 138.7 277.3 128 264 128L152 128z"/></svg>

public/assets/icons/plus-solid-full.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#cfcfcf" d="M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z"/></svg>

public/assets/icons/xmark-solid-full.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#fff" d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"/></svg>

src-tauri/src/frontend_calls/save_graph.rs

···
 use flate2::{ write::GzEncoder, Compression };
 
 #[tauri::command]
-pub fn save_graph( graph: String ) {
+pub fn save_graph( tab_name: String, graph: String ) {
   dbg!(&graph);
 
-  let path = dirs::config_dir().unwrap().join("VRCMacros").join("graph");
+  let path = dirs::config_dir().unwrap().join("VRCMacros").join(format!("{}.macro", tab_name));
 
   let file = File::create(&path).unwrap();
   let mut encoder = GzEncoder::new(file, Compression::default());

src-tauri/src/setup.rs

···
-use std::sync::{self, Mutex};
+use std::{ fs::File, io::Read, sync::{ self, Mutex } };
 
-use tauri::{ App, Emitter, Manager };
+use flate2::read::GzDecoder;
+use serde_json::Value;
+use tauri::{ App, Emitter, Listener, Manager };
 
 use crate::osc::{ self, OSCMessage };
 
 pub fn setup( app: &mut App, addresses: &'static Mutex<Vec<OSCMessage>> ){
   let window = app.get_webview_window("main").unwrap();
+
+  let handle = window.clone();
+  window.listen("tauri://drag-drop", move | ev | {
+    let path: Value = serde_json::from_str(ev.payload()).unwrap();
+    let path = path["paths"][0].as_str().unwrap();
+
+    let file = File::open(path).unwrap();
+    let mut decoder = GzDecoder::new(file);
+    let mut string = String::new();
+
+    decoder.read_to_string(&mut string).unwrap();
+
+    handle.emit("load_new_tab", Value::String(string)).unwrap();
+  });
 
   let ( sender, receiver ) = sync::mpsc::channel();
 

src/App.tsx

···
 import { createSignal, onCleanup, onMount } from "solid-js";
 import "./App.css";
-import { renderBackgroundGrid, renderContextMenu, renderNodes, renderTempDrawing } from "./renderer";
+import { renderBackgroundGrid, renderContextMenu, renderNodes, renderNullTab, renderTempDrawing } from "./renderer";
 import { lerp } from "./utils/lerp";
 import { Node, NodeIO, NodeIOResolveAnyTypes } from "./structs/node";
 import { isPointInRect, isPointInRectApplyOffset, screenToWorldSpace } from "./utils/interections";
-import { ControlBar } from "./ControlBar";
+import { ControlBar } from "./components/ControlBar";
 import { CanvasContextMenu } from "./ContextMenu/Canvas";
 import { NodeContextMenu } from "./ContextMenu/Node";
 import { ContextMenu } from "./structs/ContextMenu";
 import { NodeManager } from "./Mangers/NodeManager";
+import { TabMenu } from "./components/TabMenu";
 
 let App = () => {
   // TODO: Delete selected node when delete key is pressed
···
   }
 
   onMount(() => {
+    NodeManager.Instance.HookTabChange(() => setSelectedNode(null));
+
     ctx = canvas.getContext('2d')!;
 
     canvas.width = window.innerWidth;
···
       screenMoved = true;
     }
 
-    requestAnimationFrame(update);
-  });
+    canvas.oncontextmenu = ( e ) => {
+      e.preventDefault();
 
-  let update = () => {
-    if(stopRender)return;
+      let clickedNode: Node | null = null
+      let nodes = NodeManager.Instance.GetNodes();
 
-    scale = lerp(scale, targetScale, 0.25);
+      if(nodes){
+        nodes.map(node => {
+          if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
+            e.clientX, e.clientY,
+            node.x, node.y, node.w, node.h
+          )){
+            clickedNode = node;
+            return;
+          }
+        })
+      }
 
-    offset[0] = lerp(offset[0], offsetTarget[0], 0.5);
-    offset[1] = lerp(offset[1], offsetTarget[1], 0.5);
+      if(clickedNode){
+        contextMenu.items = NodeContextMenu(clickedNode);
+      } else{
+        contextMenu.items = CanvasContextMenu;
+      }
 
-    ctx.clearRect(canvas.width / -2, canvas.height / -2, canvas.width, canvas.height);
+      contextMenu.position = [ e.clientX - 10 - canvas.width / 2, e.clientY - 10 - canvas.height / 2 ];
+      contextMenu.visible = true;
+    }
 
-    renderBackgroundGrid(canvas, ctx, { x: offset[0], y: offset[1], scale });
-    renderNodes(canvas, ctx, NodeManager.Instance.GetNodes(), { x: offset[0], y: offset[1], scale });
-    if(isDrawing)renderTempDrawing(canvas, ctx, drawingTo, drawingFrom!, { x: offset[0], y: offset[1], scale });
-    renderContextMenu(ctx, contextMenu);
+    canvas.onmousedown = ( e ) => {
+      if(
+        e.clientY < 60 ||
+        e.clientX < 220 ||
+        lockMovement
+      )return;
 
-    requestAnimationFrame(update);
-  }
-
-  let isMouseDown = false;
-  let mouseStartPos = [ 0, 0 ];
-
-  window.oncontextmenu = ( e ) => {
-    e.preventDefault();
-
-    let clickedNode: Node | null = null
-    NodeManager.Instance.GetNodes().map(node => {
-      if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
-        e.clientX, e.clientY,
-        node.x, node.y, node.w, node.h
-      )){
-        clickedNode = node;
+      if(e.button !== 0){
+        contextMenu.visible = false;
         return;
       }
-    })
 
-    if(clickedNode){
-      contextMenu.items = NodeContextMenu(clickedNode);
-    } else{
-      contextMenu.items = CanvasContextMenu;
-    }
+      if(contextMenu.visible){
+        let submenus: ContextMenu[] = [];
+        contextMenu.items.map(x => x.menu ? submenus.push(x.menu): null);
 
-    contextMenu.position = [ e.clientX - 10 - canvas.width / 2, e.clientY - 10 - canvas.height / 2 ];
-    contextMenu.visible = true;
-  }
-
-  window.onmousedown = ( e ) => {
-    if(e.clientY < 50 || lockMovement)return;
-
-    if(e.button !== 0){
-      contextMenu.visible = false;
-      return;
-    }
+        submenus.map(x => {
+          if(!x.visible)return;
+          if(isPointInRect(canvas, e.clientX, e.clientY,
+            x.position[0], x.position[1],
+            x.size[0], x.size[1]
+          )){
+            let item = x.items.filter(x => x.hovered)[0];
+            if(item && item.clicked)item.clicked(e, canvas, { x: offset[0], y: offset[1], scale });
+          }
+        });
 
-    if(contextMenu.visible){
-      let submenus: ContextMenu[] = [];
-      contextMenu.items.map(x => x.menu ? submenus.push(x.menu): null);
-
-      submenus.map(x => {
-        if(!x.visible)return;
         if(isPointInRect(canvas, e.clientX, e.clientY,
-          x.position[0], x.position[1],
-          x.size[0], x.size[1]
+          contextMenu.position[0], contextMenu.position[1],
+          contextMenu.size[0], contextMenu.size[1]
         )){
-          let item = x.items.filter(x => x.hovered)[0];
+          let item = contextMenu.items.filter(x => x.hovered)[0];
           if(item && item.clicked)item.clicked(e, canvas, { x: offset[0], y: offset[1], scale });
         }
-      });
-
-      if(isPointInRect(canvas, e.clientX, e.clientY,
-        contextMenu.position[0], contextMenu.position[1],
-        contextMenu.size[0], contextMenu.size[1]
-      )){
-        let item = contextMenu.items.filter(x => x.hovered)[0];
-        if(item && item.clicked)item.clicked(e, canvas, { x: offset[0], y: offset[1], scale });
       }
-    }
 
-    contextMenu.visible = false;
+      contextMenu.visible = false;
 
-    let clickedNode: any = null;
-    isDrawing = false;
+      let clickedNode: any = null;
+      isDrawing = false;
 
-    let clickedInput: any = null;
+      let clickedInput: any = null;
+      let nodes = NodeManager.Instance.GetNodes();
 
-    NodeManager.Instance.GetNodes().map(node => {
-      node.selected = false;
+      if(nodes){
+        nodes.map(node => {
+          node.selected = false;
 
-      if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
-        e.clientX, e.clientY,
-        node.x, node.y, node.w, node.h
-      )){
-        node.outputs.map(( output, i ) => {
           if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
             e.clientX, e.clientY,
-            node.x + (node.w - 30),
-            node.y + 50 + (30 * i),
-            20, 20
+            node.x, node.y, node.w, node.h
           )){
-            output.index = i;
+            node.outputs.map(( output, i ) => {
+              if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
+                e.clientX, e.clientY,
+                node.x + (node.w - 30),
+                node.y + 50 + (30 * i),
+                20, 20
+              )){
+                output.index = i;
 
-            drawingTo = [ node.x + (node.w - 30), node.y + 50 + (30 * i) ];
-            drawingFrom = output;
+                drawingTo = [ node.x + (node.w - 30), node.y + 50 + (30 * i) ];
+                drawingFrom = output;
+
+                isDrawing = true;
+                return;
+              }
+            })
+
+            node.inputs.map(( input, i ) => {
+              if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
+                e.clientX, e.clientY,
+                node.x + 10,
+                node.y + 50 + (30 * i),
+                20, 20
+              )){
+                clickedInput = input;
+              }
+            })
 
-            isDrawing = true;
+            clickedNode = node;
             return;
           }
         })
-
-        node.inputs.map(( input, i ) => {
-          if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
-            e.clientX, e.clientY,
-            node.x + 10,
-            node.y + 50 + (30 * i),
-            20, 20
-          )){
-            clickedInput = input;
-          }
-        })
-
-        clickedNode = node;
-        return;
       }
-    })
 
-    if(clickedInput){
-      let partner = clickedInput.connections.pop();
-      if(!partner)return;
+      if(clickedInput){
+        let partner = clickedInput.connections.pop();
+        if(!partner)return;
 
-      partner.connections = partner.connections.filter(( x: any ) => x !== clickedInput);
+        partner.connections = partner.connections.filter(( x: any ) => x !== clickedInput);
 
-      isDrawing = true;
-      isMouseDown = true;
+        isDrawing = true;
+        isMouseDown = true;
+
+        drawingFrom = partner;
+        drawingTo = screenToWorldSpace(canvas, { x: offset[0], y: offset[1], scale }, e.clientX - 10 * scale, e.clientY - 10 * scale) as [ number, number ];;
 
-      drawingFrom = partner;
-      drawingTo = screenToWorldSpace(canvas, { x: offset[0], y: offset[1], scale }, e.clientX - 10 * scale, e.clientY - 10 * scale) as [ number, number ];;
+        return;
+      }
 
-      return;
-    }
+      movingNode = clickedNode;
 
-    movingNode = clickedNode;
+      if(clickedNode){
+        clickedNode.selected = true;
+        setSelectedNode(clickedNode);
+      }
 
-    if(clickedNode){
-      clickedNode.selected = true;
-      setSelectedNode(clickedNode);
+      isMouseDown = true;
+      mouseStartPos = [ e.clientX, e.clientY ];
     }
 
-    isMouseDown = true;
-    mouseStartPos = [ e.clientX, e.clientY ];
-  }
+    canvas.onmousemove = ( e ) => {
+      if(isMouseDown){
+        if(isDrawing){
+          drawingTo = screenToWorldSpace(canvas, { x: offset[0], y: offset[1], scale }, e.clientX - 10 * scale, e.clientY - 10 * scale) as [ number, number ];
+        } else if(movingNode){
+          movingNode.x = movingNode.x - (mouseStartPos[0] - e.clientX) / scale;
+          movingNode.y = movingNode.y - (mouseStartPos[1] - e.clientY) / scale;
 
-  window.onmousemove = ( e ) => {
-    if(isMouseDown){
-      if(isDrawing){
-        drawingTo = screenToWorldSpace(canvas, { x: offset[0], y: offset[1], scale }, e.clientX - 10 * scale, e.clientY - 10 * scale) as [ number, number ];
-      } else if(movingNode){
-        movingNode.x = movingNode.x - (mouseStartPos[0] - e.clientX) / scale;
-        movingNode.y = movingNode.y - (mouseStartPos[1] - e.clientY) / scale;
+          mouseStartPos = [ e.clientX, e.clientY ];
+          NodeManager.Instance.UpdateConfig();
+        } else{
+          offsetTarget = [ offsetTarget[0] - (mouseStartPos[0] - e.clientX) / scale, offsetTarget[1] - (mouseStartPos[1] - e.clientY) / scale ];
+          mouseStartPos = [ e.clientX, e.clientY ];
 
-        mouseStartPos = [ e.clientX, e.clientY ];
-        NodeManager.Instance.UpdateConfig();
-      } else{
-        offsetTarget = [ offsetTarget[0] - (mouseStartPos[0] - e.clientX) / scale, offsetTarget[1] - (mouseStartPos[1] - e.clientY) / scale ];
-        mouseStartPos = [ e.clientX, e.clientY ];
+          screenMoved = true;
+        }
+      }
 
-        screenMoved = true;
-      }
-    }
+      // TODO: Fix this shit lmao please
+      if(contextMenu.visible){
+        let submenus: ContextMenu[] = [];
+        contextMenu.items.map(x => x.menu ? submenus.push(x.menu): null);
 
-    // TODO: Fix this shit lmao please
-    if(contextMenu.visible){
-      let submenus: ContextMenu[] = [];
-      contextMenu.items.map(x => x.menu ? submenus.push(x.menu): null);
+        submenus.map(x => {
+          if(!x.visible)return;
+          if(isPointInRect(canvas, e.clientX, e.clientY,
+            x.position[0], x.position[1],
+            x.size[0], x.size[1]
+          )){
+            x.items.map((y, i) => {
+              y.hovered = isPointInRect(canvas, e.clientX, e.clientY,
+                x.position[0], x.position[1] + 10 + 25 * i,
+                x.size[0], 25
+              )
+            });
+          }
+        });
 
-      submenus.map(x => {
-        if(!x.visible)return;
         if(isPointInRect(canvas, e.clientX, e.clientY,
-          x.position[0], x.position[1],
-          x.size[0], x.size[1]
+          contextMenu.position[0], contextMenu.position[1],
+          contextMenu.size[0], contextMenu.size[1]
         )){
-          x.items.map((y, i) => {
-            y.hovered = isPointInRect(canvas, e.clientX, e.clientY,
-              x.position[0], x.position[1] + 10 + 25 * i,
-              x.size[0], 25
+          contextMenu.items.map((x, i) => {
+            x.hovered = isPointInRect(canvas, e.clientX, e.clientY,
+              contextMenu.position[0], contextMenu.position[1] + 10 + 25 * i,
+              contextMenu.size[0], 25
             )
+
+            if(x.menu)x.menu.visible = x.hovered;
           });
         }
-      });
+      }
+    }
+
+    canvas.onmouseup = ( e ) => {
+      let nodes = NodeManager.Instance.GetNodes();
+
+      if(nodes){
+        nodes.map(node => {
+          node.inputs.map(( input, i ) => {
+            if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
+              e.clientX, e.clientY,
+              node.x + 10,
+              node.y + 50 + (30 * i),
+              20, 20
+            )){
+              if(isDrawing){
+                let fromType = NodeIOResolveAnyTypes(drawingFrom!);
+                let toType = NodeIOResolveAnyTypes(input);
 
-      if(isPointInRect(canvas, e.clientX, e.clientY,
-        contextMenu.position[0], contextMenu.position[1],
-        contextMenu.size[0], contextMenu.size[1]
-      )){
-        contextMenu.items.map((x, i) => {
-          x.hovered = isPointInRect(canvas, e.clientX, e.clientY,
-            contextMenu.position[0], contextMenu.position[1] + 10 + 25 * i,
-            contextMenu.size[0], 25
-          )
+                if(
+                  drawingFrom!.connections.indexOf(input) === -1 &&
+                  (
+                    toType === null ||
+                    fromType === toType
+                  )
+                ){
+                  drawingFrom!.connections.push(input);
+                  input.connections.push(drawingFrom!);
 
-          if(x.menu)x.menu.visible = x.hovered;
-        });
+                  NodeManager.Instance.UpdateConfig();
+                }
+              }
+            }
+          })
+        })
       }
+
+      isDrawing = false;
+      isMouseDown = false;
     }
-  }
 
-  window.onmouseup = ( e ) => {
-    NodeManager.Instance.GetNodes().map(node => {
-      node.inputs.map(( input, i ) => {
-        if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
-          e.clientX, e.clientY,
-          node.x + 10,
-          node.y + 50 + (30 * i),
-          20, 20
-        )){
-          if(isDrawing){
-            let fromType = NodeIOResolveAnyTypes(drawingFrom!);
-            let toType = NodeIOResolveAnyTypes(input);
+    requestAnimationFrame(update);
+  });
+
+  let update = () => {
+    if(stopRender)return;
+
+    scale = lerp(scale, targetScale, 0.25);
+
+    offset[0] = lerp(offset[0], offsetTarget[0], 0.5);
+    offset[1] = lerp(offset[1], offsetTarget[1], 0.5);
+
+    ctx.clearRect(canvas.width / -2, canvas.height / -2, canvas.width, canvas.height);
+
+    let nodes = NodeManager.Instance.GetNodes();
 
-            if(
-              drawingFrom!.connections.indexOf(input) === -1 &&
-              (
-                toType === null ||
-                fromType === toType
-              )
-            ){
-              drawingFrom!.connections.push(input);
-              input.connections.push(drawingFrom!);
+    renderBackgroundGrid(canvas, ctx, { x: offset[0], y: offset[1], scale });
+
+    if(nodes)
+      renderNodes(canvas, ctx, nodes, { x: offset[0], y: offset[1], scale });
+    else
+      renderNullTab(canvas, ctx);
 
-              NodeManager.Instance.UpdateConfig();
-            }
-          }
-        }
-      })
-    })
+    if(isDrawing)renderTempDrawing(canvas, ctx, drawingTo, drawingFrom!, { x: offset[0], y: offset[1], scale });
+    renderContextMenu(ctx, contextMenu);
 
-    isDrawing = false;
-    isMouseDown = false;
+    requestAnimationFrame(update);
   }
+
+  let isMouseDown = false;
+  let mouseStartPos = [ 0, 0 ];
 
   let interval = setInterval(() => {
     if(screenMoved){
···
 
   return (
     <>
+      <TabMenu />
       <ControlBar node={selectedNode} lockMovement={( lock ) => lockMovement = lock} />
       <canvas ref={canvas}/>
     </>

src/ContextMenu/Canvas.tsx

···
-import { invoke } from "@tauri-apps/api/core";
 import { PositionInfo } from "../renderer";
-import { Node, NodeType } from "../structs/node";
-import { OSCMessage } from "../structs/OscMessage";
+import { Node } from "../structs/node";
 import { screenToWorldSpace } from "../utils/interections";
 import { NodeManager } from "../Mangers/NodeManager";
 import { ContextMenuItem } from "../structs/ContextMenu";
-
-export let CanvasContextMenu: ContextMenuItem[] = [
-  {
-    text: "Add OSC Trigger Node",
-    clicked: ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
-      let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
-
-      let node: Node = {
-        name: 'OSC Trigger',
-        id: NodeManager.Instance.GetNewNodeId(),
-        x: pos[0],
-        y: pos[1],
-        w: 200,
-        h: 50,
-        inputs: [],
-        outputs: [],
-        selected: false,
-        statics: [
-          {
-            name: "OSC Trigger",
-            type: NodeType.OSCAddress,
-            value: null
-          },
-          {
-            name: "Parameter List",
-            type: NodeType.ParameterList,
-            value: []
-          }
-        ],
-        onStaticsUpdate: ( node ) => {
-          let address = node.statics[0].value;
-          let parameters = node.statics[1].value;
-
-          (async () => {
-            if(address){
-              let addresses = await invoke<OSCMessage[]>('get_addresses');
-              let msgDat = addresses.find(x => x.address == address);
-
-              if(!msgDat)return;
-
-              parameters = msgDat.values.map(x => { return { type: x.key, desc: '' }});
-              node.statics[1].value = parameters;
-            }
-
-            node.outputs.map(output => {
-              output.connections.map(partner => {
-                partner.connections = partner.connections.filter(x => x != output);
-              })
-            })
-            node.outputs = [];
-
-            node.outputs.push({
-              name: 'Flow',
-              type: NodeType.Flow,
-              connections: [],
-              parent: node,
-              index: 0
-            })
-
-            parameters.forEach(( dat: any, indx: number ) => {
-              let type: NodeType | null = null;
-
-              switch(dat.type){
-                case 'Int':
-                  type = NodeType.Int;
-                  break;
-                case 'Float':
-                  type = NodeType.Float;
-                  break;
-                case 'String':
-                  type = NodeType.String;
-                  break;
-                case 'Boolean':
-                  type = NodeType.Boolean;
-                  break;
-              }
-
-              if(type){
-                node.outputs.push({
-                  name: dat.desc === '' ? dat.type : dat.desc,
-                  type: type,
-                  connections: [],
-                  parent: node,
-                  index: indx + 1
-                })
-              }
-            });
-
-            node.h = 60 + (parameters.length + 1) * 30;
-            NodeManager.Instance.UpdateConfig();
-          })();
-        }
-      };
-
-      NodeManager.Instance.AddNode(node);
-    },
-    hovered: false
-  },
-
-  {
-    text: "Conditional",
-    menu: {
-      items: [
-        {
-          text: "If Equals",
-          hovered: false,
-          clicked: ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
-            let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
-
-            let node: Node = {
-              name: 'If Equals',
-              id: NodeManager.Instance.GetNewNodeId(),
-              x: pos[0],
-              y: pos[1],
-              w: 220,
-              h: 150,
-              inputs: [],
-              outputs: [],
-              selected: false,
-              statics: [],
-              onStaticsUpdate: ( _node ) => {}
-            };
+import { Nodes } from "../Nodes/Nodes";
 
-            node.inputs.push({
-              name: "Flow",
-              type: NodeType.Flow,
-              connections: [],
-              parent: node,
-              index: 0
-            });
+export let CanvasContextMenu: ContextMenuItem[] = Nodes.map(( node ) => {
+  if(node.isSingle){
+    return {
+      text: node.name,
+      clicked: async ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
+        let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
+        let id = await NodeManager.Instance.GetNewNodeId();
 
-            node.inputs.push({
-              name: "Input 1",
-              type: NodeType.AnyTypeA,
-              connections: [],
-              parent: node,
-              index: 1
-            });
+        NodeManager.Instance.AddNode(new Node(pos, node, id));
+      },
+      hovered: false
+    }
+  } else{
+    return {
+      text: node.name,
+      menu: {
+        items: node.items!.map(x => {
+          return {
+            text: x.name,
+            clicked: async ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
+              let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
+              let id = await NodeManager.Instance.GetNewNodeId();
 
-            node.inputs.push({
-              name: "Input 2",
-              type: NodeType.AnyTypeA,
-              connections: [],
-              parent: node,
-              index: 2
-            });
-
-
-            node.outputs.push({
-              name: "Equal",
-              type: NodeType.Flow,
-              connections: [],
-              parent: node,
-              index: 0
-            });
-
-            node.outputs.push({
-              name: "Not Equal",
-              type: NodeType.Flow,
-              connections: [],
-              parent: node,
-              index: 1
-            });
-
-            NodeManager.Instance.AddNode(node);
+              NodeManager.Instance.AddNode(new Node(pos, x, id));
+            },
+            hovered: false
           }
-        },
-      ],
-      position: [ 0, 0 ],
-      size: [ 0, 0 ],
-      visible: true
-    },
-    hovered: false
-  },
-
-  {
-    text: "Statics",
-    menu: {
-      items: [
-        {
-          text: "String",
-          hovered: false,
-          clicked: ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
-            let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
-
-            let node: Node = {
-              name: 'String',
-              id: NodeManager.Instance.GetNewNodeId(),
-              x: pos[0],
-              y: pos[1],
-              w: 200,
-              h: 85,
-              inputs: [],
-              outputs: [],
-              selected: false,
-              statics: [],
-              onStaticsUpdate: ( _node ) => {}
-            };
-
-            node.outputs.push({
-              name: "String",
-              type: NodeType.String,
-              connections: [],
-              parent: node,
-              index: 0
-            });
-
-            NodeManager.Instance.AddNode(node);
-          }
-        },
-
-        {
-          text: "Int",
-          hovered: false,
-          clicked: ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
-            let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
-
-            let node: Node = {
-              name: 'Int',
-              id: NodeManager.Instance.GetNewNodeId(),
-              x: pos[0],
-              y: pos[1],
-              w: 200,
-              h: 85,
-              inputs: [],
-              outputs: [],
-              selected: false,
-              statics: [],
-              onStaticsUpdate: ( _node ) => {}
-            };
-
-            node.outputs.push({
-              name: "Int",
-              type: NodeType.Int,
-              connections: [],
-              parent: node,
-              index: 0
-            });
-
-            NodeManager.Instance.AddNode(node);
-          }
-        },
-      ],
-      position: [ 0, 0 ],
-      size: [ 0, 0 ],
-      visible: true
-    },
-    hovered: false
-  },
-
-  {
-    text: "OSC Actions",
-    menu: {
-      items: [
-        {
-          text: "Send Chatbox",
-          hovered: false,
-          clicked: ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
-            let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
-
-            let node: Node = {
-              name: 'Send Chatbox',
-              id: NodeManager.Instance.GetNewNodeId(),
-              x: pos[0],
-              y: pos[1],
-              w: 200,
-              h: 120,
-              inputs: [],
-              outputs: [],
-              selected: false,
-              statics: [],
-              onStaticsUpdate: ( _node ) => {}
-            };
-
-            node.inputs.push({
-              name: "Flow",
-              type: NodeType.Flow,
-              connections: [],
-              parent: node,
-              index: 0
-            });
-
-            node.inputs.push({
-              name: "Value",
-              type: NodeType.String,
-              connections: [],
-              parent: node,
-              index: 1
-            });
-
-            NodeManager.Instance.AddNode(node);
-          }
-        },
-      ],
-      position: [ 0, 0 ],
-      size: [ 0, 0 ],
-      visible: true
-    },
-    hovered: false
-  },
-]
+        }),
+        position: [ 0, 0 ],
+        size: [ 0, 0 ],
+        visible: true
+      },
+      hovered: false
+    }
+  }
+});

src/ControlBar.css src/components/ControlBar.css

···
 .control-bar{
   position: fixed;
   top: 20px;
-  left: 50px;
+  left: 20px;
   height: 40px;
   z-index: 100;
-  width: calc(100vw - 100px);
+  width: calc(100vw - 40px);
   background: #272e44;
   border-radius: 20px;
   display: flex;

src/ControlBar.tsx src/components/ControlBar.tsx

···
 import './ControlBar.css';
 
 import { Accessor, createSignal, For, Match, Show, Switch } from 'solid-js';
-import { Node, NodeType } from './structs/node';
-import { TextInput } from './components/TextInput';
+import { Node, NodeType } from '../structs/node';
+import { TextInput } from './TextInput';
 import { invoke } from '@tauri-apps/api/core';
-import { OSCMessage } from './structs/OscMessage';
-import { ParameterList } from './components/ParameterList';
-import { NodeManager } from './Mangers/NodeManager';
+import { OSCMessage } from '../structs/OscMessage';
+import { ParameterList } from './ParameterList';
+import { NodeManager } from '../Mangers/NodeManager';
 
 export interface ControlBarProps{
   node: Accessor<Node | null>,
···
 
                         item.value = text;
                         node.onStaticsUpdate(node);
-                        
+
                         NodeManager.Instance.UpdateConfig();
                       }} />
                   </div>

src/Mangers/NodeManager.tsx

···
 import { invoke } from "@tauri-apps/api/core";
 import { Node } from "../structs/node";
+import { Tab } from "../structs/Tab";
+import { createSignal } from "solid-js";
+import { listen } from "@tauri-apps/api/event";
+import { getVersion } from "@tauri-apps/api/app";
+import { NodesByID } from "../Nodes/Nodes";
+
+export interface TabHashMap {
+  [details: string] : Tab;
+}
 
 export class NodeManager{
   public static Instance: NodeManager;
 
+  private _selectedTab: string | null = null;
+  private _tabs: TabHashMap = {};
+
   private _nodes: Node[] = [];
-  private _newestNodeId = 0;
   private _needsSave = false;
 
   constructor(){
···
       // Save config every 1 second
       if(this._needsSave)this._saveConfigToDisk();
     }, 1_000);
+
+    listen('load_new_tab', ( ev: any ) => {
+      this._loadFromConfig(ev.payload);
+    })
+  }
+
+
+  private _tabUpdateHook: ( tabs: TabHashMap ) => void = () => {};
+  private _tabChangeHook: () => void = () => {};
+
+  public async AddTab( name: string ){
+    let [ selected, setSelected ] = createSignal(false);
+
+    let tab: Tab = {
+      name: name,
+      id: await NodeManager.Instance.GetNewNodeId(),
+      nodes: [],
+      selected: selected,
+      setSelected: setSelected
+    };
+
+    this._tabs[tab.id] = tab;
+
+    this.SelectTab(tab.id);
+    this._tabUpdateHook(this._tabs);
+  }
+
+  public CloseTab( id: string ){ // TODO: Add confirmation to close tab
+    console.log(id === this._selectedTab);
+    if(this._selectedTab === id){
+      let tabs = Object.values(this._tabs);
+
+      if(tabs.length === 1){
+        this.SelectTab(null);
+      } else{
+        let tabToDelete = this._tabs[id];
+
+        let index = tabs.indexOf(tabToDelete);
+        let nextTab = tabs[index + 1];
+
+        if(nextTab)
+          this.SelectTab(nextTab.id);
+        else
+          this.SelectTab(tabs[0].id);
+      }
+    }
+
+    delete this._tabs[id];
+    this._tabUpdateHook(this._tabs);
+  }
+
+  public RenameTab( id: string, name: string ){
+    let tab = this._tabs[id];
+    if(!tab)return;
+
+    tab.name = name;
+    this._tabUpdateHook(this._tabs);
+  }
+
+  public SelectTab( id: string | null ){
+    if(this._selectedTab && this._tabs[this._selectedTab]){
+      let tab = this._tabs[this._selectedTab];
+
+      tab.setSelected(false);
+      tab.nodes = this._nodes;
+    }
+
+    this._selectedTab = id;
+    this._tabChangeHook();
+
+    if(this._selectedTab){
+      let tab = this._tabs[this._selectedTab];
+      if(!tab){
+        this._selectedTab = null;
+        return this._nodes = [];
+      }
+
+      tab.setSelected(true);
+      this._nodes = tab.nodes;
+    } else{
+      this._nodes = [];
+    }
+  }
+
+  public HookTabUpdate( cb: ( tabs: TabHashMap ) => void ){
+    this._tabUpdateHook = cb;
+  }
+
+  public HookTabChange( cb: () => void ){
+    this._tabChangeHook = cb;
   }
 
+
   public AddNode( node: Node ){
+    if(!this._selectedTab)return;
+
     this._nodes.push(node);
     this.UpdateConfig();
   }
 
   public RemoveNode( node: Node ){
+    if(!this._selectedTab)return;
+
     this._nodes = this._nodes.filter(x => x !== node);
     this.UpdateConfig();
   }
 
-  public GetNodes(): Node[]{
-    return this._nodes;
+  public GetNodes(): Node[] | null{
+    if(this._selectedTab)
+      return this._nodes;
+    else
+      return null;
   }
 
-  public GetNewNodeId(){
-    return this._newestNodeId++; // TODO: really need a better solution than this, but it'll work for now
+  public async GetNewNodeId(){
+    let encoder = new TextEncoder();
+    let data = encoder.encode(Date.now().toString() + Math.random().toString());
+    let hash = await window.crypto.subtle.digest("SHA-256", data); // Probably should get a better ID implementation
+
+    return btoa(String.fromCharCode(...new Uint8Array(hash)));
   }
 
+
   public UpdateConfig(){
     this._needsSave = true;
   }
 
-  private _loadFromConfig( config: string ){
+  private async _loadFromConfig( config: string ){
     let json = JSON.parse(config);
 
+    if(
+      !json.tab_name ||
+      !json.version ||
+      !json.graph
+    )return;
+
+    await this.AddTab(json.tab_name);
     this._nodes = [];
 
+    let graph = json.graph;
+
     // Populate nodes
-    for (let i = 0; i < json.length; i++) {
-      let node = json[i];
+    for (let i = 0; i < graph.length; i++) {
+      let node = graph[i];
 
-      this._nodes.push({
-        name: node.name,
-        id: node.id,
-        x: node.x, y: node.y,
-        w: node.w, h: node.h,
-        inputs: [],
-        outputs: [],
-        selected: false,
-        statics: node.statics,
-        onStaticsUpdate: ( _node ) => {} // TODO: Make a seperate setup for node logic so we can load from that
-      })
-
-      this._newestNodeId = node.id
-    }
+      let nod = new Node(node.pos, NodesByID[node.typeId], node.id);
 
-    // Populate node outputs
-    for (let i = 0; i < json.length; i++) {
-      let configNode = json[i];
-      let node = this._nodes[i];
+      nod.statics = node.statics;
+      nod.onStaticsUpdate(nod);
 
-      for (let j = 0; j < configNode.outputs.length; j++) {
-        let output = configNode.outputs[j];
-        node.outputs.push({
-          name: output.name,
-          type: output.type,
-          connections: [],
-          parent: node,
-          index: j
-        })
-      }
+      this._nodes.push(nod);
     }
 
     // Populate node inputs
-    for (let i = 0; i < json.length; i++) {
-      let configNode = json[i];
+    for (let i = 0; i < graph.length; i++) {
+      let configNode = graph[i];
       let outputParentNode = this._nodes[i];
 
       for (let j = 0; j < configNode.outputs.length; j++) {
···
 
         for (let k = 0; k < output.connections.length; k++) {
           let input = output.connections[k];
-          let node = this._nodes[input.node];
+          let node = this._nodes.find(x => x.id === input.node)!;
 
           let realInput = node.inputs.find(x => x.index === input.index);
           let realOutput = outputParentNode.outputs[j];
 
           if(realInput){
             realInput.connections.push(realOutput);
+            realOutput.connections.push(realInput);
           } else{
-            node.inputs.push({
+            let realInput = {
               name: input.name,
               type: input.type,
               parent: node,
               connections: [ realOutput ],
               index: input.index
-            })
+            };
+
+            node.inputs.push(realInput);
+            realOutput.connections.push(realInput);
           }
         }
       }
     }
   }
 
-  private _saveConfigToDisk(){
+  private async _saveConfigToDisk(){
     this._needsSave = false;
     // Convert it into a structure we can actually save...
+
+    if(!this._selectedTab)return;
+    let tab = this._tabs[this._selectedTab];
+    if(!tab)return;
 
     let nodesToSave = [];
 
···
       nodesToSave.push({
         name: node.name,
         id: node.id,
-        x: node.x, y: node.y,
-        w: node.w, h: node.h,
-        statics: node.statics,
-        outputs: nodeOutputs
+        typeId: node.typeId,
+        pos: [ node.x, node.y ],
+        outputs: nodeOutputs,
+        statics: node.statics
       })
     }
 
-    invoke('save_graph', { graph: JSON.stringify(nodesToSave) });
+    invoke('save_graph', { tabName: tab.name, graph: JSON.stringify({
+      tab_name: tab.name,
+      version: await getVersion(),
+      graph: nodesToSave
+    }) });
   }
 }

src/Nodes/Conditional.tsx

···
+import { NodeDefinition } from "./Nodes";
+
+import { NodeConditionalIfEqual } from "./Conditional/IfEqual";
+import { NodeConditionalIfTrue } from "./Conditional/IfTrue";
+import { NodeConditionalIfFalse } from "./Conditional/IfFalse";
+
+export let NodeConditional: NodeDefinition = {
+  isSingle: false,
+  name: 'Conditional',
+  items: [
+    NodeConditionalIfEqual,
+    NodeConditionalIfTrue,
+    NodeConditionalIfFalse
+  ]
+}

src/Nodes/Conditional/IfEqual.tsx

···
+import { Node, NodeType } from "../../structs/node";
+import { NodeDefinition } from "../Nodes";
+
+export let NodeConditionalIfEqual: NodeDefinition = {
+  isSingle: true,
+  name: 'If Equal',
+  typeId: 'ifequal',
+
+  w: 220,
+  h: 150,
+
+  statics: [{
+    type: NodeType.Label,
+    name: 'If Equal',
+    value: null
+  }],
+
+  inputs: [
+    { name: "Flow", type: NodeType.Flow },
+    { name: "Input 1", type: NodeType.AnyTypeA },
+    { name: "Input 2", type: NodeType.AnyTypeA },
+  ],
+
+  outputs: [
+    { name: "Equal", type: NodeType.Flow },
+    { name: "Not Equal", type: NodeType.Flow },
+  ],
+
+  onStaticsUpdate: ( _node: Node ) => {}
+}

src/Nodes/Conditional/IfFalse.tsx

···
+import { Node, NodeType } from "../../structs/node";
+import { NodeDefinition } from "../Nodes";
+
+export let NodeConditionalIfFalse: NodeDefinition = {
+  isSingle: true,
+  name: 'If False',
+  typeId: 'iffalse',
+
+  w: 220,
+  h: 150,
+
+  statics: [{
+    type: NodeType.Label,
+    name: 'If False',
+    value: null
+  }],
+
+  inputs: [
+    { name: "Flow", type: NodeType.Flow },
+    { name: "Input", type: NodeType.Boolean },
+  ],
+
+  outputs: [
+    { name: "Is False", type: NodeType.Flow },
+    { name: "Not False", type: NodeType.Flow },
+  ],
+
+  onStaticsUpdate: ( _node: Node ) => {}
+}

src/Nodes/Conditional/IfTrue.tsx

···
+import { Node, NodeType } from "../../structs/node";
+import { NodeDefinition } from "../Nodes";
+
+export let NodeConditionalIfTrue: NodeDefinition = {
+  isSingle: true,
+  name: 'If True',
+  typeId: 'iftrue',
+
+  w: 220,
+  h: 150,
+
+  statics: [{
+    type: NodeType.Label,
+    name: 'If True',
+    value: null
+  }],
+
+  inputs: [
+    { name: "Flow", type: NodeType.Flow },
+    { name: "Input", type: NodeType.Boolean },
+  ],
+
+  outputs: [
+    { name: "Is True", type: NodeType.Flow },
+    { name: "Not True", type: NodeType.Flow },
+  ],
+
+  onStaticsUpdate: (_node: Node) => { }
+}

src/Nodes/Nodes.tsx

···
+import { Node, NodeStatic, NodeType } from "../structs/node";
+
+import { NodeConditional } from "./Conditional";
+import { NodeOSCActions } from "./OSCActions";
+import { NodeOSCTrigger } from "./OSCTrigger";
+import { NodeStatics } from "./Statics";
+
+export interface NodeDefinition{
+  isSingle: boolean,
+  name: string,
+  typeId?: string,
+  onStaticsUpdate?: ( node: Node ) => void,
+  // build?: ( pos: [ number, number ], onStaticsUpdate: ( node: Node ) => void ) => Promise<Node>,
+  w?: number,
+  h?: number,
+  statics?: NodeStatic[],
+  inputs?: { name: string, type: NodeType }[],
+  outputs?: { name: string, type: NodeType }[],
+
+  items?: NodeDefinition[]
+}
+
+export interface NodeDefinitionHashMap {
+  [details: string] : NodeDefinition;
+}
+
+export let Nodes: NodeDefinition[] = [
+  NodeOSCTrigger,
+  NodeConditional,
+  NodeStatics,
+  NodeOSCActions
+]
+
+export let NodesByID: NodeDefinitionHashMap = {}
+
+Nodes.forEach(node => {
+  if(node.isSingle){
+    NodesByID[node.typeId!] = node;
+  } else{
+    node.items!.forEach(node => {
+      NodesByID[node.typeId!] = node;
+    })
+  }
+})
+
+console.log(NodesByID);

src/Nodes/OSCActions.tsx

···
+import { NodeDefinition } from "./Nodes";
+import { NodeOSCActionsSendChatbox } from "./OSCActions/Send Chatbox";
+
+export let NodeOSCActions: NodeDefinition = {
+  isSingle: false,
+  name: 'OSC Actions',
+  items: [
+    NodeOSCActionsSendChatbox
+  ]
+}

src/Nodes/OSCActions/Send Chatbox.tsx

···
+import { Node, NodeType } from "../../structs/node";
+import { NodeDefinition } from "../Nodes";
+
+export let NodeOSCActionsSendChatbox: NodeDefinition = {
+  isSingle: true,
+  name: 'Send Chatbox',
+  typeId: 'oscsendchatbox',
+
+  w: 200,
+  h: 120,
+
+  statics: [{
+    type: NodeType.Label,
+    name: 'Send Chatbox',
+    value: null
+  }],
+
+  inputs: [
+    { name: "Flow", type: NodeType.Flow },
+    { name: "Value", type: NodeType.String }
+  ],
+
+  onStaticsUpdate: ( _node: Node ) => {}
+}

src/Nodes/OSCTrigger.tsx

···
+import { invoke } from "@tauri-apps/api/core";
+import { Node, NodeType } from "../structs/node";
+import { OSCMessage } from "../structs/OscMessage";
+import { NodeManager } from "../Mangers/NodeManager";
+import { NodeDefinition } from "./Nodes";
+
+export let NodeOSCTrigger: NodeDefinition = {
+  isSingle: true,
+  name: 'OSC Trigger',
+  typeId: 'osctrigger',
+
+  w: 200,
+  h: 50,
+
+  statics: [
+    {
+      name: "OSC Trigger",
+      type: NodeType.OSCAddress,
+      value: null
+    },
+    {
+      name: "Parameter List",
+      type: NodeType.ParameterList,
+      value: []
+    }
+  ],
+
+  onStaticsUpdate: ( node: Node ) => {
+    let address = node.statics[0].value;
+    let parameters = node.statics[1].value;
+
+    (async () => {
+      if(address){
+        let addresses = await invoke<OSCMessage[]>('get_addresses');
+        let msgDat = addresses.find(x => x.address == address);
+
+        if(!msgDat)return;
+
+        parameters = msgDat.values.map(x => { return { type: x.key, desc: '' }});
+        node.statics[1].value = parameters;
+      }
+
+      node.outputs.map(output => {
+        output.connections.map(partner => {
+          partner.connections = partner.connections.filter(x => x != output);
+        })
+      })
+      node.outputs = [];
+
+      node.outputs.push({
+        name: 'Flow',
+        type: NodeType.Flow,
+        connections: [],
+        parent: node,
+        index: 0
+      })
+
+      parameters.forEach(( dat: any, indx: number ) => {
+        let type: NodeType | null = null;
+
+        switch(dat.type){
+          case 'Int':
+            type = NodeType.Int;
+            break;
+          case 'Float':
+            type = NodeType.Float;
+            break;
+          case 'String':
+            type = NodeType.String;
+            break;
+          case 'Boolean':
+            type = NodeType.Boolean;
+            break;
+        }
+
+        if(type){
+          node.outputs.push({
+            name: dat.desc === '' ? dat.type : dat.desc,
+            type: type,
+            connections: [],
+            parent: node,
+            index: indx + 1
+          })
+        }
+      });
+
+      node.h = 60 + (parameters.length + 1) * 30;
+      NodeManager.Instance.UpdateConfig();
+    })();
+  }
+};

src/Nodes/Statics.tsx

···
+import { NodeDefinition } from "./Nodes";
+
+import { NodeStaticsInt } from "./Statics/Int";
+import { NodeStaticsString } from "./Statics/String";
+
+export let NodeStatics: NodeDefinition = {
+  isSingle: false,
+  name: 'Statics',
+  items: [
+    NodeStaticsInt,
+    NodeStaticsString
+  ]
+}

src/Nodes/Statics/Int.tsx

···
+import { Node, NodeType } from "../../structs/node";
+import { NodeDefinition } from "../Nodes";
+
+export let NodeStaticsInt: NodeDefinition = {
+  isSingle: true,
+  name: 'Int',
+  typeId: 'ifelse',
+
+  w: 200,
+  h: 85,
+
+  statics: [{
+    type: NodeType.Int,
+    name: 'Value',
+    value: null
+  }],
+
+  outputs: [{ name: "Int", type: NodeType.Int }],
+
+  onStaticsUpdate: ( _node: Node ) => {}
+}

src/Nodes/Statics/String.tsx

···
+import { Node, NodeType } from "../../structs/node";
+import { NodeDefinition } from "../Nodes";
+
+export let NodeStaticsString: NodeDefinition = {
+  isSingle: true,
+  name: 'String',
+  typeId: 'staticstring',
+
+  w: 200,
+  h: 85,
+
+  statics: [{
+    type: NodeType.String,
+    name: 'Value',
+    value: null
+  }],
+
+  outputs: [{ name: "String", type: NodeType.String }],
+
+  onStaticsUpdate: ( _node: Node ) => {}
+}

src/components/TabMenu.css

···
+.tab-menu{
+  position: fixed;
+  top: 70px;
+  left: 20px;
+  width: 200px;
+  z-index: 100;
+  height: calc(100vh - 100px);
+  background: #272e44;
+  border-radius: 20px;
+  padding: 5px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.tab{
+  border-radius: 10px;
+  padding: 8px 10px;
+  background: #fff0;
+  margin: 5px;
+  font-size: 14px;
+  transition: 0.5s;
+  user-select: none;
+  -webkit-user-select: none;
+  display: flex;
+  color: #cfcfcf;
+}
+
+.tab:hover{
+  background: #fff1;
+}
+
+.tab-selected{
+  border-radius: 10px;
+  padding: 8px 10px;
+  margin: 5px;
+  font-size: 14px;
+  transition: 0.5s;
+  user-select: none;
+  -webkit-user-select: none;
+  display: flex;
+  color: #cfcfcf;
+  background: #fff4;
+}
+
+.tab-selected > .tab-close{
+  opacity: 1;
+}
+
+.tab:hover > .tab-close{
+  opacity: 1;
+}
+
+.tab-meta{
+  width: calc(100% - 40px);
+  transform: translateY(1px);
+}
+
+.tab-meta-input{
+  color: #cfcfcf;
+  font-size: 14px;
+  width: 120px;
+  background: none;
+  outline: none;
+  border: none;
+  transform: translateY(-1px);
+}
+
+.tab-close{
+  opacity: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+}
+
+.tab-close:hover{
+  background: #fff3;
+}
+
+.tab-icon{
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+
+.tab-new-dropdown{
+  opacity: 0;
+  position: absolute;
+  width: 180px;
+  transform: translate(-10px, 35px);
+  border-radius: 10px;
+  background: #fff1;
+  transition: 0.1s;
+}

src/components/TabMenu.tsx

···
+import { createSignal, For, onMount } from 'solid-js';
+import './TabMenu.css';
+import { NodeManager } from '../Mangers/NodeManager';
+import { Tab } from '../structs/Tab';
+
+export let TabMenu = () => {
+  let [ tabImportOpen, setTabImportOpen ] = createSignal(false);
+  let [ tabs, setTabs ] = createSignal<Tab[]>([], { equals: false });
+
+  let closeTabImportMenu = () => {
+    window.removeEventListener('click', closeTabImportMenu);
+    setTabImportOpen(false);
+  }
+
+  onMount(() => {
+    NodeManager.Instance.HookTabUpdate(setTabs);
+  });
+
+  return (
+    <div class="tab-menu">
+      <For each={Object.values(tabs())}>
+        {
+          tab =>
+          <div class={ tab.selected() ? 'tab-selected ' : 'tab' }>
+            <div class="tab-icon" onClick={() => {
+              NodeManager.Instance.SelectTab(tab.id);
+            }}><img src="/assets/icons/pen-to-square-regular-full.svg" width="15" /></div>
+            <div class="tab-meta" onClick={() => {
+              NodeManager.Instance.SelectTab(tab.id);
+            }} onDblClick={( e ) => {
+              let input = <input class="tab-meta-input" value={ e.target.innerHTML } /> as HTMLInputElement;
+
+              e.target.innerHTML = '';
+              e.target.appendChild(input);
+
+              input.select();
+              input.onchange = () => {
+                NodeManager.Instance.RenameTab(tab.id, input.value);
+                e.target.innerHTML = input.value;
+              }
+            }}>{ tab.name }</div>
+            <div class="tab-close" onClick={() => {
+              NodeManager.Instance.CloseTab(tab.id);
+            }}><img src="/assets/icons/xmark-solid-full.svg" width="12" /></div>
+          </div>
+        }
+      </For>
+
+      <div class="tab" onClick={() => {
+        NodeManager.Instance.AddTab("Untitled");
+      }} onContextMenu={( e ) => {
+          e.preventDefault();
+          setTabImportOpen(true);
+
+          window.addEventListener('click', closeTabImportMenu);
+        }}>
+        <div class="tab-new-dropdown" style={{ opacity: tabImportOpen() ? 1 : 0 }}>
+          <div class="tab">Import from file</div>
+          <div class="tab">Import from URL</div>
+        </div>
+        <div class="tab-icon"><img src="/assets/icons/plus-solid-full.svg" width="15" /></div>
+        <div class="tab-meta">New Tab</div>
+      </div>
+    </div>
+  )
+}

src/index.tsx

···
 import App from "./App";
 
 import { NodeManager } from "./Mangers/NodeManager";
+new NodeManager();
 
 render(() => <App />, document.getElementById("root") as HTMLElement);
-
-new NodeManager();

src/renderer.ts

···
   ctx.bezierCurveTo(midpoint[0], midpoint[1], end[0], end[1], toX, toY);
 }
 
+export let renderNullTab = (
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D,
+) => {
+  ctx.fillStyle = '#fff';
+
+  ctx.font = '20px Arial';
+  ctx.textBaseline = 'middle';
+  ctx.textAlign = 'center';
+
+  let textX = lerp((canvas.width / -2) + 200, canvas.width / 2, 0.5);
+  let textY = lerp((canvas.height / -2) + 40, canvas.height / 2, 0.5);
+
+  ctx.font = '40px Arial';
+  ctx.fillText('Welcome to VRCMacros', textX, textY);
+
+  ctx.font = '20px Arial';
+  ctx.fillText('Create a new tab to get started!', textX, textY + 40);
+}
+
 let drawRoundedRect = ( ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, radius: number ) => {
   ctx.beginPath();
   ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);

src/structs/Tab.ts

···
+import { Accessor, Setter } from "solid-js";
+import { Node } from "./node";
+
+export interface Tab{
+  name: string,
+  id: string,
+  nodes: Node[],
+  selected: Accessor<boolean>,
+  setSelected: Setter<boolean>
+}

src/structs/node.ts

···
-export interface Node{
-  name: string,
-  id: number,
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  inputs: NodeIO[],
-  outputs: NodeIO[],
-  selected: boolean,
-  statics: NodeStatic[],
-  onStaticsUpdate: ( node: Node ) => void
+import { NodeDefinition } from "../Nodes/Nodes";
+
+export class Node{
+  name: string;
+  id: string;
+  typeId: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  inputs: NodeIO[];
+  outputs: NodeIO[];
+  selected: boolean;
+  statics: NodeStatic[];
+  onStaticsUpdate: ( node: Node ) => void;
+
+  constructor( pos: [ number, number ], node: NodeDefinition, id: string ){
+    this.name = node.name;
+    this.id = id;
+    this.typeId = node.typeId!;
+    this.x = pos[0];
+    this.y = pos[1];
+    this.w = node.w!;
+    this.h = node.h!;
+
+    this.inputs = node.inputs ? node.inputs.map(( x, indx ) => {
+      return {
+        name: x.name,
+        type: x.type,
+        connections: [],
+        parent: this,
+        index: indx
+      }
+    }) : [];
+
+    this.outputs = node.outputs ? node.outputs.map(( x, indx ) => {
+      return {
+        name: x.name,
+        type: x.type,
+        connections: [],
+        parent: this,
+        index: indx
+      }
+    }) : [];
+
+    this.selected = false;
+    this.statics = node.statics!,
+    this.onStaticsUpdate = node.onStaticsUpdate!;
+  }
 }
 
 export interface NodeIO{

src/utils/interections.ts

···
 import { PositionInfo } from "../renderer";
 
-export let screenToWorldSpace = ( canvas: HTMLCanvasElement, position: PositionInfo, pointX: number, pointY: number ) => {
+export let screenToWorldSpace = ( canvas: HTMLCanvasElement, position: PositionInfo, pointX: number, pointY: number ): [ number, number ] => {
   let startX = canvas.width / -2;
   let startY = canvas.height / -2;