GrapesJS + MJML

अपना खुद का ईमेल बिल्डर बनाएं GrapesJS के साथ

MJML के साथ नेत्रहीन रूप से उत्तरदायी ईमेल बनाएं, उत्पादन-तैयार HTML निर्यात करें, और अपने टेम्प्लेट, डेटा और एकीकरण को अपने स्वयं के बुनियादी ढांचे में रखें।

GrapesJS के साथ बनाएं ईमेल प्लगइन्स ब्राउज़ करें
खुला स्रोतBSD-3-Clause कोरMJML grapesjs-mjml के माध्यम सेस्व-होस्टेड$0 प्लेटफ़ॉर्म शुल्क

26k+

GitHub सितारे

100+

GJS.Market पर प्लगइन्स

10 साल

सक्रिय विकास

$0

लाइसेंस शुल्क, हमेशा

अपना खुद का निर्माण क्यों करें

एक ईमेल संपादक एक दर्जन सबसिस्टम है, कैनवास नहीं

ब्लॉकों को इधर-उधर खींचना वह हिस्सा है जिसे हर कोई चित्रित करता है। वह काम जो वास्तव में एक रोडमैप का उपभोग करता है, वह कैनवास के पीछे बैठा सब कुछ है - और यह वही सूची है चाहे आप सीआरएम, ईकॉमर्स प्लेटफॉर्म या मार्केटिंग SaaS में ईमेल जोड़ रहे हों।

कैनवास के पीछे क्या बैठता है

  • उत्तरदायी लेआउट इंजन
  • CSS इनलाइनिंग
  • Outlook सशर्त मार्कअप
  • डार्क-मोड वेरिएंट
  • टैग और वैयक्तिकरण मर्ज करें
  • सदस्यता समाप्त करें और वरीयता लिंक
  • छवि होस्टिंग और ट्रैकिंग पिक्सेल
  • टेम्पलेट संस्करण
  • ड्राफ्ट और autosave राज्य
  • भूमिका और अनुमति नियम
  • प्रदाता हैंड-ऑफ
  • ग्राहकों के बीच परीक्षण प्रस्तुत करें

संपादक स्वयं बनाएं

महीने

  • आप ऊपर दिए गए हर सबसिस्टम के मालिक हैं
  • ईमेल विचित्रताएँ आपके रोडमैप पर उतरती हैं
  • प्रत्येक नया ब्लॉक इंजीनियरिंग कार्य है
  • रखरखाव कभी खत्म नहीं होता
  • यहां कुछ भी आपका उत्पाद नहीं है

GrapesJS से शुरू करें

दिन

  • कैनवास, ब्लॉक और स्टाइल मैनेजर मौजूद हैं
  • MJML ईमेल-विशिष्ट मार्कअप को संभालता है
  • प्लगइन्स भंडारण, संपत्ति और निर्यात को कवर करते हैं
  • आप उत्पत्ति के बजाय विस्तार करते हैं
  • आपकी टीम इसके चारों ओर उत्पाद बनाती है

आपके ईमेल बिल्डर को आपके उत्पाद के आसपास काम करना चाहिए - इसके विपरीत नहीं।

क्यों MJML

ईमेल के लिए MJML का उपयोग क्यों करें?

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

ईमेल-विशिष्ट घटक

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

उत्तरदायी लेआउट, संकलित

कॉलम स्टैकिंग और मीडिया-क्वेरी हैंडलिंग कंपाइलर द्वारा प्रति टेम्पलेट हाथ से बनाए रखने के बजाय उत्पादित किए जाते हैं।

आपके लिए इनलाइन की गई शैलियाँ

संकलन चरण CSS को इनलाइन करता है, जो कि अधिकांश मेल क्लाइंट की आवश्यकता होती है। आप पाइपलाइन में एक अलग इनलाइनर को तार नहीं करते हैं।

एक समझदार संलेखन परत

MJML स्रोत पठनीय और विसारणीय है, इसलिए एक टेम्पलेट नेस्टेड टेबल की दीवार के बजाय कोड की तरह समीक्षाओं को बदलता है।

अंत में अभी भी सादा HTML

आउटपुट साधारण HTML है। जो कुछ भी HTML ईमेल भेज सकता है वह इसे भेज सकता है - भेजने के समय MJML पर कोई रनटाइम निर्भरता नहीं।

ओपन सोर्स, दोनों हिस्से

