diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9514d7c2..80ff5de4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 -   Reformatted demo website to horizontal layout.
 -   Added more documentation for the `--output` flag.
+-   Added zoom functionality to output canvas.
 
 ### 🔧 Internal changes
 
diff --git a/demo/package.json b/demo/package.json
index 8dac0e46..71785672 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -48,6 +48,7 @@
         "memory-viz": "*",
         "react": "^18.3.1",
         "react-dom": "^18.2.0",
-        "react-error-boundary": "^4.0.12"
+        "react-error-boundary": "^4.0.12",
+        "react-zoom-pan-pinch": "^3.6.1"
     }
 }
diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx
index cfede943..edd87c84 100644
--- a/demo/src/SvgDisplay.tsx
+++ b/demo/src/SvgDisplay.tsx
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from "react";
 import mem from "memory-viz";
 import { Paper } from "@mui/material";
 import { configDataPropTypes } from "./MemoryModelsUserInput";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 
 type SvgDisplayPropTypes = {
     jsonResult: object | null;
@@ -33,16 +34,30 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) {
         <Paper
             sx={{
                 height: 500,
-                overflow: "auto",
+                overflow: "hidden",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
             }}
             variant="outlined"
         >
-            <canvas
-                data-testid="memory-models-canvas"
-                ref={canvasRef}
-                width={canvasWidth}
-                height={canvasHeight}
-            />
+            <TransformWrapper
+                minScale={0.2}
+                wheel={{ step: 0.2, smoothStep: 0.01 }}
+            >
+                <TransformComponent>
+                    <canvas
+                        style={{
+                            height: "100%",
+                            width: "100%",
+                        }}
+                        data-testid="memory-models-canvas"
+                        ref={canvasRef}
+                        width={canvasWidth}
+                        height={canvasHeight}
+                    />
+                </TransformComponent>
+            </TransformWrapper>
         </Paper>
     );
 }
diff --git a/package-lock.json b/package-lock.json
index 4a675d83..11490247 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,8 @@
                 "memory-viz": "*",
                 "react": "^18.3.1",
                 "react-dom": "^18.2.0",
-                "react-error-boundary": "^4.0.12"
+                "react-error-boundary": "^4.0.12",
+                "react-zoom-pan-pinch": "^3.6.1"
             },
             "devDependencies": {
                 "@babel/core": "^7.23.6",
@@ -18048,6 +18049,20 @@
                 "react-dom": ">=16.6.0"
             }
         },
+        "node_modules/react-zoom-pan-pinch": {
+            "version": "3.6.1",
+            "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.6.1.tgz",
+            "integrity": "sha512-SdPqdk7QDSV7u/WulkFOi+cnza8rEZ0XX4ZpeH7vx3UZEg7DoyuAy3MCmm+BWv/idPQL2Oe73VoC0EhfCN+sZQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=8",
+                "npm": ">=5"
+            },
+            "peerDependencies": {
+                "react": "*",
+                "react-dom": "*"
+            }
+        },
         "node_modules/readable-stream": {
             "version": "3.6.2",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",