GrapesJS के साथ एक ड्रैग-एंड-ड्रॉप ईमेल बिल्डर बनाएं

यह इस पृष्ठ पर चल रहा एक वास्तविक GrapesJS संपादक है - न कि वीडियो और न ही स्क्रीनशॉट। दाईं ओर से एक ब्लॉक को खींचें, इसे फिर से स्टाइल करने के लिए कुछ भी चुनें, फोन की चौड़ाई पर स्विच करें, फिर मार्कअप को वापस पढ़ें। हेडर और पाद लेख लॉक हैं, जो वही पैटर्न है जो अनुभाग आगे बताता है।

ड्रैग-एंड-ड्रॉप ईमेल बिल्डर एक विज़ुअल एडिटर है जो उपयोगकर्ताओं को HTML टेबल और ईमेल-विशिष्ट CSS लिखने के बजाय पुनः प्रयोज्य घटकों से ईमेल लेआउट बनाने देता है।

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

<table role="presentation" cellpadding="0" cellspacing="0" width="600">
  <tr>
    <td style="padding:32px;font-family:Arial,sans-serif">
      <h1 style="margin:0 0 12px;font-size:26px">स्वागत है</h1>
      <p style="margin:0;font-size:15px;line-height:1.6">आपकी सामग्री... </p>
    </td>
  </tr>
</table>

ईमेल को आसान बनाने के लिए बिल्डर नहीं है। यह कठिन भागों को किसी और के निर्णय को बनाने के लिए है - आपका, एक बार किया गया, घटक स्तर पर।

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

आप एक ऐसे संपादक का निर्माण नहीं कर रहे हैं जो सुंदर HTML का उत्पादन करता है। आप एक ऐसे संपादक का निर्माण कर रहे हैं जो खतरनाक HTML का उत्पादन नहीं कर सकता।

क्लाइंट व्यवहार रिलीज़ और रेंडरिंग मोड के साथ बदलता है, इसलिए यह पृष्ठ कोई प्रति-ग्राहक समर्थन मैट्रिक्स नहीं बताता है। ग्राहकों के खिलाफ मान्य करें और आपके अपने दर्शकों द्वारा वास्तव में उपयोग की जाने वाली सुविधाओं को मान्य करें। अंतिम समीक्षा 2026-09-03।

GrapesJS कभी भी आपके डेटाबेस से बात नहीं करता है और कभी भी आपके ईमेल प्रदाता से बात नहीं करता है। यह आपको एक दस्तावेज़ सौंपता है; उसके बाद सब कुछ आपकी वास्तुकला है।

तीन मालिक, कोई ओवरलैप नहीं। इस पृष्ठ के विषय पर सबसे आम वास्तुशिल्प गलती संपादक से दाहिने हाथ के कॉलम में कुछ करने की उम्मीद कर रही है।

दाहिने हाथ के कॉलम में कुछ भी GrapesJS गैप नहीं है - वे पंक्तियाँ कभी भी संपादक का काम नहीं थीं। उन्हें पहले स्प्रिंट से एप्लिकेशन कार्य के रूप में मानना ही एकीकरण को सरल रखता है।

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

JSON परियोजना है। HTML और MJML डिलीवरी हैं। पहले को स्टोर करें, दूसरों को जेनरेट करें।

उपयोगकर्ताओं को एक खाली कैनवास और एक div न दें। घटकों का एक छोटा सा सेट शिप करें जो पहले से ही टेबल मार्कअप, इनलाइन शैलियों और फॉलबैक को एन्कोड करते हैं, फिर लोगों को उन्हें व्यवस्थित करने दें। ये दस मार्केटिंग और जीवनचक्र ईमेल को वास्तव में क्या चाहिए, उनमें से अधिकांश को कवर करते हैं।

• हैडर

  लोगो, ब्रांड बार, प्रीहेडर टेक्स्ट। आमतौर पर लॉक किया जाता है ताकि हर ईमेल एक ही पहचान के साथ छोड़ दे।

• Hero

  शीर्षक, सहायक पंक्ति और एक कार्रवाई। आकार का ताकि संदेश छवि लोड किए बिना जीवित रहे।