mjml MIT है; grapesjs-mjml प्लगइन जो इसे GrapesJS में लाता है वह BSD-3-Clause है। न तो लाइसेंस शुल्क जोड़ता है।

MJML बनाम कच्चा HTML

कंपाइलर क्या करता है जो आप अन्यथा करेंगे

दोनों रास्ते HTML में समाप्त होते हैं। अंतर यह है कि आप ईमेल-विशिष्ट कार्य का कितना हिस्सा हाथ से बनाए रखते हैं, और प्रत्येक बचत पर आपके लिए कितना उत्पन्न होता है।

व्‍यापारिक संस्‍थाMJMLहाथ से लिखा HTML
उत्तरदायी लेआउटघटकों से उत्पन्नप्रति टेम्पलेट मैन्युअल रूप से बनाए रखा गया
ईमेल-विशिष्ट घटकभाषा द्वारा प्रदान किया गयाआप अपना खुद का निर्माण और रखरखाव करते हैं
CSS इनलाइनिंगसंकलन चरण का हिस्साआपकी पाइपलाइन में एक अलग उपकरण
ग्राहक विचित्रताकंपाइलर में संभाला गया, केंद्रीय रूप सेप्रत्येक टेम्पलेट में संभाला गया
लेखनसिमेंटिक मार्कअप, पठनीय अंतरनेस्टेड टेबल, समीक्षा करने के लिए कठिन
दृश्य संपादनComponents ब्लॉक के लिए साफ-सफाई से नक्शा बनाएंप्रति ब्लॉक अधिक मानचित्रण कार्य
उत्पादनHTMLHTML

MJML को प्रमुख ईमेल क्लाइंट में उत्तरदायी ईमेल विकास को सरल बनाने के लिए डिज़ाइन किया गया है। यह कार्य की एक श्रेणी को हटा देता है; यह आपके द्वारा भेजे गए कार्यों का परीक्षण करने की आवश्यकता को समाप्त नहीं करता है।

पाइपलाइन

आपका ईमेल बिल्डर क्या उत्पादन करता है?

संपादक से तीन कलाकृतियाँ निकलती हैं और प्रत्येक का एक काम होता है। यह जानना कि कौन सा है जो वास्तुकला का अधिकांश निर्णय है।

  1. चरण 01

    दृश्य संपादक

    उपयोगकर्ता कैनवास पर ब्लॉक की व्यवस्था करता है। संपादक की अपनी प्रोजेक्ट स्थिति JSON है - यह वही है जिसे आप सहेजते हैं ताकि ईमेल को बाद में फिर से खोला और संपादित किया जा सके।

    editor.getProjectData()

  2. चरण 02

    MJML

    संलेखन प्रतिनिधित्व। पठनीय, विपरिवर्तनीय, और संस्करण के लिए सही बात जब आप यह देखना चाहते हैं कि टेम्पलेट के दो संशोधनों के बीच वास्तव में क्या बदल गया है।

    editor.runCommand('mjml-code')

  3. चरण 03

    उत्तरदायी HTML

    संकलित, तालिका-आधारित, CSS-इनलाइन आउटपुट। यह वह कलाकृति है जिसे आप प्रसारित करते हैं, और केवल एक ही जिसे आपके भेजने वाले बुनियादी ढांचे को समझना है।

    editor.runCommand('mjml-code-to-html')

  4. चरण 04

    आपका ESP या API

    डिलीवरी आपके पक्ष में रहती है। कोई भी प्रदाता या इन-हाउस सेवा जो HTML स्वीकार करती है, वह इसे आपके स्वयं के क्रेडेंशियल्स और आपके स्वयं के भेजने वाले डोमेन के साथ भेज सकती है।

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

आपका ईमेल बिल्डर। आपका डेटा। आपका बुनियादी ढांचा।

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

आपका उत्पाद

  • अभियान और कार्यक्रम
  • ग्राहक सूची और खंड
  • डोमेन और DKIM भेजना

GrapesJS ईमेल संपादक

  • कैनवास और ब्लॉक
  • MJML घटक
  • शैली प्रबंधक
  • ईमेल ब्लॉक
  • टेम्पलेट प्रबंधक
  • संपत्ति अपलोड
ईमेल प्लगइन्स का अन्वेषण करें

आपका बुनियादी ढांचा

  • आपका डेटाबेस
  • आपका मीडिया संग्रहण
  • आपके प्रदाता क्रेडेंशियल्स
