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

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

MJML संपादक डेमो GrapesJS प्रोजेक्ट द्वारा ही प्रकाशित किया गया है। एक अनुभाग जोड़ें, प्रतिलिपि संपादित करें, फिर जेनरेट किए गए मार्कअप को देखें।

एक ईमेल टेम्पलेट बिल्डर लोगों को हस्तलेखन HTML ईमेल मार्कअप के बजाय ईमेल लेआउट बनाने और बदलने देता है। एक टेम्पलेट * लाइब्रेरी * तैयार डिजाइनों को शिप करता है; एक टेम्पलेट * बिल्डर * उन्हें बनाने की क्षमता को शिप करता है - और आपके द्वारा शिप किए जाने के बाद उन्हें बनाते रहने के लिए।

टेम्प्लेट आपके उपयोगकर्ताओं को एक प्रारंभिक बिंदु देते हैं। एक बिल्डर उन्हें नियंत्रण देता है।

एक पुस्तकालय एक छत के साथ एक शेल्फ है: यह कवर करता है कि इसे कवर करने के लिए क्या बनाया गया था, और उस लाइन के ऊपर के अनुरोधों में कहीं नहीं जाना है। एक बिल्डर एक लूप है - और शेल्फ हर बार बढ़ता है जब कोई इसके चारों ओर जाता है।

• "हमें शुक्रवार तक एक स्वच्छ स्वागत ईमेल की आवश्यकता है।

  ढका हुआ✓

  टेम्पलेट लाइब्रेरी

  हल किया। यह वही है जो एक अच्छी लाइब्रेरी के लिए है - एक चुनें, शब्दों को बदलें, भेजें।

  ढका हुआ✓

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

  उसी शुरुआती बिंदुओं से भी हल किया गया। एक बिल्डर इसके अंदर एक पुस्तकालय के साथ जहाज करता है।

• "प्रत्येक किरायेदार को अपने स्वयं के कानूनी पाद लेख की आवश्यकता होती है।

  कवर नहीं किया गया–

  टेम्पलेट लाइब्रेरी

  एक साझा पाद लेख, या प्रति किरायेदार प्रत्येक टेम्पलेट का एक कांटा।

  ढका हुआ✓

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

  एक पाद लेख ब्लॉक, प्रति किरायेदार एक बार सहेजा गया और उनके टेम्पलेट्स में पुनः उपयोग किया गया।

• "ग्राहक के वास्तविक ऑर्डर को रसीद में रखें।

  कवर नहीं किया गया–

  टेम्पलेट लाइब्रेरी

  स्टेटिक प्लेसहोल्डर टेक्स्ट। डेटा को डाउनस्ट्रीम में विभाजित किया जाना है।

  ढका हुआ✓

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

  आपके ऑर्डर मॉडल से बंधा एक घटक, एक ब्लॉक के रूप में संपादन योग्य और भेजने के समय हल किया गया।

• "पिछले मंगलवार को हमारे द्वारा भेजे गए संस्करण को पुनर्स्थापित करें।

  कवर नहीं किया गया–

  टेम्पलेट लाइब्रेरी

  जो कुछ भी फ़ाइल के साथ अधिलेखित किया गया था वह आपके पास है।

  ढका हुआ✓

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

  एक संस्करण पंक्ति। पुनर्स्थापित करना एक क्वेरी है, पुरातत्व परियोजना नहीं।

• "हमारे ग्राहकों को हमें ईमेल किए बिना अपना खुद का निर्माण करने दें।

  कवर नहीं किया गया–

  टेम्पलेट लाइब्रेरी

  वह नहीं जो एक पुस्तकालय करता है - इसकी कोई संलेखन सतह नहीं है।

  ढका हुआ✓

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

  पूरी बात। आपके उपयोगकर्ता ऐसे टेम्पलेट बनाते और रखते हैं जिन्हें आप कभी नहीं देखते हैं।

पुस्तकालय भेजें। फिर उस चीज़ को शिप करें जो उनमें से अधिक बनाती है।

आपके उपयोगकर्ताओं को मिलने वाली संपादन सतह और उसके कुछ हिस्सों को आप नियंत्रित करते हैं।

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

• हैडर

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

• Hero

  प्रारंभिक वक्तव्य और कार्रवाई के लिए पहला कॉल।

• उत्पाद ग्रिड

  वस्तुओं की एक पंक्ति या ग्रिड, आपके कैटलॉग से बंधा हुआ है जहां आप इसे लाइव चाहते हैं।

• फ़ीचर सूची

  रिलीज़ नोट्स और ऑनबोर्डिंग के लिए लघु आइकन-और-टेक्स्ट पंक्तियाँ।

• मूल्य निर्धारण

  एक टेबल-आधारित रेंडरर से बचने के लिए योजना तुलना की गई है।

• प्रशंसापत्र

  एक उद्धरण, एक एट्रिब्यूशन और एक वैकल्पिक अवतार।

• कार्यवाई के लिए बुलावा

  एक बुलेटप्रूफ बटन जो पृष्ठभूमि छवियों के बिना प्रस्तुत करता है।

