{
  "id": 16093640,
  "title": "Add a drag and drop email builder to your React app (full tutorial)",
  "url": "https://urgent.news/2026/10/22/add-a-drag-and-drop-email-builder-to-your-react-app-full-tutorial",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-22T19:23:12.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/mailkaro/add-a-drag-and-drop-email-builder-to-your-react-app-full-tutorial-p92"
  },
  "original_language": "en",
  "account": "Adding a drag and drop email builder to your React app can be accomplished in just a few steps. This tutorial demonstrates how to implement a complete drag and drop email builder in a fresh Vite + React app, similar to a short video that walks through each step.\n\nTo begin, you'll need a React app (using Vite in this example) and Node.js version 18 or newer. Start by creating an account and obtaining a token on MailKaro.com. Sign up using a passwordless method that requires a one-time code sent to your email, and ensure only one device can be signed in at a time. After creating a token, you'll receive two keys: a publishable key for your frontend and a secret key for your server-side code.\n\nNext, install the `react-email-craft` package and add your publishable key to a `.env.local` file. Render the editor by importing `EmailEditor` from `react-email-craft` and setting the publishable key in the `token` prop. The editor will occupy the entire page, with blocks and settings on the right side.\n\nTo save and reopen a design, add a ref and two buttons for saving and opening the email. Use `exportHtml` to get the design and HTML, and store the design in local storage for later use.\n\nMerge tags can be added to the editor by specifying a label, value, and sample for each tag. In a text block, users can insert a merge tag, which appears as a labeled pill indicating where each field should go.\n\nFinally, render email-safe HTML on your server using the `email-craft-sdk` and `express`. Install these packages and set up an Express app to handle email rendering. Use the `renderDesign` and `renderMjml` functions to generate HTML from the saved design, ensuring it's safe for email delivery.",
  "summary": "Your users want to design their own emails. You don't want to spend months building an editor. In this post we add a complete drag and drop email builder to a fresh Vite + React app, step by step. It's the written version of a 9 minute video where every step is filmed for real. 🎥 Watch the video: https://www.linkedin.com/feed/update/urn:li:activity:7519114078284562432 What you need: a React app…",
  "key_points": [
    "Implement drag and drop email builder in React app using Vite.",
    "Obtain MailKaro.com token and publishable key for frontend.",
    "Render EmailEditor component with publishable key in .env.local."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}