इस आरेख में कुछ भी आपके टेम्पलेट या आपके प्राप्तकर्ताओं को रखने के लिए किसी तीसरे पक्ष की आवश्यकता नहीं है।

मौजूदा एप्लिकेशन के अंदर संपादक को माउंट करने के यांत्रिकी के लिए, जिसमें प्रमाणीकरण और iframe रणनीति शामिल है: एम्बेड करने योग्य पेज बिल्डर गाइड देखें

लाइव डेमो

एक बनाने से पहले एक GrapesJS ईमेल संपादक देखें

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

एक नए टैब में खोलें

grapesjs.com से ओपन-सोर्स न्यूज़लेटर संपादक डेमो — ब्लॉक खींचें, सामग्री संपादित करें, और HTML निर्यात करें।

grapesjs.com/demo-newsletter-editor.htmlनिःशुल्क

grapesjs.com से एक बाहरी डेमो लोड करता है

GrapesJS प्रोजेक्ट द्वारा होस्ट किया गया डेमो। यह मुख्य संपादन अनुभव दिखाता है, न कि इस पृष्ठ के नीचे सूचीबद्ध प्लगइन्स।

वर्कफ़्लो

टेम्पलेट से भेजे गए ईमेल तक

  1. 1
    चरण 1

    एक टेम्पलेट चुनें

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

  2. 2
    चरण 2

    विज़ुअल रूप से संपादित करें

    Blocks को खींचा जाता है, पाठ को इनलाइन संपादित किया जाता है, स्टाइल मैनेजर में शैलियों को समायोजित किया जाता है। संपादक में MJML घटक होते हैं, इसलिए प्रत्येक संपादन ईमेल-सुरक्षित मार्कअप के अंदर रहता है।

  3. 3
    चरण 3

    ड्राफ्ट सहेजें

    प्रोजेक्ट JSON को Storage Manager के माध्यम से अपने स्वयं के API तक जारी रखें। ऑटोसेव, ड्राफ्ट और संस्करण इतिहास आपके एप्लिकेशन का व्यवहार है, संपादक का नहीं।

  4. 4
    चरण 4

    पूर्वावलोकन और परीक्षण

    समीक्षा के लिए संकलित HTML को रेंडर करें और अपने प्रदाता के माध्यम से परीक्षण संदेश भेजें। क्लाइंट-दर-क्लाइंट रेंडर परीक्षण एक ऐसी क्षमता है जिसे आप जोड़ते हैं - यह अंतर्निहित नहीं है।

  5. 5
    चरण 5

    HTML निर्यात करें

    MJML को इनलाइन HTML में संकलित करें। इसे JSON और MJML के साथ स्टोर करें ताकि आप हमेशा जान सकें कि वास्तव में क्या भेजा गया था।

  6. 6
    चरण 6

    भेजें और ट्रैक करें

    HTML को अपनी ESP या अपनी स्वयं की भेजने वाली सेवा को सौंपें। खुलता है, क्लिक और बाउंस उस प्रदाता के माध्यम से, आपकी रिपोर्टिंग में वापस आते हैं।

चरण 1, 3, 4 और 6 आपका आवेदन है। GrapesJS और MJML चरण 2 और चरण 5 के मालिक हैं - जो कि बिल्कुल वही हिस्सा है जिसमें अन्यथा महीनों लगेंगे।

बक्सों का इस्तेमाल करें

आप क्या बना सकते हैं?

एक ही नींव, विभिन्न उत्पादों की ओर इशारा करती है। इनमें से प्रत्येक एक संपादक के साथ-साथ आपका अपना भंडारण, अनुमतियाँ और वितरण है।

ईमेल मार्केटिंग SaaS

ग्राहकों को कहीं और से HTML पेस्ट करने के लिए कहने के बजाय अपने उत्पाद के अंदर एक विज़ुअल कैंपेन बिल्डर दें।

ड्रैग-एंड-ड्रॉप दृष्टिकोण देखें

सीआरएम

बिक्री और सफलता टीमों को इंजीनियरिंग के साथ टिकट दाखिल किए बिना आउटबाउंड ईमेल बनाने और समायोजित करने दें।

टेम्पलेट प्रबंधन देखें

विपणन स्वचालन

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

React कार्यान्वयन देखें

ईकॉमर्स

प्रचार भेजता है, आदेश पुष्टिकरण और कार्ट-पुनर्प्राप्ति ईमेल, सभी एक ब्लॉक लाइब्रेरी और आपके अपने ब्रांड नियमों से बनाया गया है।

