@marimo-team/islands 0.19.5-dev25 → 0.19.5-dev29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.5-dev25",
+  "version": "0.19.5-dev29",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__mocks__/requests.ts

@@ -60,6 +60,7 @@ export const MockRequestClient = {
       shutdownSession: vi.fn().mockResolvedValue({}),
       exportAsHTML: vi.fn().mockResolvedValue({ html: "" }),
       exportAsMarkdown: vi.fn().mockResolvedValue({ markdown: "" }),
+      exportAsPDF: vi.fn().mockResolvedValue(new Blob()),
       autoExportAsHTML: vi.fn().mockResolvedValue({}),
       autoExportAsMarkdown: vi.fn().mockResolvedValue({}),
       autoExportAsIPYNB: vi.fn().mockResolvedValue({}),

package/src/components/app-config/user-config-form.tsx

@@ -1283,6 +1283,39 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
+            <FormField
+              control={form.control}
+              name="experimental.server_side_pdf_export"
+              render={({ field }) => (
+                <div className="flex flex-col gap-y-1">
+                  <FormItem className={formItemClasses}>
+                    <FormLabel className="font-normal">
+                      Better PDF Export
+                    </FormLabel>
+                    <FormControl>
+                      <Checkbox
+                        data-testid="server-side-pdf-export-checkbox"
+                        checked={field.value === true}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                  <IsOverridden
+                    userConfig={config}
+                    name="experimental.server_side_pdf_export"
+                  />
+                  <FormDescription>
+                    Enable PDF export using{" "}
+                    <Kbd className="inline">nbconvert</Kbd> and{" "}
+                    <Kbd className="inline">playwright</Kbd>. Refer to{" "}
+                    <ExternalLink href="https://docs.marimo.io/guides/exporting/#exporting-to-pdf-slides-or-rst">
+                      the docs
+                    </ExternalLink>
+                    .
+                  </FormDescription>
+                </div>
+              )}
+            />
           </SettingGroup>
         );
     }

package/src/components/data-table/cell-utils.ts

@@ -1,5 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { CellId } from "@/core/cells/ids";
+
 export const DATA_CELL_ID = "data-cell-id";
 
 export function getCellDomProps(cellId: string) {
@@ -7,3 +9,11 @@ export function getCellDomProps(cellId: string) {
     [DATA_CELL_ID]: cellId,
   };
 }
+
+export const DATA_FOR_CELL_ID = "data-for-cell-id";
+
+export function getCellForDomProps(cellId: CellId) {
+  return {
+    [DATA_FOR_CELL_ID]: cellId,
+  };
+}

package/src/components/editor/Output.tsx

@@ -20,6 +20,7 @@ import { TextOutput } from "./output/TextOutput";
 import { VideoOutput } from "./output/VideoOutput";
 
 import "./output/Outputs.css";
