diff --git a/packages/web/src/components/display-settings-dialog.tsx b/packages/web/src/components/display-settings-dialog.tsx
new file mode 100644
index 00000000..ae20609a
--- /dev/null
+++ b/packages/web/src/components/display-settings-dialog.tsx
@@ -0,0 +1,86 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { DialogProps } from "@radix-ui/react-dialog";
+import { useState, FormEvent } from "react";
+import {
+  DisplaySettings,
+  sanitizeDisplaySettings,
+} from "@/lib/display-settings";
+
+interface DisplaySettingsDialogProps extends DialogProps {
+  settings: DisplaySettings,
+  onAccept: (settings: DisplaySettings) => void;
+}
+
+export default function DisplaySettingsDialog({
+  settings,
+  onAccept,
+  ...props
+}: DisplaySettingsDialogProps) {
+
+  const [unsavedSettings, setUnsavedSettings] = useState({...settings});
+  const sanitizeAndSetUnsavedSettings = (settings: DisplaySettings) =>
+    setUnsavedSettings(sanitizeDisplaySettings(settings));
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onAccept(unsavedSettings);
+    props.onOpenChange && props.onOpenChange(false);
+  };
+
+  return (
+    <Dialog {...props}>
+      <DialogContent>
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Change display settings</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="name" className="text-right">
+                Canvas pixel size
+              </Label>
+              <Input
+                id="canvasPixelSize"
+                type="number"
+                value={unsavedSettings.canvasPixelSize}
+                className="col-span-3"
+                onChange={(e) => sanitizeAndSetUnsavedSettings({
+                  ...unsavedSettings,
+                  canvasPixelSize: parseInt(e.target.value, 10),
+                })}
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="name" className="text-right">
+                Show canvas
+              </Label>
+              <input
+                id="showCanvas"
+                type="checkbox"
+                checked={unsavedSettings.showCanvas}
+                className="w-5"
+                onChange={(e) => sanitizeAndSetUnsavedSettings({
+                  ...unsavedSettings,
+                  showCanvas: e.target.checked,
+                })}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="submit">Save changes</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/web/src/components/hydra-canvas.tsx b/packages/web/src/components/hydra-canvas.tsx
index 504ccfb5..75c7f03c 100644
--- a/packages/web/src/components/hydra-canvas.tsx
+++ b/packages/web/src/components/hydra-canvas.tsx
@@ -1,13 +1,15 @@
 import React from "react";
 import { cn } from "@/lib/utils";
+import { DisplaySettings } from "@/lib/display-settings";
 
 interface HydraCanvasProps {
   fullscreen?: boolean;
+  displaySettings: DisplaySettings;
 }
 
 const HydraCanvas = React.forwardRef(
   (
-    { fullscreen }: HydraCanvasProps,
+    { fullscreen, displaySettings }: HydraCanvasProps,
     ref: React.ForwardedRef<HTMLCanvasElement>
   ) => (
     <canvas
@@ -16,9 +18,9 @@ const HydraCanvas = React.forwardRef(
         "absolute top-0 left-0",
         fullscreen && "h-full w-full block overflow-hidden"
       )}
-      style={{ imageRendering: "pixelated" }}
-      width={window.innerWidth}
-      height={window.innerHeight}
+      style={{ imageRendering: "pixelated", display: displaySettings.showCanvas ? "" : "none" }}
+      width={window.innerWidth / displaySettings.canvasPixelSize}
+      height={window.innerHeight / displaySettings.canvasPixelSize}
     />
   )
 );
diff --git a/packages/web/src/components/session-command-dialog.tsx b/packages/web/src/components/session-command-dialog.tsx
index 49ec3df3..3ba62dc7 100644
--- a/packages/web/src/components/session-command-dialog.tsx
+++ b/packages/web/src/components/session-command-dialog.tsx
@@ -29,24 +29,30 @@ import {
   Palette,
   Settings,
   Share,
+  Monitor,
 } from "lucide-react";
 import { Link } from "react-router-dom";
 import { useState } from "react";
 import { EditorSettings } from "./editor";
