unlayer/react-email-editor

これは何？

主な機能

• 01ドラッグ＆ドロップ式のメールビルダーを、単一のReactコンポーネントとして組み込めます。
• 02メールデザインをJSON形式で読み込み、保存できます。
• 03デザインデータとあわせて、レスポンシブHTMLをエクスポートできます。
• 04refとコールバックを通じて、エディターのメソッドやイベントを利用できます。
• 05カスタムツールを使って、独自のコンテンツブロックを追加できます。
• 06余分な動的インポートの回避策を使わずに、Next.js App RouterのClient Componentsで動作します。

ユースケース

• SaaSのメールマーケティング製品に、テンプレートビルダーを追加する。
• アプリ内で、エンドユーザーがニュースレターやトランザクションメールのレイアウトを作成できるようにする。
• バックオフィスのワークフローで、保存済みのJSONデザインからメールHTMLを生成する。

クイックスタート

1. 1

   NPMからパッケージをインストールします

   npm install react-email-editor --save
2. 2

   ReactアプリでEmailEditorをインポートし、refとonReadyコールバックを指定してレンダリングします

使う前に知っておきたいこと

• !React 16.8以降とNode 18以降が必要です。
• !エディターはクライアント専用で、DOMにレンダリングされるため、サーバー上では実行できません。
• !エディターの全機能とAI Assistantを利用するには、Unlayerアカウントと設定が必要です。

トピック

よくある質問

react-email-editor とは？

Unlayerのドラッグ＆ドロップ式メールビルダーをReactアプリに組み込み、デザインの読み込み・保存やHTMLへのエクスポートを行えるReactコンポーネント。 react-email-editorは、Unlayerのドラッグ＆ドロップ式メールエディターを使うための公式Reactラッパーです。コンポーネントをReactアプリに追加するだけで、ゼロから開発しなくても、ユーザーにビジュアルなメールビルダーを提供できます。

react-email-editor は無料で使えますか？ライセンスは？

react-email-editor は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-email-editor は今もメンテナンスされていますか？

活発にメンテナンス中。react-email-editor の最終コミットは 2026年10月21日 です。

react-email-editor は何に使えますか？

SaaSのメールマーケティング製品に、テンプレートビルダーを追加する。 アプリ内で、エンドユーザーがニュースレターやトランザクションメールのレイアウトを作成できるようにする。 バックオフィスのワークフローで、保存済みのJSONデザインからメールHTMLを生成する。

react-email-editor のインストール方法は？

NPMからパッケージをインストールします: npm install react-email-editor --save ReactアプリでEmailEditorをインポートし、refとonReadyコールバックを指定してレンダリングします

react-email-editor はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/unlayer/react-email-editor