एक बनाएं नो-कोड वेबसाइट बिल्डर GrapesJS के साथ

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

इंजन के ऊपर और नीचे की हर परत आपका उत्पाद है। यही वह जगह है जहां आपका भेदभाव रहता है - और यह वह जगह है जहां आपका इंजीनियरिंग समय जाना चाहिए।

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

सर्वर की आवश्यकता के लिए कुछ भी GrapesJS के अंतर्गत सूचीबद्ध नहीं है। संपादक ब्राउज़र में चलता है; इसमें कोई धारणा नहीं है कि किसने साइन इन किया है।

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

• 01वैध ड्रॉप लक्ष्य और नेस्टिंग नियमों के साथ एक ड्रैग-एंड-ड्रॉप कैनवास
• 02प्रकार, डिफ़ॉल्ट और प्रति-प्रकार व्यवहार के साथ एक घटक प्रणाली
• 03DOM हेरफेर जो मनमाने ढंग से उपयोगकर्ता संरचना से बचता है
• 04शैली प्रबंधन जो वास्तविक CSS लिखता है, इनलाइन सूप नहीं
• 05ब्रेकप्वाइंट पर उत्तरदायी संपादन
• 06उपरोक्त में से प्रत्येक पर पूर्ववत करें/फिर से करें
• 07एक ब्लॉक पैलेट उपयोगकर्ता वास्तव में इसके बारे में तर्क कर सकते हैं
• 08पुनः प्रयोज्य घटक जो एक ही बार में हर जगह अपडेट होते हैं
• 09परिसंपत्ति प्रबंधन: अपलोड करें, ब्राउज़ करें, बदलें, हटाएं
• 10एक परत पेड़ यह चुनने के लिए कि एक माउस क्या नहीं पहुंच सकता है
• 11एक कमांड सिस्टम ताकि सुविधाएँ पता करने योग्य और स्क्रिप्ट योग्य हों
• 12दृढ़ता जो काम का एक घंटा भी नहीं खोती है
• 13क्रमांकन पुनः लोड करने और अंतर करने के लिए पर्याप्त स्थिर है
• 14पूर्वावलोकन जो एक विज़िटर को दिखाई देने वाली चीज़ों से मेल खाता है
• 15प्रकाशन जो स्वच्छ, परिनियोजन योग्य आउटपुट उत्पन्न करता है
• 16कस्टम UI, क्योंकि डिफ़ॉल्ट पैनल कभी भी आपका उत्पाद नहीं होते हैं
• 17एक प्लगइन आर्किटेक्चर, या पूरी चीज़ कैल्सीफ़ाई करती है

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

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

• Canvas↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)लाइव संपादन सतह आपके उपयोगकर्ता सीधे हेरफेर करते हैं।
• Components↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)आपके द्वारा परिभाषित टाइप किए गए नोड्स: एक मूल्य निर्धारण कार्ड एक पैराग्राफ से अलग व्यवहार कर सकता है।
• Block Manager↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)पैलेट। आप तय करते हैं कि इसमें क्या दिखाई देता है, प्रति उपयोगकर्ता।
• Style Manager↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)शैली क्षेत्र और गुण - इसे अपने डिज़ाइन टोकन तक सीमित रखें।
• Trait Manager↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)प्रति-घटक सेटिंग फ़ील्ड: लिंक लक्ष्य, वैकल्पिक पाठ, आईडी.
• Asset Manager↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)छवि ब्राउज़िंग और अपलोड, आपके अपने भंडारण की ओर इशारा करते हुए।
• Storage Manager↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)आपके API का ग्राहक। अपने समापन बिंदुओं पर प्रोजेक्ट JSON लोड और स्टोर करें।
• Layer Manager↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)घटक वृक्ष, इसलिए नेस्टेड संरचना चयन योग्य रहती है।
• Commands↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)प्रत्येक क्रिया एक नामित, कॉल करने योग्य कमांड है जिसे आप जोड़ सकते हैं।
• Panels↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)संपादक क्रोम को पूरी तरह से जोड़ें, हटाएं या फिर से बनाएं।
• Device Manager↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)आपके ब्रेकपॉइंट, मनमाने ढंग से नहीं, कैनवास पर।
• Plugins↗दस्तावेज़ीकरण (एक नए टैब में खुलता है)एक प्रलेखित एक्सटेंशन बिंदु - वह सीम जिसमें मार्केटप्लेस प्लग करता है।