• टेक्स्ट

  एक वास्तविक फ़ॉन्ट फ़ॉलबैक स्टैक और लाइन ऊंचाई के साथ एक पैराग्राफ ब्लॉक जो फोन की चौड़ाई पर रहता है।

• छवि

  निश्चित चौड़ाई, स्पष्ट आयाम और आवश्यक वैकल्पिक पाठ, इसलिए एक अवरुद्ध छवि अभी भी एक पठनीय ईमेल छोड़ती है।

• घुंडी

  एक स्टाइल एंकर के बजाय एक टेबल-आधारित बटन - अंतर सख्त ग्राहकों में दिखाई देता है।

• दो-कॉलम अनुभाग

  एक तालिका पंक्ति जो संकीर्ण व्यूपोर्ट पर ढेर होती है, स्टैक्ड ऑर्डर आपके द्वारा पहले से ही तय की जाती है।

• उत्पाद कार्ड

  छवि, नाम, मूल्य और लिंक, कॉपी-पेस्ट के बजाय आपके बैकएंड को भरने वाले फ़ील्ड द्वारा संचालित।

• सामाजिक लिंक

  आइकन और URL की एक निश्चित पंक्ति, मार्कअप के बजाय सेटिंग्स के रूप में संपादन योग्य।

• विभक्त

  <hr> तत्व के बजाय टेबल बॉर्डर के साथ खींचा गया नियम, जिसे कई क्लाइंट रीस्टाइल करते हैं।

• पाद लेख

  प्रेषक की पहचान, पता और सदस्यता समाप्त करें लिंक। आमतौर पर बंद कर दिया जाता है, क्योंकि ये दायित्व हैं।

एक घटक परिभाषा है; एक ब्लॉक वह है कि उपयोगकर्ता कैनवास पर एक कैसे प्राप्त करता है। ब्लॉक लाइब्रेरी आपके पास सबसे शक्तिशाली लीवर है जो लोग बना सकते हैं - और उदार होने से गलत होने के लिए सबसे आसान है।

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

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

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

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

दो चौड़ाई लगभग सभी डिज़ाइन समीक्षा को कवर करती हैं: ईमेल जिस चौड़ाई पर लिखा गया है, और एक फोन। दोनों संपादक में एक डिवाइस स्विच दूर हैं, और न ही परीक्षण के रूप में एक ही बात है।

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

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

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

GrapesJS संपादक है, आपकी ईमेल डिलीवरी सेवा नहीं।

न तो GrapesJS और न ही GJS.Market ऊपर नामित किसी भी प्रदाता के साथ एकीकरण भेजता है, और कोई साझेदारी निहित नहीं है। सुपुर्दगी, प्रमाणीकरण और दमन प्रबंधन आपके प्रदाता और आपके एप्लिकेशन की जिम्मेदारी बनी हुई है।

निर्णय नहीं, दायरा जांच। प्रत्येक पंक्ति एक ईमेल बिल्डर की आवश्यकता है। बायां कॉलम वह काम है जो आपके पास होगा; दाईं ओर वह है जो GrapesJS आपको एक घटक लिखने से पहले देता है।

"उपलब्ध" का अर्थ है क्षमता कोर के साथ जहाज और कॉन्फ़िगरेशन की आवश्यकता है, निर्माण की नहीं। इसका मतलब यह नहीं है कि इसे किसी काम की आवश्यकता नहीं है: प्रत्येक गंभीर ईमेल बिल्डर अपने स्वयं के घटकों को परिभाषित करता है, अपनी शैलियों को प्रतिबंधित करता है और अपना स्वयं का स्टोरेज एडाप्टर लिखता है। grapesjs 0.23.6 के विरुद्ध 2026-09-03 पर सत्यापित किया गया।

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

ईमेल फाउंडेशन

एक पेज एडिटर को ईमेल एडिटर में क्या बदल देता है: टेबल-आधारित ब्लॉक, एक ईमेल-आकार का Style Manager, आयात और निर्यात।

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

Newsletter Preset

