एक React ईमेल बिल्डर बनाएं GrapesJS के साथ

एक होस्ट किया गया संपादक नहीं जिसे आप किराए पर लेते हैं, और टेम्पलेट गैलरी नहीं। एक संपादन परत जिसे आप पहले से चलाते हैं उस एप्लिकेशन के अंदर माउंट करते हैं।

यह कैनवास इस पृष्ठ पर चलने वाला एक React घटक है - कोई संपादक बंडल नहीं, कोई iframe नहीं। कोई ब्लॉक जोड़ें, उसे चुनने के लिए किसी भी अनुभाग पर क्लिक करें, टेक्स्ट को उस स्थान पर फिर से टाइप करें, इसे फिर से स्टाइल करें, इसे पुनः व्यवस्थित करें, और डेस्कटॉप, टैबलेट और मोबाइल के बीच पूर्वावलोकन को स्विच करें। यह देखने के लिए HTML टैब खोलें कि ईमेल बिल्डर आपके कोड पर किस प्रकार का मार्कअप देता है।

न्यूज़लेटर प्रीसेट: ईमेल-सुरक्षित ब्लॉक, एक प्रतिबंधित स्टाइल मैनेजर और टेबल-आधारित आउटपुट। यह आपके उपयोगकर्ताओं को जो दिखाई देगा उसके सबसे करीब है।

एक React ईमेल बिल्डर एक विज़ुअल एडिटर है जो React एप्लिकेशन के अंदर चलता है और उपयोगकर्ताओं को हाथ से HTML ईमेल मार्कअप लिखे बिना ईमेल टेम्पलेट बनाने और अनुकूलित करने देता है। यह एक अलग उत्पाद नहीं है जिसमें आपके उपयोगकर्ता लॉग इन करते हैं: यह आपके ऐप में एक घटक है, इसलिए टेम्प्लेट, उनके मालिक खाते और उन्हें भेजने वाला बुनियादी ढांचा सभी आपके पक्ष में रहते हैं।

संपादक का काम मार्कअप बनाने पर समाप्त होता है। इससे पहले और बाद में सब कुछ आपका आवेदन है।

इनमें से प्रत्येक में, विकल्प यह है कि एक डेवलपर हर बार जब व्यवसाय में कोई बदलाव चाहता है तो हाथ से एक टेम्पलेट संपादित करता है।

यह संपादन नींव है, तैयार उत्पाद नहीं। वह अंतर बिंदु है: नीचे दी गई हर चीज एक हुक है जिसे आप एक ऐसी सुविधा के बजाय बनाते हैं जिसे आप स्वीकार करते हैं।

GrapesJS दृश्य संपादन परत प्रदान करता है। आपका React एप्लिकेशन उपयोगकर्ताओं, डेटा, भंडारण और प्रकाशन के नियंत्रण में रहता है - जो कि लोगों को किसी और के पास भेजने के बजाय एक संपादक को एम्बेड करने का पूरा तर्क है।

किसी और के उत्पाद में एक संपादक को एम्बेड करना प्रश्नों का एक अलग सेट उठाता है।

दोनों रास्ते एक ही स्थान पर समाप्त होते हैं। एकमात्र वास्तविक अंतर यह है कि मॉड्यूल का मूल्यांकन करने की अनुमति है।

तीन पैकेज और एक घटक। इसके बाद सब कुछ - भंडारण, कस्टम ब्लॉक, MJML - पृष्ठ के नीचे और नीचे कवर किया गया है।

import GjsEditor from '@grapesjs/react';
import newsletter from 'grapesjs-preset-newsletter';
import 'grapesjs/dist/css/grapes.min.css';

// A normal React component. The editor is a child of your tree, so your
// router, your auth context and your providers all still wrap it.
export default function EmailBuilder({ template, onSave }) {
  return (
    <GjsEditor
      options={{
        height: '100vh',
        // Storage is wired to your own API further down this page.
        storageManager: false,
        plugins: [newsletter],
        projectData: template,
      }}
      onEditor={(editor) => {
        // Everything the user builds comes back out as plain data you can
        // put straight into React state or POST to your backend.
        editor.on('update', () => {
          onSave({
            html: editor.getHtml(),
            css: editor.getCss(),
            project: editor.getProjectData(),
          });
        });
      }}
    />
  );
}

// app/emails/page.tsx  (or pages/emails.tsx)
import dynamic from 'next/dynamic';

