व्हाइट-लेबल पेज बिल्डर के साथ GrapesJS

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

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

आपके उपयोगकर्ताओं को ऐसा महसूस होना चाहिए कि वे आपके उत्पाद का उपयोग कर रहे हैं - न कि कोई तृतीय-पक्ष संपादक जो इसमें एम्बेडेड होता है।

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

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

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

एक व्हाइट-लेबल बिल्ड परतों का एक ढेर है, और यह सटीक होने के लायक है कि उनमें से कौन सा विज़ुअल एडिटिंग इंजन आपूर्ति कर सकता है और कौन सा नहीं। स्टैक को टॉप-डाउन पढ़ें: आपका ग्राहक क्या देखता है, जहां प्रकाशित पृष्ठ अंततः रहता है।

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

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

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

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

GrapesJS पर्दे के पीछे काम कर सकता है जबकि आपके ग्राहक आपके उत्पाद अनुभव के साथ बातचीत करते हैं।

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

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

• किरायेदार अलगाव

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

• परियोजनाओं

  एक किरायेदार के पृष्ठ आपके डेटाबेस में पंक्तियाँ हैं। संपादक एक समय में एक प्रोजेक्ट लोड करता है और इसे आपके API के माध्यम से वापस लिखता है।

• संपत्ति पुस्तकालय

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

• टेम्पलेट सेट

  टेम्प्लेट एक संगठन के लिए वैश्विक, योजना-विशिष्ट या निजी हो सकते हैं, जो अक्सर एक योजना अपग्रेड वास्तव में अनलॉक होता है।

• प्रति-किरायेदार ब्रांडिंग

  रंग, फ़ॉन्ट और लोगो प्रति संगठन हल होते हैं, इसलिए एक एजेंसी के ग्राहक प्रत्येक एक ही परिनियोजन में अपनी पहचान देखते हैं।

• लक्ष्य प्रकाशित करना

  जहाँ किसी टैनेंट के पृष्ठ प्रकाशित किए जाते हैं — पथ, उपडोमेन या कस्टम डोमेन — वह टैनेंट कॉन्फ़िगरेशन है जिसे आपका अनुप्रयोग हल करता है.

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

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

• 01

  दृश्य पहचान

  वह परत जिससे हर कोई शुरू होता है। आवश्यक, और अपने आप में कभी पर्याप्त नहीं होता है।

  • लोगो
  • रंग की
  • मुद्रण कला
  • प्रतीक
• 02

  Editor UI

  कैनवास के चारों ओर क्रोम। पैनलों को आपके अपने घटकों द्वारा पुनर्व्यवस्थित, प्रतिस्थापित या प्रस्तुत किया जा सकता है।

  • पैनलों
  • उपकरण पट्टी
  • नेविगेशन
  • आदेश
  • मेनू
• 03

  सामग्री प्रणाली

  उपयोगकर्ता वास्तव में एक पृष्ठ पर क्या रख सकते हैं। यह वह जगह है जहां एक बिल्डर सामान्य होना बंद कर देता है।

  • ब्लॉक
  • अवयव
  • टेम्पलेट्स
  • प्रीसेट
• 04

  उत्पाद की भाषा

  शब्द। एक उपयोगकर्ता जो आपकी शब्दावली को हर जगह पढ़ता है, वह कभी नहीं देखता कि नीचे एक इंजन है।

  • लेबल
  • पारिभाषिक शब्‍दावली
  • उपयोगकर्ता प्रवाह
  • ऑनबोर्डिंग

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

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

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

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

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

• Hero

  आपका उद्घाटन अनुभाग, उन फ़ील्ड के साथ जिनका आपका उत्पाद वास्तव में उपयोग करता है।

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

  ऐसी तालिकाओं की योजना बनाएं जो आपके स्वयं के मूल्य निर्धारण डेटा से पढ़ सकें।

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

  सामाजिक प्रमाण ने आपके ब्रांड को प्रस्तुत करने के तरीके को निर्धारित किया।