न्यूज़लेटर प्रीसेट: टेबल अनुभाग, एक ईमेल-उन्मुख Style Manager, और एक कमांड जो निर्यात पर CSS को इनलाइन करता है।

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

MJML Preset

कैनवास में MJML घटकों के साथ लेखक और संकलन के लिए MJML को वापस पढ़ें।

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

उपयोगकर्ताओं को खींचने से रोकता है

तैयार ईमेल अनुभाग, और उपयोगकर्ताओं को अपना स्वयं का सहेजने देने का एक तरीका।

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

GrapesJS Email Blocky – Premium Responsive Email Blocks

उत्तरदायी ईमेल ब्लॉक का एक डिज़ाइन किया गया सेट, इसलिए आपकी पहली ब्लॉक लाइब्रेरी एक रिक्त सूची नहीं है।

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

Users Blocks

उपयोगकर्ताओं को घटक कोड को छूने के बिना अपनी व्यवस्था को पुनः प्रयोज्य ब्लॉक के रूप में सहेजने दें।

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

टेम्पलेट्स

शुरुआती बिंदुओं की एक लाइब्रेरी, इसलिए कोई भी खाली कैनवास से ईमेल शुरू नहीं करता है।

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

Templates Manager

संपादक के अंदर टेम्पलेट रिकॉर्ड — शुरुआती बिंदुओं को सहेजें, सूचीबद्ध करें, लोड करें और क्लोन करें।

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

एस्केप हैच

एक ईमेल के एक भाग के लिए जिसे हाथ से लिखा जाना है - एक ट्रैकिंग पिक्सेल, एक प्रदाता-विशिष्ट ब्लॉक, एक स्निपेट कानूनी आपूर्ति।

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

Grapesjs Component Code Editor

पूरे दस्तावेज़ को खोले बिना, किसी एकल चयनित घटक के मार्कअप को संपादित करें.

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

Code Editor

उन क्षणों के लिए एक पूर्ण HTML और CSS दृश्य जब किसी को यह देखने की आवश्यकता होती है कि वास्तव में क्या भेजा जाएगा।

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

छवियाँ और अपलोड

स्टोरेज द्वारा समर्थित एक एसेट मैनेजर जो ड्राफ़्ट को समाप्त कर देता है, क्योंकि एक टूटी हुई छवि URL एक टूटा हुआ ईमेल होता है।

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

Grapesjs Cloudinary

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

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

Grapesjs Uppy

परिसंपत्ति प्रबंधक के सामने एक अपलोड UI, प्रगति, पुनः प्रयास और कई स्रोतों के साथ।

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

Filestack

डिफ़ॉल्ट अपलोडर को Filestack के लिए स्वैप करें, जिसमें उसका अपना पिकर और परिवर्तन शामिल हैं।

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

भंडारण और autosave

प्रोजेक्ट JSON कहाँ रहता है, और संपादक को इसे कितनी बार लिखने की अनुमति है।

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

Grapesjs Firebase Storage

पहले स्टोरेज एडाप्टर लिखे बिना प्रोजेक्ट JSON से Firebase तक जारी रखें।

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

Directus Storage

ईमेल प्रोजेक्ट को अपने बाकी सामग्री मॉडल के साथ Directus में रखें।

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

Storage Rate Limit

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

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

ईमेल प्राप्त करना

तैयार दस्तावेज़ को हैंडऑफ़, समीक्षा या किसी मौजूदा बिल्ड पाइपलाइन के लिए निर्यात करें.

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

Export Zip

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

काम का आकार, क्रम में यह करने के लिए समझ में आता है। प्रत्येक चरण उस गाइड से जुड़ता है जो इसे ठीक से कवर करता है - यह पृष्ठ एक नक्शा है, ट्यूटोरियल नहीं।

1. 1

   संपादक को प्रारंभ करें

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

   GrapesJS सेटअप गाइड →
2. 2

   ईमेल घटकों को परिभाषित करें

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

   घटकों को गहराई से ईमेल करें →
3. 3

   टेम्पलेट जोड़ें

   उपयोगकर्ताओं को शुरू करने के लिए कहीं दें। टेम्प्लेट को प्रोजेक्ट JSON के रूप में स्टोर करें और मूल को संपादित करने के बजाय उपयोग पर क्लोन करें।

   टेम्पलेट सिस्टम →
