# Webiny Mailer Smtp

Use when configuring SMTP email/mailer settings in a Webiny project.

- Repository: https://github.com/webiny/webiny-js (8051 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add webiny/webiny-js --skill webiny-mailer-smtp -g -a claude-code -y`
Codex: `npx skills add webiny/webiny-js --skill webiny-mailer-smtp -g -a codex -y`
Cursor: `npx skills add webiny/webiny-js --skill webiny-mailer-smtp -g -a cursor -y`
Gemini CLI: `npx skills add webiny/webiny-js --skill webiny-mailer-smtp -g -a gemini-cli -y`

## Description

Use when configuring SMTP email/mailer settings in a Webiny project. Triggers on: "configure email", "set up SMTP", "mailer config", "sending emails", "email not working", "configure mailer", "SMTP password", "Api.Mailer.Smtp".

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Mailer SMTP Configuration

## TL;DR

Add `<Api.Mailer.Smtp ... />` to your `webiny.config.tsx` to configure SMTP email delivery at build time. The component serializes the settings into the build artifact, always pass the password via an environment variable, never hard-code it. Deploy the API after making changes.

## Core Pattern

```tsx
import { Api } from "webiny/extensions";

<Api.Mailer.Smtp
    host={"smtp.example.com"}
    port={587}
    user={"smtp-user"}
    password={process.env.SMTP_PASSWORD!}
    from={"noreply@example.com"}
    replyTo={"support@example.com"}   {/* optional */}
/>
```

Place this inside the JSX returned by your config component in `webiny.config.tsx`, alongside other `<Api.*>` extensions.

## Props Reference

| Prop       | Type     | Required | Description                                    |
| ---------- | -------- | -------- | ---------------------------------------------- |
| `host`     | `string` | Yes      | SMTP server hostname                           |
| `port`     | `number` | Yes      | SMTP server port (positive integer)            |
| `user`     | `string` | Yes      | SMTP authentication username                   |
| `password` | `string` | Yes      | SMTP authentication password, **use env var** |
| `from`     | `string` | Yes      | Default sender address                         |
| `replyTo`  | `string` | No       | Default reply-to address                       |

`from` and `replyTo` are validated by the [`email-addresses`](https://www.npmjs.com/package/email-addresses) package against RFC 5322.

## Full Example (`webiny.config.tsx`)

```tsx
import React from "react";
import { Api, Admin, Core } from "webiny/extensions";

const MyConfig = () => {
  return (
    <>
      {/* ... other extensions ... */}

The rest: https://github.com/webiny/webiny-js/blob/HEAD/skills/user-skills/mailer-smtp/SKILL.md