diff --git a/backend/app/controllers/vcelldb_controller.py b/backend/app/controllers/vcelldb_controller.py
index a95668a..a9563ea 100644
--- a/backend/app/controllers/vcelldb_controller.py
+++ b/backend/app/controllers/vcelldb_controller.py
@@ -6,6 +6,7 @@
     fetch_biomodels,
     fetch_simulation_details,
     get_vcml_file,
+    get_bngl_file,
     get_sbml_file,
     get_diagram_url,
     get_diagram_image,
@@ -71,6 +72,20 @@ async def get_vcml_controller(biomodel_id: str, truncate: bool = False) -> str:
         raise HTTPException(status_code=500, detail="Error fetching VCML URL.")
 
 
+async def get_bngl_controller(biomodel_id: str) -> dict:
+    """
+    Controller function to fetch the contents of the BNGL file for a biomodel.
+    Returns:
+        dict: Contains the BNGL data or empty if not rule-based.
+    """
+    try:
+        bngl_content = await get_bngl_file(biomodel_id)
+        return {"data": bngl_content}
+    except Exception as e:
+        # For BNGL, we want to return empty data instead of error for non-rule-based models
+        return {"data": ""}
+
+
 async def get_sbml_controller(biomodel_id: str) -> str:
     """
     Controller function to fetch the contents of the SBML file for a biomodel.
diff --git a/backend/app/routes/vcelldb_router.py b/backend/app/routes/vcelldb_router.py
index a4ad835..608d78f 100644
--- a/backend/app/routes/vcelldb_router.py
+++ b/backend/app/routes/vcelldb_router.py
@@ -5,6 +5,7 @@
     get_biomodels_controller,
     get_simulation_details_controller,
     get_vcml_controller,
+    get_bngl_controller,
     get_sbml_controller,
     get_diagram_url_controller,
     get_diagram_image_controller,
@@ -51,6 +52,15 @@ async def get_vcml(biomodel_id: str, truncate: bool = False):
         raise e
 
 
+@router.get("/biomodel/{biomodel_id}/biomodel.bngl", response_model=dict)
+async def get_bngl(biomodel_id: str):
+    """
+    Endpoint to get BNGL file contents for a given biomodel.
+    Returns empty data if the model is not rule-based.
+    """
+    return await get_bngl_controller(biomodel_id)
+
+
 @router.get("/biomodel/{biomodel_id}/biomodel.sbml", response_model=str)
 async def get_sbml(biomodel_id: str):
     """
diff --git a/backend/app/services/databases_service.py b/backend/app/services/databases_service.py
index 5d94bf1..cc566e9 100644
--- a/backend/app/services/databases_service.py
+++ b/backend/app/services/databases_service.py
@@ -319,6 +319,92 @@ async def get_vcml_file(
     )
 
 