• पाद लेख

  पता, प्राथमिकताएं लिंक और सदस्यता समाप्त करने वाला लिंक जिसे आपको कानूनी रूप से शामिल करना आवश्यक है।

मानक ब्लॉक लेआउट को कवर करते हैं। जो चीज बिल्डर को अपना बनाती है, वह है वे घटक जो आपके डेटा के बारे में जानते हैं - एक ऑर्डर, एक सदस्यता, एक बुकिंग, एक सिफारिश।

1. स्‍टैंडर्ड
2. ↓संयत
3. ↓और रूप
4. ↓आपका डेटा मॉडल

टेम्पलेट लिखे जाने के दौरान संपादक एक प्लेसहोल्डर प्रस्तुत करता है। आपका बैकएंड भेजने के समय वास्तविक मानों में स्वैप करता है।

एक टेम्पलेट सिस्टम में, टेम्पलेट इस बात से भिन्न होते हैं कि उनका मालिक कौन है और कौन उन्हें बदल सकता है - न केवल वे जो कहते हैं। ये पहले दिन से मॉडलिंग के लायक कक्षाएं हैं।

ये एक टेम्पलेट सिस्टम में स्वामित्व वर्ग हैं, बिक्री के लिए उत्पाद नहीं। GJS.Market संपादक प्लगइन्स और प्रीसेट सूचीबद्ध करता है; यह ईमेल टेम्पलेट नहीं बेचता है।

चौड़ाई ईमेल वास्तव में प्रस्तुत करता है, जबकि आप अभी भी इसे संपादित कर रहे हैं, पर लेआउट का पूर्वावलोकन करें। 600px बॉडी कॉलम के लिए लंबे समय से चली आ रही परंपरा है - एक सम्मेलन, विनिर्देश नहीं।

एक डेस्कटॉप क्लाइंट पर दो कॉलम, एक फोन पर स्टैक्ड - टेम्पलेट में तय किया जाता है, न कि प्राप्तकर्ता के ग्राहक के अनुमान से।

ईमेल क्लाइंट HTML और CSS को अलग-अलग तरीके से लागू करते हैं, और हमेशा करते हैं। एक विज़ुअल बिल्डर इसे नहीं हटाता है - यह संलेखन चरण को मानकीकृत करता है ताकि हर बार एक ही ज्ञात-अच्छा मार्कअप सामने आए।

2026-08-28 पर सत्यापित बाधाएं। व्यवहार में परिवर्तन; वर्तमान स्थिति के लिए caniemail.com की जाँच करें, और उन ग्राहकों के विरुद्ध उत्पादन ईमेल का परीक्षण करें जिनका आपके अपने दर्शक वास्तव में उपयोग करते हैं।

mjml उत्तरदायी ईमेल मार्कअप को कुछ ऐसा बनाने के लिए मौजूद है जिसे आप हाथ से बनाए रखने के बजाय उत्पन्न करते हैं। GrapesJS को इसके ऊपर एक दृश्य संपादन सतह डालने के लिए grapesjs-mjml के साथ बढ़ाया जा सकता है।

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

संपादक एक ग्राहक है। यह आपके API से एक टेम्पलेट मांगता है और एक को वापस सौंपता है; यह कभी नहीं सीखता कि आपके किरायेदार कौन हैं, और इसमें कभी भी किसी भी चीज़ की एकमात्र प्रति नहीं होती है।

// Storage scoped to the tenant AND the template. The editor never learns who
// the tenant is — your API does, from the session, and refuses everything else.
editor.Storage.add('remote', {
  async load({ templateId }) {
    const res = await fetch(`/api/templates/${templateId}/project`);
    return res.json();
  },
  async store(project, { templateId }) {
    await fetch(`/api/templates/${templateId}/project`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(project),
    });
  },
});

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

जिस क्षण कोई दूसरा ग्राहक एक टेम्पलेट सहेजता है, स्वामित्व एक विवरण होना बंद हो जाता है। तीन स्तर लगभग हर उत्पाद को कवर करते हैं।

एक ही टेम्पलेट प्रणाली, अलग-अलग नौकरियों की ओर इशारा करती है।

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

टेम्पलेट सिस्टम किस चीज से बना है

• Editor कैनवास
• खींचें और छोड़ें
• Block रजिस्ट्री
• Component मॉडल
• शैली नियंत्रण
• उत्तरदायी पूर्वावलोकन
• संपत्ति प्रबंधन
• टेम्पलेट CRUD
• संस्करण बनाना और पुनर्स्थापित करना
• मर्ज-टैग सत्यापन
• किरायेदार स्कोपिंग
• पूर्ववत करें और फिर से करें
• HTML निर्यात
• MJML संकलन
• चल रहे ग्राहक परीक्षण

GrapesJS आपको संपादन परत देता है। इसके ऊपर टेम्पलेट सिस्टम - स्वामित्व, संस्करण, किरायेदारी - आपका है, और होना चाहिए: यह वह हिस्सा है जो आपके उत्पाद से मेल खाता है।

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

पुस्तकालय ही