// GrapesJS reaches for window/document as it initialises, so it can only run
// in the browser. In Next.js that means one dynamic import with ssr: false —
// this is the whole of the Next.js-specific work.
const EmailBuilder = dynamic(() => import('@/components/EmailBuilder'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

export default function EmailsPage({ template }) {
  return <EmailBuilder template={template} onSave={saveTemplate} />;
}

1. React घटक के अंदर संपादक को प्रारंभ करें
2. →एक ईमेल प्रीसेट जोड़ें ताकि ब्लॉक और शैलियाँ ईमेल-सुरक्षित हों
3. →अपने उत्पाद की ज़रूरत के ब्लॉक को पंजीकृत करें
4. →अपने स्वयं के API के विरुद्ध भंडारण कॉन्फ़िगर करें
5. →HTML निर्यात करें, या सर्वर पर MJML संकलित करें
6. →परिणाम अपने भेजने वाले प्रदाता को सौंपें

ऊपर दिए गए संस्करणों को 2026-09-03 पर प्रकाशित पैकेजों के खिलाफ जांचा गया था: grapesjs 0.23.6 BSD-3-Clause है; @grapesjs/react MIT है।

ये संपादक कोर और उसके ईमेल प्रीसेट से आते हैं, न कि किसी भी चीज़ से जो आपको लिखना है।

MJML उत्तरदायी ईमेल मार्कअप को हाथ से लिखने योग्य बनाने के लिए मौजूद है। इसके शीर्ष पर एक विज़ुअल बिल्डर का मतलब है कि किसी को ऐसा करना नहीं है। GrapesJS के कोर में MJML शामिल नहीं है - एक प्लगइन संपादक में MJML घटकों को जोड़ता है, इसलिए प्रोजेक्ट सादे MJML के बजाय HTML तक क्रमबद्ध होता है।

// pages/api/email/compile.ts
//
// mjml is a Node package — it parses and renders on the server, not in the
// browser. So the editor produces MJML in the client and this route turns it
// into the table-based HTML that email clients actually accept.
import mjml2html from 'mjml';

export default function handler(req, res) {
  const { html, errors } = mjml2html(req.body.mjml, {
    validationLevel: 'soft',
    keepComments: false,
  });

  // MJML reports what it could not understand rather than failing silently.
  if (errors.length) console.warn('[mjml]', errors);

  res.status(200).json({ html });
}

कंपाइलर एक Node पैकेज है, इसलिए संकलन सर्वर पर है - Next.js में, एक साधारण API मार्ग। रिवर्स दिशा सममित नहीं है: मनमाना HTML सफाई से वापस MJML में परिवर्तित नहीं होता है, इसलिए किसी एक पर निर्माण करने से पहले अपने वर्कफ़्लो को आवश्यक प्रारूप चुनें।

संपादक आपके कोड को तीन अलग-अलग चीजें देता है, और एक React एप्लिकेशन आमतौर पर तीनों को अलग-अलग क्षणों में चाहता है।

यह वह जगह है जहां एक एम्बेडेड बिल्डर एक सामान्य ईमेल टूल से आगे बढ़ता है: ब्लॉक आपके डोमेन के बारे में जान सकते हैं। एक ब्लॉक एक उत्पाद कार्ड की तस्वीर नहीं है - यह उत्पाद को देख सकता है।

यह क्या है, इसके बारे में सटीक होने के लिए: एक मनमाना React घटक को ईमेल घटक में परिवर्तित नहीं किया जाता है। JSX एक DOM ट्री प्रदान करता है, और ईमेल क्लाइंट इसमें से अधिकांश का सम्मान नहीं करेंगे। आप जो लिखते हैं वह एक GrapesJS घटक प्रकार है जिसका toHTML ईमेल-सुरक्षित मार्कअप उत्सर्जित करता है और जिसका traits मैप आपके एप्लिकेशन के रिकॉर्ड पर होता है। वायरिंग आपकी है; संपादक इसे लगाने के लिए जगह की आपूर्ति करता है।

आपके उत्पाद द्वारा वास्तव में भेजे जाने वाले अनुभागों को शिपिंग करके दोहराए जाने वाले डिज़ाइन कार्य को कम करें, न कि आपके उपयोगकर्ताओं को हर बार अनुकूलित करने के लिए एक सामान्य सेट के बजाय।

एक टेम्पलेट सिर्फ एक सहेजा गया प्रोजेक्ट दस्तावेज़ है, इसलिए स्टार्टर लाइब्रेरी को शिपिंग करने का मतलब है पंक्तियों को सीडिंग करना और जब कोई उपयोगकर्ता इसे चुनता है तो एक को प्रोजेक्टडेटा के रूप में लोड करना। ये वे श्रेणियां हैं जिनकी अधिकांश उत्पादों को आवश्यकता होती है:

ये लेआउट श्रेणियां हैं, बिक्री के लिए उत्पाद नहीं। GJS.Market ईमेल प्रीसेट, ब्लॉक पैक और टेम्पलेट प्रबंधकों को सूचीबद्ध करता है - यह तैयार ईमेल डिज़ाइन नहीं बेचता है, और यह पृष्ठ आपको उन उत्पादों के लिए कार्ड नहीं दिखाएगा जो मौजूद नहीं हैं।

उपयोगकर्ता संपादन करते समय डिवाइस की चौड़ाई बदलते हैं, और कैनवास उस चौड़ाई पर फिर से तैयार हो जाता है। ईमेल की चौड़ाई वेब की तुलना में संकरी होती है: 600px वर्षों से अधिकतम सुरक्षित डेस्कटॉप रहा है।

एक पूर्वावलोकन एक पूर्वावलोकन है। यह दिखाता है कि मार्कअप कैसे फिर से प्रवाहित होता है, न कि एक विशिष्ट क्लाइंट इसे कैसे प्रस्तुत करेगा - जो कि अगला भाग है।

ईमेल क्लाइंट HTML और CSS को अलग-अलग तरीके से लागू करते हैं, और बीस वर्षों से ऐसा कर रहे हैं। एक विज़ुअल बिल्डर संलेखन वर्कफ़्लो को मानकीकृत करता है; यह ग्राहकों को एक-दूसरे से सहमत नहीं बनाता है।

संपादक को आपके पास पहले से मौजूद बैकएंड और डेटा मॉडल से कनेक्ट करें। आपके उपयोगकर्ता, आपका प्रमाणीकरण, आपका डेटाबेस, आपकी अनुमतियाँ और आपका प्रकाशन वर्कफ़्लो सभी ठीक वहीं रहते हैं जहां वे हैं।

// The editor asks your API for a template and hands it back on save.
// Your users, your auth, your database, your permissions — unchanged.
const options = {
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 5,
    options: {
      remote: {
        urlStore: `/api/email-templates/${templateId}`,
        urlLoad: `/api/email-templates/${templateId}`,
        // Your existing session cookie is all the auth it needs.
        fetchOptions: { credentials: 'include' },
      },
    },
  },
};

// pages/api/email-templates/[id].ts — an ordinary Next.js route handler.
export default async function handler(req, res) {
  const session = await getSession(req);
  if (!session) return res.status(401).end();

  if (req.method === 'POST') {
    await db.emailTemplate.update({
      where: { id: req.query.id, orgId: session.orgId },
      data: { project: req.body },
    });
    return res.status(200).json({ ok: true });
  }

  const row = await db.emailTemplate.findFirst({
    where: { id: req.query.id, orgId: session.orgId },
  });
  return res.status(200).json(row?.project ?? {});
}

GJS.Market आपके टेम्प्लेट को होस्ट नहीं करता है, आपका डेटा संग्रहीत नहीं करता है या आपका ईमेल नहीं भेजता है। यह आपके द्वारा स्वयं चलाए जाने वाले संपादक के लिए प्लगइन्स बेचता है।

संपादन अनुभव को तब तक अनुकूलित करें जब तक कि यह आपके React एप्लिकेशन के मूल भाग के रूप में न पढ़ जाए, न कि इसमें बोल्ट किए गए तृतीय-पक्ष पैनल के रूप में। पहली बार में हटाने के लिए कोई विक्रेता ब्रांडिंग नहीं है।

आप क्या बदल सकते हैं

• टूलबार और बटन
• पैनल और उनका लेआउट
• Block पैलेट और श्रेणियां
• Component प्रकार और traits
• शैली प्रबंधक क्षेत्र
• Commands और कीबोर्ड शॉर्टकट
• आसपास का React UI

सबसे गहन संस्करण संपादक को बिना सिर के चलाना और केवल कैनवास और मॉडल के लिए संपादक का उपयोग करके React में संपूर्ण इंटरफ़ेस बनाना है।

यह विचार करने के लिए एक उचित बात है, जब तक कि भागों की सूची नहीं लिखी जाती है। नीचे दिया गया प्रत्येक आइटम कुछ ऐसा है जिसकी एक ईमेल संपादक को प्रयोग करने योग्य होने से पहले आवश्यकता होती है - न कि एक अच्छा है।

एक ईमेल संपादक किस चीज से बना होता है

• कैनवास का संपादन
• चयन और हिट परीक्षण
• खींचें और छोड़ें
• Component मॉडल
• Block प्रणाली
• शैली प्रबंधक
• उत्तरदायी नियंत्रण
• परिसंपत्ति प्रबंधक
• टेम्पलेट भंडारण
• इतिहास को पूर्ववत करें/फिर से करें
• क्रमबद्धता
• HTML निर्यात
• MJML एकीकरण
• पूर्वसमीक्षा
• चल रहा रखरखाव

अपना ईमेल उत्पाद बनाएं - खरोंच से कोई अन्य संपादक नहीं। हम उस पर कई बचाए गए महीने नहीं लगाने जा रहे हैं; आपकी टीम को कितना समय लगेगा यह आपकी टीम पर निर्भर करता है।

नीचे दी गई प्रत्येक सूची एक लाइव पेज के साथ एक वास्तविक उत्पाद है, और इसका नाम, मूल्य और थंबनेल सीधे कैटलॉग से प्रस्तुत होता है - इसलिए इस पृष्ठ पर कुछ भी वास्तव में बिक्री के लिए क्या है, इसके साथ सिंक से बाहर नहीं हो सकता है।

React UI

यह पृष्ठ जिस परत के बारे में है: React संपादक कोर के चारों ओर बनाया गया इंटरफेस, उन टीमों के लिए जो स्टॉक पैनल के बजाय आसपास के UI React होना चाहते हैं।

इस श्रेणी को ब्राउज़ करें

React UI

React UI for GrapesJS

संपादक के चारों ओर एक React इंटरफ़ेस, उन टीमों के लिए जो पैनलों को कॉन्फ़िगर करने के बजाय घटकों का विस्तार करना पसंद करेंगे।

निःशुल्कप्लगइन देखें

React प्रीसेट

Reactor Preset for GrapesJS

एक React-उन्मुख प्रीसेट, शुरुआती बिंदु के रूप में उपयोगी होता है जब आसपास का एप्लिकेशन पहले से ही React होता है।

निःशुल्कप्लगइन देखें

React खोल

GrapesJS Shadcn

एक परिचित घटक लाइब्रेरी पर निर्मित एक पूर्ण React इंटरफ़ेस, उन उत्पादों के लिए जो चाहते हैं कि संपादक उनके बाकी UI से मेल खाए।

US$999,99प्लगइन देखें

चार संयोजन जो वास्तविक आवश्यकताओं पर मैप करते हैं। दिखाई गई प्रत्येक सूची एक है जो मौजूद है - आरेख में एक अंतर को भरने वाला कोई काल्पनिक प्लगइन नहीं है।

कीमतें निर्माण समय पर कैटलॉग से आती हैं।

पैटर्न उन उत्पादों में दोहराता है जिनमें अन्यथा कुछ भी समान नहीं है।

संपादक ईमेल बनाता है। आपका बुनियादी ढांचा इसे भेजता है। उस रेखा को स्पष्ट रखना ही इस वास्तुकला के बाकी हिस्सों को सरल बनाता है।

प्रदाताओं टीमों के उदाहरण इसे सौंपते हैं

• अमेज़न एसईएस
• SendGrid
• मेलगुन
• पोस्टमार्क

मार्कअप कहां समाप्त होता है, इसके उदाहरण के रूप में नामित किया गया है, न कि अंतर्निहित एकीकरण के रूप में। न तो GrapesJS और न ही GJS.Market उनमें से किसी के लिए कनेक्टर शिप करता है; आप उन्हें अपने बैकएंड से SDK कहते हैं, जैसा कि आप पहले से ही अपने बाकी ईमेल के लिए करते हैं।

यह एक वास्तुशिल्प व्यापार-बंद है, स्कोरबोर्ड नहीं। दाहिने हाथ का कॉलम ईमानदारी से "निर्भर करता है" कहता है: होस्ट किए गए संपादक एक-दूसरे से भिन्न होते हैं और अपनी शर्तों को बदलते हैं, और हम उनकी ओर से एक विशिष्ट उत्तर का आविष्कार नहीं करने जा रहे हैं।

GrapesJS कॉलम grapesjs 0.23.6 और @grapesjs/react के खिलाफ 2026-09-03 के खिलाफ सत्यापित है। किसी विशिष्ट नामित विक्रेता के खिलाफ तुलना के लिए, इसके प्रकाशित मूल्य निर्धारण के साथ, समर्पित पृष्ठ देखें।

पड़ोसी पृष्ठ जो एक ही संपादक को एक अलग दिशा में ले जाते हैं।

GrapesJS से शुरू करें, इसे अपने React एप्लिकेशन में एकीकृत करें, और आपके उत्पाद को वास्तव में आवश्यक ईमेल प्लगइन्स के साथ संपादक का विस्तार करें।