+@observe(name="GET_BNGL_FILE")
+async def get_bngl_file(
+    biomodel_id: str, max_retries: int = 3
+) -> str:
+    """
+    Fetches the BNGL file content for a given biomodel with retry logic.
+
+    Args:
+        biomodel_id (str): ID of the biomodel.
+        max_retries (int): Maximum number of retry attempts.
+    Returns:
+        str: BNGL content of the biomodel, or empty string if not rule-based.
+    """
+    logger.info(f"Fetching BNGL file for biomodel: {biomodel_id}")
+
+    # Check connectivity first
+    if not await check_vcell_connectivity():
+        logger.error(
+            "VCell API is not reachable. Please check your network connection and DNS settings."
+        )
+        raise Exception(
+            "VCell API is not reachable. Please check your network connection and DNS settings."
+        )
+
+    for attempt in range(max_retries + 1):
+        try:
+            url = f"{VCELL_API_BASE_URL}/biomodel/{biomodel_id}/biomodel.bngl"
+            logger.info(
+                f"Requesting URL: {url} (attempt {attempt + 1}/{max_retries + 1})"
+            )
+
+            async with httpx.AsyncClient(timeout=30.0) as client:
+                response = await client.get(url)
+                logger.info(f"Response status: {response.status_code}")
+                logger.info(f"Response headers: {dict(response.headers)}")
+                
+                if response.status_code == 404:
+                    logger.info(f"BNGL not available for biomodel {biomodel_id}")
+                    return ""
+                
+                response.raise_for_status()
+                bngl_content = response.text.strip()
+                
+                # Check if content is empty or minimal (some models might return empty BNGL)
+                if not bngl_content or len(bngl_content) < 50:
+                    logger.info(f"Empty or minimal BNGL content for biomodel {biomodel_id}")
+                    return ""
+                
+                return bngl_content
+
+        except httpx.HTTPStatusError as e:
+            if e.response.status_code == 404:
+                logger.info(f"BNGL not available for biomodel {biomodel_id} (404 error)")
+                return ""
+            logger.error(
+                f"HTTP error fetching BNGL file for biomodel {biomodel_id}: {e.response.status_code} - {e.response.text}"
+            )
+            if attempt == max_retries:
+                raise e
+            logger.warning(f"Retrying in {2 ** attempt} seconds...")
+            await asyncio.sleep(2**attempt)
+
+        except httpx.RequestError as e:
+            logger.error(
+                f"Request error fetching BNGL file for biomodel {biomodel_id}: {str(e)}"
+            )
+            if attempt == max_retries:
+                raise e
+            logger.warning(f"Retrying in {2 ** attempt} seconds...")
+            await asyncio.sleep(2**attempt)
+
+        except Exception as e:
+            logger.error(
+                f"Unexpected error fetching BNGL file for biomodel {biomodel_id}: {str(e)}"
+            )
+            if attempt == max_retries:
+                raise e
+            logger.warning(f"Retrying in {2 ** attempt} seconds...")
+            await asyncio.sleep(2**attempt)
+
+    # This should never be reached, but just in case
+    raise Exception(
+        f"Failed to fetch BNGL file for biomodel {biomodel_id} after {max_retries + 1} attempts"
+    )
+
+
 @observe(name="GET_SBML_FILE")
 async def get_sbml_file(biomodel_id: str) -> str:
     """
diff --git a/frontend/app/search/[bmid]/page.tsx b/frontend/app/search/[bmid]/page.tsx
index cc16d0f..4c2e110 100644
--- a/frontend/app/search/[bmid]/page.tsx
+++ b/frontend/app/search/[bmid]/page.tsx
@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/collapsible";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ChatBox } from "@/components/ChatBox";
+import { BnglVisualizerSection } from "@/components/BnglVisualizerSection";
 import {
   User,
   Lock,
@@ -493,6 +494,9 @@ export default function BiomodelDetailPage() {
                   />
                 </div>
                 
+                {/* BNGL Visualization Section */}
+                <BnglVisualizerSection biomodelId={data.bmKey} />
+                
                 {/* Description Section */}
                 <Collapsible className="mb-6" defaultOpen>
                   <CollapsibleTrigger asChild>
diff --git a/frontend/components/BnglVisualizerSection.tsx b/frontend/components/BnglVisualizerSection.tsx
new file mode 100644
index 0000000..50f489b
--- /dev/null
+++ b/frontend/components/BnglVisualizerSection.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useState, useRef } from "react";
+import { Network, Loader2 } from "lucide-react";
+
+interface BnglVisualizerSectionProps {
+  biomodelId: string;
+}
+
+export const BnglVisualizerSection: React.FC<BnglVisualizerSectionProps> = ({
+  biomodelId,
+}) => {
+  const [bnglData, setBnglData] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [isVisible, setIsVisible] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    const fetchBnglData = async () => {
+      setIsLoading(true);
+      setError("");
+      try {
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+        const res = await fetch(`${apiUrl}/biomodel/${biomodelId}/biomodel.bngl`);
+
+        if (res.ok) {
+          const data = await res.json();
+          if (data.data && data.data.trim()) {
+            setBnglData(data.data);
+            setIsVisible(true);
+          } else {
+            // Model is not rule-based, don't show the section
+            setIsVisible(false);
+          }
+        } else {
+          // Error fetching, don't show the section
+          setIsVisible(false);
+        }
+      } catch (err) {
+        // Error fetching, don't show the section
+        setIsVisible(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (biomodelId) {
+      fetchBnglData();
+    }
+  }, [biomodelId]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data === 'bnglviz-ready' && bnglData && iframeRef.current) {
+        // Send BNGL data to iframe
+        iframeRef.current.contentWindow?.postMessage(bnglData, '*');
+      }
+    };
+
+    if (isVisible && bnglData) {
+      window.addEventListener('message', handleMessage);
+      return () => window.removeEventListener('message', handleMessage);
+    }
+  }, [bnglData, isVisible]);
+
+  // Don't render anything if loading, error, or not visible
+  if (isLoading || error || !isVisible || !bnglData) {
+    return null;
+  }
+
+  return (
+    <div className="bg-white border border-slate-200 rounded-lg shadow-sm overflow-hidden">
+      <div className="bg-slate-50 border-b border-slate-200 px-4 py-3">
+        <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
+          <Network className="h-4 w-4" />
+          BNGL Visualization
+        </h3>
+      </div>
+      <div className="p-4">
+        <div className="bg-slate-50 border border-slate-200 rounded-lg overflow-hidden">
+          <iframe
+            ref={iframeRef}
+            src="/bnglviz/index.html"
+            className="w-full h-[600px] border-0"
+            title="BNGL Visualization"
+            sandbox="allow-scripts allow-same-origin"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/frontend/public/bnglviz/bngl-extractor.js b/frontend/public/bnglviz/bngl-extractor.js
new file mode 100644
index 0000000..ca220dc
--- /dev/null
+++ b/frontend/public/bnglviz/bngl-extractor.js
@@ -0,0 +1,741 @@
+class BNGLNewLineIndex {
+  constructor(index, afterSymbol, stringLength) {
+    this.index = index;
+    this.afterSymbol = afterSymbol;
+    this.stringLength = stringLength;
+  }
+}
+
+//unfortunitley these need to be outside of any classes bec of var semantics
+function isBondPlus(s, c) {
+  let exclamation = c - 1 >= 0 && s[c - 1] == "!";
+  return s[c] == "+" && exclamation;
+}
+
+function isBondMinus(s, c) {
+  let exclamation = c - 1 >= 0 && s[c - 1] == "!";
+  return s[c] == "-" && exclamation;
+}
+
+function isReactionPlus(s, c) {
+  return s[c] == "+" && !isBondPlus(s, c);
+}
+
+function isReactionForward(s, c) {
+  let forward = c + 1 <= s.length && s[c + 1] == ">";
+  return s[c] == "-" && forward && !isBondMinus(s, c);
+}
+
+function isReactionBack(s, c) {
+  let forward = c + 1 <= s.length && s[c + 1] == "-";
+  return s[c] == "<" && forward;
+}
+
+function isReactionEquib(s, c) {
+  let mid = c + 1 <= s.length && s[c + 1] == "-";
+  let forward = c + 2 <= s.length && s[c + 2] == ">";
+  return s[c] == "<" && mid && forward;
+}
+
+function isSign(s, c) {
+  return isReactionForward(s, c) || isReactionBack(s, c) || isReactionEquib(s, c);
+}
+
+function isReactionSymbol(s, c) {
+  return isReactionPlus(s, c) ||  isSign(s, c);
+}
+
+function notSymbolOrWhitespace(s, c) {
+  return !(isReactionSymbol(s, c) || /\s/.test(s[c]));
+}
+
+//returns index of first whitespace OR # OR + OR reaction sign
+function isWhitespace(s, c) {
+  return /\s/.test(s[c]) || s[c] === "#" || isReactionPlus(s, c) || isSign(s, c);
+}
+
+//assumes:
+//nothing starts with a number except first term
+//"\" is only used to denote multi line definitions
+//there is some whitespace before all "\" newline declarations
+//there is only 1 "\" newline declaration per BNGL definition
+//no molecule definitions include "-" or "<"
+window.BNGLExtractor = class BNGLExtractor {
+
+  constructor(mm) {
+    this.mm = mm;
+    //these funcs are defined above bec of var semantics
+    this.isWhitespace = isWhitespace;
+    this.isBondPlus = isBondPlus;
+    this.isBondMinus = isBondMinus;
+    this.isReactionPlus = isReactionPlus;
+    this.isReactionForward = isReactionForward;
+    this.isReactionBack = isReactionBack;
+    this.isReactionEquib = isReactionEquib;
+    this.isSign = isSign;
+    this.isReactionSymbol = isReactionSymbol;
+    this.notSymbolOrWhitespace = notSymbolOrWhitespace;
+  }
+
+  //doen't include special case for comments like isWhitespace
+  isNotWhitespace(s, c) {
+    return !/\s/.test(s[c]);
+  }
+
+  isComment(s, c) {
+    return s[c] === "#";
+  }
+
+  isNewLine(s, c) {
+    if (c == s.length - 1) {
+      return false;
+    } else {
+      return (s[c] == "\\" && /\s/.test(s[c + 1]));
+    }
+  }
+
+  getSign(s, c) {
+    if (this.isReactionEquib(s, c)) {
+      return "<->";
+    } else if (this.isReactionForward(s, c)) {
+      return "->";
+    } else if (this.isReactionBack(s, c)) {
+      return "<-";
+    } else {
+      throw "error: unrecognised reaction sign";
+    }
+  }
+
+  wordHasChar(s, index, char) {
+    if (this.isWhitespace(s[index])) {
+      return false;
+    }
+    let end = this.nextOccur(s, index, this.isWhitespace);
+    let word = s.slice(index, end);
+    return word.includes(char);
+  }
+
+  wordHasParenthesis(s, index) {
+    return this.wordHasChar(s, index, ")");
+  }
+
+  isReactionTitle(s, index) {
+    if (index === undefined) {
+      return s.includes(":") && !s.includes("@");
+    } else {
+      let hasAt = this.wordHasChar(s, index, "@");
+      let hasColon = this.wordHasChar(s, index, ":");
+      return !hasAt && hasColon;
+    }
+  }
+
+  getNewLineIndex(reactants, products, sign) {
+    return ((sign != undefined) ? 1: 0) + reactants.length + products.length;
+  }
+
+  //next occurance of char in string
+  nextOccur(string, index, boolExpr, backwards = false, mod = 0) {
+    index++;
+    let len = string.length;
+    let direction;
+    if (backwards) {
+      direction = -1;
+    } else {
+      direction = 1;
+    }
+    while (index < len && index >= 0) {
+      if (boolExpr(string.slice(index, string.length), 0)) {
+        return index + mod;
+      }
+      index += direction;
+    }
+    return ((backwards) ? -1: len);
+  }
+
+  //used for all cases except reactions and observables
+  extractSingleLineBNGL(s) {
+    //initialize vars
+    let c = 0;
+    let len = s.length;
+    let char;
+    let bngl, conc, comm;
+    //parse
+    while (c < len) {
+      char = s[c];
+      //is comment
+      if (char == "#") {
+        comm = s.slice(c, len);
+        break;
+      }
+      //starts with number
+      if ((!bngl) && (!isNaN(parseFloat(char)))) {
+        c = this.nextOccur(s, c, this.isWhitespace);
+        continue;
+      }
+      //is whitespace
+      if (this.isWhitespace(s, c)) {
+        c = this.nextOccur(s, c, this.isNotWhitespace);
+        continue;
+      }
+      //is non-whitespace and non-comment
+      if ((!bngl) && this.isNotWhitespace(s, c)) {
+        let n = this.nextOccur(s, c, this.isWhitespace, false, -1);
+        bngl = s.slice(c, n + 1);
+        c = n + 1;
+        continue;
+      }
+      //start concentration
+      if (bngl && this.isNotWhitespace(s, c)) {
+        let n = this.nextOccur(s, c, this.isWhitespace, false, -1);
+        conc = s.slice(c, n + 1);
+        c = n;
+      }
+      //if at end
+      if (c >= len - 1) {
+        break;
+      }
+      c++;
+    }
+    return {
+      bngl: (bngl == null) ? "" : bngl,
+      conc: (conc == null) ? "" : conc,
+      comment: (comm == null) ? "" : comm
+    };
+  }
+
+  //used for both reactions and observables
+  extractSingleLineReaction(s, line, type = "") {
+    //initialize vars
+    let c = 0;
+    let len = s.length;
+    let char, sign;
+    let products = [];
+    let reactants = [];
+    let rate = "";
+    let comment = "";
+    let observType = "";
+    let newLines = [];
+    let wasPlus = true;
+    let isObservable = type == "observables";
+    let hasReadType = !isObservable;
+    //parse
+    let iter = -1;
+    while (c < len) {
+      char = s[c];
+      //is comment
+      if (char == "#") {
+        comment = s.slice(c, len);
+        break;
+      }
+      //starts with number (might need to add something like this to extract bngl)
+      if ((!isNaN(parseFloat(char))) && c <= this.nextOccur(s, 0, this.isNotWhitespace) && (this.nextOccur(s, c, this.isReactionSymbol) > this.nextOccur(s, c, this.notSymbolOrWhitespace))) {
+        c = this.nextOccur(s, c, this.isWhitespace);
+        continue;
+      }
+      //is reaction plus
+      if (this.isReactionPlus(s, c)) {
+        c += 1;
+        wasPlus = true;
+        continue;
+      }
+      //is bond plus
+      if (this.isBondPlus(s, c)) {
+        //c = this.nextOccur(s, c, this.isWhitespace);
+        let n = this.nextOccur(s, c, this.isWhitespace);
+        let molcEnd = s.slice(c, n);
+        if (!sign) {
+          reactants[reactants.length - 1] = reactants[reactants.length - 1] + molcEnd;
+        } else {
+          products[products.length - 1] = products[products.length - 1] + molcEnd;
+        }
+        c = n;
+        continue;
+      }
+      //is new line
+      if (char === "\\") {
+        c++;
+        newLines.push(
+          new BNGLNewLineIndex(
+            this.getNewLineIndex(reactants, products, sign),
+            wasPlus,
+            len
+          )
+        );
+        continue;
+      }
+      //is title
+      if (this.isReactionTitle(s, c)) {
+        c = this.nextOccur(s, c, this.isWhitespace);
+        continue;
+      }
+      //is sign
+      if (this.isSign(s, c)) {
+        sign = this.getSign(s, c);
+        c += sign.length;
+        wasPlus = true;
+        continue;
+      }
+      //is whitespace
+      if (this.isWhitespace(s, c)) {
+        c = this.nextOccur(s, c, this.isNotWhitespace);
+        continue;
+      }
+      //is observable type
+      if (!hasReadType && reactants.length == 0 && sign == undefined && this.isNotWhitespace(s, c)) {
+        let n = this.nextOccur(s, c, this.isWhitespace);
+        observType = s.slice(c, n);
+        if (observType.toLowerCase() != "molecules" && observType.toLowerCase() != "species") {
+          return {comment: "Error in line " + line + ". Observable has no type."}
+        }
+        hasReadType = true;
+        c = n;
+        continue;
+      }
+      //is product or reactant
+      if (this.isNotWhitespace(s, c) && wasPlus || isObservable) {
+        if (isObservable && reactants.length > 1) {
+          newLines.push(
+            new BNGLNewLineIndex(
+              this.getNewLineIndex(reactants, products, sign) - 1,
+              wasPlus,
+              len
+            )
+          );
+        } else {
+          wasPlus = false;
+        }
+        let n = this.nextOccur(s, c, this.isWhitespace, false, -1);
+        if (!sign) {
+          reactants.push(s.slice(c, n + 1));
+        } else {
+          products.push(s.slice(c, n + 1));
+        }
+        c = n + 1;
+        continue;
+      }
+      //is rate
+      if (this.isNotWhitespace(s, c) && !wasPlus) {
+        let n = this.nextOccur(s, c, this.isComment, false, -1);
+        rate += " " + s.slice(c, n + 1);
+        c = n;
+      }
+      //if at end
+      if (c >= len - 1) {
+        break;
+      }
+      c++;
+    }
+    //handle observables special cases
+    if (isObservable) {
+      if (reactants.length > 1) {
+        //use rate to hold observable unique data
+        let name = reactants.splice(0, 1)[0];
+        rate = {type: observType, name: name};
+      } else {
+        rate = {type: "", name: observType};
+      }
+    } else if (!rate) {
+      rate = "";
+    }
+    return {
+      reactants: (reactants) ? reactants : [],
+      products: (products) ? products : [],
+      sign: (sign) ? sign : "",
+      rate: rate,
+      comment: (comment.trim()) ? comment.trim() : "",
+      newLines: (newLines) ? newLines : []
+    };
+  }
+
+  extractCompartments(s) {
+    //initialize vars
+    let c = 0;
+    let len = s.length;
+    let char;
+    let name, dimension, size, comment;
+    //parse
+    while (c < len) {
+      char = s[c];
+      //is comment
+      if (char == "#") {
+        comment = s.slice(c, len);
+        break;
+      }
+      //starts with number
+      if ((!name) && (!isNaN(parseFloat(char)))) {
+        c = this.nextOccur(s, c, this.isWhitespace);
+        continue;
+      }
+      //is whitespace
+      if (this.isWhitespace(s, c)) {
+        c = this.nextOccur(s, c, this.isNotWhitespace);
+        continue;
+      }
+      //is non-whitespace and non-comment
+      if (this.isNotWhitespace(s, c)) {
+        let n = this.nextOccur(s, c, this.isWhitespace, false, -1);
+        if (!name) {
+          name = s.slice(c, n + 1);
+        } else if(!dimension) {
+          dimension = s.slice(c, n + 1);
+        } else if(!size) {
+          size = s.slice(c, n + 1);
+        }
+        c = n + 1;
+        continue;
+      }
+      //if at end
+      if (c >= len - 1) {
+        break;
+      }
+      c++;
+    }
+    return {
+      name: (name == null) ? "" : name,
+      dimension: (dimension == null) ? "" : dimension,
+      size: (size == null) ? "" : size,
+      comment: (comment == null) ? "" : comment,
+    };
+  }
+
+  //extract comments
+  extractComment(s) {
+    let c = this.nextOccur(s, 0, (s)=>{return (s === "#")});
+    if (c >= 0) {
+      return s.slice(c).trim();
+    } else {
+      return "";
+    }
+  }
+
+  extractComments(bnglStr, sectionTokenList) {
+    //helper function to get lines between sections
+    function removeSection(bnglStr, firstTokens, lastTokens, returnString=false) {
+      let firstIndex, lastIndex;
+      if (firstTokens != -1) {
+        for (let i = 0; i < firstTokens.length; i++) {
+          let firstToken = firstTokens[i];
+          if (bnglStr.includes("end " + firstToken)) {
+            firstIndex = bnglStr.indexOf("end " + firstToken) + firstToken.length + 4;
+            break;
+          }
+        }
+      }
+      if (lastTokens != -1) {
+        for (let i = 0; i < lastTokens.length; i++) {
+          let lastToken = lastTokens[i];
+          if (bnglStr.includes("begin " + lastToken)) {
+            lastIndex = bnglStr.indexOf("begin " + lastToken);
+            break;
+          }
+        }
+      }
+      if (firstIndex < 0 || lastIndex < 0) {
+        return "";
+      }
+      if (firstTokens == -1) {
+        if (lastIndex >= 0) {
+          return bnglStr.slice(0, lastIndex);
+        } else {
+          return "";
+        }
+      }
+      if (!returnString) {
+        if (lastTokens == -1) {
+          if (firstIndex >= 0) {
+            return bnglStr.slice(firstIndex, bnglStr.length);
+          } else {
+            return "";
+          }
+        }
+        return bnglStr.slice(firstIndex, lastIndex);
+      } else {
+        if (lastTokens == -1) {
+          if (firstIndex >= 0) {
+            return bnglStr.slice(0, lastIndex);
+          } else {
+            return "";
+          }
+        }
+        return bnglStr.slice(0, lastIndex) + bnglStr.slice(firstIndex, bnglStr.length);
+      }
+    }
+    //remove parameters and commends after last end block
+    bnglStr = removeSection(bnglStr, ["parameters"], ["parameters"], true);
+    //remove sections that don't exist
+    let firstExantSectionIndex;
+    for (let i = 0; i < sectionTokenList.length; i++) {
+      let tokenGroup = sectionTokenList[i];
+      let sectionExists;
+      for (let j = 0; j < tokenGroup.length; j++) {
+        let token = tokenGroup[j];
+        sectionExists = false;
+        if (bnglStr.includes("begin " + token)) {
+          sectionExists = true;
+          break;
+        }
+      }
+      if (sectionExists) {
+        firstExantSectionIndex = i;
+        break;
+      }
+    }
+    if (firstExantSectionIndex == undefined) {
+      firstExantSectionIndex = 0;
+    }
+    sectionTokenList = sectionTokenList.slice(firstExantSectionIndex, sectionTokenList.length);
+    //compile cleaned strings between sections
+    let cleanStrings = [];
+    let len = sectionTokenList.length;
+    for (let j = 0; j <= len - 1; j++) {
+      let firstTokens = ((j ==  0) ? -1: sectionTokenList[j - 1]);
+      let lastTokens = ((j ==  len) ? -1: sectionTokenList[j]);
+      cleanStrings.push(removeSection(bnglStr, firstTokens, lastTokens));
+      //add blank elements where sections are missing
+      if (j == 0) {
+        for (let i = 0; i < firstExantSectionIndex; i++) {
+          cleanStrings.push("");
+        }
+      }
+    }
+    //extract comment lines of each string
+    let output = [];
+    for (let i = 0; i < cleanStrings.length; i++) {
+      output.push([]);
+      let s = cleanStrings[i];
+      let lines = s.split("\n");
+      lines.forEach((line, j) => {
+        let comment = this.extractComment(line);
+        if (comment) {
+          output[i].push(comment);
+        }
+      });
+    }
+    return output;
+  }
+
+  //combine separated mutiline defintions
+  combineArrays(array) {
+    function evaluateCombinations(index, list, indexMod = 0) {
+      let elm = list[index];
+      let str = elm.str;
+      let toAppend = elm.toAppend;
+      if (!toAppend) {
+        return {
+          str: str,
+          indexMod: indexMod
+        };
+      } else {
+        let cutIndex = elm.cutIndex;
+        indexMod++;
+        let recursiveResult = evaluateCombinations(index + 1, list, indexMod);
+        return {
+          str: str.slice(0, cutIndex + 1) + recursiveResult.str,
+          indexMod: recursiveResult.indexMod
+        };
+      }
+    }
+    let output = [];
+    for (let i = 0; i < array.length; i++) {
+      let result = evaluateCombinations(i, array);
+      output.push(result.str);
+      i += result.indexMod;
+    }
+    return output;
+  }
+
+  //extract bngl element
+  extractBNGL(bnglStr, elmStrList, type = "") {
+    let bngls = [];
+    let toDelete = [];
+    let specialType = type == "reactions" || type == "observables";
+    let isCompartment = type == "compartments";
+    for (let i = 0; i < elmStrList.length; i++) {
+      let elmStr = elmStrList[i];
+      let beginToken = "begin " + elmStr;
+      let startIndex = bnglStr.indexOf(beginToken);
+      if (startIndex >= 0) {
+        //get line number
+        let cutBNGLStr = bnglStr.slice(0, startIndex);
+        let startingLine = cutBNGLStr.split("\n").length;
+        //standerdize new lines
+        let c = 0;
+        let newLineIndexes = [];
+        while (c < bnglStr.length - 2) {
+          if (this.isNewLine(bnglStr, c)) {
+            newLineIndexes.push(c);
+          }
+          c++;
+        }
+        //find first new line
+        let nlDist = 0;
+        while (bnglStr[startIndex + beginToken.length + nlDist] != "\n") {
+          nlDist += 1;
+        }
+        //split by line
+        let endIndex = bnglStr.indexOf("\n" + "end " + elmStr);
+        let sliced = bnglStr.slice(
+          startIndex + nlDist + beginToken.length + 1,
+          endIndex
+        );
+        bngls = bngls.concat(sliced.split("\n"));
+        //manage multi line definitions
+        let newArr = [];
+        for (let u = 0; u < bngls.length; u++) {
+          let bngl = bngls[u];
+          let cutIndex = ((typeof bngl == "string")? bngl.indexOf("\\"): -1);
+          if (cutIndex >= 0) {
+            newArr.push(
+              {str: bngl, toAppend: true, cutIndex: cutIndex}
+            );
+            continue;
+          }
+          newArr.push({str: bngl, toAppend: false});
+        }
+        bngls = this.combineArrays(newArr);
+        //do actual extraction for each line
+        for (let u = 0; u < bngls.length; u++) {
+          let data;
+          if (specialType) {
+            bngls[u] = ((type == "observables") ? bngls[u].replace(/\n/g, "").replace(/\\/g, ""): bngls[u]);
+            data = this.extractSingleLineReaction(bngls[u], startingLine + u + 1, type);
+          } else if (isCompartment) {
+            data = this.extractCompartments(bngls[u]);
+          } else {
+            data = this.extractSingleLineBNGL(bngls[u]);
+          }
+          bngls[u] = data;
+          //mark empty strings for deletion
+          let isEmpty = true;
+          let onlyComment = false;
+          let dataAsList = Object.entries(data);
+          let len = dataAsList.length;
+          let hasContent;
+          if (specialType) {
+            hasContent = (elm)=> {
+              //if not empty string, or not empty list
+              return ((typeof elm === "string" && elm.trim() != "") || elm.length > 0);
+            };
+          } else {
+            hasContent = (elm)=>{return (!!elm.trim());};
+          }
+          for (let y = 0; y < len; y++) {
+            let pair = dataAsList[y];
+            let key, elm;
+            [key, elm] = pair;
+            //if string has content
+            if (elm && hasContent(elm)) {
+              //if comment is only content
+              if (key == "comment") {
+                isEmpty = false;
+                onlyComment = true;
+              } else {
+                //if there is non comment content
+                isEmpty = false;
+              }
+              break;
+            }
+          }
+          if (isEmpty) {
+            toDelete.push(bngls[u]);
+          }
+          if (onlyComment) {
+            if (type == "reactions" || type == "observables") {
+              bngls[u] = bngls[u].comment;
+            } else {
+              bngls[u] = bngls[u].comment;
+            }
+          }
+        }
+        //if begin token not found
+        } else {
+          continue;
+        }
+      }
+    //delete empty strings
+    this.arrayRemoveAll(bngls, toDelete);
+    return bngls;
+  }
+
+  //remove item from array
+  arrayRemove(arr, value) {
+    var index = arr.indexOf(value);
+    if (index > -1) {
+      arr.splice(index, 1);
+    }
+    return arr;
+  }
+
+  //remove list of items from array
+  arrayRemoveAll(arr, toDelete) {
+    for (let u = 0; u < toDelete.length; u++) {
+      this.arrayRemove(arr, toDelete[u]);
+    }
+  }
+
+  //compile reaction extraction output into bngl string
+  compileBNGL(data, type = "", observData = {}) {
+    let observType = observData.type;
+    let observName = observData.name;
+    let reactants, products, sign, newLines;
+    let list = Object.values(data);
+    [reactants, products, sign] = list;
+    newLines = data.newLines;
+    //add compartments
+    reactants.forEach((item, i) => {
+      if (this.mm.hasMoleculeWithCompartment(item)) {
+        reactants[i] = "@" + this.mm.getCompartment(item) + ":" + reactants[i];
+      }
+    });
+    //add polymers
+    if (type == "observables") {
+      reactants.forEach((item, i) => {
+        if (this.mm.hasPolymer(observName)) {
+          reactants[i] += this.mm.getPolymer(observName);
+        }
+      });
+    }
+    products.forEach((item, i) => {
+      if (this.mm.hasMoleculeWithCompartment(item)) {
+        products[i] = "@" + this.mm.getCompartment(item) + ":" + products[i];
+      }
+    });
+    if (type == "observables") {
+      return list[0].join(" ");
+    }
+    //add new lines
+    let condensedList = reactants.concat([sign]).concat(products);
+    for (let i = 0; i < newLines.length; i++) {
+      condensedList.splice(newLines[i].index + i, 0, "\n");
+    }
+    //remove trailing new lines
+    while (condensedList[condensedList.length - 1] === "\n") {
+      condensedList.pop();
+    }
+    //add "+" signs
+    let len = condensedList.length;
+    for (let i = 0; i < len; i++) {
+      let elm = condensedList[i];
+      if (!(elm.includes("-") || elm === "\n")) {
+        condensedList.splice(i + 1, 0, "+");
+        i++;
+      }
+      //this was causing bug when there are no products
+      //idk if its needed
+      //remove trailing "+" signs
+      /*if (elm.includes("-")) {
+        condensedList.splice(i - 1, 1);
+        i--;
+      }*/
+    }
+    //remove last "+" sign
+    if (condensedList[condensedList.length - 1] == "+") {
+      condensedList.pop();
+    }
+    let output = condensedList.join("");
+    //remove reaction trailing "+" sign
+    output = output.replace("+<", "<");
+    output = output.replace("+-", "-");
+    return output;
+  }
+}
diff --git a/frontend/public/bnglviz/html-interface.js b/frontend/public/bnglviz/html-interface.js
new file mode 100644
index 0000000..e8bcbfc
--- /dev/null
+++ b/frontend/public/bnglviz/html-interface.js
@@ -0,0 +1,595 @@
+//manage ids
+class IDManager {
+  constructor() {
+    this.nextID = -1;
+  }
+
+  getID() {
+    this.nextID++;
+    return this.nextID;
+  }
+}
+
+class HTMLInterface {
+  constructor(htmlBody, canvasDiv, tableDiv, fileInput, loadingText) {
+    //declare html elms
+    this.htmlBody = htmlBody;
+    this.canvasDiv = canvasDiv;
+    this.tableDiv = tableDiv;
+    this.fileInput = fileInput;
+    this.loadingText = loadingText;
+    //set max dimensions for canvases (normally 4000, 180)
+    this.maxWidth = 10000;
+    this.maxHeight = 250;
+    //set bngl begin tokens
+    this.compartmentTokens = ["compartments"];
+    this.moleculeTokens = [
+      "molecule types",
+      "molecular types",
+      "molecule_types",
+      "molecular_types",
+      "molecules",
+      "molecule"
+    ];
+    this.speciesTokens = [
+      "species",
+      "seed species",
+      "seed_species",
+      "seeds"
+    ];
+    this.observablesTokens = ["observables"];
+    this.reactionTokens = [
+      "reaction rules",
+      "reaction_rules",
+      "reactions",
+      "rules"
+    ];
+    this.polymerTokens = ["<", "<=", ">", ">=", "=="];
+    this.sectionTokens = [
+      this.compartmentTokens,
+      this.moleculeTokens,
+      this.speciesTokens,
+      this.observablesTokens,
+      this.reactionTokens
+    ]
+
+    //create section token map
+    this.sectionTokenMap = {};
+    this.sectionTokens.forEach((item, i) => {
+      let val;
+      if (i == 0) {
+        val = "compartments";
+      } else if (i == 1) {
+        val = "molecules";
+      } else if (i == 2) {
+        val = "species";
+      } else if (i == 3) {
+        val = "observables";
+      } else if (i == 4) {
+        val = "reactions";
+      }
+      this.sectionTokenMap[item.toString()] = val;
+    });
+
+    //other global var declaration
+    this.mm = new MoleculeManager();
+    this.be = new BNGLExtractor(this.mm);
+    this.canvasHTMLGraphicMap = {};
+    this.idManager = new IDManager();
+    this.currentBlob;
+
+    //set mode to dark mode initially
+    this.darkMode = false;
+    this.applyDarkMode();
+  }
+
+  applyDarkMode() {
+    //recompile list of elms
+    let allElms = body.getElementsByTagName("*");
+    let len = allElms.length;
+    let oldClass = ((this.darkMode) ? "light-mode": "dark-mode");
+    let newClass = ((this.darkMode) ? "dark-mode": "light-mode");
+    //change css classes
+    for (let i = 0; i < len; i++) {
+      allElms[i].classList.remove(oldClass);
+      allElms[i].classList.add(newClass);
+    }
+    //body must be completed sepratley
+    body.classList.remove(oldClass);
+    body.classList.add(newClass);
+  }
+
+  applyDarkModeCanvases() {
+    //redraw canvases
+    let cans = document.querySelectorAll(".bngl-canvas");
+    cans.forEach((item, i) => {
+      item.getContext
+      var graphic, ctx;
+      [graphic, ctx] = this.canvasHTMLGraphicMap[item.id];
+      ctx.clearRect(0, 0, 1000000, 10000);
+      graphic.darkMode = this.darkMode;
+      graphic.doDrawList();
+    });
+  }
+
+  switchDarkMode() {
+    this.darkMode = !this.darkMode;
+    this.applyDarkMode();
+    this.visualize(this.currentBlob);
+    //this.applyDarkModeCanvases();
+  }
+
+  capitalizeFirstLetter(s) {
+    let words = s.split(" ");
+    words.forEach((word, i) => {
+      words[i] = word[0].toUpperCase() + word.slice(1, s.length);
+    });
+    return words.join(' ');
+  }
+
+  standardizeElm(elm) {
+    //create new html element for string inputs
+    if (typeof elm == "string") {
+      let newP = document.createElement("p");
+      newP.innerHTML = elm;
+      elm = newP;
+    }
+    return elm;
+  }
+
+  addElmLast(child, parent) {
+    parent.appendChild(this.standardizeElm(child));
+  }
+
+  drawBNGL(bngl, canvas, data = {type: "molecules", drawExtraPlus: false}) {
+    let drawExtraPlus = data.drawExtraPlus;
+    let type = data.type;
+    let compartmentMap = data.compartmentMap;
+    //set up drawing context. "willReadFrequently: true" puts processes in GPU
+    let ctx = canvas.getContext("2d", { willReadFrequently: true });
+    let drawObj, compartment, numberMolecules;
+    let noReacts = false;
+    let parameters = {
+      mode: 'compact',
+      darkMode: this.darkMode,
+      compartmentMap: compartmentMap
+    };
+    if (type === "compartments") {
+      parameters["manager"] = this.mm;
+      parameters["compDimension"] = this.mm.getDimension(bngl);
+      parameters["compartment"] = bngl;
+      drawObj = new Graphic("()", parameters);
+      //setup draw func
+      let dims = drawObj.drawCompartment(ctx, 0, 0);
+      //resize canvas
+      canvas.width = dims[0];
+      canvas.height = dims[1];
+      //draw
+      drawObj.doDrawList();
+      //map html elm and graphic instance
+      let id = this.idManager.getID();
+      canvas.id = id;
+      this.canvasHTMLGraphicMap[id] = [drawObj, ctx];
+      return 0;
+    } else if (type === "observables") {
+      if (compartmentMap) {
+        compartment = compartmentMap[bngl[0][0]];
+        parameters["compDimension"] = this.mm.getDimension(compartment);
+        parameters["compartment"] = compartment;
+      }
+      parameters["manager"] = this.mm;
+      //should be [reactants, products, sign] but observables with - bond are in sign
+      drawObj = new Graphic(bngl[0][0], parameters);
+      numberMolecules = 1;
+    } else if (type === "reactions") {
+      let reactants, products, sign;
+      [reactants, products, sign] = bngl;
+      parameters["manager"] = this.mm;
+      parameters["drawExtraPlus"] = drawExtraPlus;
+      drawObj = new Reaction(reactants, products, sign, ctx, parameters);
+      numberMolecules = reactants.length + products.length;
+      noReacts = reactants.length == 0;
+    } else if (type === "species") {
+      if (compartmentMap) {
+        compartment = compartmentMap[bngl];
+        parameters["compartment"] = compartment;
+      }
+      parameters["manager"] = this.mm;
+      drawObj = new Graphic(bngl, parameters);
+      numberMolecules = 1;
+    } else {
+      if (compartmentMap) {
+        compartment = compartmentMap[bngl];
+        parameters["compDimension"] = this.mm.getDimension(compartment);
+        parameters["compartment"] = compartment;
+      }
+      drawObj = new Graphic(bngl, parameters);
+      numberMolecules = 1;
+    }
+    let reactionDims = drawObj.draw(ctx, 0, 0);
+    //draw graphic
+    drawObj.doDrawList();
+    //get dimensions
+    let dims;
+    dims = getCanvasDimentions(
+      ctx,
+      {
+        numberMolecules: numberMolecules,
+        noReacts: noReacts
+      },
+      this.maxWidth,
+      this.maxHeight
+    );
+    //resize canvas
+    canvas.width = dims[0];
+    canvas.height = dims[1];
+    //canvas.width = 750;
+    //canvas.height = 100;
+    //have to redraw
+    ctx.clearRect(0, 0, 1000000, 10000);
+    drawObj.doDrawList();
+    //map html elm and graphic instance
+    let id = this.idManager.getID();
+    canvas.id = id;
+    this.canvasHTMLGraphicMap[id] = [drawObj, ctx];
+    //manage greysites
+    if ((type === "molecules" || type === "species") && !this.mm.has(drawObj)) {
+      this.mm.addMolecule(drawObj);
+    }
+  }
+
+  addToTable(elmNestedList, table, colSpan=0) {
+    //iterate through rows
+    for (let rowNum = 0; rowNum < elmNestedList.length; rowNum++) {
+      let row = elmNestedList[rowNum];
+      //make new row
+      let tempRow = document.createElement("tr");
+      tempRow.classList.add("canvas-row");
+      this.addElmLast(tempRow, table);
+      //iterate though elements in row
+      for (let elmNum = 0; elmNum < row.length; elmNum++) {
+        let elm = this.standardizeElm(row[elmNum]);
+        //if elm is list, there may be multiple elms to add
+        let arrayMode = elm.length != undefined;
+        let tempTD = document.createElement("td");
+        if (colSpan) {
+          tempTD.colSpan = colSpan;
+        }
+        if (colSpan) {
+          tempTD.classList.add("divider-td");
+        } else {
+          tempTD.classList.add("main-td");
+        }
+        if (!arrayMode) {
+          //insert single element into td
+          this.addElmLast(elm, tempTD);
+          this.addElmLast(tempTD, tempRow);
+        } else {
+          for (let i = 0; i < elm.length; i++) {
+            //insert multiple elements into td
+            this.addElmLast(elm[i], tempTD);
+            this.addElmLast(tempTD, tempRow);
+          }
+        }
+      }
+    }
+  }
+
+  separateBNGLNewLines(reactants, products, sign, newLines) {
+    let signProcessed = false;
+    function reformat(list) {
+      if (!signProcessed) {
+        if (list.length == 0) {
+          return [[],[],null];
+        }
+        let i = 0;
+        let elm = list[i];
+        let noSign = true;
+        while (true) {
+          if (i >= list.length) {
+            break;
+          }
+          if (elm == null || elm.includes("<") || elm.includes(">")) {
+            noSign = false;
+            signProcessed = true;
+            break;
+          }
+          i++;
+          elm = list[i];
+        }
+        return [
+          list.slice(0, i),
+          list.slice(i + 1, list.legnth),
+          ((noSign) ? null : list[i])
+        ];
+      } else {
+        return [[], list, null];
+      }
+    }
+
+    function sliceNewLine(output, startIndex, index) {
+      //combine reactants, sign, and product into 1 list to match newline index format
+      let sliced = condensedList.slice(startIndex, index);
+      //reformat() expands condensed list back into reactants, sign, and product
+      output.push(reformat(sliced));
+    }
+
+    let condensedList;
+    if (sign) {
+      condensedList = reactants.concat([sign]).concat(products);
+    } else {
+      condensedList = reactants.concat(products);
+    }
+    let output = [];
+    let rowNewLineIndexMap = {};
+    let startIndex;
+    let index = 0;
+    for (let i = 0; i < newLines.length; i++) {
+      startIndex = index;
+      index = newLines[i].index;
+      sliceNewLine(output, startIndex, index);
+      rowNewLineIndexMap[output.length - 1] = i;
+    }
+    sliceNewLine(output, index, condensedList.length);
+    //remove empty lists
+    for (let i = 0; i < output.length; i++) {
+      let row = output[i];
+      if (row[0].length == 0 && row[1].length == 0 && !row[2]) {
+        output.splice(i, 1);
+        newLines.splice(rowNewLineIndexMap[i], 1);
+      }
+    }
+    return output;
+  }
+
+  //render one set (need to add compartments)
+  prepareRow(data, type) {
+    let molcCompMap = {};
+    let bngl, conc, comment, name, compartment, reactants, products, sign, observData, newLines, rate;
+    if (type != "reactions" && type != "observables" && type != "compartments") {
+      bngl = data.bngl;
+      conc = data.conc.trim();
+      comment = data.comment.trim();
+      let observType = data.observType;
+      [bngl, compartment] = this.mm.processMoleculeCompartment(bngl.trim());
+      bngl = addBNGLParenthesis(bngl);
+      molcCompMap[bngl] = compartment;
+      name = bngl.split("(")[0];
+      if (name.includes(":")) {
+        name = name.split(":")[1];
+      }
+      var bngls = [bngl];
+    } else if (type == "compartments") {
+      //add compartments to molecule manager
+      this.mm.addCompartment(data.name, data.dimension);
+    } else if (type == "observables") {
+      [reactants, products, sign, observData, comment, newLines] = Object.values(data);
+      //add paranthesis if there are none
+      let bngl, compartment, polymer, polymerIndex;
+      reactants.forEach((bngl, i) => {
+        //manage polymer lengths
+        for (let i = 0; i < this.polymerTokens.length; i++) {
+          let token = this.polymerTokens[i];
+          if (bngl.includes(token)) {
+            polymerIndex = bngl.indexOf(token);
+            polymer = bngl.slice(polymerIndex, bngl.length);
+            bngl = bngl.slice(0, polymerIndex);
+          }
+        }
+        //other processing
+        [bngl, compartment] = this.mm.processMoleculeCompartment(bngl);
+        reactants[i] = addBNGLParenthesis(bngl);
+        if (polymer && polymer.trim()) {
+          this.mm.addPolymer(observData.name, polymer);
+        }
+        molcCompMap[bngl] = compartment;
+      });
+      var bngls = this.separateBNGLNewLines(reactants, products, sign, newLines);
+    } else if (type === "reactions") {
+      [reactants, products, sign, rate, comment, newLines] = Object.values(data);
+      //add paranthesis if there are none
+      let bngl, compartment;
+      reactants.forEach((item, i) => {
+        [bngl, compartment] = this.mm.processMoleculeCompartment(item)
+        reactants[i] = addBNGLParenthesis(bngl);
+        molcCompMap[bngl] = compartment;
+      });
+      products.forEach((item, i) => {
+        [bngl, compartment] = this.mm.processMoleculeCompartment(item)
+        products[i] = addBNGLParenthesis(bngl);
+        molcCompMap[bngl] = compartment;
+      });
+      var bngls = this.separateBNGLNewLines(reactants, products, sign, newLines);
+    }
+    //handle new line special case
+    let hasNewLines;
+    if (type != "compartments") {
+      hasNewLines = ((bngls.length > 1) ? true : false);
+    } else {//setup compartment visualization
+      bngls = [data.name];
+    }
+    //make canvases
+    let newCans = [];
+    for(let i = 0; i < bngls.length; i++) {
+      bngl = bngls[i];
+      //create new canvas
+      let newCan = document.createElement("canvas");
+      newCans.push(newCan);
+      //must have inital dimensions as large as largest possible visualization
+      newCan.width = this.maxWidth;
+      newCan.height = this.maxHeight;
+      newCan.classList.add("bngl-canvas");
+      //draw object on canvas
+      this.drawBNGL(
+        bngl,
+        newCan,
+        {
+          type: type,
+          compartmentMap: molcCompMap,
+          drawExtraPlus: hasNewLines && i < bngls.length - 1,
+        }
+      );
+    }
+    //output as list
+    if (type == "species") {
+      return [name, newCans, bngl, conc, comment];
+    } else if (type == "observables") {
+      return [
+        observData.type,
+        observData.name,
+        newCans,
+        this.be.compileBNGL(data, type, observData),
+        comment
+      ];
+    } else if (type == "reactions") {
+      return [
+        newCans,
+        this.be.compileBNGL(data),
+        rate.trim(),
+        comment
+      ];
+    } else if (type == "compartments") {
+      let output = Object.values(data);
+      output.splice(3, 0, newCans);
+      return output;
+    } else {
+      return [name, newCans, bngl, comment];
+    }
+  }
+
+  //render 1 entire type (molecules, species, etc)
+  visualizeType(type, list) {
+    if (list.length > 0) {
+      //add new table
+      let newTable = document.createElement("table");
+      this.addElmLast(newTable, this.tableDiv);
+      //render header
+      if (type != "header comments" || list.length > 0) {
+        this.addToTable([[document.createElement("hr")]], newTable, 5);
+        const newDivider = document.createElement("p");
+        if (type != "header comments") {
+          newDivider.innerHTML = this.capitalizeFirstLetter(type);
+        }
+        newDivider.classList.add("table-divider");
+        this.addToTable([[newDivider]], newTable, 5);
+        if (type == "observables") {
+          this.addToTable(
+            [['Type', 'Name', 'Visualization', 'BNGL code', 'Comment']],
+            newTable
+          );
+        } else if (type == "molecules") {
+          this.addToTable(
+            [['Name', 'Visualization', 'BNGL code', 'Comment']],
+            newTable
+          );
+        } else if (type == "reactions") {
+          this.addToTable(
+            [['Visualization', 'BNGL code', 'Rate', 'Comment']],
+            newTable
+          );
+        } else if (type == "compartments") {
+          this.addToTable(
+            [['Name', 'Dimension', 'Size', 'Visualization', 'Comment']],
+            newTable
+          );
+        } else if (type != "header comments") {
+          this.addToTable(
+            [['Name', 'Visualization', 'BNGL code', 'Concentration', 'Comment']],
+            newTable
+          );
+        }
+        //render rows
+        if (list.length > 0) {
+          let output = [];
+          for (let i = 0; i < list.length; i++) {
+            let item = list[i];
+            //normal row
+            if (typeof item == "object") {
+              this.addToTable([this.prepareRow(item, type)], newTable);
+            }
+            //full line comment
+            else if (typeof item == "string") {
+              this.addToTable([[item]], newTable, 5);
+            }
+          }
+        } else {
+          this.addToTable([["None", "", "", ""]], newTable);
+        }
+      }
+    }
+  }
+
+  clear() {
+    //remove everything in table
+    let oldElms = this.tableDiv.children;
+    let numOldElms = oldElms.length;
+    for(let i = 0; i < numOldElms; i++) {
+      oldElms[0].remove();
+    }
+    //remove everything in canvas div
+    oldElms = this.canvasDiv.children;
+    numOldElms = oldElms.length;
+    for(let i = 0; i < numOldElms; i++) {
+      oldElms[0].remove();
+    }
+    //reset molecule manager
+    this.mm.reset();
+  }
+
+  //render everything in bngl
+  visualize(blob) {
+    this.clear();
+    this.currentBlob = blob;
+    //render new file
+    function read(bngl, intrObj) {
+      //sort tokens
+      let aVal, bVal;
+      intrObj.sectionTokens.sort((a, b)=>{
+        a.forEach((item, i) => {
+          if (bngl.includes("begin " + item)) {
+            aVal = bngl.indexOf("begin " + item);
+          }
+        });
+        if (!aVal) {
+          return -1;
+        }
+        b.forEach((item, i) => {
+          if (bngl.includes("begin " + item)) {
+            bVal = bngl.indexOf("begin " + item);
+          }
+        });
+        return ((aVal < bVal) ? -1: 1);
+      });
+      //visualize everything
+      let comments = intrObj.be.extractComments(bngl, intrObj.sectionTokens);
+      intrObj.sectionTokens.forEach((item, i) => {
+        let type = intrObj.sectionTokenMap[item.toString()];
+        intrObj.visualizeType("header comments", comments[i]);
+        intrObj.visualizeType(type, intrObj.be.extractBNGL(bngl, item, type));
+      });
+      intrObj.visualizeType("header comments", comments[comments.length - 1]);
+      //make arrows bigger
+      let pElms = document.querySelectorAll("p");
+      for (let i = 0; i < pElms.length; i++) {
+        let elm = pElms[i];
+        elm.innerHTML = elm.innerHTML.replace("&lt;-&gt;", ' <span class="big-arrow">&#8596;</span> ');
+        elm.innerHTML = elm.innerHTML.replace("-&gt;", ' <span class="big-arrow">&#8594;</span> ');
+        elm.innerHTML = elm.innerHTML.replace("&lt;-", ' <span class="big-arrow">&#8592;</span> ');
+      };
+      intrObj.applyDarkMode();
+    }
+    let reader = new FileReader();
+    reader.onload = () => {
+      read(reader.result, this);
+      this.loadingText.style.display = "none";
+    }
+    //read if file present
+    if (typeof blob == "string") {
+      read(blob, this);
+    } else if (typeof blob == "object") {
+      if (this.fileInput.value) {
+        reader.readAsText(blob);
+      }
+    }
+  }
+}
diff --git a/frontend/public/bnglviz/index.html b/frontend/public/bnglviz/index.html
new file mode 100644
index 0000000..1811dd7
--- /dev/null
+++ b/frontend/public/bnglviz/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>BNGL Visualizer</title>
+    <link rel="stylesheet" type="text/css" href="styleblack.css"/>
+    <style>
+        body {
+            margin: 0;
+            padding: 10px;
+            font-family: Arial, sans-serif;
+        }
+        #loading-p {
+            display: none;
+            color: #666;
+            font-style: italic;
+        }
+        /* Make sure tables and canvases fit within iframe */
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+        }
+        canvas {
+            max-width: 100%;
+            height: auto;
+        }
+    </style>
+</head>
+<body>
+<p id="loading-p">Loading...</p>
+<div id="canvas-container"></div>
+<div id="table-container"></div>
+
+<script src="model-graphics.js"></script>
+<script src="bngl-extractor.js"></script>
+<script src="html-interface.js"></script>
+<script>
+  // Get major elements
+  const canvContain = document.getElementById("canvas-container");
+  const tableContain = document.getElementById("table-container");
+  const body = document.body;
+  const loadingText = document.getElementById("loading-p");
+
+  // Create a dummy file input for HTMLInterface constructor (it expects one)
+  const dummyFileInput = document.createElement("input");
+  dummyFileInput.type = "file";
+  dummyFileInput.style.display = "none";
+  body.appendChild(dummyFileInput);
+
+  // Connect interface
+  var htmlInterface = new HTMLInterface(body, canvContain, tableContain, dummyFileInput, loadingText);
+
+  // Listen for postMessage from parent window
+  window.addEventListener('message', function(event) {
+    // For security, you might want to check event.origin here
+    if (event.data && typeof event.data === 'string' && event.data.trim()) {
+      loadingText.style.display = 'block';
+      try {
+        htmlInterface.visualize(event.data);
+        loadingText.style.display = 'none';
+      } catch (error) {
+        console.error('Error visualizing BNGL:', error);
+        loadingText.innerHTML = 'Error loading visualization';
+      }
+    }
+  });
+
+  // Send ready message to parent
+  window.parent.postMessage('bnglviz-ready', '*');
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/public/bnglviz/model-graphics.js b/frontend/public/bnglviz/model-graphics.js
new file mode 100644
index 0000000..d6c698b
--- /dev/null
+++ b/frontend/public/bnglviz/model-graphics.js
@@ -0,0 +1,1268 @@
+//script for graphics
+
+//note all scale params in draw functions do not work, fix or delete
+
+//define string hash
+function hashString(s) {
+  var hash = 0, i, chr;
+  for (var i = 0; i < s.length; i++) {
+    chr   = s.charCodeAt(i);
+    hash = (chr << (6 * i)) + hash;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+}
+
+//defining string rgb values by hashing them
+Object.defineProperty(String.prototype, 'rgb', {
+  //hashing string
+  value: function() {
+    hash = hashString(this);
+    //changing hash into rgb format:
+    hash *= ((hash < 0) ? -1: 1);
+    if (hash < 65280) {
+      hash++;
+      hash *= 17777777;
+    }
+    //16777215 is FFFFFF in base 16
+    hash = hash % 16777215;
+    color = Math.floor(hash);
+    color = color.toString(16);
+    var rgb = [];
+    for (var i = 0; i < 3; i++) {
+      rgb.push(parseInt(color.slice(i, 2 + i), 16));
+    }
+    //correcting colors too dark
+    if (rgb.reduce((a, b) => a + b, 0) < 600) {
+      //remainder of 255 and highest rbg chanel
+      const buff = 255 - Math.max(rgb[0], rgb[1], rgb[2]);
+      //add buff
+      for (var i = 0; i < 3; i++) {
+        rgb[i] = rgb[i] + buff;
+      }
+      //find min chanel
+      let min = 0;
+      for (var i = 1; i < 3; i++) {
+        if (rgb[i] < rgb[min]) {
+          min = i;
+        }
+      }
+      //equalize far apart channels
+      let diff = Math.max(rgb[0], rgb[1], rgb[2]) - rgb[min];
+      if (diff > 100) {
+        rgb[min] += diff - 50;
+      }
+      //construct rbg string
+      color = '';
+      for (var i = 0; i < 3; i++) {
+        color += rgb[i].toString(16);
+      }
+    }
+    return (color);
+  }
+});
+
+
+//splits string at target character;
+function splitString(string, target) {
+  list = [];
+  lastTagert = 0;
+  for (var i = 0; i < string.length; i++) {
+    if (string[i] == target) {
+      list.push(string.slice(lastTagert, i));
+      lastTagert = i + 1;
+    }
+  }
+  list.push(string.slice(lastTagert, string.length));
+  return(list);
+}
+
+
+//
+function compactString(s, numChars = 10) {
+  if (s.length <= numChars) {
+    return s;
+  } else {
+    return s.slice(0, numChars - 3) + "...";
+  }
+}
+
+
+//simple class to hold data from molecule's sites
+class Site {
+  constructor(name, states, molecule, color = null) {
+    this.inheritType = false;
+    this.molecule = molecule;
+    this.textColor = "000000";
+    this.bondName = null;
+    //get bond name from states
+    for (var i = 0; i < states.length; i++) {
+      if (states[i].includes('!')) {
+        var pair = splitString(states[i], '!');
+        states[i] = pair[0];
+        this.setBondName(pair[1]);
+      }
+    }
+    //get bond name from site name
+    if (name.includes('!')) {
+      var pair = splitString(name, '!');
+      name = pair[0];
+      this.setBondName(pair[1]);
+    }
+    //init vars
+    this.name = name;
+    this.states = states; //list of state names
+    this.position = null; //x y coords of where to draw bond
+    //color from name
+    if (color == null) {
+      this.color = this.name.rgb();
+    } else {
+      this.color = color;
+    }
+    //set unique id
+    this.setId();
+    return this;
+  }
+
+  setId() {
+    let name = this.name;
+    let identifyingNumber = 0;
+    let idSet = this.molecule.ids;
+    while (idSet.has(name + identifyingNumber)) {
+      identifyingNumber++;
+    }
+    let id = name + identifyingNumber;
+    this.id = id;
+    this.molecule.ids.add(id);
+  }
+
+  //if any site has a bond
+  hasBond() {
+    if (this.bondName == null || isNaN(this.bondName)) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  //if bond is special case (+, -, ?)
+  specialBond(bondName) {
+    return ((bondName === "+" || bondName === "-" || bondName === "?") ? true : false);
+  }
+
+  getSpecialBondPair() {
+    return [this.position, null, this.bondName, "special"];
+  }
+
+  setBondName(bondName) {
+    if (this.specialBond(bondName)) {
+      this.bondName = bondName;
+    } else {
+      this.bondName = parseInt(bondName);
+    }
+  }
+}
+
+//add parenthesis to any bngl definition string
+window.addBNGLParenthesis = function addBNGLParenthesis(bngl) {
+  //split into each molecule
+  if ((!bngl.includes("<")) && (!bngl.includes(">"))) {
+    let molecules = bngl.split(".");
+    let output = "";
+    let len = molecules.length;
+    molecules.forEach((m, i) => {
+      //add paranthesis if there are none
+      if (m.indexOf("(") < 0) {
+        m = m + "()";
+      }
+      output += m;
+      if (i != len - 1) {
+        output += ".";
+      }
+    });
+    return output;
+  } else {
+    return bngl;
+  }
+}
+
+//class for molecules
+window.Molecule = class Molecule {
+  constructor(def, graphic, parameters) {
+    //old constructor(def, mode = 'normal', graphic = null)
+    this.parameters = parameters;
+    //set of site id's
+    this.ids = new Set();
+    //map of site ids to site instance
+    this.siteMap = {};
+    //parent graphic instance
+    this.graphic = graphic;
+    //draw compact / normal
+    this.mode = parameters.mode;
+    //bionetgen definition
+    this.def = def;
+    //6 digit rgb hex
+    this.color = '';
+    //name of molecule
+    this.name = '';
+    //this.sites, list of Site() instances, initialized in this.process()
+    if (this.def) {
+      this.process();
+    }
+    //colors used to draw states
+    this.stateColors = ['#FBC6D0', '#00FDFF', '#FA26A0', '#99F3BD'];
+    //list of {drawFunction, parameterList} objects
+    this.drawList = [];
+    //dimentions, calculated later
+    this.x = 0;
+    this.y = 0;
+    //radius for main round rects
+    this.radius = 15;
+    //radius for main round sites
+    this.siteRadius = 8;
+  }
+
+  addSite(site, list) {
+    list.push(site);
+    this.siteMap[site.id] = site;
+  }
+
+  getSite(id) {
+    return this.siteMap[id];
+  }
+
+  //initialize this.color, sites, name from bionetgen def
+  process() {
+    //notice bond info is kept in this.sites and removed later
+    let temp = splitString(this.def, '(');
+    this.name = ((this.mode == "normal") ? temp[0] : compactString(temp[0]));
+    this.color = temp[0].rgb();
+    let sites = temp[1].slice(0, -1);
+    //sites = sites.slice(sites.length - 2);
+    sites = splitString(sites, ',');
+    let siteList = [];
+    temp = '';
+    for (var i = 0; i < sites.length; i++) {
+      if (sites[i].includes(')')) {
+        sites[i] = sites[i].replace(')', '');
+      }
+      if (sites[i].includes('~')) {
+        //if sites have states
+        temp = splitString(sites[i], '~');
+        let states = temp.slice(1);
+        if (this.mode == 'normal') {
+          this.addSite(new Site(temp[0], states, this), siteList);
+        } else {
+          //if compact mode slice restrict number of characters
+          for (let u = 0; u < states.length; u++) {
+            let state = states[u];
+            //if state has bond
+            if (state.includes('!')) {
+              let temp = states[u].split('!');
+              let stateName = temp[0];
+              let bond = temp[1];
+              stateName = compactString(stateName);
+              states[u] = stateName + '!' + bond;
+            }
+            else {
+              states[u] = compactString(state);
+            }
+          }
+          let originalName = temp[0];
+          let sliced = compactString(originalName);
+          this.addSite(
+            new Site(sliced, states, this, originalName.rgb()),
+            siteList
+          );
+        }
+        //if there are sites but no states
+      } else if (sites[i].length != 0) {
+        //if normal
+        if (this.mode == 'normal') {
+          this.addSite(new Site(sites[i], [], this), siteList);
+        } else {
+          //if compact
+          let site = sites[i];
+          let originalName = sites[i];
+          //if site has bond
+          if (site.includes('!')) {
+            let temp = site.split('!');
+            let siteName = temp[0];
+            let bond = temp[1];
+            siteName = compactString(siteName);
+            sites[i] = siteName + '!' + bond;
+            this.addSite(new Site(sites[i], [], this, siteName.rgb()), siteList);
+          } else {
+            this.addSite(
+              new Site(compactString(site), [], this, originalName.rgb()),
+              siteList
+            );
+          }
+        }
+      } else {
+        //if there are no sites
+        siteList = null;
+      }
+    }
+    this.sites = ((siteList == null) ? [] : siteList);
+    //add observable parent sites
+    let graphic = this.graphic;
+    let indexSiteMap = {};
+    if (graphic && graphic.manager && graphic.manager.hasMolecules()) {
+      let parentSites = graphic.manager.getSites(this.name);
+      if (parentSites && this.sites && this.sites.length > 0) {
+        parentSites.forEach((parent, p) => {
+          this.sites.forEach((site, s) => {
+            //only add if parent site is not already represented in BNGL
+            if ((site.id === parent.id)) {
+              indexSiteMap[p] = site;
+              p++;
+            } else {
+              indexSiteMap[p] = parent;
+            }
+          });
+        });
+        //correct site order
+        let l = [];
+        for (let i = 0; i < parentSites.length; i++) {
+          l.push(indexSiteMap[i]);
+        }
+        this.sites = l;
+      } else {
+        //if no non parent sites
+        this.sites = ((parentSites) ? parentSites: this.sites);
+      }
+    }
+  }
+
+  hasBond() {
+    let answer = false;
+    this.sites.forEach((item) => {
+      if (item.hasBond()) {
+        answer = true;
+      }
+    });
+    return answer;
+  }
+
+  //evaluate all draw list functions
+  doDrawList() {
+    if (this.def) {
+      let list = this.drawList;
+      for (let i = 0; i < list.length; i++) {
+        let elm = list[i];
+        let func = elm.func;
+        let params = elm.params;
+        func(params);
+      }
+    }
+  }
+
+  //draw rounded rect
+  drawRoundRect(ctx, x, y, radius, length, rgb) {
+    ctx.fillStyle = '#' + rgb;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.arc(x + radius, y + radius, radius, Math.PI / 2, Math.PI * (3/2));
+    ctx.arc(
+      x + radius + length,
+      y + radius, radius,
+      Math.PI * (3/2),
+      Math.PI / 2
+    );
+    ctx.lineTo(x + radius, y + 2 * radius);
+    ctx.fill();
+    ctx.strokeStyle = "#000000";
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  //draw sites
+  drawSites(ctx, x, y, radius, scale = 1, initX = 0, visible = true) {
+    const spaceBetweenSites = 3;
+    let siteLength, stateLength, longestState, tallestState;
+    siteLength = stateLength = longestState = tallestState = 0;
+    let hasStates = false;
+    //adding sites
+    let dx = radius - 2 * this.siteRadius;
+    for (var i = 0; i < this.sites.length; i++) {
+      //bottom line of sites
+      let dy = 2 * radius + 2;
+      dx += + 2 * this.siteRadius + siteLength;
+      //if site not first add spacing between sites
+      if (i != 0) {
+        dx += spaceBetweenSites;
+      }
+      if (longestState > 2 * this.siteRadius + siteLength) {
+        dx += - siteLength + longestState - 2 * this.siteRadius;
+      }
+      //drawing sites
+      siteLength = ctx.measureText(this.sites[i].name).width;
+      let colorParam = this.sites[i].color;
+      let xParam = x + dx - radius / 2;
+      let yParam = y + dy - radius / 2;
+      if (visible) {
+        this.drawList.push({func: (params) => {
+          this.drawRoundRect(
+            ctx,
+            params[0],
+            params[1],
+            params[3],
+            params[4],
+            params[2]
+          );
+        }, params: [xParam, yParam, colorParam, this.siteRadius, siteLength]});
+      }
+      //drawing site names
+      let nameParam = this.sites[i].name;
+      colorParam = this.sites[i].textColor;
+      xParam = x + dx - this.siteRadius / 2;
+      yParam = y + dy + this.siteRadius / 2 + 1;
+      if (visible) {
+        this.drawList.push({func: (params) => {
+          ctx.fillStyle = "#" + params[3];
+          ctx.font = "12px Arial";
+          ctx.fillText(
+            params[2],
+            params[0],
+            params[1]
+          );
+        }, params: [xParam, yParam, nameParam, colorParam]});
+      }
+      //drawing states of sites
+      var states = this.sites[i].states;
+      if (states.length == 0) {
+        longestState = 0;
+      } else if (!hasStates) {
+        hasStates = true;
+      }
+      //add bonds to stateless sites
+      if (this.sites[i].bondName != null) {
+        if (this.sites[i].states.length == 0) {
+          this.sites[i].position = [x + dx - initX, y + dy + this.siteRadius];
+        }
+      }
+      for (var u = 0; u < states.length; u++) {
+        var sx = x + dx - this.siteRadius + 2;
+        var sy = y + dy + u * 13 + this.siteRadius;
+        //fix lengths
+        stateLength = ctx.measureText(this.sites[i].states[u]).width;
+        if (this.sites[i].states[u].length <= 10) {
+          stateLength += 3;
+        }
+        if (longestState < stateLength) {longestState = stateLength;}
+        //add bonds to sites with states
+        if (this.sites[i].bondName != null) {
+          this.sites[i].position = [sx + stateLength / 2 - initX, sy + 13];
+        }
+        //draw states
+        //var colorIndex = u;
+        let stateParam = this.sites[i].states[u];
+        xParam = sx;
+        yParam = sy;
+        //if (colorIndex > 3) {colorIndex = colorIndex % 3;}
+        if (visible) {
+          this.drawList.push({func: (params) => {
+            ctx.fillStyle = "#" + params[3];
+            ctx.beginPath();
+            ctx.rect(params[0], params[1], params[4], 13);
+            ctx.fill();
+            ctx.fillStyle = '#000000';
+            ctx.stroke();
+            ctx.closePath();
+            //naming states
+            ctx.fillStyle = '#000000';
+            ctx.fillText(params[2], params[0] + 1.5, params[1] + 10.5);
+          }, params: [
+            xParam,
+            yParam,
+            stateParam,
+            stateParam.rgb(),
+            stateLength
+          ]});
+        }
+        if (sy + 13 > tallestState) {
+          tallestState = sy + 13;
+        }
+      }
+    }
+    //return total [length, height] to compare to default dimensions
+    var dims = [];
+    //use either end of site, state, or molecule for x component
+    var possibleLengths = [
+      dx - radius / 2 + siteLength,
+      dx,
+      sx + stateLength - x
+    ];
+    for (var i = 0; i < 3; i++) {
+      if (isNaN(possibleLengths[i])) {
+        possibleLengths[i] = 0;
+      }
+    }
+    dims.push(possibleLengths.reduce(function (a, b) {
+      return (Math.max(a, b));
+    }));
+    if (hasStates) {
+      dims.push(tallestState);
+    } else {
+      dims.push(radius * 2 + this.siteRadius + 2);
+    }
+    return (dims);
+  }
+
+  //draw molecule with states and sites labled
+  initDrawList(ctx, x, y, scale = 1, initX = 0) {
+    if (this.def) {
+      ctx.font = "15px Arial";
+      var length = Math.abs(ctx.measureText(this.name).width);
+      var dims = this.drawSites(ctx, x, y, this.radius, 1, initX, false);
+      if (length < dims[0]) {
+        length = dims[0];
+      }
+      let numSites = Object.keys(this.sites).length;
+      //add main molecule to draw list
+      this.drawList.push({func: (params) => {
+        ctx.font = "15px Arial";
+        //drawing pill shape
+        this.drawRoundRect(
+          ctx,
+          params[0],
+          params[1],
+          params[2],
+          params[3],
+          params[4]
+        );
+        //drawing sites
+        this.drawSites(
+          ctx,
+          params[0],
+          params[1],
+          params[2],
+          1,
+          params[5]
+        );
+        //drawing name
+        ctx.fillStyle = '#000000';
+        ctx.font = "15px Arial";
+        ctx.fillText(
+          params[6],
+          params[0] + params[2] / 2,
+          params[1] + params[2] + 5
+        );
+      }, params: [x, y, this.radius, length, this.color, initX, this.name]});
+      //return [length, height] of molecule for Graphic class
+      this.x = dims[0];
+      this.y = dims[1];
+      return ([this.radius * 2 + length, dims[1]]);
+    }
+  }
+}
+
+//basically a map from molecule definitions to sites
+window.MoleculeManager = class MoleculeManager {
+  constructor() {
+    //map from molecule name to list of sites
+    this.molcMap = {};
+    //map from compartment name to dimension
+    this.compMap = {};
+    //map from molecule name to compartment name
+    this.molcCompMap = {};
+    //map from molecule name to polymer length string
+    this.polymerMap = {};
+    //most recent compartment name added
+    this.latestComp = null;
+  }
+
+  processMoleculeCompartment(moleculeName) {
+    //for some reason I need to redefine the function parameter as follows
+    //I have no idea why I need to do this, it is a cursed error
+    this.moleculeName = moleculeName;
+    let compartmentName;
+    if (this.moleculeName.includes("@")) {
+      //if the string doesn't have exactly 1 colon its invalid
+      let colonCount = this.moleculeName.split(":").length - 1;
+      if (colonCount != 1) {
+        throw new Error("Invalid compartment definition!");
+        return this.moleculeName;
+      }
+      let pair = this.moleculeName.split(":");
+      compartmentName = pair[0].slice(1, pair[0].length);
+      this.moleculeName = pair[1];
+      this.molcCompMap[this.moleculeName] = compartmentName;
+      this.latestComp = compartmentName;
+    }
+    return [this.moleculeName, compartmentName];
+  }
+
+  addPolymer(name, polymer) {
+    this.polymerMap[name] = polymer;
+  }
+
+  getPolymer(name) {
+    return this.polymerMap[name];
+  }
+
+  hasPolymer(name) {
+    return this.polymerMap.hasOwnProperty(name);
+  }
+
+  addCompartment(compartment, dimension) {
+    this.compMap[compartment] = dimension;
+  }
+
+  getCompartment(name) {
+    return this.molcCompMap[name];
+  }
+
+  getDimension(compartment) {
+    return this.compMap[compartment];
+  }
+
+  hasCompartment(name) {
+    return this.compMap.hasOwnProperty(name);
+  }
+
+  hasMoleculeWithCompartment(name) {
+    return this.molcCompMap.hasOwnProperty(name);
+  }
+
+  getDimension(compartment) {
+    return ((this.hasCompartment(compartment)) ? this.compMap[compartment]:-1);
+  }
+
+  addMolecule(graphic) {
+    if (this.validDefinition(graphic)) {
+      let molecule = graphic.molecules[0];
+      let sites = molecule.sites;
+      //change parameters of sites to show its from parent
+      sites.forEach((item, i) => {
+        this.inheritType = true;
+        item.color = "cfcfcf";
+        item.bondName = null;
+        item.states = [];
+        item.textColor = "cfcfcf";
+      });
+      let name = molecule.name;
+      this.molcMap[name] = sites;
+    }
+  }
+
+  validDefinition(graphic) {
+    return (graphic && graphic.molecules && graphic.molecules.length === 1);
+  }
+
+  getSites(name) {
+    return this.molcMap[name];
+  }
+
+  hasMolecules() {
+    return ((Object.keys(this.molcMap).length > 0) ? true : false);
+  }
+
+  has(graphic) {
+    let molecule = graphic.molecules[0];
+    return (this.validDefinition(graphic) && this.molcMap.hasOwnProperty(molecule.name));
+  }
+
+  reset() {
+    this.molcMap = {};
+    this.compMap = {};
+  }
+}
+
+
+//each bionetgen should have own Graphic instance
+window.Graphic = class Graphic {
+  constructor(def, parameters) {
+    //old constructor def, mode = 'normal', darkMode = false, manager = null
+    this.parameters = parameters;
+    //molecule manager class instance
+    this.manager = parameters.manager;
+    //list of {drawFunction, parameterList} objects
+    this.drawList = [];
+    try {
+      //draw normal / compact
+      this.mode = parameters.mode;
+      //bionetgen definition
+      this.def = addBNGLParenthesis(def.replaceAll(" ", ""));
+      //dark mode boolean
+      this.darkMode = parameters.darkMode;
+      //compartment name
+      this.comp = parameters.compartment;
+      //compartment dimension number
+      this.compDimension = ((this.comp) ? this.manager.getDimension(this.comp): undefined);
+      //list of instances of molecule classes
+      this.molecules = [];
+      //initializing this.molecules
+      this.process();
+      //dimesntions, calcutlated later
+      this.x = this.y = 0;
+      //boolean if bonds have any connections
+      this.anyBondConnection = false;
+    } catch(e) {
+      console.log("model-graphics.js Graphic() constructor() error:\n" + e);
+    }
+  }
+
+  process() {
+    let defs = splitString(this.def, '.');
+    let mode = ((this.mode == 'normal') ? "" : 'compact');
+    for (var i = 0; i < defs.length; i++) {
+      this.molecules.push(
+        new Molecule(
+          defs[i],
+          this,
+          {mode: mode}
+        )
+      );
+    }
+  }
+
+  //evaluate all draw list functions
+  doDrawList() {
+    //graphics draw functions
+    let list = this.drawList;
+    for (let i = 0; i < list.length; i++) {
+      let elm = list[i];
+      let func = elm.func;
+      let params = elm.params;
+      func(params);
+    }
+    //molecules draw functions
+    for (let i = 0; i < this.molecules.length; i++) {
+      this.molecules[i].doDrawList();
+    }
+  }
+
+  //draw compartment (compartment)
+  drawCompartment(ctx, xPos, yPos) {
+    if (this.comp) {
+      //box dims
+      let textWidth = ctx.measureText(this.comp).width;
+      let y = 55 + yPos;
+
+      //compartment color from dimension
+      let color = ((this.compDimension == 3) ? '#000': '#666');
+
+      //add to draw list
+      this.drawList.push({func: (params) => {
+        //draw compartment at top right corner, filling ctx
+        ctx.fillStyle = color;
+        ctx.fillRect(xPos, yPos, params[0] + 9, y);
+        ctx.strokeStyle = '#ddd';
+        ctx.fillStyle = '#ddd';
+        ctx.font = "11px Arial";
+        ctx.beginPath();
+        ctx.moveTo(xPos, yPos);
+        //left line
+        ctx.lineTo(xPos, y);
+        //bottom line
+        ctx.lineTo(xPos + params[0] + 9, y);
+        //right line
+        ctx.lineTo(xPos + params[0] + 9, yPos);
+        //top line
+        ctx.lineTo(xPos, yPos);
+        ctx.stroke();
+        ctx.closePath();
+        ctx.fillText(this.comp, xPos + 2, y - 5);
+      }, params: [textWidth]});
+      return [textWidth + 10, y];
+    }
+  }
+
+  draw(ctx, initX, initY) {
+    if (this.def) {
+      let length = 0;
+      let height = 0;
+      let checkedBonds = new Set();
+      let completedBonds = new Set();
+      let pairs = [];//list of pairs of xy coords for each bond
+      //draw compartment
+      this.drawCompartment(ctx, initX, initY);
+      //set up dimension vars
+      for (let i = 0; i < this.molecules.length; i++) {
+        let thisX = 2 + length + initX;
+        let thisY = 2 + initY;
+        let dims = this.molecules[i].initDrawList(ctx, thisX, thisY, null, initX);
+        length += dims[0];
+        if (dims[1] > height) {
+          height = dims[1];
+        }
+      }
+      //extracting bonds
+      //each molecule
+      for (let i = 0; i < this.molecules.length; i++) {
+        //each site
+        for (let y = 0; y < this.molecules[i].sites.length; y++) {
+          let m1 = this.molecules[i].sites[y];
+          //if unique bond m1 exists
+          if (m1.bondName != null && !checkedBonds.has(m1.bondName)) {
+            //add special bonds
+            if (m1.specialBond(m1.bondName)) {
+              pairs.push(m1.getSpecialBondPair());
+            } else {
+              //finish getting normal bonds
+              checkedBonds.add(m1.bondName);
+              let newPair = [m1.position];
+              //check all sites in species for matching bond type
+              for (let u = 0; u < this.molecules.length; u++) {
+                for (let z = 0; z < this.molecules[u].sites.length; z++) {
+                  //ensure a molecule doesnt bond to itself
+                  if (z != y || u != i) {
+                    let m2 = this.molecules[u].sites[z];
+                    if (m2.bondName == m1.bondName) {
+                      this.anyBondConnection = true;
+                      newPair.push(m2.position);
+                      newPair.push(m2.bondName);
+                      newPair.push("normal");
+                      pairs.push(newPair);
+                      completedBonds.add(m1.bondName);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      //finding unmatched bonds to mark as special bonds
+      for (let i = 0; i < this.molecules.length; i++) {
+        for (let y = 0; y < this.molecules[i].sites.length; y++) {
+          let m1 = this.molecules[i].sites[y];
+          if (m1.bondName != null) {
+            //add special bonds
+            if ((!m1.specialBond(m1.bondName)) && (!completedBonds.has(m1.bondName))) {
+              m1.bondName = "+";
+              pairs.push(m1.getSpecialBondPair());
+            }
+          }
+        }
+      }
+      //drawing bonds
+      var maxHeight = 0;
+      for (let i = 0; i < pairs.length; i++) {
+        let isNormal = (pairs[i][3] === "normal");
+        if (pairs[i][0][1] > maxHeight) {
+          maxHeight = pairs[i][0][1];
+        }
+        if (isNormal && pairs[i][1][1] > maxHeight) {
+          maxHeight = pairs[i][1][1];
+        }
+        let x1 = pairs[i][0][0] + initX;
+        let x2, y2;
+        if (isNormal) {
+          x2 = pairs[i][1][0] + initX;
+          y2 = pairs[i][1][1] + initY;
+        }
+        let y0 =  pairs[i][0][1] + initY;
+        let y1;
+        if (this.anyBondConnection) {
+          y1 = (pairs[i][0][1] + 5 * i + 10) + initY;
+        } else {
+          y1 = (pairs[i][0][1] + 10) + initY;
+        }
+        let textParam = pairs[i][2];
+        let textParamX = x1 - 4;
+        let textParamY = pairs[i][0][1] + 11 + initY;
+        if (isNormal) {
+          this.drawList.push({func: (params) => {
+            ctx.strokeStyle = ((this.darkMode) ? "#FFFFFF" : "#000000");
+            ctx.lineWidth = 2;
+            ctx.font = "10px Arial";
+            ctx.beginPath();
+            ctx.moveTo(params[0], params[2]);
+            ctx.lineTo(params[0], params[3]);
+            ctx.lineTo(params[1], params[3]);
+            ctx.lineTo(params[1], params[4]);
+            ctx.stroke();
+          }, params: [x1, x2, y0, y1, y2, textParam, textParamX, textParamY]});
+        } else if (textParam === "+") {
+          this.drawList.push({func: (params) => {
+            ctx.strokeStyle = ((this.darkMode) ? "#FFFFFF" : "#000000");
+            ctx.lineWidth = 2;
+            ctx.font = "10px Arial";
+            ctx.beginPath();
+            ctx.moveTo(params[0], params[2]);
+            ctx.lineTo(params[0], params[3]);
+            ctx.stroke();
+          }, params: [x1, x2, y0, y1, y2, textParam, textParamX, textParamY]});
+        } else if (textParam === "-") {
+          this.drawList.push({func: (params) => {
+            ctx.strokeStyle = ((this.darkMode) ? "#FFFFFF" : "#000000");
+            ctx.lineWidth = 2;
+            ctx.font = "10px Arial";
+            ctx.beginPath();
+            ctx.moveTo(params[0], params[2]);
+            ctx.lineTo(params[0], params[3]);
+            ctx.moveTo(params[0] - 4, params[3] - 2);
+            ctx.lineTo(params[0] + 4, params[3] - 2);
+            ctx.stroke();
+          }, params: [x1, x2, y0, y1, y2, textParam, textParamX, textParamY]});
+        } else if (textParam === "?") {
+          this.drawList.push({func: (params) => {
+            ctx.fillStyle = ((this.darkMode) ? "#FFFFFF" : "#000000");
+            ctx.font = "13px Arial";
+            ctx.fillText(params[5], params[6], params[7]);
+          }, params: [x1, x2, y0, y1, y2, textParam, textParamX, textParamY]});
+        }
+      }
+      if (maxHeight + 10 > height + 5) {
+        this.x += length + 5;
+        this.y += maxHeight + 10;
+        return ([length + 5, maxHeight + 10]);
+      } else {
+        this.x += length + 5;
+        this.y += height + 5;
+        return ([length + 5, height + 5]);
+      }
+    }
+  }
+}
+
+
+class Reaction {
+  constructor(reactants, products, sign, ctx, parameters) {
+    this.parametes = parameters;
+    //list of reactant bngl definition strings
+    this.reactants = reactants;
+    //list of product bngl definition strings
+    this.products = products;
+    //either "->", "<->", or "<-"
+    this.sign = sign;
+    //canvas 2d context instance
+    this.ctx = ctx;
+    //dark mode boolean
+    this.darkMode = parameters.darkMode;
+    //list of draw functions
+    this.drawList = [];
+    //numbers tracking canvas dimensions as drawing is produced
+    this.totalLength = 0;
+    this.totalHeight = 0;
+    //boolean
+    this.drawExtraPlus = !!parameters.drawExtraPlus;
+    //MoleculeManager instance
+    this.mm = parameters.manager;
+  }
+
+  drawPlus(x, totalHeight, ctx) {
+    let plusLen = 30;
+    ctx.beginPath();
+    ctx.moveTo(x, totalHeight / 2);
+    ctx.lineTo(x + plusLen, totalHeight / 2);
+    ctx.moveTo(x + plusLen / 2, (plusLen + totalHeight) / 2);
+    ctx.lineTo(x + plusLen / 2, (-plusLen + totalHeight) / 2);
+    ctx.strokeStyle = ((this.darkMode) ? "#FFFFFF" : "#000000");;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.closePath();
+    ctx.lineWidth = 1;
+  }
+
+  drawArrow(x, totalHeight, ctx) {
+    let arrowLen = 30;
+    ctx.beginPath();
+    //draw arrow shaft
+    ctx.moveTo(x, totalHeight / 2);
+    ctx.lineTo(x + arrowLen, totalHeight / 2);
+    //draw right facing arrow tip
+    if (this.sign != "<-") {
+      ctx.moveTo(x + arrowLen, totalHeight / 2);
+      ctx.lineTo(x + arrowLen * (2/3), totalHeight / 2 + 7.5);
+      ctx.moveTo(x + arrowLen, totalHeight / 2);
+      ctx.lineTo(x + arrowLen * (2/3), totalHeight / 2 - 7.5);
+    }
+    //draw left facing arrow tip
+    if (this.sign != "->") {
+      ctx.moveTo(x, totalHeight / 2);
+      ctx.lineTo(x + arrowLen / 3, totalHeight / 2 + 7.5);
+      ctx.moveTo(x, totalHeight / 2);
+      ctx.lineTo(x + arrowLen / 3, totalHeight / 2 - 7.5);
+    }
+    ctx.strokeStyle = ((this.darkMode) ? "#FFFFFF" : "#000000");
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.closePath();
+    ctx.lineWidth = 1;
+  }
+
+  draw() {
+    //get html elements
+    let drawMap = {};
+    let scale = 1;
+    let reactants = this.reactants;
+    let products = this.products;
+
+    //reactants
+    for (let u = 0; u < reactants.length; u++) {
+      //init obj
+      let bngl = reactants[u];
+      let parameters = {
+        mode: 'compact',
+        darkMode: this.darkMode,
+        manager: this.mm,
+        compartment: this.mm.getCompartment(bngl)
+      };
+      let drawObj = new Graphic(bngl, parameters);
+
+      //initial draw to get size
+      var dims = drawObj.draw(this.ctx, this.totalLength, 0);
+      if (dims) {
+        this.totalLength += dims[0];
+      }
+
+      //add draw function
+      this.drawList.push(
+        {
+          func: (ctx, totalLength, totalHeight) => {
+            drawObj.doDrawList();
+          },
+          x: this.totalLength
+        }
+      );
+
+      //add plus under specific conditions
+      if (u < reactants.length - 1 || this.drawExtraPlus && products.length == 0 && this.sign == null) {
+        this.drawList.push(
+          {
+            func: (ctx, totalLength, totalHeight) => {
+              this.drawPlus(totalLength, totalHeight, this.ctx);
+            },
+            x: this.totalLength
+          }
+        );
+        this.totalLength += 30;
+      }
+
+      //add height
+      if (dims && dims[1] > this.totalHeight) {
+        this.totalHeight = dims[1];
+      }
+    }
+
+    //add arrow between reactants, products
+    if (this.sign) {
+      this.drawList.push(
+        {
+          func: (ctx, totalLength, totalHeight) => {
+            this.drawArrow(totalLength, totalHeight, this.ctx);
+          },
+          x: this.totalLength
+        }
+      );
+      this.totalLength += 30;
+    }
+
+    //products
+    for (let u = 0; u < products.length; u++) {
+      //init obj
+      let bngl = products[u];
+      let parameters = {
+        mode: 'compact',
+        darkMode: this.darkMode,
+        manager: this.mm,
+        compartment: this.mm.getCompartment(bngl)
+      };
+      let drawObj = new Graphic(bngl, parameters);
+
+      //initial draw to get size
+      var dims = drawObj.draw(this.ctx, this.totalLength, 0, scale);
+      if (dims) {
+        this.totalLength += dims[0];
+      }
+
+      //add product draw function
+      this.drawList.push(
+        {
+          func: (ctx, totalLength, totalHeight) => {
+            drawObj.doDrawList();
+          },
+          x: this.totalLength
+        }
+      );
+
+      //add plus under specific conditions
+      if (u < products.length - 1 || this.drawExtraPlus) {
+        this.drawList.push(
+          {
+            func: (ctx, totalLength, totalHeight) => {
+              this.drawPlus(totalLength, totalHeight, this.ctx);
+            },
+            x: this.totalLength
+          }
+        );
+        this.totalLength += 30;
+      }
+
+      //add height
+      if (dims && dims[1] > this.totalHeight) {
+        this.totalHeight = dims[1];
+      }
+    }
+
+    //return dimensions for resizing canvas
+    return [this.totalLength, this.totalHeight];
+  }
+
+  //execute all functions in draw list
+  doDrawList() {
+    let ctx = this.ctx;
+    let drawList = this.drawList;
+    let len = drawList.length;
+    for (let u = 0; u < len; u++) {
+      let elm = drawList[u];
+      elm.func(ctx, elm.x, this.totalHeight);
+    }
+  }
+}
+
+//to see contents of matrix
+function prettyPrintMatrix(mat) {
+  function helper(x) {
+    return ((x === 0) ? 0: 1);
+  }
+  for (let i = 0; i < mat.length; i++) {
+    mat[i] = mat[i].map(helper);
+  }
+  let output = "";
+  for (let i = 0; i < mat.length; i++) {
+    output += mat[i].toString() + "\n";
+  }
+  return output;
+}
+
+//convert Uint8ClampedArray to matrix of pixle alpha values
+function RGBAtoImageMat(arr, width) {
+  let output = [];
+  //filter every fourth element because only interested in alpha
+  let alphaOnly = arr.filter((element, index) => {
+    return (index + 1) % 4 === 0;
+  });
+  //correct array dimensions
+  for (let i = 0; i + width <= alphaOnly.length; i += width) {
+    output.push(alphaOnly.slice(i, i + width));
+  }
+  return output;
+}
+
+//get color of single pixle on ctx
+window.pixleAlpha = function pixleAlpha(ctx, x, y) {
+  return ctx.getImageData(x, y, 1, 1).data[3];
+}
+
+//find the size of drawing in ctx
+window.getCanvasDimentions = function getCanvasDimentions(ctx, data, maxWidth, maxHeight) {
+  let dims = [null, null];
+  let numMol = data.numberMolecules;
+  let noReacts = data.noReacts;
+  //if binary search can be used
+  if (numMol == 1 && !noReacts) {
+    //find initial furthest visible pixle right with binary search
+    let x = maxWidth;
+    let y = 1;
+    let a = 0;
+    let l = 23;
+    let r = maxWidth - 1;
+    let mid, centerA, lastA;
+    while (r >= l) {
+      mid = l + Math.floor((r - l) / 2);
+      centerA = pixleAlpha(ctx, mid, 1);
+      lastA = pixleAlpha(ctx, mid - 1, 1);
+      if (centerA == 0 && lastA != 0) {
+        break;
+      } else if (centerA != 0) {
+        l = mid + 1;
+      } else {
+        r = mid - 1;
+      }
+    }
+    x = mid;
+    //find absolute furthest visible pixle right
+    while (y <= maxHeight) {
+      y++;
+      a = pixleAlpha(ctx, x, y);
+      while (a != 0) {
+        x++;
+        a = pixleAlpha(ctx, x, y);
+      }
+    }
+    let right;
+    right = dims[0] = x;
+    //find initial furthest visible pixle down
+    x = 1;
+    y = maxHeight;
+    a = 0;
+    while (a == 0 && y >= 0) {
+      y--;
+      a = pixleAlpha(ctx, x, y);
+    }
+    y++
+    //find absolute furthest visible pixle right
+    while (x <= right) {
+      x++;
+      a = pixleAlpha(ctx, x, y);
+      while (a != 0) {
+        y++;
+        a = pixleAlpha(ctx, x, y);
+      }
+    }
+    dims[1] = y;
+    //check if arrow is present
+    if (pixleAlpha(ctx, dims[0] + 3, Math.floor(dims[1] / 2)) != 0) {
+      dims[0] += 35;
+    }
+    return dims;
+  } else {
+    //if binary search cannot be used
+    //find initial furthest visible pixle right
+    let x = 4500;
+    let y = 1;
+    let a = 0;
+    while (a == 0 && x >= 0) {
+      x--;
+      a = pixleAlpha(ctx, x, 1);
+    }
+    x++;
+    //find absolute furthest visible pixle right
+    while (y <= 250) {
+      y++;
+      a = pixleAlpha(ctx, x, y);
+      while (a != 0) {
+        x++;
+        a = pixleAlpha(ctx, x, y);
+      }
+    }
+    let right;
+    right = dims[0] = x;
+    //find initial furthest visible pixle down
+    x = 1;
+    y = 250;
+    a = 0;
+    while (a == 0 && y >= 0) {
+      y--;
+      a = pixleAlpha(ctx, x, y);
+    }
+    y++
+    //find absolute furthest visible pixle right
+    while (x <= right) {
+      x++;
+      a = pixleAlpha(ctx, x, y);
+      while (a != 0) {
+        y++;
+        a = pixleAlpha(ctx, x, y);
+      }
+    }
+    dims[1] = y;
+    //check if arrow is present
+    y = 1;
+    x = dims[0] + 3;
+    //could do binary search here, but rn linear search doesn't affect runtime too much
+    while (y < dims[1]) {
+      if (pixleAlpha(ctx, x, y) != 0) {
+        dims[0] += 35;
+        break;
+      }
+      y++;
+    }
+    return dims;
+  }
+}
diff --git a/frontend/public/bnglviz/styleblack.css b/frontend/public/bnglviz/styleblack.css
new file mode 100644
index 0000000..f1ea184
--- /dev/null
+++ b/frontend/public/bnglviz/styleblack.css
@@ -0,0 +1,78 @@
+body {
+  background-color: white;
+}
+
+* {
+  color: black;
+  font-family: "Times New Roman", Times, serif;
+}
+
+p {
+  margin: 3px;
+}
+
+canvas {
+  display: block;
+}
+
+button {
+  border: 1px solid grey;
+  border-radius: 2px;
+}
+
+input::file-selector-button {
+  border: 1px solid grey;
+  border-radius: 2px;
+  /*font-family: "Andale Mono";*/
+  background-color: white;
+}
+
+.dark-mode {
+  background-color: black;
+  color: white;
+}
+
+.light-mode {
+  background-color: white;
+  color: black;
+}
+
+.big-arrow {
+  font-size: 25px;
+
+}
+
+.main-td {
+  padding: 10px;
+}
+
+.main-td > p {
+  white-space: pre-wrap;
+  font-family: courier, monospace;
+  border-radius: 3px;
+  padding: 0 3px;
+}
+
+.divider-td {
+  padding: 0px;
+  height: 0px;
+}
+
+.bngl-header {
+  text-align: center;
+  margin: 0px;
+}
+
+.table-divider {
+  font-size: 30px;
+  text-align: left;
+  margin: 0px;
+}
+
+#limitation-div {
+  display: block;
+}
+
+#loading-p {
+  display: none;
+}