diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7a611def..fd0bf878 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -39,8 +39,6 @@ jobs:
                   cache: npm
             - name: Install npm packages
               run: npm ci
-            - name: Build
-              run: npm run build-dev
             - name: Run jest tests
               run: npm run test-cov
             - name: Coveralls (jest)
diff --git a/demo/jest.config.ts b/demo/jest.config.ts
index bb9ad367..2b313f7c 100644
--- a/demo/jest.config.ts
+++ b/demo/jest.config.ts
@@ -19,7 +19,7 @@ const config: Config = {
     clearMocks: true,
 
     // Indicates whether the coverage information should be collected while executing the test
-    collectCoverage: false,
+    // collectCoverage: false,
 
     // An array of glob patterns indicating a set of files for which coverage information should be collected
     // collectCoverageFrom: undefined,
@@ -74,7 +74,7 @@ const config: Config = {
     // maxWorkers: "50%",
 
     // An array of directory names to be searched recursively up from the requiring module's location
-    // moduleDirectories: ["node_modules", "../src", "../dist"],
+    // moduleDirectories: ["node_modules"],
 
     // An array of file extensions your modules use
     // moduleFileExtensions: [
@@ -92,6 +92,7 @@ const config: Config = {
     moduleNameMapper: {
         // Force module roughjs to resolve with the CJS entry point, because Jest does not support package.json.exports. Elaborated in PR#15.
         roughjs: require.resolve("roughjs"),
+        "memory-viz": require.resolve("../memory-viz/src"),
     },
 
     // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
diff --git a/demo/package.json b/demo/package.json
index 727fa37a..240e5f20 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -43,6 +43,7 @@
         "@mui/icons-material": "^5.15.14",
         "@mui/material": "^5.15.7",
         "@picocss/pico": "^1.5.10",
+        "memory-viz": "*",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-error-boundary": "^4.0.12"
diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx
index 50de370d..5dbdcb76 100644
--- a/demo/src/SvgDisplay.tsx
+++ b/demo/src/SvgDisplay.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from "react";
-import mem from "../../src/index"; // TODO: replace with import of the package after it's been published
+import mem from "memory-viz";
 import { configDataPropTypes } from "./MemoryModelsUserInput";
 
 type SvgDisplayPropTypes = {
diff --git a/demo/src/__tests__/App.spec.tsx b/demo/src/__tests__/App.spec.tsx
index f729360d..315abcc8 100644
--- a/demo/src/__tests__/App.spec.tsx
+++ b/demo/src/__tests__/App.spec.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import App from "../App";
-import mem from "../../../src/index";
+import mem from "memory-viz";
 
 describe("App", () => {
     beforeEach(() => {
diff --git a/demo/src/__tests__/SvgDisplay.spec.tsx b/demo/src/__tests__/SvgDisplay.spec.tsx
index 4fe49cbb..cd8641d0 100644
--- a/demo/src/__tests__/SvgDisplay.spec.tsx
+++ b/demo/src/__tests__/SvgDisplay.spec.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import SvgDisplay from "../SvgDisplay";
-import mem from "../../../src/index";
+import mem from "memory-viz";
 const { draw } = mem;
 
 const mockMemoryModels = {
@@ -10,7 +10,7 @@ const mockMemoryModels = {
     render: jest.fn(),
 };
 
-jest.mock("../../../src/index", () => ({
+jest.mock("memory-viz", () => ({
     draw: jest.fn(() => mockMemoryModels),
 }));
 
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
index 3f0c71d8..29abc19e 100644
--- a/demo/webpack.config.js
+++ b/demo/webpack.config.js
@@ -46,6 +46,7 @@ module.exports = [
         externals: {
             fs: "fs",
         },
+        externalsType: "window",
         plugins: [
             new HtmlWebpackPlugin({
                 title: "MemoryViz Demo",
@@ -55,6 +56,9 @@ module.exports = [
         ],
         resolve: {
             extensions: [".ts", ".tsx", ".js", ".jsx", ".json", ".css"],
+            alias: {
+                "memory-viz": path.resolve(__dirname, "../memory-viz/src"),
+            },
         },
     },
 ];
diff --git a/docs/docs/99-api/index.md b/docs/docs/99-api/index.md
index b9275049..c53c8c78 100644
--- a/docs/docs/99-api/index.md
+++ b/docs/docs/99-api/index.md
@@ -6,7 +6,7 @@ sidebar_position: 0
 custom_edit_url: null
 ---
 
-# Memory model diagrams
+# MemoryViz: Creating memory model diagrams
 
 This package generates memory model diagrams for Python code in the style of CSC110/111/148 at the University of Toronto.
 This uses the [Rough.js](https://roughjs.com/) Javascript library to emulate the look of hand-drawn diagrams.
@@ -37,7 +37,7 @@ This uses the [Rough.js](https://roughjs.com/) Javascript library to emulate the
 4. Compile the Javascript assets using [webpack](https://webpack.js.org/guides/getting-started/):
 
     ```console
-    $ npm run build-dev
+    $ npm run build-dev --workspace=memory-viz
     ```
 
 5. Install the pre-commit hooks to automatically format your code when you make commits:
@@ -56,23 +56,13 @@ You should then be able to try out the demo in the [Example usage](#example-usag
 Rather than running `npm run build-dev` to recompile your Javascript bundle every time you make a change, you can instead run the following command:
 
 ```console
-$ npm run watch
+$ npm run watch --workspace=memory-viz
 ```
 
 This will use `webpack` to watch for changes to the Javascript source files and recompile them automatically.
 
 _Note_: this command will keep running until you manually terminate it (Ctrl + C), and so you'll need to open a new terminal window to enter new terminal commands like running the demo below.
 
-### Previewing the website
-
-We use [Docusaurus](https://docusaurus.io/) to generate the website from the source files under `docs/`.
-To preview the website (e.g., when you make changes to the documentation):
-
-```console
-$ cd docs
-$ npm run start
-```
-
 ## Usage
 
 The only function that a user will ever have to call is `user_functions.draw`.
@@ -90,342 +80,3 @@ This function has three parameters:
 (**Note**: If the array of objects to be drawn is stored in a JSON file, the user can simply choose to pass the path to
 that JSON as the first parameter to `draw`. The implementation automatically handles the case that `typeof objs === "string"`.
 )
-
-### Simple Example
-
-Before showing the full capabilities of the project, here is a simple example to get you started, consisting of
-one stack-frame and two objects.
-
-```javascript
-const { draw } = require("../../dist/memory_models_rough.js");
-
-const 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 },
-];
-
-const m = draw(objects, true, { width: 1300 });
-
-m.save("simple_demo.svg");
-```
-
-![Diagram generated for simple_demo.js file.](examples/simple_demo/simple_demo.svg)
-
-### Automation Example
-
-One of the main capabilities offered is the automatic generation of coordinates for objects
-passed by the user.
-
-```javascript
-// The array version of automation.js (in automation.js same objects are used, but they are in the JSON file format.)
-const { draw } = require("user_functions");
-
-const objs = [
-    {
-        isClass: true,
-        name: "__main__",
-        id: null,
-        value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-        stack_frame: true,
-    },
-    {
-        isClass: true,
-        name: "func",
-        id: null,
-        value: { age: 12, name: 17 },
-        stack_frame: true,
-    },
-    {
-        isClass: false,
-        name: "list",
-        id: 84,
-        value: [32, 10, 90, 57],
-        show_indexes: true,
-    },
-    { isClass: false, name: "None", id: 13, value: "None" },
-];
-
-const configuration = {
-    width: 1300,
-    padding: 30,
-    top_margin: 30,
-    bottom_margin: 40,
-    left_margin: 20,
-    right_margin: 30,
-};
-
-const m = draw(objs, true, configuration);
-
-m.save("~/Desktop/demo.svg");
-```
-
-Running node `automation_demo.js` creates a file `automation_demo.svg` that contains the following image:
-
-![Diagram generated for automation_demo.js file.](examples/automation_demo/automation_demo.svg)
-
-### Manual Coordinates Example
-
-Despite the automation capabilities, the user may still wish to hardcode the coordinates of the memory boxes.
-To do this, they must set the `automation` parameter of the `draw` function to false (signifying that no automation
-should take place), and supply `x` and `y` coordinates for _every_ object in the array (there is no notion of
-"partial" automation).
-
-Note that in the case of manual coordinates, the `configuration` parameter can provide no additional functionality,
-and an empty object (`{}`) will suffice.
-
-```javascript
-// The array version of automation.js (in automation.js same objects are used, but they are in the JSON file format.)
-const { draw } = require("user_functions");
-
-const objs = [
-    {
-        isClass: true,
-        x: 25,
-        y: 200,
-        name: "__main__",
-        id: null,
-        value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-        stack_frame: true,
-    },
-    {
-        isClass: false,
-        x: 1050,
-        y: 500,
-        name: "dict",
-        id: 10,
-        value: { x: 81, y: 100, z: 121 },
-    },
-    { isClass: false, x: 1050, y: 40, name: "tuple", id: 11, value: [82, 76] },
-    { isClass: false, x: 750, y: 250, name: "bool", id: 32, value: true },
-];
-const configuration = {};
-
-const m = draw(objs, false, configuration);
-
-m.save("~/Desktop/manual_demo.svg");
-```
-
-Running node `manual_demo.js` creates a file `manual_demo.svg` that contains the following image:
-
-![Diagram generated for automation_demo.js file.](examples/manual_demo/manual_demo.svg)
-
-### Style Features for Drawing
-
-The package allows user to define their own configuration for the style of the drawings. To achieve this, we utilize
-rough package (see the documentation of rough package) and SVG (see the documentation of SVG for details). Rough package
-is used for style configurations related to boxes (that are drawn) and SVG is mainly related to texts.
-Moreover, we have created a few presets that the user can utilize (without creating custom-made style)
-.We allow user to pass in a JavaScript object, as well an array (which can include a mixture of presets and user-defined styles).
-Therefore, the user needs to follow the guidelines(documentation) of the aforementioned packages **and** the instructions in the `style.md` file
-on how to pass these _style_ arguments. We strongly recommend the user to consult the `style.md` file.
-
-Also, we provide pre-sets that users can utilize. Hence, user can pass these presets (following
-the instructions in the `style.md` file)
-
-The code for generating a memory model diagram with built-in default style will look similar to this:
-
-```javascript
-const objs = [
-    {
-        isClass: true,
-        x: 25,
-        y: 200,
-        name: "__main__",
-        id: null,
-        value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-        stack_frame: true,
-    },
-    {
-        isClass: false,
-        x: 350,
-        y: 350,
-        name: "list",
-        id: 54,
-        value: [19, 43, 28, 49],
-    },
-    {
-        isClass: false,
-        x: 750,
-        y: 500,
-        name: "str",
-        id: 43,
-        value: "David is cool",
-    },
-    {
-        isClass: false,
-        x: 1050,
-        y: 260,
-        name: "set",
-        id: 90,
-        value: [36, 49, 64],
-    },
-    {
-        isClass: false,
-        x: 1050,
-        y: 500,
-        name: "dict",
-        id: 10,
-        value: { x: 81, y: 100, z: 121 },
-    },
-    { isClass: false, x: 750, y: 750, name: "None", id: 13, value: "None" },
-];
-```
-
-The produced image will be as follows:
-
-![Diagram generated for showing our default style](examples/style_demo/nostyle_demo.svg)
-
-On the other hand, the same memory model diagram can be created with utilizing styling features s follows:
-
-```javascript
-const objs = [
-    {
-        isClass: true,
-        x: 25,
-        y: 200,
-        name: "__main__",
-        id: null,
-        value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-        stack_frame: true,
-        style: ["highlight"],
-    },
-    {
-        isClass: false,
-        x: 350,
-        y: 350,
-        name: "list",
-        id: 54,
-        value: [19, 43, 28, 49],
-        style: { text_id: { "font-style": "italic", "font-size": "x-large" } },
-    },
-    {
-        isClass: false,
-        x: 750,
-        y: 500,
-        name: "str",
-        id: 43,
-        value: "David is cool",
-        style: "highlight",
-    },
-    {
-        isClass: false,
-        x: 1050,
-        y: 260,
-        name: "set",
-        id: 90,
-        value: [36, 49, 64],
-    },
-    {
-        isClass: false,
-        x: 1050,
-        y: 500,
-        name: "dict",
-        id: 10,
-        value: { x: 81, y: 100, z: 121 },
-        style: { text_id: { "font-style": "italic" } },
-    },
-    {
-        isClass: false,
-        x: 750,
-        y: 750,
-        name: "None",
-        id: 13,
-        value: "None",
-        style: {
-            text_value: { "font-style": "italic" },
-            box_id: { fill: "red", fillStyle: "dots" },
-            box_type: { fill: "red", fillStyle: "solid" },
-            box_container: { fill: "black", fillStyle: "solid" },
-        },
-    },
-];
-```
-
-The resulting diagram will be like this:
-
-![Diagram generated for showing an styling features](examples/style_demo/style_demo.svg)
-
-### Blank Spaces Example
-
-In many cases, the user might want to have blank spaces in the memory model when in `automation === true` mode in the
-`draw` function (if the user is "hard coding" coordinates, then he can easily include spaces wherever he desires).
-
-To define a blank box, you specify it as an object in the array (the classic array of objects) with three attributes:
-
--   `name: "BLANK"`
--   `width: ...` (the desired width of the blank space)
--   `height: ...` (the desired height of the blank space)
-
-All these attributes are mandatory, and any additional attributes will not have any effect whatsoever in the
-rendering of the blank space.
-Furthermore, note that `configuration.sort_by` should be `null`, as otherwise you cannot control where the
-blank spaces will be located.
-
-In the below example we have added three blank spaces of varying dimensions.
-
-```javascript
-const { draw } = require("../../dist/memory_models_rough.js");
-
-const WIDTH = 1300;
-
-const listOfObjs = [
-    {
-        isClass: true,
-        name: "__main__",
-        id: null,
-        value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-        stack_frame: true,
-    },
-    { name: "BLANK", width: 100, height: 200, stack_frame: true },
-    {
-        isClass: true,
-        name: "func",
-        id: null,
-        value: { age: 12, name: 17 },
-        stack_frame: true,
-    },
-    { isClass: false, name: "list", id: 82, value: [19, 43, 28, 49] },
-    {
-        isClass: false,
-        name: "list",
-        id: 84,
-        value: [32, 10, 90, 57],
-        show_indexes: true,
-    },
-    { isClass: false, name: "int", id: 19, value: 1969 },
-    { name: "BLANK", width: 100, height: 200 },
-    { isClass: false, name: "bool", id: 32, value: true },
-    { isClass: false, name: "str", id: 43, value: "David is cool" },
-    { name: "BLANK", width: 200, height: 150 },
-    { isClass: false, name: "tuple", id: 11, value: [82, 76] },
-];
-
-const configuration = {
-    width: WIDTH,
-    padding: 30,
-    right_margin: 20,
-    bottom_margin: 20,
-    sort_by: null,
-};
-
-const m = draw(listOfObjs, true, configuration);
-
-m.save("blankspaces_demo.svg");
-```
-
-Running node `blankspaces_demo.js` creates a file `blankspaces_demo.svg` that contains the following image:
-
-![Diagram generated for automation_demo.js file.](examples/blankspaces_demo/blankspaces_demo.svg)
diff --git a/docs/docs/99-api/modules.md b/docs/docs/99-api/modules.md
index 708f5392..29852c69 100644
--- a/docs/docs/99-api/modules.md
+++ b/docs/docs/99-api/modules.md
@@ -32,4 +32,4 @@ the produced canvas
 
 #### Defined in
 
-[user_functions.ts:29](https://github.com/david-yz-liu/memory-viz/blob/bc37a9e/src/user_functions.ts#L29)
+user_functions.ts:29
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 1a86d6ff..9cd92905 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -23,7 +23,7 @@ const config = {
     // organizationName: 'facebook', // Usually your GitHub org/user name.
     // projectName: 'docusaurus', // Usually your repo name.
 
-    onBrokenLinks: "throw",
+    onBrokenLinks: "ignore",
     onBrokenMarkdownLinks: "warn",
 
     // Even if you don't use internationalization, you can use this field to set
@@ -142,7 +142,7 @@ const config = {
 
             // Plugin / TypeDoc options
             {
-                entryPoints: ["../src/user_functions.ts"],
+                entryPoints: ["../memory-viz/src/user_functions.ts"],
                 tsconfig: "../tsconfig.json",
                 out: "99-api",
             },
diff --git a/jest.config.ts b/jest.config.ts
index 02ce481b..41aefd5c 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -73,9 +73,7 @@ const config: Config = {
     // maxWorkers: "50%",
 
     // An array of directory names to be searched recursively up from the requiring module's location
-    // moduleDirectories: [
-    //   "node_modules"
-    // ],
+    // moduleDirectories: ["node_modules"],
 
     // An array of file extensions your modules use
     // moduleFileExtensions: [
@@ -105,7 +103,7 @@ const config: Config = {
     // preset: undefined,
 
     // Run tests from one or more projects
-    projects: ["./demo/jest.config.ts", "./src/jest.config.ts"],
+    projects: ["./demo/jest.config.ts", "./memory-viz/src/jest.config.ts"],
 
     // Use this configuration option to add custom reporters to Jest
     // reporters: undefined,
diff --git a/.babelrc b/memory-viz/.babelrc
similarity index 100%
rename from .babelrc
rename to memory-viz/.babelrc
diff --git a/memory-viz/README.md b/memory-viz/README.md
new file mode 100644
index 00000000..ade684fc
--- /dev/null
+++ b/memory-viz/README.md
@@ -0,0 +1,74 @@
+# MemoryViz: Creating memory model diagrams
+
+This package generates memory model diagrams for Python code in the style of CSC110/111/148 at the University of Toronto.
+This uses the [Rough.js](https://roughjs.com/) Javascript library to emulate the look of hand-drawn diagrams.
+
+**Note**: this project is currently experimental, and may undergo significant changes before stabilizing.
+
+## Installation (users)
+
+1. Install [Node.js](https://nodejs.org/en/).
+2. Install the `memory-viz` package from GitHub (it is currently not on npm):
+
+    ```console
+    $ npm install git+https://github.com/david-yz-liu/memory-viz.git -g
+    ```
+
+    _Note_: omit the `-g` flag if you want to install the package into just the current working directory.
+
+## Installation (developers)
+
+1. First, clone this repository.
+2. Install [Node.js](https://nodejs.org/en/).
+3. Open a terminal in your local code of the repository, and then run:
+
+    ```console
+    $ npm install
+    ```
+
+4. Compile the Javascript assets using [webpack](https://webpack.js.org/guides/getting-started/):
+
+    ```console
+    $ npm run build-dev --workspace=memory-viz
+    ```
+
+5. Install the pre-commit hooks to automatically format your code when you make commits:
+
+    ```console
+    $ npx husky install
+    $ npm pkg set scripts.prepare="husky install"
+    $ npx husky add .husky/pre-commit "npx lint-staged"
+    ```
+
+That's it!
+You should then be able to try out the demo in the [Example usage](#example-usage) section below.
+
+### Automatic Javascript compilation
+
+Rather than running `npm run build-dev` to recompile your Javascript bundle every time you make a change, you can instead run the following command:
+
+```console
+$ npm run watch --workspace=memory-viz
+```
+
+This will use `webpack` to watch for changes to the Javascript source files and recompile them automatically.
+
+_Note_: this command will keep running until you manually terminate it (Ctrl + C), and so you'll need to open a new terminal window to enter new terminal commands like running the demo below.
+
+## Usage
+
+The only function that a user will ever have to call is `user_functions.draw`.
+
+This function has three parameters:
+
+1. `objs`: The array of objects (including stack-frames) to be drawn. Each object must follow
+   a strict structure which is thoroughly outlined in the `object_structure.md` file.
+2. `automation`: A boolean, indicating whether the location of the memory-model boxes should
+   be automatically generated. If this is false, the user must x and y attributes for each object
+   (representing the object's coordinates).
+3. `configuration`: A JS object representing configuration such as the user-specified width.
+   Defining a `width` property is mandatory if `automation` is `true`.
+
+(**Note**: If the array of objects to be drawn is stored in a JSON file, the user can simply choose to pass the path to
+that JSON as the first parameter to `draw`. The implementation automatically handles the case that `typeof objs === "string"`.
+)
diff --git a/memory-viz/package.json b/memory-viz/package.json
new file mode 100644
index 00000000..369c5d31
--- /dev/null
+++ b/memory-viz/package.json
@@ -0,0 +1,45 @@
+{
+    "name": "memory-viz",
+    "version": "0.1.0",
+    "description": "Library for creating beginner-friendly memory model diagrams.",
+    "main": "dist/memory_viz.js",
+    "scripts": {
+        "test": "jest --no-cache",
+        "test-cov": "jest --no-cache --coverage",
+        "watch": "webpack --watch",
+        "build-dev": "tsc && webpack",
+        "build": "tsc && webpack --mode production"
+    },
+    "keywords": [
+        "education",
+        "diagrams"
+    ],
+    "author": "David Liu",
+    "contributors": [
+        "Mimis Chlympatsos",
+        "Shannon Komguem",
+        "Utku Egemen Umut",
+        "Ziyuan (Jerry) Zhang"
+    ],
+    "license": "MIT",
+    "dependencies": {
+        "@xmldom/xmldom": "^0.8.6",
+        "deepmerge": "^4.3.1",
+        "roughjs": "^4.5.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.7",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-typescript": "^7.23.3",
+        "@types/jest": "^29.5.11",
+        "@types/node": "^20.10.5",
+        "babel-loader": "^9.1.0",
+        "husky": "^8.0.3",
+        "jest": "^29.7.0",
+        "ts-loader": "^9.5.1",
+        "ts-node": "^10.9.2",
+        "typescript": "^5.3.3",
+        "webpack": "^5.75.0",
+        "webpack-cli": "^5.0.1"
+    }
+}
diff --git a/src/automate.ts b/memory-viz/src/automate.ts
similarity index 100%
rename from src/automate.ts
rename to memory-viz/src/automate.ts
diff --git a/src/config.ts b/memory-viz/src/config.ts
similarity index 100%
rename from src/config.ts
rename to memory-viz/src/config.ts
diff --git a/src/index.ts b/memory-viz/src/index.ts
similarity index 100%
rename from src/index.ts
rename to memory-viz/src/index.ts
diff --git a/src/jest.config.ts b/memory-viz/src/jest.config.ts
similarity index 99%
rename from src/jest.config.ts
rename to memory-viz/src/jest.config.ts
index 98b0a1b3..b57ea16d 100644
--- a/src/jest.config.ts
+++ b/memory-viz/src/jest.config.ts
@@ -19,7 +19,7 @@ const config: Config = {
     clearMocks: true,
 
     // Indicates whether the coverage information should be collected while executing the test
-    collectCoverage: false,
+    // collectCoverage: false,
 
     // An array of glob patterns indicating a set of files for which coverage information should be collected
     // collectCoverageFrom: undefined,
diff --git a/src/memory_model.ts b/memory-viz/src/memory_model.ts
similarity index 100%
rename from src/memory_model.ts
rename to memory-viz/src/memory_model.ts
diff --git a/src/style.ts b/memory-viz/src/style.ts
similarity index 100%
rename from src/style.ts
rename to memory-viz/src/style.ts
diff --git a/src/tests/__snapshots__/draw.spec.tsx.snap b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
similarity index 100%
rename from src/tests/__snapshots__/draw.spec.tsx.snap
rename to memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
diff --git a/src/tests/draw.spec.tsx b/memory-viz/src/tests/draw.spec.tsx
similarity index 100%
rename from src/tests/draw.spec.tsx
rename to memory-viz/src/tests/draw.spec.tsx
diff --git a/src/user_functions.ts b/memory-viz/src/user_functions.ts
similarity index 100%
rename from src/user_functions.ts
rename to memory-viz/src/user_functions.ts
diff --git a/webpack.config.js b/memory-viz/webpack.config.js
similarity index 100%
rename from webpack.config.js
rename to memory-viz/webpack.config.js
diff --git a/package-lock.json b/package-lock.json
index f3e996a0..3af13812 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,34 +5,15 @@
     "requires": true,
     "packages": {
         "": {
-            "name": "memory-viz",
-            "version": "0.1.0",
-            "license": "MIT",
             "workspaces": [
+                "memory-viz",
                 "demo",
                 "docs"
             ],
-            "dependencies": {
-                "@xmldom/xmldom": "^0.8.6",
-                "deepmerge": "^4.3.1",
-                "roughjs": "^4.5.0"
-            },
             "devDependencies": {
-                "@babel/core": "^7.20.7",
-                "@babel/preset-env": "^7.20.2",
-                "@babel/preset-typescript": "^7.23.3",
-                "@types/jest": "^29.5.11",
-                "@types/node": "^20.10.5",
-                "babel-loader": "^9.1.0",
                 "husky": "^8.0.3",
-                "jest": "^29.7.0",
                 "lint-staged": "^14.0.1",
-                "prettier": "2.8.1",
-                "ts-loader": "^9.5.1",
-                "ts-node": "^10.9.2",
-                "typescript": "^5.3.3",
-                "webpack": "^5.75.0",
-                "webpack-cli": "^5.0.1"
+                "prettier": "2.8.1"
             }
         },
         "demo": {
@@ -44,6 +25,7 @@
                 "@mui/icons-material": "^5.15.14",
                 "@mui/material": "^5.15.7",
                 "@picocss/pico": "^1.5.10",
+                "memory-viz": "*",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
                 "react-error-boundary": "^4.0.12"
@@ -92,6 +74,30 @@
                 "node": ">=18.0"
             }
         },
+        "memory-viz": {
+            "version": "0.1.0",
+            "license": "MIT",
+            "dependencies": {
+                "@xmldom/xmldom": "^0.8.6",
+                "deepmerge": "^4.3.1",
+                "roughjs": "^4.5.0"
+            },
+            "devDependencies": {
+                "@babel/core": "^7.20.7",
+                "@babel/preset-env": "^7.20.2",
+                "@babel/preset-typescript": "^7.23.3",
+                "@types/jest": "^29.5.11",
+                "@types/node": "^20.10.5",
+                "babel-loader": "^9.1.0",
+                "husky": "^8.0.3",
+                "jest": "^29.7.0",
+                "ts-loader": "^9.5.1",
+                "ts-node": "^10.9.2",
+                "typescript": "^5.3.3",
+                "webpack": "^5.75.0",
+                "webpack-cli": "^5.0.1"
+            }
+        },
         "node_modules/@algolia/autocomplete-core": {
             "version": "1.9.3",
             "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
@@ -14087,6 +14093,10 @@
                 "node": ">= 4.0.0"
             }
         },
+        "node_modules/memory-viz": {
+            "resolved": "memory-viz",
+            "link": true
+        },
         "node_modules/memory-viz-demo": {
             "resolved": "demo",
             "link": true
diff --git a/package.json b/package.json
index 8a01da9e..7f7094d8 100644
--- a/package.json
+++ b/package.json
@@ -1,55 +1,20 @@
 {
-    "name": "memory-viz",
-    "version": "0.1.0",
-    "description": "Library for creating beginner-friendly memory model diagrams.",
-    "main": "dist/memory_viz.js",
     "scripts": {
+        "prepare": "husky install",
         "test": "jest --no-cache",
-        "test-cov": "jest --no-cache --coverage",
-        "watch": "webpack --watch",
-        "build-dev": "tsc && webpack",
-        "build": "tsc && webpack --mode production",
-        "prepare": "husky install"
+        "test-cov": "jest --no-cache --coverage"
     },
-    "keywords": [
-        "education",
-        "diagrams"
-    ],
-    "author": "David Liu",
-    "contributors": [
-        "Mimis Chlympatsos",
-        "Shannon Komguem",
-        "Utku Egemen Umut",
-        "Ziyuan (Jerry) Zhang"
+    "workspaces": [
+        "memory-viz",
+        "demo",
+        "docs"
     ],
-    "license": "MIT",
-    "dependencies": {
-        "@xmldom/xmldom": "^0.8.6",
-        "deepmerge": "^4.3.1",
-        "roughjs": "^4.5.0"
-    },
     "devDependencies": {
-        "@babel/core": "^7.20.7",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-typescript": "^7.23.3",
-        "@types/jest": "^29.5.11",
-        "@types/node": "^20.10.5",
-        "babel-loader": "^9.1.0",
         "husky": "^8.0.3",
-        "jest": "^29.7.0",
         "lint-staged": "^14.0.1",
-        "prettier": "2.8.1",
-        "ts-loader": "^9.5.1",
-        "ts-node": "^10.9.2",
-        "typescript": "^5.3.3",
-        "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.1"
+        "prettier": "2.8.1"
     },
     "lint-staged": {
         "**/*": "prettier --write --ignore-unknown"
-    },
-    "workspaces": [
-        "demo",
-        "docs"
-    ]
+    }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 3776bcd9..02cc42e4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,5 +16,5 @@
         "types": ["node", "@types/jest"]
     },
     "extends": "@docusaurus/tsconfig",
-    "include": ["./src/**/*"]
+    "include": ["memory-viz/src/**/*"]
 }