Skip to main content
Toollyz

Search tools

Search for a command to run...

Website Screenshot Generator

Paste an HTML fragment with inline styles and we render it to a PNG via the SVG `foreignObject` pipeline: wrap in `<svg><foreignObject>`, serialise to a data URL, decode into an Image, draw onto a canvas, export PNG. Five size presets (OG / Twitter / Square / Hero / Blog), 1× / 2× / 3× scale, custom background colour. 100% offline.

What is the Website Screenshot Generator?

Website Screenshot Generator turns any HTML fragment into a downloadable PNG using a five-stage pipeline: (1) wrap the HTML inside `<svg width=W height=H><foreignObject>…HTML…</foreignObject></svg>`, (2) URL-encode and turn into a `data:image/svg+xml,…` URL, (3) load that URL into an `Image()` element and await `decode()`, (4) draw the Image onto a `<canvas>` at the chosen scale, (5) call `canvas.toBlob('image/png')` and offer the result as a download. Five size presets cover the most common output shapes — OG (1200×630), Twitter (1600×900), Square (1080×1080), Hero (1920×1080), Blog (1280×720). Scale picker for 1× (native), 2× (retina), 3× (super-retina). Custom background fills the canvas behind the HTML. The pipeline has known caveats — external stylesheets and Google Fonts don't load (the SVG is sandboxed), cross-origin `<img>` taints the canvas (and PNG export then fails), JS doesn't run inside the SVG, and Safari < 16 has bugs — all surfaced prominently in the UI so users hit them once and understand.

How to use it

  1. Paste a self-contained HTML fragment with all styles inlined.
  2. Pick a size preset or set width × height manually.
  3. Pick a scale (2× for retina, 3× for super-retina).
  4. Click 'Render' — the canvas pipeline runs and shows a preview.
  5. Click 'Copy PNG' for clipboard or 'Download' for a file.

Benefits

  • No external libraries — html2canvas would be 150 KB+, we ship 0 KB extra.
  • Five size presets covering Open Graph, Twitter, square, hero, blog formats.
  • 1× / 2× / 3× scale for retina-sharp output.
  • Background colour fills the canvas behind the HTML.
  • Honest documentation of pipeline caveats — no surprises.
  • Pipeline pure functions in `lib/tools/text/html-screenshot.ts` — embeddable elsewhere.
  • Runs 100% in your browser — no server-side Puppeteer / Playwright / Chromium.
  • Sample HTML demonstrates inline styles, gradients, grids, and typography all rendering correctly.

Frequently asked questions

Why doesn't my Google Font load?

The SVG `foreignObject` sandbox doesn't fetch external stylesheets or @font-face urls. Inline your fonts as base64 data URLs in a `<style>` block, or rely on system fonts. The system font stack (system-ui, -apple-system, sans-serif) renders the same look across modern devices.

Why does my cross-origin image break the export?

When the canvas contains a cross-origin image without CORS, the canvas becomes 'tainted' — `toBlob` throws SecurityError to prevent the page from reading the pixels. Use a data: URL or a same-origin asset, or set CORS headers on the image source.

How is this different from html2canvas / dom-to-image?

html2canvas walks the DOM and reimplements each CSS property by drawing primitives on canvas — heavy (150 KB+), accurate but slow. dom-to-image uses the same foreignObject trick we do, but adds 25 KB of helpers. We do the trick in 60 lines, zero dependencies.

Does it support JavaScript in the HTML?

No — the SVG is paint-only. The browser doesn't execute scripts inside foreignObject. If your HTML depends on hydrated state, pre-render it first.

Why is the output PNG often pixelated even at 2×?

The HTML is rendered as SVG at the canvas size, then scaled. If you pick width=600, scale=2, the SVG renders at 600px and the canvas is 1200px — text inside renders crisp because SVG is vector. Images inside scale up bicubically though, which can look soft. For best results, use SVG icons inside the HTML.

What's the maximum size?

Width/height clamp to 4096 px. Canvas memory caps around 32K × 32K, but mobile devices hit OOM well before that. For larger captures, tile in two passes.

Can I render a real live URL?

No — that's what server-side Puppeteer / Playwright services do (Browserless, urlbox.io). This tool renders HTML you provide. To capture a real URL, View Source → paste here.

Why is my CSS Grid layout collapsing?

foreignObject hands the HTML to the browser's normal layout engine, which handles Grid / Flex / etc. correctly. If it's collapsing, check that your container has an explicit width (the SVG only provides a viewport, not implicit size constraints).

Does Safari work?

Safari 16+ works. Safari 15 has bugs with transforms inside foreignObject. Chrome / Firefox are reliable.

Are my HTML pastes saved?

Yes — input and render options persist in localStorage.

Is anything uploaded?

No. Pipeline runs entirely in your browser.

Related tools

See all image tools