diff --git a/demo/package.json b/demo/package.json
index ed7112d6..4d2b871c 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -4,7 +4,8 @@
     "description": "Demo website for memory-models-rough",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "build-dev": "webpack"
+        "build-dev": "webpack",
+        "start": "webpack serve"
     },
     "repository": {
         "type": "git",
@@ -33,8 +34,10 @@
         "webpack-cli": "^5.1.4"
     },
     "dependencies": {
+        "@mui/material": "^5.15.7",
         "@picocss/pico": "^1.5.10",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-error-boundary": "^4.0.12"
     }
 }
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index aa2617d2..7d80a2e7 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -1,32 +1,35 @@
-import React from "react";
+import React, { useState } from "react";
 import SvgDisplay from "./SvgDisplay";
-
-const DEMO_OBJECTS = [
-    {
-        isClass: true,
-        name: "__main__",
-        id: null,
-        value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-        stack_frame: true,
-    },
-    {
-        isClass: false,
-        name: "str",
-        id: 19,
-        value: "David is cool!",
-        style: ["highlight"],
-    },
-    { isClass: false, name: "int", id: 13, value: 7 },
-];
+import MemoryModelsUserInput from "./MemoryModels";
+import { ErrorBoundary } from "react-error-boundary";
 
 export default function App() {
+    const [formData, setFormData] = useState("");
+    const [jsonResult, setJsonResult] = useState(null);
+
+    const onSubmit = async (event) => {
+        event.preventDefault();
+        try {
+            setJsonResult(JSON.parse(formData));
+        } catch (error) {
+            console.error("Error parsing inputted JSON: ", error);
+            setJsonResult(null);
+        }
+    };
+
     return (
         <>
+            <MemoryModelsUserInput
+                formData={formData}
+                setFormData={setFormData}
+                onSubmit={onSubmit}
+            />
             <section>
-                <h2>Input</h2>
-                <pre>{JSON.stringify(DEMO_OBJECTS)}</pre>
+                <h2>Output</h2>
+                <ErrorBoundary fallback={<div>Something went wrong</div>}>
+                    <SvgDisplay jsonResult={jsonResult} />
+                </ErrorBoundary>
             </section>
-            <SvgDisplay />
         </>
     );
 }
diff --git a/demo/src/MemoryModels.tsx b/demo/src/MemoryModels.tsx
new file mode 100644
index 00000000..2eaff012
--- /dev/null
+++ b/demo/src/MemoryModels.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { Button, Card, CardContent, TextField, Grid } from "@mui/material";
+
+export default function MemoryModelsUserInput(props) {
+    const handleTextFieldChange = (event) => {
+        props.setFormData(event.target.value);
+    };
+
+    return (
+        <form onSubmit={props.onSubmit}>
+            <Card>
+                <CardContent>
+                    <Grid container spacing={2}>
+                        <Grid item xs={12}>
+                            <TextField
+                                id="multiline-textfield"
+                                label="Enter memory model JSON here"
+                                multiline
+                                fullWidth
+                                rows={10}
+                                maxRows={20}
+                                variant="outlined"
+                                value={props.formData}
+                                onChange={handleTextFieldChange}
+                                style={{
+                                    width: "100%",
+                                    fontFamily: "Monospace",
+                                }}
+                            />
+                        </Grid>
+                        <Grid item xs={12}>
+                            <Button
+                                type="submit"
+                                variant="contained"
+                                color="primary"
+                                style={{ textTransform: "none" }}
+                            >
+                                Draw Diagram
+                            </Button>
+                        </Grid>
+                    </Grid>
+                </CardContent>
+            </Card>
+        </form>
+    );
+}
diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx
index 719f5fd4..49f4fdda 100644
--- a/demo/src/SvgDisplay.tsx
+++ b/demo/src/SvgDisplay.tsx
@@ -1,36 +1,20 @@
 import React, { useRef, useEffect } from "react";
 import mem from "../../src/index"; // TODO: replace with import of the package after it's been published
 
-const DEMO_OBJECTS = [
-    {
-        isClass: true,
-        name: "__main__",
-        id: null,
-        value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-        stack_frame: true,
-    },
-    {
-        isClass: false,
-        name: "str",
-        id: 19,
-        value: "David is cool!",
-        style: ["highlight"],
-    },
-    { isClass: false, name: "int", id: 13, value: 7 },
-];
-
-export default function SvgDisplay() {
+export default function SvgDisplay(props) {
     const canvasRef = useRef(null);
 
     useEffect(() => {
-        const m = mem.draw(DEMO_OBJECTS, true, { width: 1300 });
-        m.render(canvasRef.current);
-    }, []);
+        if (props.jsonResult !== null) {
+            const m = mem.draw(props.jsonResult, true, { width: 1300 });
+            m.clear(canvasRef.current);
+            m.render(canvasRef.current);
+        }
+    }, [props.jsonResult]);
 
     return (
-        <section>
-            <h2>Output</h2>
+        <>
             <canvas ref={canvasRef} width={1000} height={1000} />;
-        </section>
+        </>
     );
 }
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
index e2a8959e..6457dcba 100644
--- a/demo/webpack.config.js
+++ b/demo/webpack.config.js
@@ -8,6 +8,16 @@ module.exports = [
             path: path.resolve(__dirname, "dist"),
             filename: "index.js",
         },
