The ability to preview an email's look and feel during development is a huge time saver for developers.

The de-facto CakePHP development tool DebugKit, shipped along with CakePHP 3, already provides a way to preview an email during development. It renders the email right inside the browser so that we can edit the email view and refresh the browser to get instant feedback.

In this tutorial, we introduce you DebugKit mail panel, a way to preview your email during development without actually sending it.

Table Of Content

  1. Installation
  2. Create an Email with Mailer class
  3. Create MailPreview class
  4. The End
1. Installation

Email preview only works for CakePHP 3.1+. So you are out of luck if you are in an older version.

Install DebugKit 3+ via composer:

Load the plugin via Bake command:

Now you should be able to see DebugKit toolbar showing at the bottom of your application.

If for some reasons, it does not show up. Run the command below, it is to make sure DebugKit's assets(js/css files) can be loaded properly.

2. Create an Email with Mailer

Email preview is implemented with MailPreview class and MailPreview integrates with CakePHP’s Mailer class. Your email needs to be implemented using Mailer class in order to get the preview feature.

Create an email using the Mailer class under src/Mailer/UserMailer:

If you are not sure how to use Mailer class, take a look at

4. Create MailPreview

Create a MailPreview class for UserMailer under src/Mailer/Preview/UserMailPreview.php:

That's all the steps to get the email preview from DebugKit. Now refresh your browser and you should be able to see your emails showing up at the preview panel:

4. The End

Hopefully this simple tutorial helped you with your development.
If you like our post, please follow us on Twitter and help spread the word. We need your support to continue.
If you have questions or find our mistakes in above tutorial, do leave a comment below to let us know.