RenderOps Developer & Marketer Email Toolkit 🚀

A standalone, isomorphic developer toolkit for HTML email layout optimization, deliverability scanning, accessibility compliance, and Outlook compatibility debugging.

[!TIP] 100% Client-Side & Private: This toolkit runs entirely offline. Whether you use the CLI in your terminal or load the interactive GUI, your email code and templates are processed locally and are never sent to any remote servers.

This repository supports both a Command Line Interface (CLI) and an interactive Web GUI hosted via GitHub Pages.

🛠️ CLI Installation & Usage

You can run the CLI tools on the fly without installing them locally using npx, or install the package globally.

Running via npx (Recommended)

npx renderops-cli --help

Global Installation

npm install -g renderops-toolkit
renderops-cli --help

📚 CLI Commands & Reference

1. CanIEmail Client Support Check

Look up HTML/CSS property support across 30+ email clients (Outlook Desktop/Web, Gmail App/Web, Apple Mail).

npx renderops-cli caniemail css-flexbox
npx renderops-cli caniemail css-border-radius

2. CSS Selector Inliner

Automatically inject global stylesheet classes directly into HTML tags for maximum Gmail compatibility.

npx renderops-cli inline input.html -o output.html

3. VML Button Builder

Generate rounded, color-safe VML action buttons for Windows desktop Outlook compatibility.

npx renderops-cli vml-button --text "Sign Up" --url "https://example.com" --background "#8B5CF6" --color "#ffffff"

4. GA4 UTM Campaign Linker

Tag marketing links or all hyperlinks inside an HTML email with GA4 attribution queries.

# Tag a single URL
npx renderops-cli utm "https://example.com" --source "newsletter" --medium "email" --campaign "summer_sale"

# Tag all links in an HTML email template
npx renderops-cli utm email.html --source "newsletter" --medium "email" --campaign "summer_sale" -o tagged.html

5. Subject Line Scorer

Audit marketing subject line lengths, check emoji conversions, and flag spam-trigger words.

npx renderops-cli subject "Double your cash now! 100% Free! 💰"

6. Preheader Builder

Inject standard hidden span preheaders with trailing spacers to prevent email body text leaking into preview text.

npx renderops-cli preheader template.html "Don't miss our launch discounts!" -o template_ready.html

7. Base64 Image Encoder

Convert images (PNG, JPG, SVG, etc.) into base64 Data URIs to bypass default image-blocking rules in corporate clients.

npx renderops-cli base64 logo.png

8. WCAG Color Contrast Validator

Evaluate relative luminance levels between foreground and background colors.

npx renderops-cli contrast "#22d3ee" "#090d16"

9. Gmail Dark Mode Simulator

Analyze style hex colors, pre-invert colors using the Dark Mode Judo algorithm, and inject u + .body overrides.

npx renderops-cli dark-mode template.html -o template_dark.html

10. Code Diff Comparator

Compare two template versions line-by-line in the console with color-coded syntax grids.

npx renderops-cli diff template_v1.html template_v2.html

🌐 Web Interface (GitHub Pages)

The repository includes a responsive Web GUI hosted under web/ which runs 100% browser-side with zero tracking or server uploads.

Hosting locally

npm install
# Serve the web/ folder via any HTTP server (e.g. npx serve web)

Hosting on GitHub Pages

1. Go to your repository settings on GitHub.
2. Select Pages -> Source -> Deploy from a branch.
3. Select the main branch and the root folder / (default), then click Save. (Note: The root-level index.html will automatically redirect visitors to the interactive UI in /web.)

⚡ Upgrade to RenderOps Pro / Agency

The open-source toolkit is powered by the RenderOps compiler engine. For advanced automation, visual testing, and visual layout compilers, upgrade to our cloud platform:

• FlightControl Preview Workspace: A unified WYSIWYG editor combining all 36 tools in real-time.
• Lazarus Layout Auto-Healer: Auto-fix all table borders, Outlook paddings, and styles in one click.
• Prism Multi-Client Renderer: Test templates across 14 email clients concurrently in-browser.
• RUEM Telemetry Monitoring: Track actual template rendering bugs from viewports in the wild.

Visit RenderOps.tech to sign up for a 14-day free trial.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.