• फ़ीचर ग्रिड

  एक दोहराने योग्य ग्रिड जिसे आपके उपयोगकर्ता गलती से नहीं तोड़ सकते।

• FAQ

  प्रश्न और उत्तर जोड़े, प्रकाशित पृष्ठ में विस्तार योग्य।

• संपर्क करें

  एक फॉर्म जो आपके समापन बिंदु से जुड़ा हुआ है, न कि किसी तीसरे पक्ष का।

• CTA

  रूपांतरण ब्लॉक, आपकी बटन शैलियों में लॉक है।

• पाद लेख

  एक साझा पाद लेख जो हर पृष्ठ पर एक समान रहता है।

टेम्प्लेट यह है कि कैसे एक बिल्डर अपने उपयोगकर्ताओं को सिखाता है कि अच्छा कैसा दिखता है। एक खाली कैनवास डराने वाला है; आपके ग्राहकों की नौकरियों के आसपास बनाया गया एक टेम्पलेट सेट एक उत्पाद सुविधा है।

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

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

• एक डोमेन टेनेंट कॉन्फ़िगरेशन है

  होस्टनाम को कार्यस्थान के विरुद्ध संग्रहीत करें, स्वामित्व की पुष्टि करें, फिर इसके लिए इनबाउंड अनुरोधों को उस टेनेंट के प्रकाशित पृष्ठों पर रूट करें.

• प्रमाणपत्र स्वचालित करने के लिए आपके हैं

  प्रति ग्राहक डोमेन प्रमाणपत्र जारी करना और नवीनीकृत करना एक प्लेटफ़ॉर्म ज़िम्मेदारी है, चाहे आप इसे स्वयं चलाएं या इसे किसी होस्ट को सौंपें।

• प्रकाशन एक परिनियोजन हो सकता है

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

• डोमेन मौजूद होने से पहले पूर्वावलोकन करें

  प्रत्येक पृष्ठ को शुरू से ही एक प्लेटफ़ॉर्म-होस्टेड पूर्वावलोकन URL दें, इसलिए समीक्षा और अनुमोदन कभी भी DNS पर प्रतीक्षा न करें।

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

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

उदाहरणात्मक पंक्तियाँ। GrapesJS में कोई ऑडिट लॉग नहीं है; ट्रेल आपके एप्लिकेशन द्वारा तब लिखा जाता है जब यह सेव, अनुमोदन या प्रकाशन को संभालता है, जो एकमात्र स्थान भी है जो जानता है कि कौन सा उपयोगकर्ता कार्य कर रहा है।

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

1. संपादन इंजनखुला स्रोत
2. व्हाइट-लेबल थीम और कस्टम UIPlugin
3. कस्टम ब्लॉकPlugin
4. टेम्पलेट्सPlugin
5. भूमिकाएं और अनुमतियांआपका ऐप
6. भंडारPlugin
7. संपत्तिPlugin
8. ऑडिट लॉगआपका ऐप
9. निर्यातित मालPlugin
10. प्रकाशन-व्‍यवसायPlugin

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

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

ब्रांड

डिफ़ॉल्ट इंटरफ़ेस बदलें: कस्टम पैनल, एक विशेष शेल, या आपके अपने घटकों द्वारा प्रदान किया गया एक संपादक।

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

Grapesjs Wix Like

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

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

Grapesjs Paneless

एक पूर्ण वैकल्पिक संपादक खोल, शिपिंग विकल्प के रूप में और क्रोम को कितनी दूर ले जाया जा सकता है, इसके प्रमाण के रूप में उपयोगी है।

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

React UI for GrapesJS

संपादक इंटरफ़ेस को अपने स्वयं के React घटकों के साथ प्रस्तुत करें, ताकि बिल्डर आपके डिज़ाइन सिस्टम को अनुमानित करने के बजाय विरासत में मिले।

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

Borders Color