SaaS वास्तुकला देखें

SaaS ऑनबोर्डिंग

ऑनबोर्डिंग, सक्रियण और प्रतिधारण ईमेल जिन्हें आपकी उत्पाद टीम बिना परिनियोजन के बदल सकती है।

ईमेल प्लगइन्स ब्राउज़ करें

एजेंसियों

प्रति ग्राहक पुनः प्रयोज्य ब्रांडेड ईमेल सिस्टम, प्रति सीट प्लेटफॉर्म के बजाय आपके द्वारा नियंत्रित बुनियादी ढांचे पर चल रहा है।

व्हाइट-लेबल विकल्प देखें
क्यों GrapesJS

ईमेल के लिए GrapesJS का उपयोग क्यों करें?

GrapesJS एक होस्ट किए गए उत्पाद के बजाय एक संपादक ढांचा है। यही अंतर है कि यह आपके बगल में बैठने के बजाय आपका ईमेल बिल्डर बन सकता है।

खुला स्रोत

कोर BSD-3-Clause के तहत प्रकाशित किया गया है और व्यावसायिक उपयोग के लिए निःशुल्क है। आप इसे पढ़ सकते हैं, इसे फोर्क कर सकते हैं और इसे भुगतान किए गए उत्पाद के अंदर भेज सकते हैं।

स्व-होस्टेड

संपादक आपके अपने एप्लिकेशन के अंदर चलता है। कोई भी तीसरा पक्ष आपके उपयोगकर्ताओं और उनके टेम्पलेट्स के बीच नहीं बैठता है।

एक्स्टेंसिबल

Blocks, घटक, कमांड और पैनल सभी एक्सटेंशन पॉइंट हैं। एक कस्टम ईमेल ब्लॉक एक प्लगइन है, कांटा नहीं।

MJML समर्थन

grapesjs-mjml, GrapesJS संगठन में बनाए रखा गया है, MJML घटकों को प्रथम श्रेणी के ब्लॉक के रूप में संपादक में लाता है।

अनुकूलन UI

पैनल, आइकन और थीम आपको बदलने के लिए हैं, इसलिए संपादक एक एम्बेडेड टूल के बजाय आपके उत्पाद के हिस्से की तरह दिखता है।

Plugin पारिस्थितिकी तंत्र

100+ पर प्लगइन्स GJS.Market भंडारण, संपत्ति, ब्लॉक और निर्यात को कवर करते हैं, इसलिए आसपास का अधिकांश काम स्प्रिंट के बजाय खरीदारी है।

GrapesJS ट्यूटोरियल पढ़ें
GrapesJS बनाम होस्टेड ईमेल बिल्डर्स

GrapesJS बनाम Unlayer बनाम स्ट्रिपो

Unlayer और स्ट्रिपो होस्ट किए गए हैं, व्यावसायिक रूप से समर्थित उत्पाद हैं, और कई टीमों के लिए यह सही व्यापार है। यह तालिका इस बारे में है कि आप क्या नियंत्रित करते हैं और आप क्या भुगतान करते हैं, न कि इस बारे में कि कौन सा संपादक बेहतर है।

व्‍यापारिक संस्‍थाGrapesJSUnlayerस्ट्रिपो Plugin
स्रोत उपलब्ध और खुला स्रोतहाँ — BSD-3-ClauseNot publicly documentedNot publicly documented
फ्री टियरसंपूर्ण संपादक, $0निःशुल्क योजना, $0निःशुल्क योजना, $0
सशुल्क योजनाएंकोई नहीं - प्लगइन्स एकबारगी हैं$250/mo / $750/mo / $2,000/mo$100/mo / $550/mo
संपादक को स्व-होस्ट करनाहमेशा - यह आपके ऐप में चलता हैEnterprise पर ऑन-प्रिमाइसेसEnterprise पर सर्वर घटक
MJML संलेखन परत के रूप मेंहाँ — grapesjs-mjmlNot publicly documentedNot publicly documented
आपके अपने डेटाबेस में टेम्पलेटहाँ - आप भंडारण परत लिखते हैंयोजना और तैनाती पर निर्भर करता हैयोजना और तैनाती पर निर्भर करता है

