diff --git a/src/components/AwesomeArcadeList/Extension/Cards/AwesomeArcadeExtensionCard.tsx b/src/components/AwesomeArcadeList/Extension/Cards/AwesomeArcadeExtensionCard.tsx
index 6db7762..311531a 100644
--- a/src/components/AwesomeArcadeList/Extension/Cards/AwesomeArcadeExtensionCard.tsx
+++ b/src/components/AwesomeArcadeList/Extension/Cards/AwesomeArcadeExtensionCard.tsx
@@ -135,13 +135,15 @@ export function AwesomeArcadeExtensionCard({
                   setTooltip("Click to copy");
                 }}
                 onClick={() => {
-                  if (copyTextToClipboard(ext.url)) {
-                    setTooltip("Copied!");
-                  } else {
-                    setTooltip(
-                      "Failed to copy - did you give us clipboard permission?",
-                    );
-                  }
+                  copyTextToClipboard(ext.url)
+                    .then(() => {
+                      setTooltip("Copied!");
+                    })
+                    .catch(() => {
+                      setTooltip(
+                        "Failed to copy - did you give us clipboard permission?",
+                      );
+                    });
                   tippyRef.current?.show();
                   window.document.documentElement.dispatchEvent(
                     new CustomEvent<string>("clickrepo", {
diff --git a/src/components/AwesomeArcadeList/Extension/Cards/AwesomeArcadeExtensionOldCard.tsx b/src/components/AwesomeArcadeList/Extension/Cards/AwesomeArcadeExtensionOldCard.tsx
index dfcdceb..0b38d1b 100644
--- a/src/components/AwesomeArcadeList/Extension/Cards/AwesomeArcadeExtensionOldCard.tsx
+++ b/src/components/AwesomeArcadeList/Extension/Cards/AwesomeArcadeExtensionOldCard.tsx
@@ -109,13 +109,15 @@ export function AwesomeArcadeExtensionOldCard({
                   setTooltip("Click to copy");
                 }}
                 onClick={() => {
-                  if (copyTextToClipboard(ext.url)) {
-                    setTooltip("Copied!");
-                  } else {
-                    setTooltip(
-                      "Failed to copy - did you give us clipboard permission?",
-                    );
-                  }
+                  copyTextToClipboard(ext.url)
+                    .then(() => {
+                      setTooltip("Copied!");
+                    })
+                    .catch(() => {
+                      setTooltip(
+                        "Failed to copy - did you give us clipboard permission?",
+                      );
+                    });
                   tippyRef.current?.show();
                   window.document.documentElement.dispatchEvent(
                     new CustomEvent<string>("clickrepo", {
diff --git a/src/components/BuiltInTools/ImageImporter/index.tsx b/src/components/BuiltInTools/ImageImporter/index.tsx
new file mode 100644
index 0000000..f77833c
--- /dev/null
+++ b/src/components/BuiltInTools/ImageImporter/index.tsx
@@ -0,0 +1,300 @@
+import React from "react";
+import AutoLink from "@/components/Linkable/AutoLink";
+import {
+  copyTextToClipboard,
+  readBlobsFromClipboard,
+} from "@/scripts/Utils/Clipboard/clipboard";
+import { NotificationType, notify } from "@/components/Notifications";
+import getElement from "@/scripts/Utils/Element";
+import ImagePreview from "@/components/BuiltInTools/ImagePreview";
+
+export type ImageImporterToolInput = {
+  width?: number | undefined;
+  height?: number | undefined;
+  palette?: boolean | undefined;
+  gif?: boolean | undefined;
+};
+
+export default function ImageImporterTool(): React.ReactNode {
+  const [inputBuf, setInputBuf] = React.useState<ArrayBuffer | null>(null);
+
+  const [outputCode, setOutputCode] = React.useState<string | null>(null);
+  const [outputBuf, setOutputBuf] = React.useState<ArrayBuffer | null>(null);
+
+  return (
+    <div style={{ overflowX: "hidden" }}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <div>
+          <div className="row">
+            <label htmlFor="image-input" className="form-label">
+              Input image
+            </label>
+          </div>
+          <div className="row">
+            <div className="col">
+              <input
+                className="form-control"
+                type="file"
+                id="image-input"
+                onChange={(e) => {
+                  setInputBuf(null);
+                  // @ts-ignore
+                  const firstFile = e.target.files.item(0);
+                  if (firstFile) {
+                    firstFile
+                      .arrayBuffer()
+                      .then((buf) => {
+                        console.log(
+                          `Selected file ${firstFile.name} with ${buf.byteLength} bytes`,
+                        );
+                        setInputBuf(buf);
+                        notify(
+                          `Selected file ${firstFile.name}, size ${new Intl.NumberFormat().format(Math.round(buf.byteLength / 1024))} kb`,
+                          NotificationType.Success,
+                        );
+                      })
+                      .catch(() => {
+                        console.log(
+                          "Failed to get file, either cancelled or error",
+                        );
+                        notify("Error selecting file", NotificationType.Error);
+                      });
+                  }
+                }}
+              />
+            </div>
+            <div className="col">
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={() => {
+                  setInputBuf(null);
+                  // @ts-ignore
+                  (getElement("image-input") as HTMLInputElement).value = null;
+                  readBlobsFromClipboard()
+                    .then((items) => {
+                      const validMIMETypes = [
+                        "image/png",
+                        "image/jpeg",
+                        "image/gif",
+                        "image/bmp",
+                        "image/webp",
+                      ];
+                      for (const item of items) {
+                        for (const validMIMEType of validMIMETypes) {
+                          if (item.types.includes(validMIMEType)) {
+                            item
+                              .getType(validMIMEType)
+                              .then((blob) => {
+                                return blob.arrayBuffer();
+                              })
+                              .then((buf) => {
+                                setInputBuf(buf);
+                                console.log(
+                                  `Read image from clipboard with ${buf.byteLength} bytes`,
+                                );
+                                notify(
+                                  `Read image from clipboard, size ${new Intl.NumberFormat().format(Math.round(buf.byteLength / 1024))} kb`,
+                                  NotificationType.Success,
+                                );
+                              })
+                              .catch(() => {
+                                notify(
+                                  "Failed to read from clipboard",
+                                  NotificationType.Error,
+                                );
+                                console.log("Failed to read from clipboard");
+                              });
+                            return;
+                          }
+                        }
+                      }
+                      console.log("Did not find image in clipboard");
+                      notify(
+                        "No image found in clipboard",
+                        NotificationType.Info,
+                      );
+                    })
+                    .catch(() => {
+                      notify(
+                        "Failed to read from clipboard",
+                        NotificationType.Error,
+                      );
+                      console.log("Failed to read from clipboard");
+                    });
+                }}
+              >
+                Read from clipboard
+              </button>
+            </div>
+          </div>
+          <div className="row mb-3">
+            <div className="col">
+              <span className="form-text">
+                Click the choose file button to open a file picker, drag an
+                image onto the choose file button above, or have an image copied
+                in your clipboard and press the read from clipboard button.
+              </span>
+              <br />
+              <span className="form-text">
+                Many common image formats are supported, such as PNG, JPEG, GIF,
+                BMP, and more. Check out{" "}
+                <AutoLink href="https://pillow.readthedocs.io/en/stable/handbook/image-file-formats.html">
+                  this link
+                </AutoLink>{" "}
+                to see all supported formats.
+              </span>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col">
+              <label className="form-label">Input preview</label>
+            </div>
+          </div>
+          <div className="row mb-3">
+            <div className="col">
+              <ImagePreview imageBuf={inputBuf} />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className="row">
+            <div className="col">
+              <label className="form-label">Options</label>
+            </div>
+          </div>
+          <div className="row mb-2">
+            <div className="col">
+              <div className="input-group">
+                <span className="input-group-text" id="width-label">
+                  Width
+                </span>
+                <input
+                  type="number"
+                  className="form-control"
+                  id="width-input"
+                  min={1}
+                  aria-label="Width"
+                  aria-describedby="width-label"
+                  placeholder="Leave blank to auto-calculate from height and keep aspect ratio"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col">
+              <div className="input-group">
+                <span className="input-group-text" id="height-label">
+                  Height
+                </span>
+                <input
+                  type="number"
+                  className="form-control"
+                  id="height-input"
+                  min={1}
+                  aria-label="Height"
+                  aria-describedby="height-label"
+                  placeholder="Leave blank to auto-calculate from width and keep aspect ratio"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="row mb-2">
+            <div className="col">
+              <span className="form-text">
+                Leave both blank to use the input image{"'"}s original size.
+                Remember the maximum MakeCode Arcade image size is 512x512!
+              </span>
+            </div>
+          </div>
+          <div className="row mb-3">
+            <div className="col">
+              <div className="form-check">
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  id="gif-checkbox"
+                />
+                <label className="form-check-label" htmlFor="gif-checkbox">
+                  Try parsing GIF to image array/animation (experimental)
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button
+          type="submit"
+          className="btn btn-primary"
+          disabled={inputBuf == null || inputBuf.byteLength == 0}
+        >
+          Convert
+        </button>
+      </form>
+      <div className="mt-3">
+        <div className="row mb-2">
+          <div className="col">
+            <label htmlFor="output-code" className="form-label">
+              Output MakeCode Arcade image code
+            </label>
+            <textarea
+              id="output-code"
+              className="form-control"
+              placeholder="No image code generated yet."
+              rows={10}
+              readOnly
+              value={outputCode ?? ""}
+            />
+          </div>
+        </div>
+        <div className="row mb-2">
+          <div className="col">
+            <button
+              type="button"
+              className="btn btn-secondary"
+              disabled={outputCode == null || outputCode.length == 0}
+              onClick={() => {
+                copyTextToClipboard(outputCode!)
+                  .then(() => {
+                    notify(
+                      "Copied image code to clipboard",
+                      NotificationType.Success,
+                    );
+                  })
+                  .catch(() => {
+                    notify(
+                      "Failed to copy image code to clipboard",
+                      NotificationType.Error,
+                    );
+                  });
+              }}
+            >
+              Copy all to clipboard
+            </button>
+          </div>
+        </div>
+        <div className="row mb-2">
+          <div className="col">
+            <label htmlFor="output-image" className="form-label">
+              Output image preview
+            </label>
+            <br />
+            <span className="form-text">
+              When converting GIF animations, only the first frame is previewed
+              below.
+            </span>
+          </div>
+        </div>
+        <div className="row mb-3">
+          <div className="col">
+            <ImagePreview imageBuf={outputBuf} />
+          </div>
+        </div>
+        <br />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/BuiltInTools/ImagePreview.tsx b/src/components/BuiltInTools/ImagePreview.tsx
new file mode 100644
index 0000000..f2f04c2
--- /dev/null
+++ b/src/components/BuiltInTools/ImagePreview.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+
+export default function ImagePreview({
+  imageBuf,
+}: {
+  imageBuf?: ArrayBuffer | null;
+}): React.ReactNode {
+  const [imageSrc, setImageSrc] = React.useState<string | undefined>(undefined);
+  const [imageDims, setImageDims] = React.useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  React.useEffect(() => {
+    if (imageSrc != null) {
+      URL.revokeObjectURL(imageSrc);
+    }
+    if (!imageBuf) {
+      setImageSrc(undefined);
+      return;
+    }
+    const url = URL.createObjectURL(new Blob([imageBuf]));
+    setImageSrc(url);
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageBuf]);
+
+  return imageSrc != null ? (
+    <>
+      <img
+        id="input-image-preview"
+        className="img-fluid"
+        src={imageSrc}
+        alt="Preview"
+        style={{ maxWidth: "50vw", maxHeight: "50vh" }}
+        onLoad={(e) => {
+          setImageDims({
+            width: (e.target as HTMLImageElement).naturalWidth,
+            height: (e.target as HTMLImageElement).naturalHeight,
+          });
+        }}
+      />
+      <br />
+      <span className="form-text">
+        {imageDims != null && imageBuf != null
+          ? `${imageDims.width}x${imageDims.height} px, ${new Intl.NumberFormat().format(Math.round(imageBuf.byteLength / 1024))} kb`
+          : undefined}
+      </span>
+    </>
+  ) : (
+    <span>
+      <em>No image yet.</em>
+    </span>
+  );
+}
diff --git a/src/components/BuiltInTools/PaletteEditor.tsx b/src/components/BuiltInTools/PaletteEditor.tsx
new file mode 100644
index 0000000..d5046fd
--- /dev/null
+++ b/src/components/BuiltInTools/PaletteEditor.tsx
@@ -0,0 +1,3 @@
+export default function PaletteEditor(): React.ReactNode {
+  return <div></div>;
+}
diff --git a/src/components/ErrorBoundary/boundary.tsx b/src/components/ErrorBoundary/boundary.tsx
index 0fb04c6..7c24082 100644
--- a/src/components/ErrorBoundary/boundary.tsx
+++ b/src/components/ErrorBoundary/boundary.tsx
@@ -67,14 +67,16 @@ export class ErrorBoundary extends React.Component {
               className="btn btn-primary"
               onClick={() => {
                 if (this.errorStack != undefined) {
-                  if (copyTextToClipboard(this.errorStack)) {
-                    notify("Copied to clipboard!", NotificationType.Success);
-                  } else {
-                    notify(
-                      "Unable to copy to clipboard!",
-                      NotificationType.Error,
-                    );
-                  }
+                  copyTextToClipboard(this.errorStack)
+                    .then(() => {
+                      notify("Copied to clipboard!", NotificationType.Success);
+                    })
+                    .catch(() => {
+                      notify(
+                        "Unable to copy to clipboard!",
+                        NotificationType.Error,
+                      );
+                    });
                 } else {
                   notify(
                     "Unable to copy to clipboard!",
diff --git a/src/pages/tools/built-in/image-importer.tsx b/src/pages/tools/built-in/image-importer.tsx
new file mode 100644
index 0000000..4298fa6
--- /dev/null
+++ b/src/pages/tools/built-in/image-importer.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import Layout from "@/components/Layout";
+import getAppProps, { AppProps } from "@/components/WithAppProps";
+import ImageImporterTool from "@/components/BuiltInTools/ImageImporter";
+
+const pageName = "Image Importer";
+
+export function ImageImporter({
+  appProps,
+}: {
+  appProps: AppProps;
+}): React.ReactNode {
+  return (
+    <Layout
+      title={pageName}
+      currentPage={pageName}
+      appProps={appProps}
+      breadCrumbs={[
+        { Tools: "/tools" },
+        { "Built In Tools": "/tools/built-in" },
+        { "Image Importer (beta)": "/tools/built-in/image-importer" },
+      ]}
+    >
+      <h1>Image Importer (beta)</h1>
+      <p>
+        Convert your images, including GIFs, into MakeCode Arcade images and
+        animations!
+      </p>
+      <ImageImporterTool />
+    </Layout>
+  );
+}
+
+export async function getStaticProps(): Promise<{
+  props: { appProps: AppProps };
+}> {
+  return {
+    props: {
+      appProps: await getAppProps(),
+    },
+  };
+}
+
+export default ImageImporter;
diff --git a/src/scripts/Utils/Clipboard/clipboard.ts b/src/scripts/Utils/Clipboard/clipboard.ts
index 5e8bfa4..0644b2b 100644
--- a/src/scripts/Utils/Clipboard/clipboard.ts
+++ b/src/scripts/Utils/Clipboard/clipboard.ts
@@ -18,47 +18,88 @@ function copyToClipboardFallback(text: string): boolean {
   return successful;
 }
 
-export function copyTextToClipboard(text: string): boolean {
-  if (!navigator.clipboard) {
-    return copyToClipboardFallback(text);
-  }
-  navigator.clipboard.writeText(text).then(
-    () => {},
-    (err) => {
-      console.error("Failed to copy text to clipboard, using fallback: " + err);
-      copyToClipboardFallback(text);
+export function copyTextToClipboard(text: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (!navigator.clipboard) {
+      if (copyToClipboardFallback(text)) {
+        resolve();
+      } else {
+        reject();
+      }
+      return;
     }
-  );
-  return true;
+    navigator.clipboard.writeText(text).then(
+      () => {
+        resolve();
+      },
+      (err) => {
+        console.error(
+          "Failed to copy text to clipboard, using fallback: " + err,
+        );
+        if (copyToClipboardFallback(text)) {
+          resolve();
+        } else {
+          reject();
+        }
+      },
+    );
+  });
 }
 
-export function readTextFromClipboard(
-  callback: (_text: string | undefined) => void
-): void {
-  if (!navigator.clipboard) {
-    return;
-  }
-  navigator.clipboard.readText().then(
-    (text) => {
-      callback(text);
-    },
-    (err) => {
-      console.error("Failed to read from clipboard: " + err);
-      callback(undefined);
+export function readTextFromClipboard(): Promise<string> {
+  return new Promise((resolve, reject) => {
+    if (!navigator.clipboard) {
+      reject();
     }
-  );
+    navigator.clipboard.readText().then(
+      (text) => {
+        resolve(text);
+      },
+      (err) => {
+        console.error("Failed to read from clipboard: " + err);
+        reject();
+      },
+    );
+  });
 }
 
 // https://stackoverflow.com/a/59162806/10291933
-export function copyPNGImageBlobToClipboard(imgBlob: Blob): boolean {
-  if (!navigator.clipboard) {
-    return false;
-  }
-  try {
-    navigator.clipboard.write([new ClipboardItem({ "image/png": imgBlob })]);
-    return true;
-  } catch (err) {
-    console.error("Failed to copy image to clipboard");
-    return false;
-  }
+export function copyBlobsToClipboard(items: ClipboardItems): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (!navigator.clipboard) {
+      reject();
+      return;
+    }
+    try {
+      navigator.clipboard
+        .write(items)
+        .then(() => {
+          resolve();
+        })
+        .catch(() => {
+          console.error("Failed to copy items to clipboard");
+          reject();
+        });
+    } catch (err) {
+      console.error("Failed to copy items to clipboard");
+      reject();
+    }
+  });
+}
+
+export function readBlobsFromClipboard(): Promise<ClipboardItems> {
+  return new Promise((resolve, reject) => {
+    if (!navigator.clipboard) {
+      reject();
+    }
+    navigator.clipboard
+      .read()
+      .then((clipboardItems) => {
+        resolve(clipboardItems);
+      })
+      .catch(() => {
+        console.error("Failed to read items from clipboard");
+        reject();
+      });
+  });
 }
diff --git a/src/scripts/Utils/Clipboard/index.ts b/src/scripts/Utils/Clipboard/index.ts
index c49a43f..f66d818 100644
--- a/src/scripts/Utils/Clipboard/index.ts
+++ b/src/scripts/Utils/Clipboard/index.ts
@@ -1,5 +1,5 @@
 export {
   copyTextToClipboard,
   readTextFromClipboard,
-  copyPNGImageBlobToClipboard,
+  copyBlobToClipboard,
 } from "./clipboard";