संस्करण 0.23.6, लाइसेंस प्राप्त BSD-3-Clause; आधिकारिक React आवरण @grapesjs/react MIT है। दोनों व्यावसायिक उपयोग की अनुमति देते हैं। GrapesJS जो शिप नहीं करता है वह भी उतना ही महत्वपूर्ण है: कोई बैकएंड नहीं, कोई उपयोगकर्ता नहीं, कोई अनुमति नहीं और कोई प्रकाशन पाइपलाइन नहीं - ऊपर जिम्मेदारी की सीमा देखें।

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

const editor = grapesjs.init({
  container: '#editor',
  // 1. The user only ever sees blocks you registered.
  blockManager: { blocks: approvedBlocks(user.role) },
  // 2. The Style Manager only offers properties you allow.
  styleManager: { sectors: allowedSectors(user.role) },
  // 3. Devices are your breakpoints, not arbitrary widths.
  deviceManager: { devices: BRAND_BREAKPOINTS },
});

// 4. Lock the chrome: a marketer never edits the header or the footer.
editor.on('component:add', (component) => {
  if (LOCKED_TYPES.includes(component.get('type'))) {
    component.set({
      editable: false,
      draggable: false,
      removable: false,
      copyable: false,
    });
  }
});

// 5. Hide panels this role has no business seeing.
if (!user.can('edit_code')) {
  editor.Panels.removeButton('options', 'export-template');
}

// Every line above is a RENDERING decision. The server still checks
// user.can('publish') before it accepts the payload.

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

1. 1शुरुआती

   पेज भरें

   उन लोगों के लिए जिन्होंने कभी डिज़ाइन टूल नहीं खोला है और उन्हें कभी ऐसा नहीं करना चाहिए।

   • स्थान में पाठ संपादित करें
   • एसेट लाइब्रेरी से इमेज बदलें
   • स्वीकृत ब्लॉकों में गिरावट
   • किसी टेम्पलेट में अनुभागों को पुनः व्यवस्थित करें
   • कोई स्टाइल पैनल बिल्कुल नहीं
2. 2बाज़ारिया

   पेज बनाएं

   वह सब कुछ जोड़ता है जो एक अभियान स्वामी को डेवलपर के बिना शिप करने के लिए आवश्यक है.

   • स्क्रैच से नए अनुभाग बनाएं
   • टेम्पलेट्स से शुरू करें
   • लेआउट और रिक्ति समायोजित करें
   • प्रतिक्रियाशील व्यवहार की जाँच करें और ठीक करें
   • अपने टोकन में स्वीकृत शैलियों को संपादित करें
3. 3पावर उपयोगकर्ता

   सिस्टम डिजाइन करें

   उन नियंत्रणों को जोड़ता है जिनकी अपेक्षा एक इन-हाउस डिज़ाइनर या एजेंसी ऑपरेटर करता है।

   • उन्नत घटक: टेबल, स्लाइडर, फॉर्म
   • फ्री-फॉर्म लेआउट नियंत्रण
   • पूर्ण Style Manager
   • पुनः प्रयोज्य प्रतीकों और टेम्पलेट्स को सहेजें
   • कस्टम वर्ग और राज्य

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

विज़ुअल एडिटर को सुरक्षित बनाने का सबसे तेज़ तरीका यह है कि इसे पेश करने के लिए कुछ भी असुरक्षित न दिया जाए। अपने टोकन को Style Manager में और अपने घटकों को Block Manager में फीड करें, और "ऑफ-ब्रांड" एक समीक्षा समस्या बनना बंद हो जाता है - यह पहुंच से बाहर हो जाता है।

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

• Hero

  शीर्षक, उप-पंक्ति, कार्रवाई के लिए एक कॉल।

• सुविधाऐं

  दो से चार कॉलम फीचर ग्रिड।

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

  अपने स्वयं के योजना डेटा से जुड़े कार्ड की योजना बनाएं।

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

  उद्धरण, एट्रिब्यूशन, वैकल्पिक लोगो।