4. 4

   प्रोजेक्ट स्टोर करें

   अपने API के खिलाफ एक स्टोरेज एडाप्टर लागू करें ताकि ड्राफ्ट, autosave और संस्करण परिभाषित करने के लिए आपके हों।

   भंडारण प्लगइन्स →
5. 5

   रेंडर करें और भेजें

   भेजें पर मार्कअप जनरेट करें, मर्ज टैग सर्वर-साइड को हल करें, और परिणाम अपने प्रदाता को सौंपें।

   निर्माण के साथ सहायता प्राप्त करें →

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

const editor = grapesjs.init({
  container: '#email-editor',
  height: '100%',
  // Email is authored at a fixed width; give users one extra viewport
  // to check, not a full responsive breakpoint set.
  deviceManager: {
    devices: [
      { id: 'desktop', name: 'Desktop', width: '' },
      { id: 'mobile', name: 'Mobile', width: '375px' },
    ],
  },
  // Curated blocks only: the preset's table sections, plus your own.
  plugins: [
    (ed) => newsletter(ed, { inlineCss: true, showBlocksOnLoad: true }),
  ],
  // Point the editor at your API rather than the browser's localStorage.
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
  },
});

// An email-safe button: users edit the label and the link,
// never the table markup that makes it render in Outlook.
editor.DomComponents.addType('email-button', {
  isComponent: (el) => el.dataset?.type === 'email-button',
  model: {
    defaults: {
      draggable: '[data-gjs-type="cell"], td',
      // Users may recolour it; they may not restyle it into a div.
      stylable: ['background-color', 'color', 'border-radius'],
      traits: [
        { name: 'href', label: 'Link' },
        { name: 'label', label: 'Button text' },
      ],
      components: `
        <table role="presentation" cellpadding="0" cellspacing="0">
          <tr><td><a href="#">Read the update</a></td></tr>
        </table>`,
    },
  },
});

दोनों नमूने grapesjs 0.23.6 के खिलाफ चलते हैं। 'अंगूरजेएस-प्रीसेट-न्यूज़लेटर' और 'अंगूरजेएस-एमजेएमएल' अलग-अलग BSD-3-Clause पैकेज हैं - कोर शिप कोई ईमेल प्रीसेट नहीं है - इसलिए जो भी आपके द्वारा ऊपर चुने गए आउटपुट स्वरूप से मेल खाता है उसे स्थापित करें।

एक कार्यशील डेमो को एक ईमेल बिल्डर से क्या अलग करता है जिसे आप ग्राहकों को सौंप सकते हैं। यहां सब कुछ आपका काम है, संपादक का नहीं।

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

• ✕जोखिम

  संपादक के प्रतिबंधों पर भरोसा करना

  लॉक किए गए क्षेत्र, प्रतिबंधित शैलियाँ और छिपे हुए ब्लॉक ब्राउज़र में रहते हैं। एक तैयार किया गया अनुरोध अपनी पसंद का कोई भी प्रोजेक्ट पोस्ट कर सकता है।

  ✓क्या करना है

  सर्वर पर सहेजे गए प्रोजेक्ट को मान्य करें: आवश्यक क्षेत्र मौजूद, एक अनुमति सूची पर घटक प्रकार, सीमा के भीतर फ़ील्ड।

• ✕जोखिम

  अस्वच्छ कस्टम कोड भेजना

  कोड-एम्बेड घटक एक सुविधा अनुरोध है जो प्रत्येक ईमेल बिल्डर पर आता है, और यह आपके ग्राहकों के इनबॉक्स पर इंगित एक इंजेक्शन सतह है।

  ✓क्या करना है

  संग्रहीत मार्कअप को सैनिटाइज़ करें और रेंडर पर फिर से सैनिटाइज़ करें। प्रतिबंधित करें कि कोड घटक का उपयोग कौन कर सकता है, और इसके प्रत्येक उपयोग को लॉग करें।