+import { useAtomValue } from "jotai";
 import {
   ChevronsDownUpIcon,
   ChevronsUpDownIcon,
@@ -27,6 +28,7 @@ import {
 } from "lucide-react";
 import { tooltipHandler } from "@/components/charts/tooltip";
 import { useExpandedOutput } from "@/core/cells/outputs";
+import { viewStateAtom } from "@/core/mode";
 import { useIframeCapabilities } from "@/hooks/useIframeCapabilities";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { Banner } from "@/plugins/impl/common/error-banner";
@@ -46,10 +48,9 @@ import { renderMimeIcon } from "./renderMimeIcon";
 
 const METADATA_KEY = "__metadata__";
 
-type MimeBundleWithoutMetadata = Record<
-  OutputMessage["mimetype"],
-  { [key: string]: unknown }
->;
+export type MimeType = OutputMessage["mimetype"];
+
+type MimeBundleWithoutMetadata = Record<MimeType, { [key: string]: unknown }>;
 
 type MimeBundle = MimeBundleWithoutMetadata & {
   [METADATA_KEY]?: Record<string, { width?: number; height?: number }>;
@@ -70,7 +71,7 @@ export const OutputRenderer: React.FC<{
   onRefactorWithAI?: OnRefactorWithAI;
   wrapText?: boolean;
   metadata?: { width?: number; height?: number };
-  renderFallback?: (mimetype: OutputMessage["mimetype"]) => React.ReactNode;
+  renderFallback?: (mimetype: MimeType) => React.ReactNode;
 }> = memo((props) => {
   const {
     message,
@@ -220,9 +221,7 @@ export const OutputRenderer: React.FC<{
       return (
         <MimeBundleOutputRenderer
           channel={channel}
-          data={
-            parsedJsonData as Record<OutputMessage["mimetype"], OutputMessage>
-          }
+          data={parsedJsonData as Record<MimeType, OutputMessage>}
         />
       );
     case "application/vnd.jupyter.widget-view+json":
@@ -262,6 +261,8 @@ const MimeBundleOutputRenderer: React.FC<{
   cellId?: CellId;
 }> = memo(({ data, channel, cellId }) => {
   const mimebundle = Array.isArray(data) ? data[0] : data;
+  const { mode } = useAtomValue(viewStateAtom);
+  const appView = mode === "present" || mode === "read";
 
   // Extract metadata if present (e.g., for retina image rendering)
   const metadata = mimebundle[METADATA_KEY];
@@ -269,10 +270,7 @@ const MimeBundleOutputRenderer: React.FC<{
   // Filter out metadata from the mime entries and type narrow
   const mimeEntries = Objects.entries(mimebundle as Record<string, unknown>)
     .filter(([key]) => key !== METADATA_KEY)
-    .map(
-      ([mime, data]) =>
-        [mime, data] as [OutputMessage["mimetype"], CellOutput["data"]],
-    );
+    .map(([mime, data]) => [mime, data] as [MimeType, CellOutput["data"]]);
 
   // If there is none, return null
   const first = mimeEntries[0]?.[0];
@@ -306,7 +304,12 @@ const MimeBundleOutputRenderer: React.FC<{
   return (
     <Tabs defaultValue={first} orientation="vertical">
       <div className="flex">
-        <TabsList className="self-start max-h-none flex flex-col gap-2 mr-4 shrink-0">
+        <TabsList
+          className={cn(
+            "self-start max-h-none flex flex-col gap-2 mr-3 shrink-0",
+            appView && "mt-4",
+          )}
+        >
           {mimeEntries.map(([mime]) => (
             <TabsTrigger
               key={mime}
@@ -319,7 +322,7 @@ const MimeBundleOutputRenderer: React.FC<{
             </TabsTrigger>
           ))}
         </TabsList>
-        <div className="flex-1">
+        <div className="flex-1 w-full">
           {mimeEntries.map(([mime, output]) => (
             <TabsContent key={mime} value={mime}>
               <ErrorBoundary>

package/src/components/editor/actions/useNotebookActions.tsx

@@ -54,7 +54,12 @@ import {
 } from "@/core/cells/cells";
 import { disabledCellIds } from "@/core/cells/utils";
 import { useResolvedMarimoConfig } from "@/core/config/config";
+import { getFeatureFlag } from "@/core/config/feature-flag";
 import { Constants } from "@/core/constants";
+import {
+  updateCellOutputsWithScreenshots,
+  useEnrichCellOutputs,
+} from "@/core/export/hooks";
 import { useLayoutActions, useLayoutState } from "@/core/layout/layout";
 import { useTogglePresenting } from "@/core/layout/useTogglePresenting";
 import { kioskModeAtom, viewStateAtom } from "@/core/mode";
@@ -64,7 +69,12 @@ import { downloadAsHTML } from "@/core/static/download-html";
 import { createShareableLink } from "@/core/wasm/share";
 import { isWasm } from "@/core/wasm/utils";
 import { copyToClipboard } from "@/utils/copy";
-import { downloadBlob, downloadHTMLAsImage } from "@/utils/download";
+import {
+  downloadAsPDF,
+  downloadBlob,
+  downloadHTMLAsImage,
+  withLoadingToast,
+} from "@/utils/download";
 import { Filenames } from "@/utils/filenames";
 import { Objects } from "@/utils/objects";
 import { newNotebookURL } from "@/utils/urls";
@@ -110,13 +120,15 @@ export function useNotebookActions() {
   const setCommandPaletteOpen = useSetAtom(commandPaletteAtom);
   const setSettingsDialogOpen = useSetAtom(settingDialogAtom);
   const setKeyboardShortcutsOpen = useSetAtom(keyboardShortcutsAtom);
-  const { exportAsMarkdown, readCode, saveCellConfig } = useRequestClient();
+  const { exportAsMarkdown, readCode, saveCellConfig, updateCellOutputs } =
+    useRequestClient();
 
   const hasDisabledCells = useAtomValue(hasDisabledCellsAtom);
   const canUndoDeletes = useAtomValue(canUndoDeletesAtom);
   const { selectedLayout } = useLayoutState();
   const { setLayoutView } = useLayoutActions();
   const togglePresenting = useTogglePresenting();
+  const takeScreenshots = useEnrichCellOutputs();
 
   // Fallback: if sharing is undefined, both are enabled by default
   const sharingHtmlEnabled = resolvedConfig.sharing?.html ?? true;
@@ -139,11 +151,7 @@ export function useNotebookActions() {
           label: "Download as HTML",
           handle: async () => {
             if (!filename) {
-              toast({
-                variant: "danger",
-                title: "Error",
-                description: "Notebooks must be named to be exported.",
-              });
+              toastNotebookMustBeNamed();
               return;
             }
             await downloadAsHTML({ filename, includeCode: true });
@@ -154,11 +162,7 @@ export function useNotebookActions() {
           label: "Download as HTML (exclude code)",
           handle: async () => {
             if (!filename) {
-              toast({
-                variant: "danger",
-                title: "Error",
-                description: "Notebooks must be named to be exported.",
-              });
+              toastNotebookMustBeNamed();
               return;
             }
             await downloadAsHTML({ filename, includeCode: false });
@@ -220,6 +224,26 @@ export function useNotebookActions() {
               </span>
             ),
           handle: async () => {
+            if (getFeatureFlag("server_side_pdf_export")) {
+              if (!filename) {
+                toastNotebookMustBeNamed();
+                return;
+              }
+
+              const downloadPDF = async () => {
+                await updateCellOutputsWithScreenshots(
+                  takeScreenshots,
+                  updateCellOutputs,
+                );
+                await downloadAsPDF({
+                  filename: filename,
+                  webpdf: false,
+                });
+              };
+              await withLoadingToast("Downloading PDF...", downloadPDF);
+              return;
+            }
+
             const beforeprint = new Event("export-beforeprint");
             const afterprint = new Event("export-afterprint");
             function print() {
@@ -527,3 +551,11 @@ export function useNotebookActions() {
       return action;
     });
 }
+
+function toastNotebookMustBeNamed() {
+  toast({
+    title: "Error",
+    description: "Notebooks must be named to be exported.",
+    variant: "danger",
+  });
+}

package/src/components/editor/cell/cell-actions.tsx

@@ -12,6 +12,7 @@ import React, {
   useState,
 } from "react";
 import useEvent from "react-use-event-hook";
+import { getCellForDomProps } from "@/components/data-table/cell-utils";
 import {
   renderMinimalShortcut,
   renderShortcut,
@@ -104,7 +105,11 @@ const CellActionsDropdownInternal = (
       {...restoreFocus}
     >
       <Command>
-        <CommandInput placeholder="Search actions..." className="h-6 m-1" />
+        <CommandInput
+          placeholder="Search actions..."
+          className="h-6 m-1"
+          {...getCellForDomProps(props.cellId)}
+        />
         <CommandList>
           <CommandEmpty>No results</CommandEmpty>
           {actions.map((group, i) => (

package/src/components/editor/navigation/navigation.ts

@@ -10,6 +10,7 @@ import {
 import { useAtomValue, useSetAtom, useStore } from "jotai";
 import { useMemo } from "react";
 import { mergeProps, useFocusWithin, useKeyboard } from "react-aria";
+import { DATA_FOR_CELL_ID } from "@/components/data-table/cell-utils";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { cellIdsAtom, notebookAtom, useCellActions } from "@/core/cells/cells";
 import { useCellFocusActions } from "@/core/cells/focus";
@@ -101,7 +102,23 @@ function useCellFocusProps(
       // On focus, set the last focused cell id.
       focusActions.focusCell({ cellId });
     },
-    onBlurWithin: () => {
+    onBlurWithin: (e) => {
+      // Check if blur is happening because of vim search panel interaction
+      if (isInVimPanel(e.relatedTarget) || isInVimPanel(e.target)) {
+        // Don't hide code if we're just interacting with vim search
+        return;
+      }
+
+      // If the related target is for a cell id (data-for-cell-id), then we don't want to hide the code, otherwise it might
+      // close the dropdown.
+      if (
+        getDataForCellId(e.relatedTarget) === cellId ||
+        getDataForCellId(e.relatedTarget?.closest(`[${DATA_FOR_CELL_ID}]`)) ===
+          cellId
+      ) {
+        return;
+      }
+
       // On blur, hide the code if it was temporarily shown.
       temporarilyShownCodeActions.remove(cellId);
       actions.markTouched({ cellId });
@@ -116,6 +133,27 @@ function useCellFocusProps(
   return focusWithinProps;
 }
 
+function isInVimPanel(element: Element | null): boolean {
+  if (!element) {
+    return false;
+  }
+  if (element instanceof HTMLElement) {
+    return element.closest(".cm-vim-panel") !== null;
+  }
+  return false;
+}
+
+function getDataForCellId(element: Element | null | undefined): CellId | null {
+  if (!element) {
+    return null;
+  }
+  const cellId = element.getAttribute(DATA_FOR_CELL_ID);
+  if (!cellId) {
+    return null;
+  }
+  return cellId as CellId;
+}
+
 type KeymapHandlers = Record<string, () => boolean>;
 
 /**

package/src/core/codemirror/language/panel/panel.tsx

@@ -8,6 +8,7 @@ import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { normalizeName } from "@/core/cells/names";
 import { type ConnectionName, DUCKDB_ENGINE } from "@/core/datasets/engines";
 import { useAutoGrowInputProps } from "@/hooks/useAutoGrowInputProps";
+import { cellIdState } from "../../cells/state";
 import { formatSQL } from "../../format";
 import { languageAdapterState } from "../extension";
 import { MarkdownLanguageAdapter } from "../languages/markdown";
@@ -31,6 +32,7 @@ export const LanguagePanelComponent: React.FC<{
 }> = ({ view }) => {
   const { spanProps, inputProps } = useAutoGrowInputProps({ minWidth: 50 });
   const languageAdapter = view.state.field(languageAdapterState);
+  const cellId = view.state.facet(cellIdState);
 
   let actions: React.ReactNode = <div />;
   let showDivider = false;
@@ -93,6 +95,7 @@ export const LanguagePanelComponent: React.FC<{
         <SQLEngineSelect
           selectedEngine={metadata.engine}
           onChange={switchEngine}
+          cellId={cellId}
         />
         <div className="flex items-center gap-2 ml-auto">
           {metadata.engine === DUCKDB_ENGINE && <SQLModeSelect />}

package/src/core/codemirror/language/panel/sql.tsx

@@ -8,6 +8,7 @@ import {
   DatabaseBackup,
   SearchCheck,
 } from "lucide-react";
+import { getCellForDomProps } from "@/components/data-table/cell-utils";
 import { transformDisplayName } from "@/components/databases/display";
 import { DatabaseLogo } from "@/components/databases/icon";
 import { Button } from "@/components/ui/button";
@@ -22,6 +23,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Tooltip } from "@/components/ui/tooltip";
+import type { CellId } from "@/core/cells/ids";
 import {
   dataConnectionsMapAtom,
   setLatestEngineSelected,
@@ -38,11 +40,13 @@ import { type SQLMode, useSQLMode } from "../languages/sql/sql-mode";
 interface SelectProps {
   selectedEngine: ConnectionName;
   onChange: (engine: ConnectionName) => void;
+  cellId: CellId;
 }
 
 export const SQLEngineSelect: React.FC<SelectProps> = ({
   selectedEngine,
   onChange,
+  cellId,
 }) => {
   const connectionsMap = useAtomValue(dataConnectionsMapAtom);
 
@@ -98,10 +102,10 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
   return (
     <div className="flex flex-row gap-1 items-center">
       <Select value={selectedEngine} onValueChange={handleSelectEngine}>
-        <SQLSelectTrigger>
+        <SQLSelectTrigger {...getCellForDomProps(cellId)}>
           <SelectValue placeholder="Select an engine" />
         </SQLSelectTrigger>
-        <SelectContent>
+        <SelectContent {...getCellForDomProps(cellId)}>
           <SelectGroup>
             <SelectLabel>Database connections</SelectLabel>
             {engineIsDisconnected && (

package/src/core/config/feature-flag.tsx

@@ -13,6 +13,7 @@ export interface ExperimentalFeatures {
   chat_modes: boolean;
   cache_panel: boolean;
   external_agents: boolean;
+  server_side_pdf_export: boolean;
   // Add new feature flags here
 }
 
@@ -24,6 +25,7 @@ const defaultValues: ExperimentalFeatures = {
   chat_modes: false,
   cache_panel: false,
   external_agents: import.meta.env.DEV,
+  server_side_pdf_export: false,
 };
 
 export function getFeatureFlag<T extends keyof ExperimentalFeatures>(

package/src/core/export/__tests__/hooks.test.ts

@@ -8,7 +8,10 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { CellId } from "@/core/cells/ids";
 import { CellOutputId } from "@/core/cells/ids";
 import type { CellRuntimeState } from "@/core/cells/types";
-import { useEnrichCellOutputs } from "../hooks";
+import {
+  updateCellOutputsWithScreenshots,
+  useEnrichCellOutputs,
+} from "../hooks";
 
 // Mock html-to-image
 vi.mock("html-to-image", () => ({
@@ -22,6 +25,11 @@ vi.mock("@/utils/Logger", () => ({
   },
 }));
 
+// Mock toast
+vi.mock("@/components/ui/use-toast", () => ({
+  toast: vi.fn(),
+}));
+
 // Mock cellsRuntimeAtom - must be defined inline in the factory function
 vi.mock("@/core/cells/cells", async () => {
   const { atom } = await import("jotai");
@@ -31,6 +39,7 @@ vi.mock("@/core/cells/cells", async () => {
 });
 
 import { toPng } from "html-to-image";
+import { toast } from "@/components/ui/use-toast";
 import { cellsRuntimeAtom } from "@/core/cells/cells";
 import { Logger } from "@/utils/Logger";
 
@@ -502,3 +511,113 @@ describe("useEnrichCellOutputs", () => {
     }
   });
 });
+
+describe("updateCellOutputsWithScreenshots", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should call updateCellOutputs when there are screenshots", async () => {
+    const cellId = "cell-1" as CellId;
+    const mockScreenshots = {
+      [cellId]: ["image/png", "data:image/png;base64,test"] as [
+        "image/png",
+        string,
+      ],
+    };
+
+    const takeScreenshots = vi.fn().mockResolvedValue(mockScreenshots);
+    const updateCellOutputs = vi.fn().mockResolvedValue(null);
+
+    await updateCellOutputsWithScreenshots(takeScreenshots, updateCellOutputs);
+
+    expect(takeScreenshots).toHaveBeenCalledTimes(1);
+    expect(updateCellOutputs).toHaveBeenCalledTimes(1);
+    expect(updateCellOutputs).toHaveBeenCalledWith({
+      cellIdsToOutput: mockScreenshots,
+    });
+  });
+
+  it("should not call updateCellOutputs when there are no screenshots", async () => {
+    const takeScreenshots = vi.fn().mockResolvedValue({});
+    const updateCellOutputs = vi.fn().mockResolvedValue(null);
+
+    await updateCellOutputsWithScreenshots(takeScreenshots, updateCellOutputs);
+
+    expect(takeScreenshots).toHaveBeenCalledTimes(1);
+    expect(updateCellOutputs).not.toHaveBeenCalled();
+  });
+
+  it("should handle multiple cell screenshots", async () => {
+    const cell1 = "cell-1" as CellId;
+    const cell2 = "cell-2" as CellId;
+    const mockScreenshots = {
+      [cell1]: ["image/png", "data:image/png;base64,image1"] as [
+        "image/png",
+        string,
+      ],
+      [cell2]: ["image/png", "data:image/png;base64,image2"] as [
+        "image/png",
+        string,
+      ],
+    };
+
+    const takeScreenshots = vi.fn().mockResolvedValue(mockScreenshots);
+    const updateCellOutputs = vi.fn().mockResolvedValue(null);
+
+    await updateCellOutputsWithScreenshots(takeScreenshots, updateCellOutputs);
+
+    expect(updateCellOutputs).toHaveBeenCalledWith({
+      cellIdsToOutput: mockScreenshots,
+    });
+  });
+
+  it("should catch errors from takeScreenshots and show toast", async () => {
+    const error = new Error("Screenshot failed");
+    const takeScreenshots = vi.fn().mockRejectedValue(error);
+    const updateCellOutputs = vi.fn().mockResolvedValue(null);
+
+    // Should not throw - errors are caught and shown via toast
+    await updateCellOutputsWithScreenshots(takeScreenshots, updateCellOutputs);
+
+    expect(updateCellOutputs).not.toHaveBeenCalled();
+    expect(Logger.error).toHaveBeenCalledWith(
+      "Error updating cell outputs with screenshots:",
+      error,
+    );
+    expect(toast).toHaveBeenCalledWith({
+      title: "Failed to capture cell outputs",
+      description:
+        "Some outputs may not appear in the PDF. Continuing with export.",
+      variant: "danger",
+    });
+  });
+
+  it("should catch errors from updateCellOutputs and show toast", async () => {
+    const cellId = "cell-1" as CellId;
+    const mockScreenshots = {
+      [cellId]: ["image/png", "data:image/png;base64,test"] as [
+        "image/png",
+        string,
+      ],
+    };
+    const error = new Error("Update failed");
+
+    const takeScreenshots = vi.fn().mockResolvedValue(mockScreenshots);
+    const updateCellOutputs = vi.fn().mockRejectedValue(error);
+
+    // Should not throw - errors are caught and shown via toast
+    await updateCellOutputsWithScreenshots(takeScreenshots, updateCellOutputs);
+
+    expect(Logger.error).toHaveBeenCalledWith(
+      "Error updating cell outputs with screenshots:",
+      error,
+    );
+    expect(toast).toHaveBeenCalledWith({
+      title: "Failed to capture cell outputs",
+      description:
+        "Some outputs may not appear in the PDF. Continuing with export.",
+      variant: "danger",
+    });
+  });
+});

package/src/core/export/hooks.ts

@@ -1,6 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { toPng } from "html-to-image";
 import { atom, useAtom, useAtomValue } from "jotai";
+import type { MimeType } from "@/components/editor/Output";
+import { toast } from "@/components/ui/use-toast";
 import { appConfigAtom } from "@/core/config/config";
 import { useInterval } from "@/hooks/useInterval";
 import { Logger } from "@/utils/Logger";
@@ -9,6 +11,7 @@ import { cellsRuntimeAtom } from "../cells/cells";
 import { type CellId, CellOutputId } from "../cells/ids";
 import { connectionAtom } from "../network/connection";
 import { useRequestClient } from "../network/requests";
+import type { UpdateCellOutputsRequest } from "../network/types";
 import { VirtualFileTracker } from "../static/virtual-file-tracker";
 import { WebSocketState } from "../websocket/types";
 
@@ -60,12 +63,10 @@ export function useAutoExport() {
 
   useInterval(
     async () => {
-      const cellsToOutput = await takeScreenshots();
-      if (Object.keys(cellsToOutput).length > 0) {
-        await updateCellOutputs({
-          cellIdsToOutput: cellsToOutput,
-        });
-      }
+      await updateCellOutputsWithScreenshots(
+        takeScreenshots,
+        updateCellOutputs,
+      );
       await autoExportAsIPYNB({
         download: false,
       });
@@ -86,7 +87,7 @@ export function useAutoExport() {
 const richCellsToOutputAtom = atom<Record<CellId, unknown>>({});
 
 // MIME types to capture screenshots for
-const MIME_TYPES_TO_CAPTURE_SCREENSHOTS = new Set([
+const MIME_TYPES_TO_CAPTURE_SCREENSHOTS = new Set<MimeType>([
   "text/html",
   "application/vnd.vegalite.v5+json",
   "application/vnd.vega.v5+json",
@@ -112,7 +113,8 @@ export function useEnrichCellOutputs() {
       // Track latest output for this cell
       trackedCellsOutput[cellId] = outputData;
       if (
-        MIME_TYPES_TO_CAPTURE_SCREENSHOTS.has(runtime.output?.mimetype ?? "") &&
+        runtime.output?.mimetype &&
+        MIME_TYPES_TO_CAPTURE_SCREENSHOTS.has(runtime.output.mimetype) &&
         outputData &&
         outputHasChanged
       ) {
@@ -157,3 +159,26 @@ export function useEnrichCellOutputs() {
     );
   };
 }
+
+/**
+ * Utility function to take screenshots of cells with HTML outputs and update the cell outputs.
+ */
+export async function updateCellOutputsWithScreenshots(
+  takeScreenshots: () => Promise<Record<CellId, ["image/png", string]>>,
+  updateCellOutputs: (request: UpdateCellOutputsRequest) => Promise<null>,
+) {
+  try {
+    const cellIdsToOutput = await takeScreenshots();
+    if (Object.keys(cellIdsToOutput).length > 0) {
+      await updateCellOutputs({ cellIdsToOutput });
+    }
+  } catch (error) {
+    Logger.error("Error updating cell outputs with screenshots:", error);
+    toast({
+      title: "Failed to capture cell outputs",
+      description:
+        "Some outputs may not appear in the PDF. Continuing with export.",
+      variant: "danger",
+    });
+  }
+}

package/src/core/islands/bridge.ts

@@ -168,6 +168,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   openTutorial = throwNotImplemented;
   exportAsHTML = throwNotImplemented;
   exportAsMarkdown = throwNotImplemented;
+  exportAsPDF = throwNotImplemented;
   autoExportAsHTML = throwNotImplemented;
   autoExportAsMarkdown = throwNotImplemented;
   autoExportAsIPYNB = throwNotImplemented;