Scripts run only when enabled. Keep them off for untrusted HTML. Preview uses allow-same-origin so the page can be captured—only paste code you trust.
HTML / CSS source34 lines · 997 chars
Rendered preview
About this tool
Documentation screenshots, social cards, email proofs, and design handoffs often need pixels—not a live URL. Teams paste HTML snippets into chat, export components from design tools, or maintain static fragments for CMS embeds, yet stakeholders still ask for a flat image they can drop into Keynote, Notion, or a Jira comment without opening DevTools. SynthQuery’s HTML to Image Converter (catalog id WEB-002) closes that gap inside the same Free tools surface you already use for the HTML Online Viewer, Markdown pipelines, and lightweight imaging utilities: you author or paste a complete HTML document—including embedded CSS or inline styles—preview it inside a sandboxed iframe tuned to an adjustable viewport width, optionally enable JavaScript when you trust the source, choose PNG or JPEG output, pick a solid capture background or transparent PNG when your markup leaves the canvas clear, and export at 1× or 2× scale for Retina decks. Everything runs client-side in your browser; no HTML payload is uploaded to SynthQuery for rasterization, which keeps NDAs, pre-release pricing, and internal component libraries inside your trust boundary as long as your device policy allows the page itself.
The workflow is deliberately boring in a good way: CodeMirror gives syntax-aware editing for HTML (and typical template fragments), the preview pane mirrors what html2canvas will sample, and download hands you a single file named for quick sharing. That predictability matters when marketing needs a 1200-pixel-wide hero mock for a review thread while engineering still ships the React version separately—here, width is a control, not a mystery.
What this tool does
The editor uses CodeMirror 6 with the HTML language pack so tags, attributes, and embedded style blocks receive predictable highlighting, bracket matching, and line wrapping suitable for long snippets. That choice keeps the experience aligned with SynthQuery’s Markdown editor ergonomics: keyboard-first editing, fold gutters for nested structures, and a dark theme that matches the rest of the dark-only product shell. Autosave stores your buffer in local storage so accidental refreshes do not wipe a half-built card, while Copy HTML and Clear support quick handoffs or scratch resets without reaching for a desktop IDE.
Preview runs through srcDoc in an iframe whose sandbox always includes allow-same-origin so the capture engine can read the rendered DOM—an intentional trade that still blocks scripts unless you opt in. Default script-free mode is ideal for documentation HTML copied from wikis or help centers where execution is unnecessary and risky. The preview container honors your viewport width control explicitly rather than guessing from the outer browser window, which stabilizes comparisons when your laptop is ultrawide but the asset targets a 640-pixel blog column.
Export uses a dynamically imported html2canvas pass against the iframe body with configurable scale, background fill, and dimensions aligned to the viewport width and measured scroll height. PNG emits lossless pixels; JPEG re-encodes through the canvas with a user-tunable quality parameter. Optional transparency maps directly to html2canvas background removal when the format allows alpha. Together, these knobs mirror what designers request in review meetings: correct width, crisp text, honest background, and a file type their toolchain already accepts.
Technical details
Rendering happens entirely in your browser: the preview iframe loads your HTML string via srcDoc, applies sandbox policies, and executes optional scripts only when enabled. Rasterization uses html2canvas, which walks the computed DOM, paints text, backgrounds, borders, and many CSS effects into a canvas, then exports through standard toDataURL calls. It is not a full browser engine: some newer CSS features, complex transforms, or video frames may snapshot imperfectly compared with native screenshots, which is why we expose an honest preview pane before you download.
Resolution scaling multiplies both width and height when 2× is selected, increasing effective pixel density for Retina targets. Viewport width maps to html2canvas windowWidth so line breaks and media queries keyed to that width align with what you see. External resources such as webfonts or remote images must load successfully and, for canvas safety, should be served with CORS headers when required; otherwise the library may omit them or fail the capture. No SynthQuery server receives your HTML for this path—the network calls you observe should be your own optional assets inside the document plus the static page bundle.
Use cases
Developer advocates rasterize code-sample callouts for slide decks and conference Twitter cards: HTML captures preserve syntax-colored blocks when your CSS models them, and 2× mode keeps subpixel text legible on large screens. Email operators preview table-based layouts, capture a PNG proof for compliance archives, and attach the same file to Litmus-alternative threads where stakeholders refuse to click HTML files. Product designers paste static markup exported from internal design systems, tune viewport width to match Figma frames, and drop results into FigJam comments when engineering has not wired the live component yet.
Content marketers build lightweight social images—headline, gradient, CTA—without Photoshop by combining this converter with gradient or solid-color utilities elsewhere in SynthQuery, then verifying contrast in the preview pane before download. Technical writers embed long API response examples in PDFs by capturing HTML tables as images when vector export from their toolchain is brittle. Support teams reproduce customer-specific UI snippets (with secrets redacted) as PNG attachments so CRM tickets stay self-contained.
Educators teaching web basics can demonstrate how CSS changes alter layout, then export a still for LMS modules that disallow live iframes. Agencies preparing pitch decks align multiple client mockups to identical widths for visual rhythm. Whenever the goal is “show exactly this DOM state as pixels,” HTML-to-image bridges authoring and distribution without standing up headless Chrome infrastructure yourself.
How to use this tool effectively
Start from HTML you are allowed to process: licensed snippets, first-party components, or open samples—not scraped paywalled pages or third-party checkout flows you do not own. If your fragment is only a <div> without a document shell, wrap it in a minimal <!DOCTYPE html> scaffold with <meta charset="utf-8"> and a viewport meta tag so fonts and responsive rules behave consistently when the iframe measures width. Paste into the editor or use Open HTML file to load a local .htm or .html asset; the tool enforces a generous character ceiling to keep low-memory laptops responsive, so split gigantic templates if the editor feels heavy.
Choose Live preview when you want debounced updates while tuning typography, or turn it off before dumping a very large document so the UI stays predictable, then press Refresh preview (Ctrl or Cmd + Enter on supported desktops) when you want a deliberate snapshot. Set Viewport width in pixels between 320 and 2400 to mimic a mobile column, a blog content well, or a wide dashboard canvas; the preview iframe uses that width while height grows with your content’s scroll height so tall documentation pages remain fully capturable in one raster. Pick Output format: PNG preserves sharp UI edges, alpha-friendly transparency when you toggle Transparent (PNG), and predictable color for slides; JPEG reduces file size for photographic gradients inside your markup and exposes a quality slider when you need smaller attachments.
Set Capture background to a hex color that matches your destination slide deck or social template, unless you rely on Transparent (PNG) and your CSS already defines translucent layers—note that transparency requires the captured pixels to actually leave alpha holes; solid opaque DIVs still look solid. Enable 2× (Retina) output when the image will appear on high-DPI projectors or Apple displays; scale doubles pixel dimensions, so expect larger files and longer capture time on complex layouts. Leave Allow scripts off unless you deliberately need client-side rendering steps; when you enable it, only run code you trust because the iframe receives same-origin privileges required for faithful DOM reads.
When the preview matches what you want frozen in time, click Download image. If capture fails—often due to cross-origin images or memory pressure—try embedding local data URIs, reducing viewport height temporarily, switching JPEG with moderate quality, or disabling heavy box-shadow stacks. Bookmark /free-tools to rediscover WEB-002 beside other Screenshot & Web utilities.
After export, quickly resize or recompress the PNG/JPEG to match strict platform byte limits.
Frequently asked questions
html2canvas replicates many common properties—solid backgrounds, borders, border-radius, text styling, most box shadows, and typical flexbox or grid layouts—but it is not identical to Chromium’s native paint pipeline. Blends, filters, backdrop-filter, some clipping paths, subpixel antialiasing edge cases, and cutting-edge specs may snapshot differently than they appear in a full browser screenshot. Always treat the preview iframe as the source of truth: if the preview looks wrong, adjust CSS toward simpler constructs (flatten gradients, replace exotic filters) before exporting. For mission-critical brand audits, pair this utility with manual spot checks on target devices. SynthQuery documents these limits so you can decide when client-side rasterization is “good enough” versus when you need a dedicated headless capture service.
The iframe can request remote CSS, fonts, and images if your markup references HTTPS URLs and the remote servers respond successfully. However, canvas export is subject to the same security rules as any browser: cross-origin images without appropriate CORS headers may be omitted or taint the capture, which can cause html2canvas to throw or drop assets. Prefer same-origin resources, data URIs, or CDN URLs that explicitly allow cross-origin use when you need pixel-perfect results. Webfonts should finish loading before you download; wait until the preview stabilizes, and consider font-display strategies that avoid invisible text during capture. If an asset fails, open the browser developer console on the preview (by reproducing in a separate tab) to diagnose blocked requests.
Common causes include oversized documents that exhaust canvas memory on low-RAM devices, blocked cross-origin media, unsupported CSS that paints nothing in html2canvas’s model, or script-dependent layouts that never finished rendering because scripts were disabled. Try reducing viewport height by simplifying content, rasterizing smaller sections, enabling Allow scripts only for trusted code, embedding images as data URIs, or switching from PNG to JPEG for very wide gradients. If the preview itself is blank, validate that your HTML includes a proper body with visible content and that inline styles are not hiding elements. Persistent failures after simplification may indicate a browser extension interfering—test in a clean profile if needed.
Platforms change specifications frequently, so treat numbers as starting points: many blog content wells fall between 640 and 800 CSS pixels; LinkedIn and Twitter cards often assume wider artboards but downscale aggressively—design at the width you want text to wrap, then use Image resizer if the exported file must meet a byte cap. SynthQuery lets you type any width from 320 to 2400, so you can match your component library’s breakpoint tokens. Always verify the final hosted crop in the target app because social readers add their own masks and safe zones. When in doubt, capture slightly larger and let the platform center-crop rather than clipping typography.
2× mode increases the canvas scale factor so more physical pixels represent the same CSS layout, which improves sharpness on high-DPI displays and in print workflows. It does not alter your HTML/CSS box model: line breaks come from the viewport width you set, not from the scale toggle. File size grows roughly with the square of scale for photographic content, so balance fidelity against attachment limits. If you need a physically larger image (not just sharper), increase viewport dimensions instead of relying on scale alone.
Transparency appears only where the exported canvas contains alpha. html2canvas can preserve alpha when you disable the solid capture background and your CSS does not paint opaque layers over the entire canvas. Drop shadows, outer glows, and anti-aliased edges may introduce semi-transparent halos that look different on dark versus light slide backgrounds—preview both contexts before publishing. JPEG does not support transparency; the tool disables the transparent toggle when JPEG is selected. Some downstream apps flatten alpha unexpectedly; test PowerPoint, Google Slides, and Notion imports if your workflow depends on see-through corners.
Keep scripts off for untrusted HTML, scraped pages, or static snippets where JavaScript adds no value. Enable scripts only when your layout depends on client rendering—chart libraries that measure containers, small templating helpers, or design-system code that hydrates measurements. Remember that scripts run with sandbox allowances you explicitly grant; malicious code could still attempt navigation or annoyance behaviors permitted inside the iframe. Combine Allow scripts with the same hygiene you use when opening HTML attachments: sanitize, review, and prefer static exports from trusted pipelines when possible.
Native OS screenshots capture whatever is on screen, including SynthQuery chrome unless you crop carefully, and they inherit your display scaling quirks. This converter captures only the iframe body at the viewport width you specify, producing deterministic dimensions for decks and docs. Manual screenshots excel for full browser UI or authenticated SaaS pages behind logins; HTML-to-image excels for self-contained markup you already have as source. Many teams use both: screenshot for live apps, HTML-to-image for components and email proofs.
This tool path is engineered for client-side rasterization: your HTML stays in the browser tab, preview uses srcDoc locally, and html2canvas runs in your session. SynthQuery’s servers do not need your document contents to generate the download. Network traffic should reflect only your own external assets referenced inside the HTML plus normal page delivery. Corporate policies still apply: if your InfoSec team blocks local storage, autosave may be limited, and if they forbid iframes with same-origin access, the page may not function—raise those exceptions with admins. For regulated workflows, combine this utility with your organization’s data-handling checklist.
This converter intentionally does not fetch arbitrary URLs, which avoids SSRF risk and keeps the implementation aligned with other SynthQuery utilities that respect enterprise boundaries. Paste or upload the HTML you already control, or use your stack’s export to produce a static snapshot first. If you need pixel-perfect captures of third-party live sites, browser screenshots or dedicated crawling infrastructure remain the appropriate tools; once you extract the HTML/CSS you are licensed to reuse, you can rasterize it here.