Awesome GitHub RepositoriesCSS Inlining

rrweb is a DOM session recording library and serialization framework used to record and replay web sessions. It converts the state of a web page into a serializable JSON data structure and tracks mutations to reconstruct user interactions within a replay engine. The system distinguishes itself by using a sandboxed iframe for reconstruction to isolate replayed content, preventing script execution and form submissions. It ensures visual consistency through CSS inline-style flattening and provides sensitive data masking to prevent private information from being captured. The project covers a br

dom-to-image is a programmatic tool for capturing the visual state of HTML elements as downloadable images or raw image data. It functions as a DOM to image converter that renders specific nodes as base64 data URLs, binary blobs, or pixel arrays. The library transforms HTML elements into raster or vector images by utilizing the HTML5 canvas API. It can retrieve raw byte arrays of a DOM node for low-level image manipulation as an RGBA pixel data extractor. The project covers web content rasterization and the generation of dynamic screenshots from live HTML content. It handles the conversion o

Critical is a tool for extracting and inlining the minimum CSS required to render above-the-fold content. It identifies the styles necessary for the initial visible portion of a page to reduce render-blocking requests and improve page load speed. The project generates resolution-specific stylesheets to optimize the initial paint across different device dimensions. It includes a utility to rebase asset URLs within extracted styles, ensuring that images and fonts load correctly when stylesheets are moved to different directories or content delivery networks. The tool provides a command-line in

Foundation Emails is a responsive HTML email framework designed to create layouts that render consistently across different screen sizes and email clients. It functions as a system for building responsive emails and includes a CSS inliner to convert external stylesheets into inline HTML attributes. The framework incorporates an HTML table layout generator that converts simplified custom tags into the complex table structures required for legacy email client rendering. This process automates the creation of layouts that maintain visual consistency in restrictive email software. The project pr

Grip is a GitHub API rendering tool and markdown previewer that transforms local markdown files into styled HTML. It functions as a converter for processing markdown text into HTML files and as a local server for verifying content appearance before it is committed to a repository. The project ensures visual parity with GitHub by using the GitHub API to render content, applying the specific styles used in repository comments, issues, and pull requests. It includes a mechanism to embed external CSS directly into generated HTML files for portable offline distribution and utilizes disk-based asse

CssToInlineStyles هو أداة تضمين CSS لرسائل البريد الإلكتروني HTML التي تحول أوراق الأنماط إلى سمات نمط مضمنة على عناصر HTML. يعمل كمحلل نمط ومحرك تحويل، حيث يقوم بتعيين محددات CSS إلى علامات HTML لضمان عرض مرئي متسق عبر عملاء ومزودي بريد إلكتروني متنوعين. تحسب الأداة الأنماط النهائية المحسوبة من خلال تطبيق قواعد الخصوصية والميراث قبل حقن الخصائص المحلولة مباشرة في سمات النمط لعناصر HTML المقابلة. وتستخدم حساب النمط القائم على DOM وتعيين المحدد لتحديد الإعلانات التي تنطبق على كل علامة.

This project is an HTML renderer that produces error pages styled after the familiar design of a standard CDN provider (such as Cloudflare). It accepts customizable parameters for error code, description, location, and request metadata, and outputs a self-contained HTML page that can be served directly by web servers or reverse proxies as a branded error response. The renderer is built using Go templates with built-in injection prevention, and it embeds all styling inline within the HTML head to eliminate external dependencies. It applies automatic whitespace minification to reduce output siz

react-snap هو مولد مواقع ثابتة وأداة لعرض تطبيقات الصفحة الواحدة (SPA) مسبقاً. يقوم بتحويل المكونات الديناميكية التي تعمل في جهة العميل إلى ملفات HTML ثابتة باستخدام متصفح بدون واجهة رسومية (headless browser)، مما يحسن من تحسين محركات البحث (SEO) وسرعة التحميل الأولية. يتميز المشروع بوجود زاحف (crawler) يعتمد على متصفح بدون واجهة رسومية يكتشف مسارات التطبيق تلقائياً عبر تتبع الروابط الداخلية. كما يتضمن أداة لتحسين الترطيب (hydration optimizer) تلتقط حالة التطبيق وتخزن استجابات الشبكة مؤقتاً أثناء عملية العرض، مما يدمجها مباشرة في ملف HTML لمزامنة تطبيق جهة العميل دون الحاجة لإعادة جلب البيانات. توفر الأداة مجموعة من تحسينات الأداء، بما في ذلك تضمين CSS الحرج (critical CSS)، وتحميل النصوص البرمجية بشكل غير متزامن، وتوليد ملفات تعريف الموارد (resource manifests) وترويسات التحميل المسبق. كما يدعم تنفيذ العرض المتوازي عبر علامات تبويب المتصفح، ويمكنه حظر طلبات الطرف الثالث لمنع تشغيل النصوص البرمجية الخارجية أثناء عملية البناء.

Email-Boilerplate is an HTML email template framework and design system providing a foundational code structure for developing newsletters and transactional emails. It serves as a cross-client email layout library designed to ensure consistent rendering across diverse desktop and mobile email applications. The project utilizes a table-based layout library and reusable code patterns to maintain structural integrity within restrictive email rendering engines. It employs a responsive design system that combines fluid hybrid scaling and semantic markup normalization to resolve common rendering in

This project is a Node.js email templating engine and SMTP delivery framework used for creating, rendering, and sending custom email templates. It provides a comprehensive suite for email orchestration, including a system for dispatching templated messages and a tool for generating custom layouts to standardize outbound messaging. The framework includes a dedicated HTML CSS inliner that converts external stylesheets into inline styles for consistent rendering across different email clients. It also features a multilingual localization tool for translating template text and subject lines, and