चयन हाइलाइट को अपने ब्रांड रंगों के अनुरूप लाएं - एक छोटा सा विवरण जो चुपचाप एक अनब्रांडेड संपादक देता है।

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

सामग्री

आपके उपयोगकर्ता जिन ब्लॉकों, अनुभागों और टेम्पलेटों के साथ रचना करते हैं - साथ ही उनके चारों ओर पृष्ठ और प्रतीक प्रबंधन।

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

Users Blocks

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

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

Templates Manager

उस टेम्पलेट सेट को प्रबंधित करें जिससे आपके उपयोगकर्ता प्रति उत्पाद या प्रति ग्राहक शुरू करते हैं.

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

Symbols

पुनः प्रयोज्य लिंक किए गए अनुभाग: एक हेडर को एक बार अपडेट करें और इसे ले जाने वाले प्रत्येक पृष्ठ को इस प्रकार है।

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

Pages Manager

एक संपादन सत्र के अंदर बहु-पृष्ठ परियोजनाएं, जो कि अधिकांश ग्राहक कार्यक्षेत्रों को वास्तव में आवश्यकता होती है।

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

अवसरंचना

परियोजनाएं और संपत्तियां कहां रहती हैं, और आउटपुट संपादक को कैसे छोड़ता है।

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

Directus Storage

ब्राउज़र स्टोरेज के बजाय हेडलेस बैकएंड पर प्रोजेक्ट को बनाए रखें - स्टोरेज सीम का एक काम किया हुआ उदाहरण।

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

Grapesjs Cloudinary

प्रबंधित मीडिया संग्रहण के माध्यम से संपत्ति लाइब्रेरी को रूट करें, जिसमें आपके पक्ष में प्रति-किरायेदार फ़ोल्डर हों।

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

Export Zip

उपयोगकर्ताओं को उनके द्वारा बनाए गए पृष्ठ का एक डाउनलोड करने योग्य संग्रह, मार्कअप और शैलियों में शामिल हैं।

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

Storage Rate Limit

थ्रॉटल कितनी बार परियोजनाओं को वापस लिखा जाता है, जो मायने रखता है जैसे ही कई किरायेदार एक साथ संपादित करते हैं।

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

प्रकाशन और संचालन

परियोजनाएं, परिनियोजन लक्ष्य, पुनर्प्राप्ति और छोटे विवरण जो एक संपादक को समाप्त महसूस कराते हैं।

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

Grapesjs Project Manager

एक संपादक आवृत्ति में कई प्रोजेक्ट प्रबंधित करें — कैटलॉग में कार्यक्षेत्र शेल के सबसे नज़दीकी चीज़.

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

Grapesjs Netlify

अनुकूलित करने के लिए एक प्रकाशन पैटर्न के रूप में, संपादक से सीधे एक स्थिर होस्ट के लिए निर्मित पृष्ठ को तैनात करें।

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

Autosave & Restore — Crash Recovery for GrapesJS

पुनर्स्थापना के साथ ऑटोसेव करें, इसलिए खोया हुआ टैब आपके ग्राहक के लिए खोई हुई दोपहर नहीं है।

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

Custom Fonts

संपादक में अपने स्वयं के टाइपफेस लोड करें ताकि संपादन करते समय उपयोगकर्ता जो देखते हैं वह विज़िटर को मिलने वाली चीज़ से मेल खाता है।

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

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

कीमतें निर्माण समय पर मार्केटप्लेस लिस्टिंग कीमतें हैं और अभिविन्यास के लिए दिखाए जाते हैं।

GrapesJS विज़ुअल एडिटिंग फाउंडेशन प्रदान करता है। GJS.Market प्लगइन्स आपकी टीम को आंतरिक रूप से हर सुविधा बनाने की आवश्यकता के बिना विशेष कार्यक्षमता जोड़ सकते हैं। नीचे दिए गए दोनों मार्ग वैध हैं - सवाल यह है कि स्टैक के कौन से हिस्से वास्तव में आपके विभेदक हैं।