विक्रेता योजना के नाम और कीमतें 2026-08-27 पर विक्रेताओं के स्वयं के सार्वजनिक मूल्य निर्धारण पृष्ठों से पढ़ी गईं और किसी भी समय बदल सकती हैं - उनके खिलाफ बजट बनाने से पहले स्रोत की जांच करें। स्रोत: Unlayer मूल्य निर्धारण · स्ट्रिपो Plugin. "Not publicly documented" का अर्थ है कि विक्रेता इसे सार्वजनिक रूप से नहीं बताता है। यह दावा नहीं है कि क्षमता अनुपस्थित है।

पूर्ण GrapesJS बनाम Unlayer तुलना पढ़ें
प्लगइन पारिस्थितिकी तंत्र

GJS.Market प्लगइन्स के साथ अपने ईमेल बिल्डर का विस्तार करें

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

प्लगइन प्रविष्टियाँ अस्थायी रूप से अनुपलब्ध हैं। वर्तमान कैटलॉग के लिए न्यूज़लेटर श्रेणी ब्राउज़ करें।

सभी ईमेल प्लगइन्स ब्राउज़ करें
अनुशंसित ढेर

आपको जिस ईमेल बिल्डर स्टैक की आवश्यकता है उसका निर्माण करें

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

कीमतें कैटलॉग से लाइव आती हैं और बदल सकती हैं।

टीमें कहां से शुरू होती हैं

तैयार ईमेल से शुरुआत करें

छह आकृतियाँ जो पहले बनाई जाती हैं उनमें से अधिकांश को कवर करती हैं। उन्हें अपनी खुद की ब्लॉक लाइब्रेरी के लिए ब्रीफ के रूप में पढ़ें, कैटलॉग के रूप में नहीं।

स्वागत है

साइनअप के बाद पहला संदेश। एक स्पष्ट अगली कार्रवाई, न्यूनतम क्रोम, और सामग्री जो एक सप्ताह बाद भी समझ में आती है जब यह देर से आग लगती है।

न्यूज़ लैटर

दोहराई जाने वाली संरचना - एक हेडर, कहानियों का एक रन, एक पाद लेख। टेम्पलेट जो पुनः प्रयोज्य ब्लॉकों से सबसे अधिक लाभान्वित होता है, क्योंकि यह हर मुद्दे को फिर से बनाया जाता है।

उत्पाद अद्यतन

फ़ीचर घोषणाएँ और रिलीज़ नोट्स। आमतौर पर एक hero, दो या तीन आइटम ब्लॉक, और उत्पाद में एक लिंक।

प्रोमोशनल

एक मजबूत hero, उत्पाद पंक्तियों और एक प्रमुख कॉल टू एक्शन के साथ ऑफ़र-एलईडी लेआउट। वह टेम्पलेट जिसे आपकी मार्केटिंग टीम सबसे अधिक बार संपादित करना चाहेगी।

लेन-देन

रसीदें, पुष्टिकरण और सूचनाएं। डेटा-भारी, ज्यादातर जनरेटेड, और वह जहां मर्ज टैग और लॉक किए गए क्षेत्र सबसे अधिक मायने रखते हैं।

पुनः सगेयता

निष्क्रिय उपयोगकर्ताओं के लिए विन-बैक संदेश, आमतौर पर वरीयता और सदस्यता समाप्त करने वाले लिंक के साथ सामान्य से अधिक प्रमुखता दी जाती है।

न्यूज़लेटर प्रीसेट ब्राउज़ करें

ये सामान्य ईमेल प्रकारों का विवरण हैं, बिक्री के लिए उत्पाद नहीं। ऊपर दिए गए प्रीसेट में से किसी एक से शुरू करें और उन्हें अपने स्वयं के ब्लॉक के रूप में बनाएं।

आउटपुट स्वरूप

तीन कलाकृतियाँ, तीन नौकरियाँ

केवल HTML को संग्रहीत करना बचने लायक गलती है: यह एक ऐसा प्रतिनिधित्व है जिसे आप फिर से मज़बूती से संपादित नहीं कर सकते।

JSON

परियोजनाओं को स्टोर और पुनर्स्थापित करें

संपादक की अपनी परियोजना की स्थिति। इसे सहेजें ताकि उपयोगकर्ता किसी ईमेल को ठीक उसी तरह फिर से खोल सके जैसे उन्होंने इसे छोड़ा था। यह वह कलाकृति है जो आपका Storage Manager लिखता है।

MJML

संलेखन प्रतिनिधित्व

पठनीय मार्कअप जो कोड की तरह समीक्षा करता है और भिन्न होता है। इसे तब संस्करण करें जब आप ब्लॉब्स के इतिहास के बजाय टेम्पलेट में क्या बदला है इसका इतिहास चाहते हैं।