• FAQ

  प्रश्न और उत्तर जोड़े।

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

  एक संदेश, एक बटन।

• संपर्क करें

  अपने समापन बिंदु पर पोस्ट करने वाले फ़ील्ड बनाएं।

• पाद लेख

  आमतौर पर बंद, हमेशा मौजूद।

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

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

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

यह तालिका जानबूझकर संकीर्ण है: यह केवल संपादन इंजन की तुलना करती है। "आपका आवेदन" चिह्नित जिम्मेदारी सीमा पर सब कुछ किसी भी तरह से आपका काम है - यही बात है।

GrapesJS 0.23.6 दस्तावेज़ीकरण के विरुद्ध क्षमताओं की जाँच की गई; कैटलॉग लिस्टिंग और कीमतें सत्यापित 2026-09-03।

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

• कस्टम ब्रांडिंग

  संपादक क्रोम में आपके रंग, प्रकार और आइकनोग्राफी।

• कस्टम पैनल

  अपने उपयोगकर्ताओं के वास्तविक कार्यों के आसपास टूलबार का पुनर्निर्माण करें।

• कस्टम घटक

  आपके डिज़ाइन सिस्टम के घटकों, जिस तरह से आपकी टीम उन्हें नाम देती है।

• कस्टम शब्दावली

  यदि आपके उपयोगकर्ता "मॉड्यूल" कहते हैं, तो संपादक को "घटक" नहीं कहना चाहिए।

• कम UI, अधिक नहीं

  नियंत्रणों को हटाना सबसे कम उपयोग किया जाने वाला अनुकूलन है।

• नियंत्रित अनुभव

  डिफ़ॉल्ट, खाली स्थिति और ऑनबोर्डिंग जो आपके बाकी उत्पाद से मेल खाते हैं।

GrapesJS ब्रांडिंग को हटाना तुच्छ है और BSD-3-Clause लाइसेंस द्वारा अनुमत है। संपादक को ऐसा महसूस कराना कि आपका उत्पाद एक डिज़ाइन प्रोजेक्ट है - पैनल, शब्दावली, डिफ़ॉल्ट, और वह सब कुछ जो उपयोगकर्ता नहीं देखता है।

GrapesJS एक सादे DOM तत्व में बदल जाता है, इसलिए इसे एकीकृत करना ज्यादातर एक सवाल होता है कि कौन सा जीवनचक्र हुक 'grapesjs.init()' कहता है और इसे कब साफ किया जाता है। विशिष्टताओं के लिए अपना ढांचा चुनें।

• React

  एक प्रभाव जो माउंट पर आरंभ होता है और अनमाउंट पर नष्ट हो जाता है। आधिकारिक @grapesjs/react आवरण (MIT) उपलब्ध है यदि आप संपादक के स्वयं के UI को React घटकों के रूप में चाहते हैं।

  React एकीकरण देखें

• Vue

  'onMounted' से एक कंपोजेबल कॉलिंग और 'onBeforeUnmount' से नष्ट करें। कोई आधिकारिक Vue रैपर नहीं है - आप इसे सीधे API कहते हैं।

  Vue एकीकरण देखें

• Angular

  'ngAfterViewInit' और 'ngOnDestroy' का उपयोग करने वाला एक घटक, जिसमें संपादक को Angular के परिवर्तन का पता लगाने के बाहर रखा गया है। कोई आधिकारिक Angular आवरण मौजूद नहीं है।

  Angular एकीकरण देखें

• Next.js

  केवल क्लाइंट-साइड: संपादक मॉड्यूल स्कोप पर 'विंडो' को छूता है, इसलिए इसे SSR अक्षम के साथ गतिशील आयात के माध्यम से लोड करें।

  Next.js एकीकरण देखें

आपका ढांचा एप्लिकेशन को शक्ति प्रदान करता है। GrapesJS दृश्य संपादन परत को शक्ति प्रदान करता है।

"संपादक काम करता है" और "हम ग्राहकों को उस पर रख सकते हैं" के बीच का अंतर मोटे तौर पर यह सूची है। प्रत्येक समूह उस अनुभाग से वापस जुड़ता है जो इसका तर्क देता है।

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