सुविधा द्वारा सुविधा, क्या आप अपने आप को एक स्थापित इंजन पहले से ही उजागर करता है के खिलाफ लिख रहे होंगे. अनुप्रयोग-परत के रूप में चिह्नित पंक्तियों इस तालिका के ईमानदार आधे हैं: एक संपादन इंजन उन्हें मालिक नहीं कर सकते हैं, इसलिए वे किसी भी तरह से अपनी प्लेट पर हैं.

फैसले वर्तमान रिलीज़ को दर्शाते हैं, 2026-09-02 को फिर से सत्यापित करते हैं। "एप्लिकेशन लेयर" का अर्थ है कि क्षमता आपके खातों और बुनियादी ढांचे पर निर्भर करती है, न कि यह गायब है।

तीन संबंधित निर्णय जिन पर चर्चा की जाती है जैसे कि वे एक थे। वे प्रतिस्पर्धा करने के बजाय ढेर हो जाते हैं: अधिकांश उत्पाद इस क्रम में तीनों करते हैं।

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

एक पारंपरिक चार-स्तरीय आकार, जो मूल्य सूची निर्धारित करने के बजाय किरायेदारी के निहितार्थ को ठोस बनाने के लिए दिखाया गया है।

1. 01

   निःशुल्क

   एक कार्यक्षेत्र, एक छोटी पृष्ठ सीमा, प्लेटफ़ॉर्म-होस्ट किए गए पूर्वावलोकन URL.

2. 02

   प्रो

   अधिक पृष्ठ, पूर्ण टेम्पलेट सेट, एक कस्टम डोमेन।

3. 03

   टीम

   प्रकाशन से पहले कई सीटें, भूमिकाएं और एक अनुमोदन चरण।

4. 04

   उद्यमिता

   एकाधिक संगठन, एक ऑडिट ट्रेल, कस्टम ब्लॉक और समर्थन शर्तें।

केवल उदाहरण। किस स्तर से संबंधित है यह आपके बाजार पर निर्भर करता है - लेकिन ध्यान दें कि इस पृष्ठ पर पहले से अनुमति और किरायेदारी सुविधाओं से कितनी सीढ़ी बनी है।

आप अपने मूल्य निर्धारण, योजनाओं और ग्राहक संबंधों को नियंत्रित करते हैं।

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

• अनुकूलन

  इंटरफ़ेस मार्कअप और कॉन्फ़िगरेशन है जिसे आप पढ़ सकते हैं, बदल सकते हैं और बढ़ा सकते हैं - थीम वाला ब्लैक बॉक्स API नहीं।

• स्व-होस्टिंग

  संपादक वहां चलता है जहां आपका एप्लिकेशन चलता है, इसलिए परियोजनाओं और परिसंपत्तियों को कभी भी आपके बुनियादी ढांचे को छोड़ना नहीं पड़ता है।

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

  एक प्रलेखित प्लगइन आर्किटेक्चर, साथ ही मौजूदा प्लगइन्स का एक पारिस्थितिकी तंत्र शुरू करने के बजाय अनुकूलित करने के लिए।

• एकीकरण की स्वतंत्रता

  भंडारण, संपत्ति और आदेश सीम हैं जिन्हें आप अपनी सेवाओं पर इंगित करते हैं।

• बुनियादी ढांचे पर नियंत्रण

  परिनियोजन, उन्नयन और डेटा स्थान आपके शेड्यूल पर आपके निर्णय हैं।

• ऑडिटेबिलिटी

  आप उस कोड को पढ़ सकते हैं जिसे आप ग्राहकों को भेज रहे हैं, जो एक प्राथमिकता के बजाय तेजी से एक खरीद आवश्यकता है।

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

• React

  संपादक को अपने रेंडर चक्र से लड़ने दिए बिना एक घटक वृक्ष में माउंट करना।

  React पेज बिल्डर