HTML

आप वास्तव में क्या भेजते हैं

संकलित, तालिका-आधारित और इनलाइनर्ड। इसे अपने भेजने वाले बुनियादी ढांचे को सौंप दें और रिकॉर्ड के लिए आपके द्वारा भेजी गई सटीक प्रति संग्रहीत करें।

output.jsJS
editor.getProjectData();                // JSON - you store this
editor.runCommand('mjml-code');         // MJML - you version this
editor.runCommand('mjml-code-to-html'); // HTML - you send this

तीनों पर कायम रहें। JSON ईमेल को संपादन योग्य रखता है, MJML इसे समीक्षा योग्य रखता है, HTML इसे भेजने योग्य रखता है।

कार्यान्वयन खाका

ईमेल बिल्डर कैसे बनाएं

  1. 1
    01

    Editor

    GrapesJS और MJML प्लगइन से शुरू करें। इस बिंदु पर आपके पास एक कार्यशील ईमेल कैनवास है और आप पहले से ही HTML का उत्पादन कर सकते हैं।

  2. 2
    02

    टेम्पलेट्स और ब्लॉक

    अपने मौजूदा ईमेल को पुनः उपयोग करने योग्य ब्लॉक में बदलें और तय करें कि उपयोगकर्ता किन क्षेत्रों में बदलाव कर सकते हैं और कौन से लॉक रहेंगे.

  3. 3
    03

    भंडार

    Storage Manager को अपने API पर इंगित करें। प्रोजेक्ट JSON प्लस टेम्पलेट मेटाडेटा सहेजें - मालिक, नाम, अपडेट-एट, जो भी आपके उत्पाद की आवश्यकता है।

  4. 4
    04

    पूर्वावलोकन और सत्यापन

    समीक्षा के लिए संकलित HTML को रेंडर करें, और डिलीवरी के लिए कुछ भी कतारबद्ध होने से पहले लिंक, चित्र और आवश्यक सामग्री की जांच करें।

  5. 5
    05

    निर्यात और वितरण

    HTML तक संकलित करें और इसे अपनी ESP या अपनी स्वयं की प्रेषण सेवा को सौंप दें, फिर परिणामी मेट्रिक्स को अपनी रिपोर्टिंग में वापस फीड करें।

GrapesJS ट्यूटोरियल पढ़ें

चरण 1 और 5 को इस पृष्ठ पर दिए गए पैकेजों द्वारा काफी हद तक हल किया जाता है। चरण 2 से 4 वे हैं जहां आपके उत्पाद की वास्तविक आवश्यकताएं रहती हैं।

जल्दी शुरू

मिनटों में निर्माण शुरू करें

फ्रेमवर्क-न्यूट्रल कोर प्लस आधिकारिक MJML प्लगइन। यदि आप React या Next.js में काम कर रहे हैं, तो फ्रेमवर्क-विशिष्ट सेटअप नीचे लिंक किया गया है।

npm install grapesjs grapesjs-mjml
editor.jsJS
import grapesjs from 'grapesjs';
import grapesjsMjml from 'grapesjs-mjml';
import 'grapesjs/dist/css/grapes.min.css';

// The editor core plus the official MJML plugin. Both BSD-3-Clause.
const editor = grapesjs.init({
  container: '#email-editor',
  fromElement: true,
  plugins: [grapesjsMjml],
  pluginsOpts: {
    [grapesjsMjml]: {
      // Serve the drag-in placeholder from your own CDN, not a third party.
      imagePlaceholderSrc: 'https://cdn.your-app.com/email/placeholder.png',
    },
  },
});

एक बार संपादक माउंट हो जाने के बाद, तीन कमांड आपको तीन कलाकृतियां देते हैं:

export.jsJS
// 1 - the MJML source the editor is currently holding.
const mjml = editor.runCommand('mjml-code');

// 2 - the compiled, table-based, CSS-inlined HTML you actually send.
const { html } = editor.runCommand('mjml-code-to-html');

// 3 - store all three; hand only the HTML to your sending provider.
await fetch(`/api/campaigns/${campaignId}/template`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    project: editor.getProjectData(), // re-openable in the editor
    mjml,                             // diffable source of truth
    html,                             // what your provider receives
  }),
});

यदि आप एक संकलन चरण नहीं चाहते हैं, तो न्यूज़लेटर प्रीसेट पुराना, सरल पथ है - CSS इनलाइनर और कोई MJML के साथ टेबल ब्लॉक:

newsletter.jsJS
import newsletter from 'grapesjs-preset-newsletter';

// The pre-MJML path: table blocks and a CSS inliner, no compile step.
const editor = grapesjs.init({
  container: '#email-editor',
  plugins: [newsletter],
  pluginsOpts: {
    'grapesjs-preset-newsletter': { inlineCss: true },
  },
});

const html = editor.runCommand('gjs-get-inlined-html');

2026-08-27 पर सत्यापित संस्करण: grapesjs 0.23.6, grapesjs-mjml 1.0.8, grapesjs-preset-newsletter 1.0.2।

GrapesJS React के साथ React ईमेल बिल्डर Next.js पेज बिल्डर
बिल्ड बनाम खरीदें

स्क्रैच से एक ईमेल संपादक बनाएं या GrapesJS का उपयोग करें?

सवाल शायद ही कभी होता है कि क्या आप एक संपादक का निर्माण कर सकते हैं। यह है कि एक के कौन से हिस्से आपकी टीम के समय के लायक हैं।

तहखरोंच सेGrapesJS + GJS.Market
Editor कैनवासआप इसे बनाते हैं और बनाए रखते हैंओपन-सोर्स कोर, BSD-3-Clause
खींचें और छोड़ेंआप इसे बनाते हैं और बनाए रखते हैंमें निर्मित
ईमेल मार्कअपआप क्लाइंट की विचित्रताओं को हल करते हैंMJML grapesjs-mjml के माध्यम से
Blocks और घटकहर ब्लॉक इंजीनियरिंग का काम हैप्लगइन्स, साथ ही एक ही API पर आपका अपना
भंडारण और संपत्तिआप इसे बनाते हैं और बनाए रखते हैंप्लगइन्स, या आपका अपना समापन बिंदु
बैकएंड, डेटाबेस और ESPतुम्हारातुम्हारा - अपरिवर्तित
चल रहा रखरखावपूरा संपादकआपके एक्सटेंशन

अपना ईमेल उत्पाद बनाएं - स्क्रैच से कोई अन्य ईमेल संपादक नहीं।

ईमेल प्लगइन्स ब्राउज़ करें
उत्पाद की कीमत

ईमेल संपादन को उत्पाद सुविधा में बदलें

ईमेल संपादन केवल एक इंजीनियरिंग निर्णय नहीं है। यह कहाँ रहता है यह आपके उत्पाद के उपयोग के तरीके को बदल देता है।

कम इंजीनियरिंग अनुरोध

नियमित कॉपी, छवि और लेआउट परिवर्तन टिकट के रूप में आना बंद कर देते हैं, क्योंकि जो लोग उन्हें चाहते हैं वे उन्हें बना सकते हैं।

एक अधिक संपूर्ण उत्पाद

ईमेल निर्माण उपयोगकर्ताओं को एक अलग टूल पर भेजने और फिर से वापस भेजने के बजाय आपके एप्लिकेशन के अंदर रहता है।

प्रीमियम स्तरों के लिए कमरा

उन्नत संपादन, टेम्पलेट लाइब्रेरी या ब्रांड नियंत्रण उच्च योजनाओं पर बैठ सकते हैं, क्योंकि आप किसी और की पुनर्विक्रय के बजाय सुविधा को नियंत्रित करते हैं।

रहने का और कारण

टेम्प्लेट, ब्रांड नियम और इतिहास आपके प्लेटफ़ॉर्म के अंदर जमा हो जाते हैं, जो इसे काम करते रहने के लिए प्राकृतिक स्थान बनाता है।

अनुमानित लागत

आपके विकास और आपके मार्जिन के बीच कोई प्रति-सीट या प्रति-भेजें प्लेटफ़ॉर्म शुल्क नहीं है।

डेटा आपका रहता है

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

ये वे परिणाम हैं जो टीमें बनाती हैं। हम रूपांतरण या समय बचाने वाले आंकड़े प्रकाशित नहीं करते हैं जिन्हें हमने मापा नहीं है।

यह किसके लिए है

उन टीमों के लिए बनाया गया जिन्हें ईमेल संपादन की आवश्यकता है

यह पेज उन लोगों के लिए लिखा गया है जिन्हें यह तय करना है कि ईमेल एडिटिंग खरीदी, किराए पर ली गई है या बनाई गई है।

SaaS संस्थापक

