feat: add html file upload mode to html-to-image tool

apps/api/src/lib/browser-service.ts

@@ -125,6 +125,56 @@ export async function capturePage(url: string, options: CaptureOptions): Promise
   }) as Promise<Buffer>;
 }
 
+export async function captureHtml(html: string, options: CaptureOptions): Promise<Buffer> {
+  return queue.add(async () => {
+    let b: Browser;
+    try {
+      b = await getBrowser();
+    } catch (err) {
+      recordCrash();
+      throw err;
+    }
+
+    const page = await b.newPage({
+      viewport: { width: options.viewportWidth, height: options.viewportHeight },
+      isMobile: options.isMobile,
+    });
+
+    try {
+      await page.setContent(html, { waitUntil: "load", timeout: PAGE_LOAD_TIMEOUT });
+      await page.waitForLoadState("networkidle", { timeout: NETWORK_IDLE_GRACE }).catch(() => {});
+
+      if (options.fullPage) {
+        const scrollHeight = await page.evaluate(() => document.body.scrollHeight);
+        const targetHeight = Math.min(scrollHeight, MAX_FULL_PAGE_HEIGHT);
+        await page.setViewportSize({
+          width: options.viewportWidth,
+          height: targetHeight,
+        });
+      }
+
+      const type = options.format === "jpg" ? "jpeg" : options.format;
+      const screenshotOpts: Parameters<typeof page.screenshot>[0] = {
+        type: type as "jpeg" | "png",
+        fullPage: false,
+      };
+      if (options.format !== "png") {
+        screenshotOpts.quality = options.quality;
+      }
+
+      return (await page.screenshot(screenshotOpts)) as Buffer;
+    } catch (err) {
+      if (!b.isConnected()) {
+        recordCrash();
+        browser = null;
+      }
+      throw err;
+    } finally {
+      await page.close().catch(() => {});
+    }
+  }) as Promise<Buffer>;
+}
+
 export async function shutdownBrowser(): Promise<void> {
   if (browser?.isConnected()) {
     await browser.close().catch(() => {});

apps/api/src/routes/tools/html-to-image.ts

@@ -3,7 +3,7 @@ import { writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
 import { z } from "zod";
-import { capturePage, isBrowserAvailable } from "../../lib/browser-service.js";
+import { captureHtml, capturePage, isBrowserAvailable } from "../../lib/browser-service.js";
 import { formatZodErrors, stripInternalPaths } from "../../lib/errors.js";
 import { validateFetchUrl } from "../../lib/ssrf.js";
 import { createWorkspace } from "../../lib/workspace.js";
@@ -14,15 +14,25 @@ const DEVICE_PRESETS = {
   mobile: { width: 375, height: 812, isMobile: true },
 } as const;
 
-const settingsSchema = z.object({
-  url: z.string().url(),
-  format: z.enum(["jpg", "png", "webp"]).default("png"),
-  quality: z.number().min(1).max(100).default(90),
-  fullPage: z.boolean().default(false),
-  devicePreset: z.enum(["desktop", "tablet", "mobile", "custom"]).default("desktop"),
-  viewportWidth: z.number().min(320).max(3840).default(1280),
-  viewportHeight: z.number().min(320).max(2160).default(720),
-});
+const settingsSchema = z
+  .object({
+    url: z.string().url().optional(),
+    html: z.string().min(1).max(5_000_000).optional(),
+    format: z.enum(["jpg", "png", "webp"]).default("png"),
+    quality: z.number().min(1).max(100).default(90),
+    fullPage: z.boolean().default(false),
+    devicePreset: z.enum(["desktop", "tablet", "mobile", "custom"]).default("desktop"),
+    viewportWidth: z.number().min(320).max(3840).default(1280),
+    viewportHeight: z.number().min(320).max(2160).default(720),
+  })
+  .refine((data) => data.url || data.html, {
+    message: "Either url or html must be provided",
+    path: ["url"],
+  })
+  .refine((data) => !(data.url && data.html), {
+    message: "Provide either url or html, not both",
+    path: ["url"],
+  });
 
 export function registerHtmlToImage(app: FastifyInstance) {
   app.post(
@@ -50,13 +60,15 @@ export function registerHtmlToImage(app: FastifyInstance) {
         });
       }
 
-      try {
-        await validateFetchUrl(settings.url);
-      } catch (err) {
-        return reply.status(400).send({
-          error: "URL is not allowed",
-          details: err instanceof Error ? err.message : "URL validation failed",
-        });
+      if (settings.url) {
+        try {
+          await validateFetchUrl(settings.url);
+        } catch (err) {
+          return reply.status(400).send({
+            error: "URL is not allowed",
+            details: err instanceof Error ? err.message : "URL validation failed",
+          });
+        }
       }
 
       const preset =
@@ -69,14 +81,18 @@ export function registerHtmlToImage(app: FastifyInstance) {
             };
 
       try {
-        const buffer = await capturePage(settings.url, {
+        const captureOpts = {
           format: settings.format,
           quality: settings.quality,
           fullPage: settings.fullPage,
           viewportWidth: preset.width,
           viewportHeight: preset.height,
           isMobile: preset.isMobile,
-        });
+        };
+
+        const buffer = settings.html
+          ? await captureHtml(settings.html, captureOpts)
+          : await capturePage(settings.url!, captureOpts);
 
         const jobId = randomUUID();
         const workspacePath = await createWorkspace(jobId);

apps/web/src/components/tools/html-to-image-settings.tsx

@@ -18,17 +18,61 @@ export function HtmlToImageSettings() {
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
-      <div>
-        <label className="mb-1 block text-sm font-medium">{ts.url}</label>
-        <input
-          type="url"
-          value={store.url}
-          onChange={(e) => store.setUrl(e.target.value)}
-          placeholder={ts.urlPlaceholder}
-          className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
-        />
+      <div className="flex gap-1 rounded-lg bg-muted p-1">
+        <button
+          type="button"
+          onClick={() => store.setMode("url")}
+          className={`flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+            store.mode === "url"
+              ? "bg-background shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {ts.modeUrl}
+        </button>
+        <button
+          type="button"
+          onClick={() => store.setMode("html")}
+          className={`flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+            store.mode === "html"
+              ? "bg-background shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {ts.modeHtml}
+        </button>
       </div>
 
+      {store.mode === "url" && (
+        <div>
+          <label className="mb-1 block text-sm font-medium">{ts.url}</label>
+          <input
+            type="url"
+            value={store.url}
+            onChange={(e) => store.setUrl(e.target.value)}
+            placeholder={ts.urlPlaceholder}
+            className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
+          />
+        </div>
+      )}
+
+      {store.mode === "html" && (
+        <div>
+          <label className="mb-1 block text-sm font-medium">{ts.htmlFile}</label>
+          <input
+            type="file"
+            accept=".html,.htm"
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (file) {
+                file.text().then((text) => store.setHtmlContent(text));
+              }
+            }}
+            className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm file:mr-3 file:rounded-md file:border-0 file:bg-primary file:px-3 file:py-1 file:text-sm file:font-medium file:text-primary-foreground"
+          />
+        </div>
+      )}
+
       <div>
         <label className="mb-1 block text-sm font-medium">{ts.format}</label>
         <select
@@ -128,7 +172,7 @@ export function HtmlToImageSettings() {
 
       <button
         type="submit"
-        disabled={!store.url || store.capturing}
+        disabled={(store.mode === "url" ? !store.url : !store.htmlContent) || store.capturing}
         className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground disabled:opacity-50"
       >
         {store.capturing && <Loader2 className="h-4 w-4 animate-spin" />}

apps/web/src/stores/html-to-image-store.ts

@@ -2,7 +2,9 @@ import { create } from "zustand";
 import { formatHeaders } from "@/lib/api";
 
 interface HtmlToImageState {
+  mode: "url" | "html";
   url: string;
+  htmlContent: string;
   format: "jpg" | "png" | "webp";
   quality: number;
   fullPage: boolean;
@@ -14,7 +16,9 @@ interface HtmlToImageState {
   resultSize: number | null;
   error: string | null;
 
+  setMode: (mode: "url" | "html") => void;
   setUrl: (url: string) => void;
+  setHtmlContent: (html: string) => void;
   setFormat: (format: "jpg" | "png" | "webp") => void;
   setQuality: (quality: number) => void;
   setFullPage: (fullPage: boolean) => void;
@@ -26,7 +30,9 @@ interface HtmlToImageState {
 }
 
 const DEFAULTS = {
+  mode: "url" as const,
   url: "",
+  htmlContent: "",
   format: "png" as const,
   quality: 90,
   fullPage: false,
@@ -42,7 +48,9 @@ const DEFAULTS = {
 export const useHtmlToImageStore = create<HtmlToImageState>((set, get) => ({
   ...DEFAULTS,
 
+  setMode: (mode) => set({ mode, error: null }),
   setUrl: (url) => set({ url, error: null }),
+  setHtmlContent: (htmlContent) => set({ htmlContent, error: null }),
   setFormat: (format) => set({ format }),
   setQuality: (quality) => set({ quality }),
   setFullPage: (fullPage) => set({ fullPage }),
@@ -52,7 +60,8 @@ export const useHtmlToImageStore = create<HtmlToImageState>((set, get) => ({
 
   capture: async () => {
     const state = get();
-    if (!state.url || state.capturing) return;
+    const hasInput = state.mode === "url" ? state.url : state.htmlContent;
+    if (!hasInput || state.capturing) return;
 
     set({ capturing: true, error: null, resultUrl: null, resultSize: null });
 
@@ -61,7 +70,7 @@ export const useHtmlToImageStore = create<HtmlToImageState>((set, get) => ({
         method: "POST",
         headers: formatHeaders({ "Content-Type": "application/json" }),
         body: JSON.stringify({
-          url: state.url,
+          ...(state.mode === "url" ? { url: state.url } : { html: state.htmlContent }),
           format: state.format,
           quality: state.quality,
           fullPage: state.fullPage,

packages/shared/src/i18n/ar.ts

@@ -1006,6 +1006,9 @@ export const ar: TranslationKeys = {
       download: "تحميل رمز QR",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/de.ts

@@ -1019,6 +1019,9 @@ export const de: TranslationKeys = {
       download: "QR-Code herunterladen",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/en.ts

@@ -964,6 +964,9 @@ export const en = {
       download: "Download QR Code",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/es.ts

@@ -1001,6 +1001,9 @@ export const es: TranslationKeys = {
       download: "Descargar codigo QR",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/fr.ts

@@ -1020,6 +1020,9 @@ export const fr: TranslationKeys = {
       download: "Telecharger le code QR",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/hi.ts

@@ -1002,6 +1002,9 @@ export const hi: TranslationKeys = {
       download: "QR कोड डाउनलोड करें",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/id.ts

@@ -1014,6 +1014,9 @@ export const id: TranslationKeys = {
       download: "Unduh Kode QR",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/it.ts

@@ -1013,6 +1013,9 @@ export const it: TranslationKeys = {
       download: "Scarica codice QR",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/ja.ts

@@ -972,6 +972,9 @@ export const ja: TranslationKeys = {
       download: "QRコードをダウンロード",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/ko.ts

@@ -957,6 +957,9 @@ export const ko: TranslationKeys = {
       download: "QR 코드 다운로드",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/nl.ts

@@ -1016,6 +1016,9 @@ export const nl: TranslationKeys = {
       download: "QR-code downloaden",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/pl.ts

@@ -1017,6 +1017,9 @@ export const pl: TranslationKeys = {
       download: "Pobierz kod QR",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/pt-BR.ts

@@ -1013,6 +1013,9 @@ export const ptBR: TranslationKeys = {
       download: "Baixar codigo QR",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/ru.ts

@@ -1015,6 +1015,9 @@ export const ru: TranslationKeys = {
       download: "Скачать QR-код",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/sv.ts

@@ -1012,6 +1012,9 @@ export const sv: TranslationKeys = {
       download: "Ladda ner QR-kod",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/th.ts

@@ -995,6 +995,9 @@ export const th: TranslationKeys = {
       download: "ดาวน์โหลดคิวอาร์โค้ด",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/tr.ts

@@ -1017,6 +1017,9 @@ export const tr: TranslationKeys = {
       download: "QR Kodunu İndir",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/uk.ts

@@ -1015,6 +1015,9 @@ export const uk: TranslationKeys = {
       download: "Завантажити QR-код",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/vi.ts

@@ -1014,6 +1014,9 @@ export const vi: TranslationKeys = {
       download: "Tải xuống mã QR",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/zh-CN.ts

@@ -949,6 +949,9 @@ export const zhCN: TranslationKeys = {
       download: "下载 QR 码",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

packages/shared/src/i18n/zh-TW.ts

@@ -947,6 +947,9 @@ export const zhTW: TranslationKeys = {
       download: "下載QR碼",
     },
     "html-to-image": {
+      modeUrl: "URL",
+      modeHtml: "HTML File",
+      htmlFile: "HTML File",
       url: "URL",
       urlPlaceholder: "https://snapotter.com",
       format: "Output Format",

tests/integration/html-to-image.test.ts

@@ -12,6 +12,7 @@ vi.mock("../../apps/api/src/lib/browser-service.js", () => {
   return {
     isBrowserAvailable: vi.fn().mockReturnValue(true),
     capturePage: vi.fn().mockResolvedValue(TEST_PNG),
+    captureHtml: vi.fn().mockResolvedValue(TEST_PNG),
     shutdownBrowser: vi.fn(),
   };
 });
@@ -324,4 +325,38 @@ describe("HTML to Image", () => {
       expect(JSON.parse(res.body).code).toBe("BROWSER_CRASHED");
     });
   });
+
+  describe("html content mode", () => {
+    it("captures HTML content with default settings", async () => {
+      const res = await post({ html: "<html><body><h1>Hello</h1></body></html>" }, adminToken);
+      expect(res.statusCode).toBe(200);
+      const result = JSON.parse(res.body);
+      expect(result.jobId).toBeDefined();
+      expect(result.downloadUrl).toMatch(/\.png$/);
+    });
+
+    it("rejects empty html string", async () => {
+      const res = await post({ html: "" }, adminToken);
+      expect(res.statusCode).toBe(400);
+    });
+
+    it("rejects when both url and html are provided", async () => {
+      const res = await post({ url: "https://example.com", html: "<h1>test</h1>" }, adminToken);
+      expect(res.statusCode).toBe(400);
+    });
+
+    it("rejects when neither url nor html is provided", async () => {
+      const res = await post({ format: "png" }, adminToken);
+      expect(res.statusCode).toBe(400);
+    });
+
+    it("does not perform SSRF check for html mode", async () => {
+      const { validateFetchUrl } = await import("../../apps/api/src/lib/ssrf.js");
+      (validateFetchUrl as ReturnType<typeof vi.fn>).mockClear();
+
+      await post({ html: "<html><body>test</body></html>" }, adminToken);
+
+      expect(validateFetchUrl).not.toHaveBeenCalled();
+    });
+  });
 });