npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@felipefreitag/email-preview

v0.3.0

Published

Check email HTML/React Email for Gmail compatibility

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

felipefreitagfelipefreitag

Keywords

Readme

Email Preview

Preview how your HTML and React Email templates will render in Gmail before you send them.

Gmail applies CSS transformations that can break your email design. Prevent issues without needing to manually send the email.

Overview of the building process

Read on Excalidraw

Features

  • Dual input modes - Paste raw HTML or React Email (TSX) code
  • Gmail simulation - Applies the same transformations Gmail uses
  • Issue detection - Reports unsupported CSS, size limits, auto-linking
  • Instant preview - See results as you type
  • CLI tool - Run checks with AI agents and CI/CD pipelines

Quick Start

Editor

Visit the live app and paste your email code in the editor.

CLI

Installation

npm install -g @felipefreitag/email-preview
# or
pnpm add -g @felipefreitag/email-preview

Usage

# Check a file
email-preview ./emails/welcome.html
email-preview ./emails/welcome.tsx

# Inline content
email-preview --stdin '<div style="display:flex">test</div>'

# Pipe from stdin
cat email.html | email-preview

# JSON output - for AI agents
email-preview email.html --json

Options

| Flag | Description | |------|-------------| | -f, --file <path> | Read input from file | | --stdin | Treat argument as HTML/TSX content | | --json | Output as JSON | | -h, --help | Show help | | -v, --version | Show version |

Exit Codes

| Code | Meaning | |------|---------| | 0 | Success - no issues, or only warnings | | 1 | Error - issues that need attention | | 2 | Failure - CLI error (file not found, invalid args) |

What It Checks

  • <style> blocks - Removed if placed in <body> (must be in <head>) or contain parse errors
  • CSS properties - Filters unsupported properties (flex, grid, position, etc.)
  • CSS selectors - Attribute selectors not supported
  • Media queries - Some query types filtered
  • <link> stylesheets - External CSS removed entirely
  • Email size - Warns if >102KB (Gmail clips content)
  • Images - Detects download overlay and spacing issues
  • Auto-linking - Detects URLs/emails that Gmail will convert to links
  • Default font - Injects Gmail's font-family: sans-serif for accurate rendering

TSX Sandbox

React Email code runs in a sandboxed environment with these limits:

  • Allowed imports: @react-email/* and react only
  • Code size: 50KB maximum
  • Execution timeout: 5 seconds
  • No file access: Relative imports are stripped
  • Tailwind: Custom configs replaced with defaults

Security

How User Code Execution Works

The TSX compiler uses Node.js vm.runInNewContext() to execute user-provided React Email code.

This does NOT provide a safe execution environment for unsafe code. There are code protections for common patterns, but more robust isolation should be prepared for a production app.

Development

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Run tests
pnpm test

# Run e2e tests
pnpm test:e2e

# Type check
pnpm typecheck

# Lint and format
pnpm lint-fix

License

MIT