+import { DisplaySettings } from "@/lib/display-settings";
 
 interface SessionCommandDialogProps extends CommandDialogProps {
   editorSettings: EditorSettings;
   onEditorSettingsChange: (settings: EditorSettings) => void;
+  displaySettings: DisplaySettings;
+  onDisplaySettingsChange: (settings: DisplaySettings) => void;
   onSessionChangeUsername: () => void;
   onSessionNew: () => void;
   onSessionShareUrl: () => void;
   onLayoutAdd: () => void;
   onLayoutRemove: () => void;
   onLayoutConfigure: () => void;
+  onEditorChangeDisplaySettings: () => void;
 }
 
 export default function SessionCommandDialog({
   editorSettings,
+  displaySettings,
   onEditorSettingsChange,
   ...props
 }: SessionCommandDialogProps) {
@@ -144,6 +150,7 @@ export default function SessionCommandDialog({
                 <span>Remove Pane</span>
               </CommandItem>
             </CommandGroup>
+            <CommandSeparator />
             <CommandGroup heading="Editor">
               <CommandList className="ml-2">
                 <CommandItem onSelect={() => setPages([...pages, "fonts"])}>
@@ -194,6 +201,15 @@ export default function SessionCommandDialog({
               </CommandList>
             </CommandGroup>
             <CommandSeparator />
+            <CommandGroup heading="Display">
+              <CommandList>
+                <CommandItem onSelect={wrapHandler(props.onEditorChangeDisplaySettings)}>
+                  <Monitor className="mr-2 h-4 w-4" />
+                  <span>Change display settings</span>
+                </CommandItem>
+              </CommandList>
+            </CommandGroup>
+            <CommandSeparator />
             <CommandGroup heading="Help">
               {/* <CommandItem>
                 <HelpCircle className="mr-2 h-4 w-4" />
diff --git a/packages/web/src/components/web-target-iframe.tsx b/packages/web/src/components/web-target-iframe.tsx
index 1a9c829b..88b17f8f 100644
--- a/packages/web/src/components/web-target-iframe.tsx
+++ b/packages/web/src/components/web-target-iframe.tsx
@@ -1,17 +1,20 @@
 import { useQuery } from "@/hooks/use-query";
 import { EvalMessage, Session } from "@flok-editor/session";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import { DisplaySettings } from "@/lib/display-settings";
 
 export interface WebTargetIframeProps {
   target: string;
   session: Session | null;
+  displaySettings: DisplaySettings;
 }
 
-export const WebTargetIframe = ({ target, session }: WebTargetIframeProps) => {
+export const WebTargetIframe = ({ target, session, displaySettings }: WebTargetIframeProps) => {
   const ref = useRef<HTMLIFrameElement | null>(null);
 
   const query = useQuery();
   const noWebEval = query.get("noWebEval")?.split(",") || [];
+  const [firstEval, setFirstEval] = useState(true);
 
   // Check if we should load the target
   if (noWebEval.includes(target) || noWebEval.includes("*")) {
@@ -28,6 +31,7 @@ export const WebTargetIframe = ({ target, session }: WebTargetIframeProps) => {
         body: msg,
       };
       ref.current?.contentWindow?.postMessage(payload, "*");
+      setFirstEval(false);
     };
 
     session.on(`eval:${target}`, handler);
@@ -43,6 +47,7 @@ export const WebTargetIframe = ({ target, session }: WebTargetIframeProps) => {
       if (!ref.current) return;
       const interactionMessage = { type: "user-interaction" };
       ref.current.contentWindow?.postMessage(interactionMessage, "*");
+      setFirstEval(false);
     };
 
     window.addEventListener("click", handleUserInteraction);
@@ -54,6 +59,20 @@ export const WebTargetIframe = ({ target, session }: WebTargetIframeProps) => {
     };
   }, [ref]);
 
+  // Post display settings to iframe when the settings change, or when the
+  // first eval occurs. The latter is a bit of a hack that prevents us from
+  // having to detect when the iframe is ready to receive messages (adding
+  // `ref` to the useEffect() dependencies doesn't do the trick), and it may
+  // break if flok begins eval'ing on load (currently nothing is eval'd on
+  // load).
+  useEffect(() => {
+    const message = {
+      type: "settings",
+      body: { displaySettings },
+    };
+    ref.current?.contentWindow?.postMessage(message, "*");
+  }, [displaySettings, firstEval]);
+
   return (
     <iframe
       ref={ref}
diff --git a/packages/web/src/hooks/use-settings.tsx b/packages/web/src/hooks/use-settings.tsx
new file mode 100644
index 00000000..3327734b
--- /dev/null
+++ b/packages/web/src/hooks/use-settings.tsx
@@ -0,0 +1,19 @@
+import { SettingsMessage } from "@/lib/settings";
+import { useEffect } from "react";
+
+export function useSettings(callback: (message: SettingsMessage) => void) {
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data.type !== "settings") return;
+      callback(event.data.body as SettingsMessage);
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [callback]);
+
+  return;
+}
diff --git a/packages/web/src/lib/display-settings.ts b/packages/web/src/lib/display-settings.ts
new file mode 100644
index 00000000..eff98651
--- /dev/null
+++ b/packages/web/src/lib/display-settings.ts
@@ -0,0 +1,27 @@
+export interface DisplaySettings {
+  canvasPixelSize: number;
+  showCanvas: boolean;
+}
+
+export const defaultDisplaySettings: DisplaySettings = {
+  canvasPixelSize: 1,
+  showCanvas: true,
+}
+
+export function sanitizeDisplaySettings(settings: DisplaySettings): DisplaySettings {
+  // Pixel size should be at least 1 to prevent division-by-zero errors
+  const minPixelSize = 1;
+
+  // A maximum pixel size of 50 gives you 2-digit width/heights for a 4k
+  // canvas; should be low enough
+  const maxPixelSize = 50;
+
+  return {
+    ...settings,
+      canvasPixelSize: Math.max(
+          minPixelSize,
+          Math.min(
+            maxPixelSize,
+            Math.round(settings.canvasPixelSize))),
+  };
+}
diff --git a/packages/web/src/lib/settings.ts b/packages/web/src/lib/settings.ts
new file mode 100644
index 00000000..fb9c32d6
--- /dev/null
+++ b/packages/web/src/lib/settings.ts
@@ -0,0 +1,5 @@
+import { DisplaySettings } from "@/lib/display-settings";
+
+export interface SettingsMessage {
+  displaySettings?: DisplaySettings
+}
diff --git a/packages/web/src/routes/frames/hydra.tsx b/packages/web/src/routes/frames/hydra.tsx
index df08c3fe..e9f3fade 100644
--- a/packages/web/src/routes/frames/hydra.tsx
+++ b/packages/web/src/routes/frames/hydra.tsx
@@ -1,10 +1,12 @@
 import HydraCanvas from "@/components/hydra-canvas";
 import { useAnimationFrame } from "@/hooks/use-animation-frame";
 import { useEvalHandler } from "@/hooks/use-eval-handler";
+import { useSettings } from "@/hooks/use-settings";
 import { HydraWrapper } from "@/lib/hydra-wrapper";
 import { sendToast } from "@/lib/utils";
 import { isWebglSupported } from "@/lib/webgl-detector";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { defaultDisplaySettings } from "@/lib/display-settings";
 
 declare global {
   interface Window {
@@ -16,6 +18,7 @@ export function Component() {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const hasWebGl = useMemo(() => isWebglSupported(), []);
   const [instance, setInstance] = useState<HydraWrapper | null>(null);
+  const [displaySettings, setDisplaySettings] = useState(defaultDisplaySettings);
 
   useEffect(() => {
     if (hasWebGl) return;
@@ -66,5 +69,17 @@ export function Component() {
     )
   );
 
-  return hasWebGl && canvasRef && <HydraCanvas ref={canvasRef} fullscreen />;
+  useSettings(
+    useCallback(
+      (msg) => {
+        if (!instance) return;
+        if (msg.displaySettings) {
+          setDisplaySettings(msg.displaySettings);
+        }
+      },
+      [instance]
+    )
+  );
+
+  return hasWebGl && canvasRef && <HydraCanvas ref={canvasRef} fullscreen displaySettings={displaySettings} />;
 }
diff --git a/packages/web/src/routes/session.tsx b/packages/web/src/routes/session.tsx
index cb419763..5c89b3e6 100644
--- a/packages/web/src/routes/session.tsx
+++ b/packages/web/src/routes/session.tsx
@@ -1,5 +1,6 @@
 import { CommandsButton } from "@/components/commands-button";
 import { ConfigureDialog } from "@/components/configure-dialog";
+import DisplaySettingsDialog from "@/components/display-settings-dialog";
 import { Editor, EditorSettings } from "@/components/editor";
 import { MessagesPanel } from "@/components/messages-panel";
 import { Mosaic } from "@/components/mosaic";
@@ -18,6 +19,7 @@ import { useQuery } from "@/hooks/use-query";
 import { useShortcut } from "@/hooks/use-shortcut";
 import { useStrudelCodemirrorExtensions } from "@/hooks/use-strudel-codemirror-extensions";
 import { useToast } from "@/hooks/use-toast";
+import { DisplaySettings, defaultDisplaySettings } from "@/lib/display-settings";
 import {
   cn,
   code2hash,
@@ -93,6 +95,7 @@ export function Component() {
   const [welcomeDialogOpen, setWelcomeDialogOpen] = useState(false);
   const [shareUrlDialogOpen, setShareUrlDialogOpen] = useState(false);
   const [configureDialogOpen, setConfigureDialogOpen] = useState(false);
+  const [displaySettingsDialogOpen, setDisplaySettingsDialogOpen] = useState(false);
   const [documents, setDocuments] = useState<Document[]>([]);
   const [hidden, setHidden] = useState<boolean>(false);
 
@@ -109,11 +112,29 @@ export function Component() {
     return defaultEditorSettings;
   });
 
+  // Display settings: Try to restore from local storage or use default settings
+  const [displaySettings, setDisplaySettings] = useState<DisplaySettings>(() => {
+    const savedSettings = localStorage.getItem("display-settings");
+    if (savedSettings) {
+      try {
+        return JSON.parse(savedSettings);
+      } catch (error) {
+        console.error("Error parsing saved display settings:", error);
+      }
+    }
+    return defaultDisplaySettings;
+  });
+
   // Save editor settings to local storage
   useEffect(() => {
     localStorage.setItem("editor-settings", JSON.stringify(editorSettings));
   }, [editorSettings]);
 
+  // Save display settings to local storage
+  useEffect(() => {
+    localStorage.setItem("display-settings", JSON.stringify(displaySettings));
+  }, [displaySettings]);
+
   const [messagesPanelExpanded, setMessagesPanelExpanded] =
     useState<boolean>(false);
   const [messagesCount, setMessagesCount] = useState<number>(0);
@@ -540,16 +561,21 @@ export function Component() {
       <SessionCommandDialog
         open={commandsDialogOpen}
         editorSettings={editorSettings}
+        displaySettings={displaySettings}
         onOpenChange={(isOpen) => setCommandsDialogOpen(isOpen)}
         onSessionChangeUsername={() => setUsernameDialogOpen(true)}
         onEditorSettingsChange={(settings: EditorSettings) =>
           setEditorSettings(settings)
         }
+        onDisplaySettingsChange={setDisplaySettings}
         onSessionNew={() => navigate("/")}
         onSessionShareUrl={() => setShareUrlDialogOpen(true)}
         onLayoutAdd={handleViewLayoutAdd}
         onLayoutRemove={handleViewLayoutRemove}
         onLayoutConfigure={() => setConfigureDialogOpen(true)}
+        onEditorChangeDisplaySettings={() =>
+          setDisplaySettingsDialogOpen(true)
+        }
       />
       <UsernameDialog
         name={username}
@@ -578,6 +604,12 @@ export function Component() {
           onAccept={handleConfigureAccept}
         />
       )}
+      <DisplaySettingsDialog
+        settings={displaySettings}
+        onAccept={(settings) => setDisplaySettings(settings)}
+        open={displaySettingsDialogOpen}
+        onOpenChange={(isOpen) => setDisplaySettingsDialogOpen(isOpen)}
+      />
       {session && replTargets.length > 0 && (
         <ReplsDialog
           targets={replTargets}
@@ -612,7 +644,7 @@ export function Component() {
         ))}
       />
       {activeWebTargets.map((target) => (
-        <WebTargetIframe key={target} session={session} target={target} />
+        <WebTargetIframe key={target} session={session} target={target} displaySettings={displaySettings} />
       ))}
       <div
         className={cn(