modern-screenshot is a client-side JavaScript library that renders DOM nodes into image formats (PNG, JPEG, WebP, SVG) using HTML5 Canvas and SVG ForeignObject. It clones a DOM subtree, captures computed styles (including pseudo-elements, scrollbars, CSS custom properties), embeds external resources (images, fonts, SVG symbols), and produces a bitmap or data URL. The architecture is modular: a recursive clone phase captures structure and styles, an embedding phase resolves and inlines external assets, and a rendering phase converts the cloned DOM to a Canvas via an intermediate SVG foreignObject. It supports Web Workers for parallel resource fetching, singleton context for repeated screenshots, DPI control via PNG/JFIF metadata injection, and comprehensive edge cases (shadow DOM, cross-origin iframes, @font-face with CSS layers, and Safari/Firefox quirks). The codebase is well-structured, thoroughly tested with Puppeteer-based image snapshot tests, and actively maintained.
html2pdf.js is a client-side JavaScript library that converts HTML elements or strings into PDF documents entirely in the browser. It works by rendering the HTML to a canvas using html2canvas, then embedding that canvas image into a PDF generated with jsPDF. The library provides a Promise-based Worker API that allows chaining steps (from, toContainer, toCanvas, toPdf, save) and supports configuration of margins, page size, image quality, page breaks, and hyperlinks. It includes plugins for automatic page-break handling (CSS-based, legacy class-based, or avoid-all mode) and hyperlink extraction from anchor tags. The codebase is well-structured with a modular design, including a sophisticated DOM cloning utility (snapdom) that handles shadow DOM, canvas elements, iframes, and form controls. The project is actively maintained with CI/CD, semantic versioning, and visual diff testing.