PHPackages                             mscode-pl/laravel-react-email - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Mail & Notifications](/categories/mail)
4. /
5. mscode-pl/laravel-react-email

ActiveLibrary[Mail & Notifications](/categories/mail)

mscode-pl/laravel-react-email
=============================

Build Laravel mailables with react-email

v2.1.5(3mo ago)0479MITTypeScriptPHP ^8.1|^8.2|^8.3|^8.4|^8.5

Since Dec 7Pushed 1mo agoCompare

[ Source](https://github.com/mscode-pl/laravel-react-email)[ Packagist](https://packagist.org/packages/mscode-pl/laravel-react-email)[ Docs](https://github.com/mscode-pl/laravel-react-email)[ RSS](/packages/mscode-pl-laravel-react-email/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (4)Versions (12)Used By (0)

Laravel React Email
===================

[](#laravel-react-email)

Build Laravel email templates using [react-email](https://react.email) components. Variables from your Mailable are injected at send-time via Laravel Blade — no static strings hardcoded into HTML.

[![Latest Version](https://camo.githubusercontent.com/9b36c9e1a8bccad81ad63cf14f93c61b92fe38084a2f68ebef2fc22bc2adafbe/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d73636f64652d706c2f6c61726176656c2d72656163742d656d61696c)](https://packagist.org/packages/mscode-pl/laravel-react-email)[![License](https://camo.githubusercontent.com/6826fc6586f160c0db77e1054ef3a268dc6af1ca71fc8f4b0313f7ad6d725864/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6d73636f64652d706c2f6c61726176656c2d72656163742d656d61696c)](LICENSE)

---

How it works
------------

[](#how-it-works)

```
resources/react-email/welcome-email.tsx   ← you write this
         ↓  php artisan react-email:build
resources/views/react-email/welcome-email.blade.php   ← generated Blade template
         ↓  Mail::to($user)->send(new WelcomeEmail(...))
         email with real data injected by Blade at send-time

```

The build step compiles your TSX to static HTML and replaces placeholder props with Blade expressions:

In templateIn compiled Blade`$$name$$``{{ $name }}``$$user.email$$``{{ $user['email'] }}``blade.number('price')` + `{price.toFixed(2)}``{{ $price }}````@foreach($items as $item)````@if($fee > 0)`---

Installation
------------

[](#installation)

### 1. Composer

[](#1-composer)

```
composer require mscode-pl/laravel-react-email
```

### 2. Publish config

[](#2-publish-config)

```
php artisan vendor:publish --provider="MsCodePL\LaravelReactEmail\LaravelReactEmailServiceProvider" --tag="react-email-config"
```

### 3. npm dependencies

[](#3-npm-dependencies)

Install react-email and link the library from your vendor directory so TSX templates can import its helpers:

```
npm install react react-email @react-email/components tsx
```

Then add to your project's `package.json`:

```
{
  "dependencies": {
    "@react-email/components": "^1.0.1",
    "@mscode-pl/laravel-react-email": "file:vendor/mscode-pl/laravel-react-email"
  }
}
```

Run `npm install` once more to create the symlink:

```
npm install
```

> **Why?** The package lives in `vendor/` (Composer only, not published to npm). The `file:` reference lets `tsx` resolve `import { blade } from '@mscode-pl/laravel-react-email'` correctly.

---

Quick start
-----------

[](#quick-start)

### Generate a Mailable + template

[](#generate-a-mailable--template)

```
php artisan make:react-email WelcomeEmail
```

Creates:

- `app/Mail/WelcomeEmail.php`
- `resources/react-email/welcome-email.tsx`

### Write the template

[](#write-the-template)

`resources/react-email/welcome-email.tsx`:

```
import React from 'react';
import { Html, Head, Body, Container, Text, Button } from '@react-email/components';
import { blade } from '@mscode-pl/laravel-react-email';

interface WelcomeEmailProps {
    userName?: string;
    activationUrl?: string;
}

export default function WelcomeEmail({
    userName    = '$$userName$$',
    activationUrl = '$$activationUrl$$',
}: WelcomeEmailProps) {
    return (

                    Welcome, $$userName$$!
                    Click below to activate your account:
                    Activate Account

    );
}
```

### Build

[](#build)

```
php artisan react-email:build
```

### Send

[](#send)

`app/Mail/WelcomeEmail.php`:

```
use MsCodePL\LaravelReactEmail\ReactMailable;
use Illuminate\Mail\Mailables\{Content, Envelope};

class WelcomeEmail extends ReactMailable
{
    public function __construct(
        public string $userName,
        public string $activationUrl,
    ) {}

    public function envelope(): Envelope
    {
        return new Envelope(subject: 'Welcome!');
    }

    public function content(): Content
    {
        return new Content(
            html: 'react-email.welcome-email',
            text: 'react-email.welcome-email-text',
        );
    }
}
```

```
Mail::to($user)->send(
    new WelcomeEmail(
        userName: $user->name,
        activationUrl: route('activate', $user->activation_token),
    )
);
```

---

Variables
---------

[](#variables)

### Simple string variables

[](#simple-string-variables)

Use `$$variableName$$` directly in JSX text. The build step converts them to `{{ $variableName }}`.

```
export default function InvoiceEmail({
    invoiceNumber = '$$invoiceNumber$$',
    dueDate       = '$$dueDate$$',
}) {
    return (

            Invoice #$$invoiceNumber$$
            Due: $$dueDate$$

    );
}
```

Compiled Blade output:

```
Invoice #{{ $invoiceNumber }}
Due: {{ $dueDate }}
```

### Nested object variables

[](#nested-object-variables)

Dot notation is converted to array access:

```
export default function OrderEmail({
    user  = { name: '$$user.name$$', email: '$$user.email$$' },
    shop  = { name: '$$shop.name$$' },
}) {
    return (

            Hello $$user.name$$,
            Your order at $$shop.name$$ is confirmed.
            Confirmation sent to $$user.email$$

    );
}
```

Compiled Blade output:

```
Hello {{ $user['name'] }},
Your order at {{ $shop['name'] }} is confirmed.
Confirmation sent to {{ $user['email'] }}
```

### Numeric variables

[](#numeric-variables)

Use `blade.number('varName')` so methods like `.toFixed()` work at build time without crashing:

```
import { blade } from '@mscode-pl/laravel-react-email';

export default function OrderEmail({
    subtotal = blade.number('subtotal'),
    total    = blade.number('total'),
}) {
    return (

            Subtotal: {subtotal.toFixed(2)} PLN
            Total: {total.toFixed(2)} PLN

    );
}
```

Compiled Blade output:

```
Subtotal: {{ $subtotal }} PLN
Total: {{ $total }} PLN
```

> Blade handles the actual number formatting at send-time with `number_format($total, 2)` etc.

### Lists / arrays — ``

[](#lists--arrays--bladeforeach)

Use the `` component to loop over an array. Inside, write `$$item.property$$` placeholders:

```
import { BladeForEach } from '@mscode-pl/laravel-react-email';

export default function OrderEmail() {
    return (

            Your items:

                    $$item.name$$ × $$item.quantity$$ — $$item.price$$ PLN

    );
}
```

Compiled Blade output:

```
@foreach($items as $item)

        {{ $item['name'] }} × {{ $item['quantity'] }} — {{ $item['price'] }} PLN

@endforeach
```

For nested arrays (e.g. `order.items`):

```

    $$item.name$$ — $$item.price$$ PLN

```

Compiles to:

```
@foreach($order['items'] as $item)
    {{ $item['name'] }} — {{ $item['price'] }} PLN
@endforeach
```

### Conditional sections — ``

[](#conditional-sections--bladeif)

Use `` to wrap content that should only appear when a condition is true:

```
import { BladeForEach, BladeIf, blade } from '@mscode-pl/laravel-react-email';

export default function OrderEmail({
    total      = blade.number('total'),
    serviceFee = blade.number('serviceFee'),
}) {
    return (

                $$item.name$$ — $$item.price$$ PLN

                Service fee: {serviceFee.toFixed(2)} PLN

            Total: {total.toFixed(2)} PLN

    );
}
```

Compiled Blade output:

```
@foreach($items as $item)
    {{ $item['name'] }} — {{ $item['price'] }} PLN
@endforeach

@if($serviceFee > 0)
    Service fee: {{ $serviceFee }} PLN
@endif

Total: {{ $total }} PLN
```

---

blade() helper reference
------------------------

[](#blade-helper-reference)

HelperTypeScript typeUse when`blade('name')``any`generic placeholder`blade.string('name')``string`plain text, no method calls`blade.number('name')``number``.toFixed()`, arithmetic`blade.array('name')``T[]``.map()`, `.filter()`, `.reduce()``blade.object('name')``T`nested property access---

Commands
--------

[](#commands)

CommandDescription`php artisan make:react-email `Generate Mailable + TSX template`php artisan react-email:build`Compile all templates to Blade views`php artisan react-email:dev`Start live-preview server at `localhost:3000`---

Configuration
-------------

[](#configuration)

`config/react-email.php`:

```
return [
    // Source TSX templates
    'path' => env('REACT_EMAIL_PATH', resource_path('react-email')),

    // Compiled Blade output
    'build_path' => env('REACT_EMAIL_BUILD_PATH', resource_path('views/react-email')),
];
```

---

Requirements
------------

[](#requirements)

- PHP 8.1 – 8.5
- Laravel 10, 11 or 12
- Node.js 16+

---

License
-------

[](#license)

MIT — see [LICENSE](LICENSE).

###  Health Score

46

—

FairBetter than 93% of packages

Maintenance86

Actively maintained with recent releases

Popularity17

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity59

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 92.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~7 days

Recently: every ~0 days

Total

11

Last Release

92d ago

Major Versions

v1.0.1 → v2.0.02025-12-07

PHP version history (2 changes)v2.0.0PHP ^8.1|^8.2|^8.3

v2.0.1PHP ^8.1|^8.2|^8.3|^8.4|^8.5

### Community

Maintainers

![](https://www.gravatar.com/avatar/2e962b9c122669ebe3a0dada5865e9e0e4a32f8cad999cb193a2609369c63672?d=identicon)[mscodepl](/maintainers/mscodepl)

---

Top Contributors

[![msikorski26](https://avatars.githubusercontent.com/u/41286754?v=4)](https://github.com/msikorski26 "msikorski26 (12 commits)")[![Simciutoja](https://avatars.githubusercontent.com/u/120786782?v=4)](https://github.com/Simciutoja "Simciutoja (1 commits)")

---

Tags

laravelemailmailablereact email

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/mscode-pl-laravel-react-email/health.svg)

```
[![Health](https://phpackages.com/badges/mscode-pl-laravel-react-email/health.svg)](https://phpackages.com/packages/mscode-pl-laravel-react-email)
```

###  Alternatives

[propaganistas/laravel-disposable-email

Disposable email validator

5762.6M6](/packages/propaganistas-laravel-disposable-email)[vormkracht10/laravel-mails

Laravel Mails can collect everything you might want to track about the mails that has been sent by your Laravel app.

24149.7k](/packages/vormkracht10-laravel-mails)[xammie/mailbook

Laravel Mail Explorer

482458.3k1](/packages/xammie-mailbook)[wnx/laravel-sends

Keep track of outgoing emails in your Laravel application.

200427.3k](/packages/wnx-laravel-sends)[spatie/laravel-discord-alerts

Send a message to Discord

151408.0k](/packages/spatie-laravel-discord-alerts)[spatie/laravel-mailcoach-sdk

An SDK to easily work with the Mailcoach API in Laravel apps

41290.2k1](/packages/spatie-laravel-mailcoach-sdk)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)