diff --git a/src/components/BuiltInTools/ImageImporter/index.tsx b/src/components/BuiltInTools/ImageImporter/index.tsx
index f77833c..ed2d480 100644
--- a/src/components/BuiltInTools/ImageImporter/index.tsx
+++ b/src/components/BuiltInTools/ImageImporter/index.tsx
@@ -7,17 +7,26 @@ import {
 import { NotificationType, notify } from "@/components/Notifications";
 import getElement from "@/scripts/Utils/Element";
 import ImagePreview from "@/components/BuiltInTools/ImagePreview";
+import PaletteEditor from "@/components/BuiltInTools/PaletteEditor";
+import { makeNaNUndefined } from "@/scripts/Utils/TypeHelp/NullUndefined";
 
 export type ImageImporterToolInput = {
   width?: number | undefined;
   height?: number | undefined;
-  palette?: boolean | undefined;
+  palette?: string | undefined;
   gif?: boolean | undefined;
 };
 
 export default function ImageImporterTool(): React.ReactNode {
   const [inputBuf, setInputBuf] = React.useState<ArrayBuffer | null>(null);
 
+  const [options, setOptions] = React.useState<ImageImporterToolInput>({
+    width: undefined,
+    height: undefined,
+    palette: undefined,
+    gif: undefined,
+  });
+
   const [outputCode, setOutputCode] = React.useState<string | null>(null);
   const [outputBuf, setOutputBuf] = React.useState<ArrayBuffer | null>(null);
 
@@ -26,6 +35,11 @@ export default function ImageImporterTool(): React.ReactNode {
       <form
         onSubmit={(e) => {
           e.preventDefault();
+          console.log(
+            // @ts-ignore
+            `Converting image of size ${inputBuf?.byteLength / 1024} kb`,
+          );
+          console.log(`Using options {${JSON.stringify(options)}}`);
         }}
       >
         <div>
@@ -181,6 +195,13 @@ export default function ImageImporterTool(): React.ReactNode {
                   aria-label="Width"
                   aria-describedby="width-label"
                   placeholder="Leave blank to auto-calculate from height and keep aspect ratio"
+                  onChange={(e) => {
+                    const v = e.target.value.trim();
+                    setOptions({
+                      ...options,
+                      width: makeNaNUndefined(parseInt(e.target.value.trim())),
+                    });
+                  }}
                 />
               </div>
             </div>
@@ -199,6 +220,13 @@ export default function ImageImporterTool(): React.ReactNode {
                   aria-label="Height"
                   aria-describedby="height-label"
                   placeholder="Leave blank to auto-calculate from width and keep aspect ratio"
+                  onChange={(e) => {
+                    const v = e.target.value.trim();
+                    setOptions({
+                      ...options,
+                      height: makeNaNUndefined(parseInt(e.target.value.trim())),
+                    });
+                  }}
                 />
               </div>
             </div>
@@ -211,6 +239,16 @@ export default function ImageImporterTool(): React.ReactNode {
               </span>
             </div>
           </div>
+          <div className="row mb-2">
+            <div className="col">
+              <PaletteEditor
+                palette={options.palette}
+                setPalette={(p) => {
+                  setOptions({ ...options, palette: p });
+                }}
+              />
+            </div>
+          </div>
           <div className="row mb-3">
             <div className="col">
               <div className="form-check">
@@ -218,6 +256,12 @@ export default function ImageImporterTool(): React.ReactNode {
                   type="checkbox"
                   className="form-check-input"
                   id="gif-checkbox"
+                  onChange={(e) => {
+                    setOptions({
+                      ...options,
+                      gif: e.target.checked ? true : undefined,
+                    });
+                  }}
                 />
                 <label className="form-check-label" htmlFor="gif-checkbox">
                   Try parsing GIF to image array/animation (experimental)
@@ -226,6 +270,7 @@ export default function ImageImporterTool(): React.ReactNode {
             </div>
           </div>
         </div>
+        {/*<pre>{JSON.stringify(options, null, 2)}</pre>*/}
         <button
           type="submit"
           className="btn btn-primary"
diff --git a/src/components/BuiltInTools/PaletteEditor.tsx b/src/components/BuiltInTools/PaletteEditor.tsx
index d5046fd..eff895e 100644
--- a/src/components/BuiltInTools/PaletteEditor.tsx
+++ b/src/components/BuiltInTools/PaletteEditor.tsx
@@ -1,3 +1,136 @@
-export default function PaletteEditor(): React.ReactNode {
-  return <div></div>;
+import React from "react";
+import { AllPalettes } from "@/components/BuiltInTools/palettes";
+
+export default function PaletteEditor({
+  palette,
+  setPalette,
+}: {
+  palette: string | undefined;
+  setPalette: (value: string | undefined) => void;
+}): React.ReactNode {
+  const [paletteName, setPaletteName] = React.useState("Custom");
+
+  React.useEffect(() => {
+    if (palette == null) {
+      setPalette(
+        "#000000,#ffffff,#ff2121,#ff93c4,#ff8135,#fff609,#249ca3,#78dc52,#003fad,#87f2ff,#8e2ec4,#a4839f,#5c406c,#e5cdc4,#91463d,#000000",
+      );
+    }
+  }, [palette, setPalette]);
+
+  React.useEffect(() => {
+    setPaletteName("Custom");
+    if (palette == null) {
+      return;
+    }
+    for (const preset of AllPalettes) {
+      if (preset.colors.join(",").toUpperCase() === palette.toUpperCase()) {
+        setPaletteName(preset.name);
+        break;
+      }
+    }
+  }, [palette]);
+
+  return (
+    <details>
+      <summary className="form-label">Palette ({paletteName})</summary>
+      <div className="input-group mb-2">
+        <span className="input-group-text">
+          Select palette preset (clicking will overwrite current palette)
+        </span>
+        <select
+          className="form-select"
+          aria-label="Default select example"
+          onChange={(e) => {
+            setPalette(e.target.value);
+          }}
+        >
+          {(() => {
+            return AllPalettes.map((palette) => {
+              return (
+                <option key={palette.name} value={palette.colors.join(",")}>
+                  {palette.name}
+                </option>
+              );
+            });
+          })()}
+        </select>
+      </div>
+      <ol className="list-group list-group-numbered">
+        {palette != null && palette.split(",").length > 0 ? (
+          palette.split(",").map((color, index, colors) => {
+            return (
+              <li
+                className="list-group-item d-flex align-items-start"
+                key={`${color} at ${index}`}
+              >
+                {index == 0 ? (
+                  <span className="ms-3">
+                    <em>Reserved for transparency, cannot be changed.</em>
+                  </span>
+                ) : (
+                  <div className="input-group ms-3">
+                    <button
+                      className="btn btn-secondary"
+                      type="button"
+                      disabled={index == 1}
+                      onClick={() => {
+                        const newColors = colors.slice();
+                        const temp = newColors[index];
+                        newColors[index] = newColors[index - 1];
+                        newColors[index - 1] = temp;
+                        setPalette(newColors.join(","));
+                      }}
+                    >
+                      Move up
+                    </button>
+                    <button
+                      className="btn btn-secondary"
+                      type="button"
+                      disabled={index == colors.length - 1}
+                      onClick={() => {
+                        const newColors = colors.slice();
+                        const temp = newColors[index];
+                        newColors[index] = newColors[index + 1];
+                        newColors[index + 1] = temp;
+                        setPalette(newColors.join(","));
+                      }}
+                    >
+                      Move down
+                    </button>
+                    <input
+                      type="color"
+                      className="form-control form-control-color"
+                      title={`Pick a color for index ${index + 1}`}
+                      defaultValue={color.toUpperCase()}
+                      onBlur={(e) => {
+                        const newColors = colors.slice();
+                        newColors[index] = e.target.value;
+                        setPalette(newColors.join(","));
+                      }}
+                    />
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="#xxxxxx"
+                      defaultValue={color.toUpperCase()}
+                      onBlur={(e) => {
+                        const newColors = colors.slice();
+                        newColors[index] = e.target.value;
+                        setPalette(newColors.join(","));
+                      }}
+                    />
+                  </div>
+                )}
+              </li>
+            );
+          })
+        ) : (
+          <span>
+            <em>No palette selected.</em>
+          </span>
+        )}
+      </ol>
+    </details>
+  );
 }
diff --git a/src/components/BuiltInTools/palettes.ts b/src/components/BuiltInTools/palettes.ts
new file mode 100644
index 0000000..ff35e81
--- /dev/null
+++ b/src/components/BuiltInTools/palettes.ts
@@ -0,0 +1,287 @@
+// https://github.com/microsoft/pxt/blob/master/react-common/components/palette/Palettes.ts
+
+function lf(s: string) {
+  return s;
+}
+
+export interface Palette {
+  name: string;
+  id: string;
+  colors: string[];
+  custom?: boolean;
+}
+
+export const Adafruit: Palette = {
+  id: "Adafruit",
+  name: lf("Adafruit"),
+  colors: [
+    "#000000",
+    "#FFFFFF",
+    "#FF0000",
+    "#FF007D",
+    "#FF7a00",
+    "#e5FF00",
+    "#2D9F00",
+    "#00FF72",
+    "#0034FF",
+    "#17ABFF",
+    "#C600FF",
+    "#636363",
+    "#7400DB",
+    "#00EFFF",
+    "#DF2929",
+    "#000000",
+  ],
+};
+
+// https://lospec.com/palette-list/vanilla-milkshake missing #e9f59d
+export const Pastel: Palette = {
+  id: "Pastel",
+  name: lf("Pastel"),
+  colors: [
+    "#000000",
+    "#fff7e4",
+    "#f98284",
+    "#feaae4",
+    "#ffc384",
+    "#fff7a0",
+    "#87a889",
+    "#b0eb93",
+    "#b0a9e4",
+    "#accce4",
+    "#b3e3da",
+    "#d9c8bf",
+    "#6c5671",
+    "#ffe6c6",
+    "#dea38b",
+    "#28282e",
+  ],
+};
+
+export const Matte: Palette = {
+  id: "Matte",
+  name: lf("Matte"),
+  colors: [
+    "#000000",
+    "#FFF1E8",
+    "#FF004D",
+    "#FF77A8",
+    "#FFA300",
+    "#FFEC27",
+    "#008751",
+    "#00E436",
+    "#29ADFF",
+    "#C2C3C7",
+    "#7E2553",
+    "#83769C",
+    "#5F574F",
+    "#FFCCAA",
+    "#AB5236",
+    "#1D2B53",
+  ],
+};
+
+export const Grayscale: Palette = {
+  id: "Grayscale",
+  name: lf("Grayscale"),
+  colors: [
+    "#000000",
+    "#FFFFFF",
+    "#EDEDED",
+    "#DBDBDB",
+    "#C8C8C8",
+    "#B6B6B6",
+    "#A4A4A4",
+    "#929292",
+    "#808080",
+    "#6D6D6D",
+    "#5B5B5B",
+    "#494949",
+    "#373737",
+    "#242424",
+    "#121212",
+    "#000000",
+  ],
+};
+
+// https://lospec.com/palette-list/poke14 with #b56edd added for purple
+export const Poke: Palette = {
+  id: "Poke",
+  name: lf("Poke"),
+  colors: [
+    "#000000",
+    "#ffffff",
+    "#d45362",
+    "#e8958b",
+    "#cc8945",
+    "#f5dc8c",
+    "#417d53",
+    "#5dd48f",
+    "#5162c2",
+    "#6cadeb",
+    "#b56edd",
+    "#8f3f29",
+    "#612431",
+    "#c0fac2",
+    "#24325e",
+    "#1b1221",
+  ],
+};
+
+// https://lospec.com/palette-list/warioware-diy
+export const DIY: Palette = {
+  id: "DIY",
+  name: lf("DIY"),
+  colors: [
+    "#000000",
+    "#f8f8f8",
+    "#f80000",
+    "#FF93C4",
+    "#f8a830",
+    "#f8f858",
+    "#089050",
+    "#70d038",
+    "#2868c0",
+    "#10c0c8",
+    "#c868e8",
+    "#c0c0c0",
+    "#787878",
+    "#f8d898",
+    "#c04800",
+    "#000000",
+  ],
+};
+
+// https://lospec.com/palette-list/still-life
+export const StillLife: Palette = {
+  id: "StillLife",
+  name: lf("Still Life"),
+  colors: [
+    "#000000",
+    "#a8e4d4",
+    "#d13b27",
+    "#e07f8a",
+    "#cc8218",
+    "#b3e868",
+    "#5d853a",
+    "#68c127",
+    "#286fb8",
+    "#9b8bff",
+    "#3f2811",
+    "#513155",
+    "#122615",
+    "#c7b581",
+    "#7a2222",
+    "#000000",
+  ],
+};
+
+// https://lospec.com/palette-list/steam-lords, missing 0xa0b9ba
+export const SteamPunk: Palette = {
+  id: "SteamPunk",
+  name: lf("Steam Punk"),
+  colors: [
+    "#000000",
+    "#c0d1cc",
+    "#603b3a",
+    "#170e19",
+    "#775c4f",
+    "#77744f",
+    "#4f7754",
+    "#a19f7c",
+    "#4f5277",
+    "#65738c",
+    "#3a604a",
+    "#213b25",
+    "#433a60",
+    "#7c94a1",
+    "#3b2137",
+    "#2f213b",
+  ],
+};
+
+// https://lospec.com/palette-list/sweetie-16, missing 0x73eff7
+export const Sweet: Palette = {
+  id: "Sweet",
+  name: lf("Sweet"),
+  colors: [
+    "#000000",
+    "#f4f4f4",
+    "#b13e53",
+    "#a7f070",
+    "#ef7d57",
+    "#ffcd75",
+    "#257179",
+    "#38b764",
+    "#29366f",
+    "#3b5dc9",
+    "#41a6f6",
+    "#566c86",
+    "#333c57",
+    "#94b0c2",
+    "#5d275d",
+    "#1a1c2c",
+  ],
+};
+
+// https://lospec.com/palette-list/na16, missing 0x70377f
+export const Adventure: Palette = {
+  id: "Adventure",
+  name: lf("Adventure"),
+  colors: [
+    "#000000",
+    "#f5edba",
+    "#9d303b",
+    "#d26471",
+    "#e4943a",
+    "#c0c741",
+    "#647d34",
+    "#34859d",
+    "#17434b",
+    "#7ec4c1",
+    "#584563",
+    "#8c8fae",
+    "#3e2137",
+    "#d79b7d",
+    "#9a6348",
+    "#1f0e1c",
+  ],
+};
+
+//% fixedInstance whenUsed block="arcade"
+export const Arcade: Palette = {
+  id: "Arcade",
+  name: lf("Arcade"),
+  colors: [
+    "#000000",
+    "#FFFFFF",
+    "#FF2121",
+    "#FF93C4",
+    "#FF8135",
+    "#FFF609",
+    "#249CA3",
+    "#78DC52",
+    "#003FAD",
+    "#87F2FF",
+    "#8E2EC4",
+    "#A4839F",
+    "#5C406c",
+    "#E5CDC4",
+    "#91463d",
+    "#000000",
+  ],
+};
+
+export const AllPalettes = [
+  Arcade,
+  Matte,
+  Pastel,
+  Sweet,
+  Poke,
+  Adventure,
+  DIY,
+  Adafruit,
+  StillLife,
+  SteamPunk,
+  Grayscale,
+];
diff --git a/src/scripts/Utils/TypeHelp/NullUndefined.ts b/src/scripts/Utils/TypeHelp/NullUndefined.ts
index e73ae72..74a671c 100644
--- a/src/scripts/Utils/TypeHelp/NullUndefined.ts
+++ b/src/scripts/Utils/TypeHelp/NullUndefined.ts
@@ -13,3 +13,15 @@ export function makeNullUndefined<T>(
   }
   return value;
 }
+
+export function makeNaNUndefined(
+  value: number | undefined,
+): number | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (isNaN(value)) {
+    return undefined;
+  }
+  return value;
+}