+        devServer: {
+            static: {
+                directory: path.join(__dirname, "dist"),
+            },
+            compress: true,
+            port: 9000,
+            client: {
+                overlay: false,
+            },
+        },
         module: {
             rules: [
                 {
diff --git a/package-lock.json b/package-lock.json
index fee03d4f..89f7fc7f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,9 +40,11 @@
             "version": "0.1.0",
             "license": "MIT",
             "dependencies": {
+                "@mui/material": "^5.15.7",
                 "@picocss/pico": "^1.5.10",
                 "react": "^18.2.0",
-                "react-dom": "^18.2.0"
+                "react-dom": "^18.2.0",
+                "react-error-boundary": "^4.0.12"
             },
             "devDependencies": {
                 "@babel/core": "^7.23.6",
@@ -1949,9 +1951,9 @@
             "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
         },
         "node_modules/@babel/runtime": {
-            "version": "7.23.6",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz",
-            "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==",
+            "version": "7.23.9",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
+            "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
             "dependencies": {
                 "regenerator-runtime": "^0.14.0"
             },
@@ -2900,6 +2902,72 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@emotion/cache": {
+            "version": "11.11.0",
+            "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+            "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+            "dependencies": {
+                "@emotion/memoize": "^0.8.1",
+                "@emotion/sheet": "^1.2.2",
+                "@emotion/utils": "^1.2.1",
+                "@emotion/weak-memoize": "^0.3.1",
+                "stylis": "4.2.0"
+            }
+        },
+        "node_modules/@emotion/memoize": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+            "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+        },
+        "node_modules/@emotion/sheet": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+            "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+        },
+        "node_modules/@emotion/utils": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+            "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+        },
+        "node_modules/@emotion/weak-memoize": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+            "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+        },
+        "node_modules/@floating-ui/core": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+            "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+            "dependencies": {
+                "@floating-ui/utils": "^0.2.1"
+            }
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "1.6.3",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+            "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+            "dependencies": {
+                "@floating-ui/core": "^1.0.0",
+                "@floating-ui/utils": "^0.2.0"
+            }
+        },
+        "node_modules/@floating-ui/react-dom": {
+            "version": "2.0.8",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+            "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+            "dependencies": {
+                "@floating-ui/dom": "^1.6.1"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
+        "node_modules/@floating-ui/utils": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+            "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+        },
         "node_modules/@hapi/hoek": {
             "version": "9.3.0",
             "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -3757,6 +3825,236 @@
                 "react": ">=16"
             }
         },