• प्रकाशित आउटपुट को साफ करें

  उत्पादित HTML और CSS को संग्रहीत या परोसने से पहले सर्वर पर एक जांचे हुए सैनिटाइज़र के माध्यम से चलाएं।

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

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

• बैकएंड में अनुमतियाँ लागू करें

  प्रत्येक सहेजें, स्वीकृत करें और प्रकाशित करें सर्वर पर फिर से अधिकृत हैं, जो भी संपादक ने दिखाया है।

• क्लाइंट-साइड प्राधिकरण पर कभी भरोसा न करें

  एक छिपा हुआ पैनल एक UI स्थिति है। संपादक का API अभी भी ब्राउज़र कंसोल से पहुंचा जा सकता है।

• संग्रहीत प्रोजेक्ट डेटा को सत्यापित करें

  Project JSON उपयोगकर्ता इनपुट भी है। रेंडरर को वापस फीड करने से पहले इसके आकार को मान्य करें।

• कस्टम कोड निष्पादन को नियंत्रित करें

  यदि आप किसी कस्टम-कोड घटक की अनुमति देते हैं, तो जानबूझकर तय करें कि यह कहाँ चलता है और कौन एक जोड़ सकता है.

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

  उन्हें दर-सीमा दें, उन्हें प्रति प्रोजेक्ट स्कोप करें, और प्रत्येक कॉल को लॉग करें।

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

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

• मांग पर आरंभ करें

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

• आलसी-लोड वैकल्पिक सुविधाएँ

  डायनेमिक-आयात प्लगइन्स वर्तमान भूमिका वास्तव में उपयोग कर सकती है।

• केवल वही प्लगइन्स लोड करें जिनकी आपको आवश्यकता है

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

• ब्लॉक कैटलॉग को क्यूरेट रखें

  सैकड़ों ब्लॉक पैलेट को धीमा कर देते हैं और उपयोगकर्ता को पंगु बना देते हैं।

• एसेट ऑप्टिमाइज़ करें

  अपलोड पर आकार बदलें और फिर से एन्कोड करें - उपयोगकर्ता 8 एमबी फ़ोटो को hero में छोड़ देंगे।

• डिबाउंस autosave

  हर कुछ सेकंड में एक लिखता है, प्रति कीस्ट्रोक एक नहीं।

• प्रोजेक्ट का आकार देखें

  इनलाइन किए गए base64 छवियाँ प्रोजेक्ट पंक्ति को मेगाबाइट में बदल देती हैं। संदर्भ संग्रहीत करें, डेटा नहीं।

प्रकाशित पृष्ठ को कभी भी संपादक को नहीं ले जाना चाहिए। एक आगंतुक HTML और CSS लोड करता है; केवल एक लेखक ही इंजन लोड करता है।

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

• अनुभाग जनरेट करें

  अपने पंजीकृत ब्लॉकों से एक अनुभाग इकट्ठा करें, फ्री-फॉर्म मार्कअप से नहीं।

• कॉपी जनरेट करें

  किसी मौजूदा लेआउट के टेक्स्ट नोड्स भरें, जिससे संरचना अछूती रह जाए.

• लेआउट सुझाएं

  एक घोषित लक्ष्य के लिए अनुमोदित घटकों की व्यवस्था का प्रस्ताव करें।

• सामग्री को रूपांतरित करें

  जगह-जगह लंबाई, टोन या लोकेल के लिए फिर से लिखें।

• घटक उत्पन्न करें

  एक डेवलपर की समीक्षा के लिए एक नई घटक परिभाषा का मसौदा तैयार करें - कभी भी ऑटो-रजिस्टर करने के लिए।

• मौजूदा पृष्ठों को ऑप्टिमाइज़ करें

  मापने योग्य मानदंडों के विरुद्ध संपादन का सुझाव दें और एक मानव को उन्हें अनुमोदित करने दें।

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

ऊपर दी गई क्षमताएं एक पैटर्न का वर्णन करती हैं जिसे आप संपादक के अपने APIs पर बना सकते हैं, न कि शिप की गई GJS.Market सुविधा। कैटलॉग में एक एआई शेल्फ है - थंबनेल जनरेशन, जीपीटी-समर्थित सहायक - और यह ऊपर जुड़ा हुआ है।