• Next.js

  केवल-क्लाइंट संपादक, सर्वर-रेंडर किए गए प्रकाशित पृष्ठ, और उनके बीच की सीमा।

  Next.js पेज बिल्डर

• Vue

  जीवनचक्र, रेफरी और टियरडाउन जब संपादक Vue घटक के अंदर रहता है।

  GrapesJS Vue के साथ

• Angular

  घटक सेटअप, Angular एप्लिकेशन में पहचान और सफाई बदलें।

  GrapesJS Angular के साथ

• सादा जावास्क्रिप्ट

  कोई ढांचा नहीं - एक स्क्रिप्ट टैग, एक कंटेनर तत्व और एक इनिट कॉल।

  बुनियादी बातों से शुरू करें

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

• आलसी-लोड संपादक

  जब कोई उपयोगकर्ता संपादक खोलता है, तब संपादन बंडल लोड करें, न कि जब वे आपका डैशबोर्ड खोलते हैं।

• संपादक की स्थिति को अपने ऐप्लिकेशन की स्थिति से बाहर रखें

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

• बड़े परिसंपत्ति पुस्तकालयों को पृष्ठांकित करें

  हजारों छवियों वाले एक किरायेदार को एक लंबी सूची के बजाय एक पृष्ठांकित, खोज योग्य पिकर की आवश्यकता होती है।

• आलसी-लोड भारी प्लगइन्स

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

• रनटाइम को अलग करें

  संपादक को जो कुछ भी चाहिए वह उस बंडल में नहीं है जिसे एक विज़िटर किसी प्रकाशित पृष्ठ के लिए डाउनलोड करता है।

• Optimize स्वतंत्र रूप से प्रकाशित आउटपुट

  प्रकाशित पृष्ठों के लिए छवियाँ, महत्वपूर्ण CSS और कैशिंग आपकी रेंडरिंग परत द्वारा तय की जाती है, जहां आपका पूर्ण नियंत्रण होता है।

संलेखन वातावरण और प्रकाशित वेबसाइट को समान रनटाइम आवश्यकताओं की आवश्यकता नहीं है।

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

• प्रत्येक API कॉल को प्रमाणित करें

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

• अनुमतियाँ सर्वर-साइड मान्य करें

  सर्वर पर फिर से जांचें कि इंटरफ़ेस पहले से क्या छिपा हुआ है। एक छिपा हुआ बटन एक UX affordance है, अभिगम नियंत्रण नहीं।

• किरायेदार डेटा को अलग करें

  संगठन के अनुसार प्रत्येक क्वेरी को स्कोप करें, और एक ऐसे दायरे को प्राथमिकता दें जिसे प्रत्येक डेवलपर को याद रखना चाहिए।

• अपलोड की पुष्टि करें

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

• उपयोगकर्ता सामग्री को स्वच्छ करें

  एक विज़ुअल बिल्डर मनमाना मार्कअप उत्पन्न कर सकता है। जानबूझकर तय करें कि कस्टम स्क्रिप्ट की अनुमति है या नहीं, और तदनुसार sanitize।

• प्रकाशन समापन बिंदुओं को सुरक्षित रखें

  प्रकाशन से जनता जो देखती है उसे बदल देती है। इसे दर-सीमित करें, इसे स्पष्ट रूप से अधिकृत करें और रिकॉर्ड करें कि इसे किसने ट्रिगर किया।

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

  एक सहेजा गया प्रोजेक्ट उपयोगकर्ता इनपुट है। इसे संग्रहीत करने या पुनः प्रस्तुत करने से पहले इसके आकार को मान्य करें।

• क्लाइंट-साइड अनुमतियों पर कभी भी भरोसा न करें

  ब्लॉक सूची और पैनल सेट कॉन्फ़िगरेशन हैं जिनके बारे में ब्राउज़र को झूठ बोलने के लिए बनाया जा सकता है।

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