+        "node_modules/@mui/base": {
+            "version": "5.0.0-beta.36",
+            "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.36.tgz",
+            "integrity": "sha512-6A8fYiXgjqTO6pgj31Hc8wm1M3rFYCxDRh09dBVk0L0W4cb2lnurRJa3cAyic6hHY+we1S58OdGYRbKmOsDpGQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@floating-ui/react-dom": "^2.0.8",
+                "@mui/types": "^7.2.13",
+                "@mui/utils": "^5.15.9",
+                "@popperjs/core": "^2.11.8",
+                "clsx": "^2.1.0",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0",
+                "react-dom": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/core-downloads-tracker": {
+            "version": "5.15.10",
+            "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.10.tgz",
+            "integrity": "sha512-qPv7B+LeMatYuzRjB3hlZUHqinHx/fX4YFBiaS19oC02A1e9JFuDKDvlyRQQ5oRSbJJt0QlaLTlr0IcauVcJRQ==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            }
+        },
+        "node_modules/@mui/material": {
+            "version": "5.15.10",
+            "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.10.tgz",
+            "integrity": "sha512-YJJGHjwDOucecjDEV5l9ISTCo+l9YeWrho623UajzoHRYxuKUmwrGVYOW4PKwGvCx9SU9oklZnbbi2Clc5XZHw==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@mui/base": "5.0.0-beta.36",
+                "@mui/core-downloads-tracker": "^5.15.10",
+                "@mui/system": "^5.15.9",
+                "@mui/types": "^7.2.13",
+                "@mui/utils": "^5.15.9",
+                "@types/react-transition-group": "^4.4.10",
+                "clsx": "^2.1.0",
+                "csstype": "^3.1.3",
+                "prop-types": "^15.8.1",
+                "react-is": "^18.2.0",
+                "react-transition-group": "^4.4.5"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.5.0",
+                "@emotion/styled": "^11.3.0",
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0",
+                "react-dom": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                },
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/material/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        },
+        "node_modules/@mui/private-theming": {
+            "version": "5.15.9",
+            "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.9.tgz",
+            "integrity": "sha512-/aMJlDOxOTAXyp4F2rIukW1O0anodAMCkv1DfBh/z9vaKHY3bd5fFf42wmP+0GRmwMinC5aWPpNfHXOED1fEtg==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@mui/utils": "^5.15.9",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/styled-engine": {
+            "version": "5.15.9",
+            "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.9.tgz",
+            "integrity": "sha512-NRKtYkL5PZDH7dEmaLEIiipd3mxNnQSO+Yo8rFNBNptY8wzQnQ+VjayTq39qH7Sast5cwHKYFusUrQyD+SS4Og==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@emotion/cache": "^11.11.0",
+                "csstype": "^3.1.3",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.4.1",
+                "@emotion/styled": "^11.3.0",
+                "react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/system": {
+            "version": "5.15.9",
+            "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.9.tgz",
+            "integrity": "sha512-SxkaaZ8jsnIJ77bBXttfG//LUf6nTfOcaOuIgItqfHv60ZCQy/Hu7moaob35kBb+guxVJnoSZ+7vQJrA/E7pKg==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@mui/private-theming": "^5.15.9",
+                "@mui/styled-engine": "^5.15.9",
+                "@mui/types": "^7.2.13",
+                "@mui/utils": "^5.15.9",
+                "clsx": "^2.1.0",
+                "csstype": "^3.1.3",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.5.0",
+                "@emotion/styled": "^11.3.0",
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                },
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/types": {
+            "version": "7.2.13",
+            "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.13.tgz",
+            "integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==",
+            "peerDependencies": {
+                "@types/react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/utils": {
+            "version": "5.15.9",
+            "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.9.tgz",
+            "integrity": "sha512-yDYfr61bCYUz1QtwvpqYy/3687Z8/nS4zv7lv/ih/6ZFGMl1iolEvxRmR84v2lOYxlds+kq1IVYbXxDKh8Z9sg==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@types/prop-types": "^15.7.11",
+                "prop-types": "^15.8.1",
+                "react-is": "^18.2.0"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/utils/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3831,6 +4129,15 @@
             "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.24.tgz",
             "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ=="
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@sideway/address": {
             "version": "4.1.4",
             "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -4545,6 +4852,14 @@
                 "@types/react-router": "*"
             }
         },
+        "node_modules/@types/react-transition-group": {
+            "version": "4.4.10",
+            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+            "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+            "dependencies": {
+                "@types/react": "*"
+            }
+        },
         "node_modules/@types/retry": {
             "version": "0.12.0",
             "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -6378,9 +6693,9 @@
             }
         },
         "node_modules/clsx": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-            "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+            "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
             "engines": {
                 "node": ">=6"
             }
@@ -7623,6 +7938,15 @@
                 "utila": "~0.4"
             }
         },
+        "node_modules/dom-helpers": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+            "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+            "dependencies": {
+                "@babel/runtime": "^7.8.7",
+                "csstype": "^3.0.2"
+            }
+        },
         "node_modules/dom-serializer": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -16410,6 +16734,17 @@
                 "react": "^18.2.0"
             }
         },
+        "node_modules/react-error-boundary": {
+            "version": "4.0.12",
+            "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.12.tgz",
+            "integrity": "sha512-kJdxdEYlb7CPC1A0SeUY38cHpjuu6UkvzKiAmqmOFL21VRfMhOcWxTCBgLVCO0VEMh9JhFNcVaXlV4/BTpiwOA==",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5"
+            },
+            "peerDependencies": {
+                "react": ">=16.13.1"
+            }
+        },
         "node_modules/react-error-overlay": {
             "version": "6.0.11",
             "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -16528,6 +16863,21 @@
                 "react": ">=15"
             }
         },
+        "node_modules/react-transition-group": {
+            "version": "4.4.5",
+            "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+            "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5",
+                "dom-helpers": "^5.0.1",
+                "loose-envify": "^1.4.0",
+                "prop-types": "^15.6.2"
+            },
+            "peerDependencies": {
+                "react": ">=16.6.0",
+                "react-dom": ">=16.6.0"
+            }
+        },
         "node_modules/readable-stream": {
             "version": "3.6.2",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -17931,6 +18281,11 @@
                 "postcss": "^8.2.15"
             }
         },
+        "node_modules/stylis": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+            "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+        },
         "node_modules/supports-color": {
             "version": "8.1.1",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
diff --git a/src/memory_model.ts b/src/memory_model.ts
index d9f64964..bb010693 100644
--- a/src/memory_model.ts
+++ b/src/memory_model.ts
@@ -129,6 +129,15 @@ export class MemoryModel {
         };
     }
 
+    /**
+     * Clear a given canvas object.
+     * @param canvas - the element that is currently used to draw graphics
+     */
+    clear(canvas) {
+        const ctx = canvas.getContext("2d");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+
     /**
      * Distribute the object drawing depending on type
      * @param {number} x - value for x coordinate of top left corner