• ✕जोखिम

  किसी भी अपलोड की गई फ़ाइल को स्वीकार करना

  किसी संपादक से किए गए अपलोड सार्वजनिक URL पर समाप्त होते हैं जो ईमेल के रूप में लंबे समय तक जीवित रहते हैं।

  ✓क्या करना है

  सर्वर पर प्रकार और आकार को मान्य करें, छवियों को फिर से एन्कोड करें, और एक ऐसे डोमेन से संपत्ति परोसें जिसमें कोई सत्र कुकीज़ नहीं है।

• ✕जोखिम

  भेजें समापन बिंदु को अंडर-संरक्षित छोड़ना

  प्रतिपादन और भेजना महंगे, अपरिवर्तनीय संचालन हैं। वे आमतौर पर संपादक मार्ग की तुलना में कम सावधानी से संरक्षित होते हैं।

  ✓क्या करना है

  प्रति टेम्पलेट और प्रति प्राप्तकर्ता सूची को अधिकृत करें, दर-सीमा भेजती है, और कुछ भी पूर्ण दर्शकों के पास जाने से पहले दूसरी जांच की आवश्यकता होती है।

• ✕जोखिम

  जो कुछ भी दायरे में है उसके खिलाफ मर्ज टैग को हल करना

  एक अनुमेय टेम्पलेट रेंडरर खुशी-खुशी एक ऐसे क्षेत्र को प्रक्षेपित करेगा जिसे प्रेषक को कभी नहीं देखना चाहिए था।

  ✓क्या करना है

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

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

• संपादक को आलस्य से लोड करें

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

• आलसी-लोड वैकल्पिक प्लगइन्स

  एक कोड व्यूअर, एक छवि संपादक या एक MJML कंपाइलर तब आ सकता है जब उपयोगकर्ता उस पैनल को खोलता है।

• ब्लॉक लाइब्रेरी को छोटा रखें

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

• डिबाउंस autosave

  कीस्ट्रोक के बजाय परिवर्तन गणना द्वारा थ्रॉटल करें, इसलिए टाइपिंग का एक विस्फोट तीस के बजाय एक अनुरोध उत्पन्न करता है।

• प्रोजेक्ट डेटा को कम रखें

  URL द्वारा संदर्भ संपत्तियां। प्रोजेक्ट JSON के अंदर बेस 64 छवियां हर लोड, सेव और वर्जन कॉपी को भारी बनाती हैं।

• कस्टम घटक देखें

  Component तर्क जो हर परिवर्तन पर चलता है, एक कैनवास का सामान्य कारण है जो लंबे ईमेल पर सुस्त महसूस करता है।

जानबूझकर यहां कोई आंकड़ा उद्धृत नहीं किया गया है: संख्याएं आपकी ब्लॉक गणना, आपके घटक तर्क और आपके उपयोगकर्ताओं के हार्डवेयर पर निर्भर करती हैं। प्रत्येक परिवर्तन से पहले और बाद में अपने स्वयं के एप्लिकेशन में संपादक मार्ग को मापें।

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

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

GrapesJS एक सादे DOM तत्व में बदल जाता है, इसलिए इसे एकीकृत करना यह सवाल है कि कौन सा जीवनचक्र हुक init को कॉल करता है और किसे नष्ट करता है। आपका ढांचा आपके एप्लिकेशन को शक्ति प्रदान करता है; GrapesJS विज़ुअल ईमेल संपादन परत को शक्ति प्रदान करता है।

• Reactएक प्रभाव में माउंट करें, कंटेनर को React के रेंडर पथ से बाहर रखें, और संपादक इंस्टेंस को रेफरी में रखें।
• VueonMounted से इनिट करें और onUnmounted से नष्ट करें, कंटेनर को एक सादे टेम्पलेट रेफरी के रूप में रखें।
• AngularngAfterViewInit से ViewChild तत्व के विरुद्ध प्रारंभ करें, और ngOnDestroy से नष्ट करें।
• Next.jsकेवल क्लाइंट-साइड। SSR अक्षम के साथ गतिशील रूप से आयात करें - मॉड्यूल आयात समय पर विंडो को छूता है।