टेम्पलेट्स को सहेजना, सूचीबद्ध करना और फिर से खोलना - इस पृष्ठ का विषय।

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

टेम्पलेट्स

Templates Manager

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

US$39,00प्लगइन देखें

शुरुआती बिंदु

एक नया टेम्पलेट क्या शुरू होता है, इससे पहले कि कोई एक को सहेज ले।

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

पूर्व निर्धारित

MJML Preset

संपादक में MJML घटकों को लाता है, लाइव संकलित किया जाता है, इसलिए हाथ से लिखे जाने के बजाय उत्तरदायी मार्कअप उत्पन्न होता है।

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

पूर्व निर्धारित

Newsletter Preset

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

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

ब्लॉक

जिन अनुभागों में एक टेम्पलेट इकट्ठा किया जाता है और फिर से इकट्ठा किया जाता है।

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

ब्लॉक

GrapesJS Email Blocky – Premium Responsive Email Blocks

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

US$69,00प्लगइन देखें

एस्केप हैच

एक टेम्पलेट के भाग के लिए जिसे हाथ से लिखा जाना है।

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

कोड

Grapesjs Component Code Editor

एक डेवलपर को पूरे टेम्पलेट को खोले बिना, एक चयनित घटक के HTML और CSS को संपादित करने देता है।

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

टेम्प्लेट कहां रहते हैं

संपादक के भंडारण को आपके द्वारा नियंत्रित बैकएंड में वायरिंग करना।

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

भंडार

Grapesjs Firebase Storage

प्रोजेक्ट डेटा को Firebase तक बनाए रखता है, हालांकि आपका ऐप अपने टेम्पलेट्स को कुंजीकृत करता है।

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

भंडार

Directus Storage

प्रोजेक्ट डेटा को Directus तक बनाए रखता है, जो तब सुविधाजनक होता है जब टेम्पलेट आपकी अन्य सामग्री के बगल में रहते हैं।

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

संपत्ति

छवियों को एक टेम्पलेट संदर्भित करता है, जो टेम्पलेट से आगे निकल जाना चाहिए।

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

संपत्ति

Grapesjs Cloudinary

परिसंपत्ति प्रबंधक को Cloudinary पर इंगित करता है, इसलिए टेम्पलेट छवियों को एक ही स्थान से रूपांतरित और परोसा जाता है।

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

अपलोड

Grapesjs Uppy

उन छवियों के लिए एक पूर्ण अपलोड प्रवाह जोड़ता है जिन्हें आपके उपयोगकर्ता टेम्पलेट में छोड़ते हैं।

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

हैंडऑफ़

सिस्टम से एक तैयार टेम्पलेट प्राप्त करना।

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

निर्यातित माल

Export Zip

हैंडऑफ़ के लिए प्रदान किए गए आउटपुट को एक ऐसे सिस्टम में पैकेज करता है जो API कॉल के बजाय फ़ाइलों की अपेक्षा करता है।

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

चार संयोजन जो पहले से ही एक साथ काम करते हैं, जिन्हें आप किसके टेम्पलेट लाइब्रेरी के आधार पर बना रहे हैं।

कीमतें निर्माण समय पर कैटलॉग से लाइव पढ़ी जाती हैं।

GrapesJS संपादन परत है और HTML पर रुकती है। उसके बाद सब कुछ आपका बैकएंड और प्रदाता है जिसका आप पहले से भुगतान करते हैं - संपादक में कोई भी प्रेषण अंतर्निहित नहीं है, और यहां कोई भी निहित नहीं है।

संपादक कोर प्लस आधिकारिक MJML प्लगइन। दोनों BSD-3-Clause हैं।

import grapesjs from 'grapesjs';
import grapesjsMjml from 'grapesjs-mjml';
import 'grapesjs/dist/css/grapes.min.css';

// One editor instance per template being edited. The template id — not a page
// id — is what every load and store call is keyed by.
const editor = grapesjs.init({
  container: '#template-editor',
  plugins: [grapesjsMjml],
  pluginsOpts: {
    [grapesjsMjml]: {
      imagePlaceholderSrc: 'https://cdn.your-app.com/email/placeholder.png',
    },
  },
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
  },
});

// "Save as new template" — a row your customer owns from now on.
async function saveAsTemplate(name) {
  const res = await fetch('/api/templates', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name,
      project: editor.getProjectData(), // re-openable in the editor
    }),
  });
  return res.json(); // { id, name, version: 1 }
}

// Editing an existing template appends a version rather than overwriting it,
// so "restore the version we sent last Tuesday" stays a query, not a restore.
async function saveVersion(templateId) {
  await fetch(`/api/templates/${templateId}/versions`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ project: editor.getProjectData() }),
  });
}

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

फ्रेमवर्क की बारीकियां अपने स्वयं के पृष्ठों पर रहती हैं - यह पृष्ठ उद्देश्य पर फ्रेमवर्क-तटस्थ रहता है।

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

यह पृष्ठ टेम्पलेट सिस्टम के बारे में है। ये पड़ोसी प्रश्नों को कवर करते हैं।

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

संबंधित पढ़ना