पहले इसके नीचे संपादक के बुनियादी ढांचे को वित्तपोषित किए बिना ईमेल संपादन शिप करें।

सीटीओ और आर्किटेक्ट

डेटा मॉडल, होस्टिंग और वितरण पथ को आपके पास पहले से मौजूद निर्णयों के अंदर रखें।

उत्पाद टीम

ईमेल को एम्बेडेड तृतीय-पक्ष सतह के बजाय अपने स्वयं के UX के साथ एक मूल सुविधा बनाएं।

डेवलपर्स

कस्टम ब्लॉक, घटकों और आदेशों के साथ एक प्रलेखित संपादक API का विस्तार करें।

ईकॉमर्स टीमें

एक ब्लॉक लाइब्रेरी और ब्रांड नियमों के एक सेट से प्रचार और लेन-देन संबंधी ईमेल चलाएं।

एजेंसियों

प्रति सीट प्लेटफ़ॉर्म लागत के बिना प्रति ग्राहक पुनः प्रयोज्य ब्रांडेड ईमेल सिस्टम बनाएं।

कस्टम विकास

एक कस्टम ईमेल बिल्डर की आवश्यकता है?

कस्टम ब्लॉक, एकीकरण, भंडारण, व्हाइट-लेबल UI या एक पूर्ण ईमेल बिल्डर कार्यान्वयन - हम इसे आपके उत्पाद के बजाय इसके आसपास बना सकते हैं।

अपने ईमेल बिल्डर पर चर्चा करें सभी सेवाएं देखें
संबंधित समाधान

कुछ और विशिष्ट खोज रहे हैं?

यह पृष्ठ नींव के रूप में GrapesJS और MJML के बारे में है। ये पड़ोसी प्रश्नों को कवर करते हैं।

React ईमेल बिल्डर

एक ही नींव एक React अनुप्रयोग में वायर्ड है, घटक जीवनचक्र ठीक से संभाला है.

React में एक ईमेल संपादक बनाएं

ड्रैग-एंड-ड्रॉप ईमेल बिल्डर

संपादन अनुभव ही - आपके गैर-तकनीकी उपयोगकर्ता क्या देखते हैं और यह कैसे व्यवहार करता है।

ड्रैग-एंड-ड्रॉप ईमेल संपादन देखें

ईमेल टेम्पलेट बिल्डर

टीमों और अभियानों में टेम्पलेट बनाना, संग्रहीत करना और पुनः उपयोग करना।

ईमेल टेम्पलेट प्रबंधित करें

एम्बेड करने योग्य पेज बिल्डर

सामान्य मामला: SaaS उत्पाद के अंदर किसी भी प्रकार के दृश्य संपादक को एम्बेड करना।

एक दृश्य संपादक एम्बेड करें
FAQ

अक्सर पूछे जाने वाले प्रश्न

शुरू हो जाओ

अपना खुद का ईमेल बिल्डर बनाएं

GrapesJS और MJML से प्रारंभ करें, फिर अपने उत्पाद की आवश्यकता के प्लगइन्स और एकीकरण जोड़ें।

यहां से शुरू करें

ईमेल प्लगइन्स ब्राउज़ करें

प्रीसेट, ब्लॉक, भंडारण, संपत्ति और निर्यात - लाइव कीमतों के साथ वास्तविक लिस्टिंग।

ईमेल प्लगइन्स ब्राउज़ करें
निःशुल्क

GrapesJS से शुरू करें

ओपन-सोर्स कोर और MJML प्लगइन स्थापित करें, और आज ही एक ईमेल कैनवास चालू है।

ट्यूटोरियल पढ़ें
आपके लिए किया गया

कस्टम विकास की आवश्यकता है?

कस्टम ब्लॉक, एकीकरण या आपके उत्पाद के चारों ओर निर्मित एक पूर्ण ईमेल बिल्डर।

अपने प्रोजेक्ट पर चर्चा करें

पढ़ते रहिए

React के लिए ईमेल बिल्डरड्रैग-एंड-ड्रॉप ईमेल संपादनईमेल टेम्पलेट प्रबंधनअपने SaaS में एक विज़ुअल एडिटर एम्बेड करेंसंपादक को व्हाइट-लेबल करेंSaaS उत्पादों के लिए पेज बिल्डरGrapesJS React के साथGrapesJS Next.js के साथGrapesJS Unlayer की तुलना मेंन्यूज़लेटर और ईमेल प्लगइन्सकार्यान्वयन सेवाएं