वास्तुकला, अनुकूलन, दृश्य संपादन, HTML/CSS नियंत्रण, एक्स्टेंसिबिलिटी, भंडारण और WordPress एकीकरण में Gutenberg और GrapesJS की तुलना करें।जानें कि Gutenberg कब बेहतर विकल्प है, जब GrapesJS अधिक समझ में आता है, और GrapesJS को WordPress के लिए कस्टम विज़ुअल संपादन परत के रूप में कैसे उपयोग करें।
एक कस्टम WordPress संपादक का निर्माण? देखें कि यह कैसे काम करता है →
WordPress की संपादन सतह।
WordPress यह तय करता है कि सामग्री कहाँ रहती है और इसे कैसे प्रस्तुत किया जाता है।
एक संपादक जिसे आप अपने उत्पाद के अंदर रखते हैं।
आप तय करते हैं कि सामग्री कहाँ रहती है और इसे कैसे प्रस्तुत किया जाता है।
दोनों वास्तविक दृश्य संपादक हैं और दोनों सक्रिय रूप से बनाए रखे गए हैं। वे अलग-अलग नौकरियों के लिए बनाए गए हैं, इसलिए उपयोगी प्रश्न यह है कि आपके पास कौन सी नौकरी है।
WordPress उत्पाद है, और संपादन इसके अंदर होता है।
यह आपका वर्णन करता है
आपको जो कुछ भी चाहिए वह पहले से ही स्थापित है। इसे बदलने के बजाय इसे बढ़ाएं।
Block Editor Handbook पढ़ेंसंपादक आपके उत्पाद का हिस्सा है, और आपको इसे आकार देने की आवश्यकता है।
यह आपका वर्णन करता है
आप एक संपादक इंजन से शुरू करते हैं और उसके चारों ओर उत्पाद का निर्माण करते हैं।
अपने संपादक की योजना बनाएंचुनाव इस बात पर कम निर्भर करता है कि किस संपादक में अधिक सुविधाएँ हैं और आपके उत्पाद को कैसे काम करने की आवश्यकता है, इस पर अधिक निर्भर करता है।
इस पृष्ठ के नीचे लगभग हर अंतर एक चीज से अनुसरण करता है: प्रत्येक परियोजना का हिस्सा बनने के लिए क्या बनाया गया था।
Gutenberg WordPress सामग्री निर्माण और प्रकाशन अनुभव में गहराई से एकीकृत है। यह पोस्ट और पृष्ठों के लिए संपादन स्क्रीन है, और - साइट संपादक के माध्यम से - टेम्पलेट्स और संपूर्ण साइट लेआउट के लिए। इसके ब्लॉक WordPress प्लगइन्स और थीम द्वारा पंजीकृत हैं, इसका मीडिया WordPress लाइब्रेरी से आता है, इसकी सामग्री WordPress डेटा के रूप में सहेजी जाती है, और एक विज़िटर अंततः जो देखता है वह WordPress और सक्रिय थीम द्वारा निर्मित होता है।
GrapesJS एक संपादक ढांचा है जिसे एक बड़े एप्लिकेशन में एम्बेड किया जा सकता है और उत्पाद की आवश्यकताओं के अनुसार अनुकूलित किया जा सकता है। यह आपके द्वारा नियंत्रित पृष्ठ पर एक तत्व में प्रस्तुत करता है। इसमें कोई सामग्री मॉडल नहीं है, कोई उपयोगकर्ता नहीं है, कोई अनुमति नहीं है और कोई प्रकाशन चरण नहीं है, क्योंकि वे उस एप्लिकेशन से संबंधित हैं जो इसे होस्ट करता है। यह जो आपूर्ति करता है वह संपादक है: एक कैनवास, एक घटक वृक्ष, ब्लॉक, शैली और परिसंपत्ति प्रबंधन, आदेश, और यह सब बढ़ाने के लिए एक प्लगइन सिस्टम।
इनमें से कोई भी दूसरे की आलोचना नहीं है। एक CMS जो आपकी प्रकाशन पाइपलाइन का मालिक है, वह ठीक वैसा ही है जैसा आप चाहते हैं जब वेबसाइट उत्पाद हो। एक ढांचा जिसके पास कुछ भी नहीं है, वह बिल्कुल वैसा ही है जैसा आप चाहते हैं जब संपादक को आपके पास पहले से मौजूद किसी चीज़ के अंदर रहना पड़ता है।
Gutenberg एक WordPress-मूल संपादन अनुभव है। GrapesJS आपके स्वयं के दृश्य संपादन अनुभव के निर्माण के लिए एक रूपरेखा है।
प्रत्येक कॉलम को ऊपर से नीचे तक पढ़ें। दोनों में परतें एक ही विचार हैं - कुछ एक संपादक को होस्ट करता है, संपादक सामग्री का उत्पादन करता है, सामग्री संग्रहीत की जाती है और फिर प्रस्तुत की जाती है - लेकिन दो परियोजनाएं विपरीत छोर पर उस श्रृंखला में प्रवेश करती हैं।
संपादन WordPress प्रकाशन पाइपलाइन का एक चरण है। आपके द्वारा पंजीकृत ब्लॉक एक श्रृंखला में प्लग होते हैं जो WordPress के पास अंत से अंत तक होती है।
आप एक पूर्ण, परिचित प्रकाशन प्रणाली प्राप्त करते हैं और इसकी परंपराओं को स्वीकार करते हैं: WordPress भंडारण, प्रतिपादन और संपादन स्क्रीन के आकार का मालिक है।
संपादक शुरुआती बिंदु है। इसके आस-पास सब कुछ - भंडारण, उपयोगकर्ता, प्रकाशन, फ्रंटएंड - चुनने के लिए आपका है, क्योंकि ढांचा इसमें से कुछ भी आपूर्ति नहीं करता है।
ढांचे में शामिल
आप संपादन अनुभव पर पूर्ण नियंत्रण प्राप्त करते हैं और उन परतों को लेते हैं जो अन्यथा आपूर्ति की जाती हैं।
Gutenberg WordPress प्रकाशन मॉडल से शुरू होता है। GrapesJS विज़ुअल एडिटर से ही शुरू होता है।
ध्यान दें कि प्रत्येक श्रृंखला कहाँ से शुरू होती है। Gutenberg का पहला बॉक्स WordPress है: संपादक मौजूद है क्योंकि इसके चारों ओर एक प्रकाशन प्रणाली है। GrapesJS श्रृंखला आपके आवेदन से शुरू होती है, और ढांचा बिल्कुल एक लिंक पर कब्जा कर लेता है। वह एकल अंतर नीचे दी गई तालिका में भंडारण पंक्ति, प्लगइन पंक्ति और व्हाइट-लेबल पंक्ति की व्याख्या करता है।
क्षमताएं, स्कोर नहीं। जहां दोनों तरफ एक क्षमता मौजूद है, पंक्ति ऐसा कहती है, और जहां एक पक्ष सेटिंग के बजाय काम के माध्यम से उस तक पहुंचता है, पंक्ति इसके बजाय कहती है।
| योग्यता | Gutenberg | GrapesJS |
|---|---|---|
| WordPress एकीकरण | मूल निवासी | कस्टम एकीकरण |
| मूल WordPress संपादन | में निर्मित | रिवाज |
| ब्लॉक के साथ संपादन | में निर्मित | में निर्मित |
| दृश्य कैनवास | में निर्मित | में निर्मित |
| कस्टम ब्लॉक और घटक | में निर्मित | में निर्मित |
| शैली प्रबंधन | WordPress नियंत्रण | Style Manager |
| संपत्ति प्रबंधन | WordPress मीडिया लाइब्रेरी | Asset Manager |
| भंडार | WordPress | कॉन्फ़िगर करने योग्य |
| HTML और CSS वर्कफ़्लो | ब्लॉक और थीम पर निर्भर करता है | मजबूत |
| कस्टम संपादक इंटरफ़ेस | एक्स्टेंसिबल | अत्यधिक अनुकूलन योग्य |
| संपादक को कैसे बढ़ाया जाता है | WordPress प्लगइन्स और ब्लॉक | GrapesJS प्लगइन्स |
| फ्रेमवर्क स्वतंत्रता | WordPress पारिस्थितिकी तंत्र | में निर्मित |
| पेज बिल्डर को एक सेवा के रूप में बेचा गया | कस्टम कार्यान्वयन | मजबूत फिट |
| एम्बेड करने योग्य संपादक | प्राथमिक उपयोग का मामला नहीं | मजबूत फिट |
| आपकी अपनी ब्रांडिंग के तहत एक संपादक | संभव | मजबूत फिट |
| बिना सिर वाले बैकएंड पर एक संपादक | संभव | मजबूत फिट |
| ईमेल संपादक | प्राथमिक उपयोग का मामला नहीं | एक्सटेंशन के साथ संभव |
हर पंक्ति को दो परियोजनाओं के स्वयं के दस्तावेज़ीकरण से पढ़ा गया था 2026-09-03. कोई भी पंक्ति किसी भी परियोजना में मौजूद अनुपस्थित क्षमता को चिह्नित नहीं करती है: Gutenberg कस्टम ब्लॉक पंजीकृत करता है, ब्लॉक पैटर्न और टेम्पलेट्स का समर्थन करता है, फ़िल्टर और slot fills को उजागर करता है, और इसके संपादक को npm पर प्रकाशित करता है - वे पंक्तियाँ हैं जो "नहीं" के बजाय "एक्स्टेंसिबल" और "संभव" पढ़ती हैं।स्रोत: Block Editor Handbook · Block पंजीकरण · Block संपादक पैकेज · साइट संपादक · GrapesJS दस्तावेज़ · Components · भंडार
उनके बगल में तारीख के साथ पढ़ें। विशेष रूप से स्टार काउंट यहां कोई फैसला नहीं है: Gutenberg रिपॉजिटरी एक फीचर प्लगइन का विकास घर है, जबकि इसके द्वारा उत्पादित ब्लॉक एडिटर WordPress की प्रत्येक प्रति के साथ स्थापित किया गया है।
| पैकेज | विवरण | लाइसेंस | जारी किया | सितारे |
|---|---|---|---|---|
| grapesjs | 0.23.6 | BSD-3-Clause | 2026-08-26 | 26,188 |
| gutenberg | 23.9.0 | GPL-2.0-or-later | 2026-09-02 | 11,747 |
| @wordpress/block-editor | 17.0.0 | GPL-2.0-or-later | — | — |
| @grapesjs/react | 2.0.0 | MIT | — | — |
Gutenberg फीचर प्लगइन WordPress कोर में बंडल किए गए ब्लॉक एडिटर से पहले रिलीज होता है, इसलिए इसकी संस्करण संख्या WordPress संस्करण से तुलनीय नहीं है। सुविधा प्लगइन की आवश्यकता है WordPress 6.9 (23.9.0). लेखन के समय WordPress कोर: 7.1. लाइसेंस की जानकारी प्रत्येक परियोजना के स्वयं के भंडार और रजिस्ट्री प्रविष्टि से पढ़ी जाती है और बदल सकती है; इस पर भरोसा करने से पहले लिंक किए गए स्रोतों की जांच करें। @wordpress/block-editor · 2026-09-03.
देखें कि एक स्टैंडअलोन विज़ुअल एडिटर मूल WordPress संपादन अनुभव से कैसे भिन्न है। यह इस पृष्ठ में चल रहा एक वास्तविक GrapesJS उदाहरण है - ब्लॉक को खींचें, इसे फिर से स्टाइल करने के लिए कुछ भी चुनें, कैनवास की चौड़ाई स्विच करें और परिसंपत्ति प्रबंधक खोलें।
आप जो देख रहे हैं वह फ्रेमवर्क का डिफ़ॉल्ट इंटरफ़ेस है। इसमें प्रत्येक पैनल, बटन और नियंत्रण बदली जा सकती है - यही वह अंतर है जो तालिका में "कस्टम संपादक इंटरफ़ेस" पंक्ति का वर्णन कर रही है।
Gutenberg का उपयोग WordPress ब्लॉक के माध्यम से पेज और लेआउट बनाने के लिए किया जा सकता है, लेकिन इसकी प्राथमिक भूमिका WordPress ब्लॉक एडिटर और कंटेंट एडिटिंग सिस्टम है।
प्रश्न आमतौर पर चार अलग-अलग चीजों को छुपाता है। उन्हें अलग करने से उत्तर सीधा हो जाता है।
वह स्क्रीन जहां कोई पोस्ट या पेज लिखा जाता है। यह Gutenberg का मुख्य काम है: एक ब्लॉक-आधारित लेखन सतह जिसने क्लासिक एकल पाठ फ़ील्ड को बदल दिया।
एक ब्लॉक थीम के साथ, एक ही ब्लॉक इंटरफ़ेस टेम्प्लेट, हेडर, पाद लेख और टेम्पलेट भागों को संपादित करता है। यह वही है जो "पेज बिल्डिंग" को इस बात का उचित विवरण देता है कि लोग इसमें क्या करते हैं।
ब्लॉक, पैटर्न और पुनः प्रयोज्य टेम्पलेट्स से एक लेआउट को असेंबल करना। Gutenberg ऐसा करता है, और इसलिए वाणिज्यिक WordPress पेज बिल्डर्स भी करते हैं जो इससे पहले के हैं।
एक लाइब्रेरी जिसे आप अपने स्वामित्व वाले एप्लिकेशन में एम्बेड करते हैं, जिसमें कोई CMS संलग्न नहीं है। यह GrapesJS है, और यह इस सूची में एक आइटम है Gutenberg को होने के लिए डिज़ाइन नहीं किया गया था।
तो: पहले तीन के लिए हाँ, और यही अधिकांश लोगों का मतलब है। यदि आप Gutenberg पेज बिल्डर विकल्प की तलाश कर रहे हैं क्योंकि आप चौथा चाहते हैं - एक संपादक जिसे आप अपने उत्पाद के अंदर रख सकते हैं - तो यह टूल की एक अलग श्रेणी है, और यह वही है जिसके बारे में यह पृष्ठ है।
ये वास्तविक, सामान्य स्थितियां हैं, और उनमें से हर एक में दूसरा संपादक जोड़ने से परियोजना बेहतर होने के बजाय बदतर हो जाती है।
पारंपरिक WordPress वेबसाइटें जहां WordPress संपूर्ण एप्लिकेशन है: सामग्री, उपयोगकर्ता, मीडिया, प्लगइन्स, थीम और होस्टिंग सभी एक ही स्थान पर।
ब्लॉग, प्रकाशन और सामग्री-भारी वेबसाइटें, जहां लेखन की सतह लेआउट सतह से अधिक मायने रखती है और संशोधन, शेड्यूलिंग और भूमिकाएं मुफ्त में आती हैं।
टीमें पहले से ही पूरी तरह से WordPress के अंदर काम कर रही हैं। एक परिचित संपादन स्क्रीन एक अधिक कॉन्फ़िगर करने योग्य स्क्रीन से अधिक मूल्यवान है जिसका उपयोग पहले किसी ने नहीं किया है।
परियोजनाएं Gutenberg ब्लॉक, पैटर्न, टेम्प्लेट और WordPress प्लगइन्स पर बहुत अधिक निर्भर करती हैं, जहां ब्लॉक लाइब्रेरी पहले से ही वर्षों के निर्णयों को एन्कोड करती है।
यदि WordPress स्वयं आपका उत्पाद है और मूल संपादन वर्कफ़्लो वही है जिसकी आपको आवश्यकता है, Gutenberg सही विकल्प हो सकता है।
इनमें से प्रत्येक एक ऐसा उत्पाद है जहां संपादक एक ऐसी सुविधा है जिसे आप शिप करते हैं, न कि एक स्क्रीन जिसमें आपकी टीम लॉग इन करती है।
WordPress संपादन इंटरफ़ेस को अपनाने के बजाय अपना स्वयं का संपादन अनुभव बनाएं - आपके पैनल, आपकी शब्दावली, आपकी बाधाएं।
लैंडिंग पेज बिल्डरविज़ुअल संपादन को सीधे अपने एप्लिकेशन के अंदर एम्बेड करें, ताकि आपके ग्राहक कभी भी एक व्यवस्थापक क्षेत्र को देखे बिना पृष्ठ बनाते हैं जो आपका नहीं है।
एक सेवा के रूप में पेज बिल्डरब्रांडिंग, इंटरफ़ेस और उपयोगकर्ता अनुभव को शुरू से अंत तक नियंत्रित करें, जिसमें उन ग्राहकों के लिए भी शामिल हैं जो इसे अपने नाम के तहत फिर से बेचते हैं।
व्हाइट-लेबल बिल्डरसामग्री बैकएंड के रूप में CMS — WordPress शामिल — का उपयोग करें जबकि GrapesJS इस पर दृश्य संपादन अनुभव प्रदान करता है।
हेडलेस CMS संपादकउपयोगकर्ताओं को लेआउट और शैलियों पर प्रत्यक्ष दृश्य नियंत्रण दें, और मालिकाना पेलोड के बजाय संपादक से HTML और CSS साफ़ करें।
HTML ड्रैग-एंड-ड्रॉप बिल्डरविज़ुअल एडिटर को किसी अन्य उत्पाद का हिस्सा बनाएं, जो आपके एप्लिकेशन के पास पहले से ही एक स्क्रीन पर लगाया गया है।
एम्बेड करने योग्य पेज बिल्डरएक तुलना का तात्पर्य एक विकल्प से है, और यह वह स्थिति है जहां एक भी नहीं है। आपको WordPress को बदलने की आवश्यकता नहीं है।
WordPress सामग्री, उपयोगकर्ताओं, अनुमतियों और बैकएंड वर्कफ़्लो को संभालना जारी रख सकता है जबकि GrapesJS दृश्य संपादन परत प्रदान करता है। इस व्यवस्था में दोनों सहकर्मी हैं: एक के पास डेटा और उसके आसपास के नियम हैं, दूसरा वही है जो एक लेखक देखता है।
आपका उत्पाद
एक एप्लिकेशन, इसके अंदर दो सिस्टम
GrapesJS
दृश्य संपादक
WordPress
सामग्री प्रबंधन
एकीकरण परत
आप इसे लिखें। दोनों के बीच कोई एक-क्लिक पुल नहीं है, और कोई भी परियोजना जिसे इस वास्तुकला की आवश्यकता है, उसके लिए बजट होना चाहिए।
API
डाटाबेस
आपका एप्लिकेशन संपादक को होस्ट करता है और WordPress के अपने REST समापन बिंदुओं पर सामग्री पढ़ता और लिखता है। WordPress अछूता रहता है; प्रमाणीकरण और क्षमता जांच वह हिस्सा है जिसे देखभाल की आवश्यकता है।
संपादक एक व्यवस्थापक स्क्रीन पर पंक्तिबद्ध है और एक nonce और एक क्षमता जांच के साथ आपके द्वारा स्वयं पंजीकृत मार्ग के माध्यम से सहेजता है। सामग्री WordPress में रहती है, और आपके उपयोगकर्ता भी ऐसा ही करते हैं।
एक सेवा संपादक और WordPress के बीच बैठती है और दोनों दिशाओं में मैपिंग का मालिक होती है। सबसे अधिक काम, और एकमात्र मार्ग जो एक से अधिक सामग्री स्रोत होने से बचता है।
हमारी WordPress एकीकरण मार्गदर्शिका प्लगइन मार्ग को अंत से अंत तक बनाती है: संपादक को व्यवस्थापक स्क्रीन पर पंक्तिबद्ध करना, REST मार्ग के माध्यम से बचत करना nonce और एक क्षमता जांच के साथ, और परिणाम को सामने के छोर पर प्रस्तुत करना।
WordPress एकीकरण मार्गदर्शिका पढ़ेंवही विभाजन, एक कदम आगे बढ़ाया गया: WordPress वेबसाइट को प्रस्तुत करना बंद कर देता है और विशुद्ध रूप से एक सामग्री बैकएंड बन जाता है, जबकि संपादक और फ्रंटएंड दोनों आपके हैं।
संपादन और वितरण
WordPress
सामग्री बैकएंड रहता है
GrapesJS
संपादन अनुभव बन जाता है
आपका फ्रंटएंड
परिणाम प्रस्तुत करता है
यह लागत के बारे में स्पष्ट होने के लायक है: एक बार जब WordPress साइट को प्रस्तुत करना बंद कर देता है, तो थीम-निर्भर प्लगइन्स इसे प्रभावित करना बंद कर देते हैं, पूर्वावलोकन को आपके फ्रंटएंड के खिलाफ फिर से बनाने की आवश्यकता होती है, और PHP में प्रस्तुत करने के लिए उपयोग किए जाने वाले कुछ भी ब्लॉक को अब कहीं और प्रस्तुत करना पड़ता है।
अधिकांश माइग्रेशन योजनाओं के पीछे यही सवाल है: क्या हमारे पास पहले से ही आने वाले ब्लॉक हो सकते हैं? दो आकृतियों की तुलना करने से किसी भी पैराग्राफ की तुलना में इसका उत्तर तेजी से मिलता है।
Gutenberg
एक ब्लॉक अपने पास मौजूद डेटा और दो कार्यों की घोषणा करता है: एक जो संपादन इंटरफ़ेस को प्रस्तुत करता है, एक जो सहेजा जाता है उसका उत्पादन करता है।
GrapesJS
एक घटक प्रकार अपने व्यवहार की घोषणा करता है, एक लेखक जिन क्षेत्रों को संपादित कर सकता है, इसकी स्टाइलिंग, और इसमें शामिल बाल घटक - जो घटक भी हैं।
"पुनर्निर्माण" का वास्तव में क्या अर्थ है, इसका एक छोटा सा उदाहरण। न तो स्निपेट दूसरे से उत्पन्न होता है।
// A Gutenberg block, as authored in a
// WordPress plugin.
registerBlockType( 'acme/hero', {
attributes: {
title: { type: 'string' },
description: { type: 'string' },
},
supports: { align: [ 'wide', 'full' ] },
edit: ( props ) => <HeroEdit { ...props } />,
save: ( props ) => <HeroSave { ...props } />,
} );// The same idea in GrapesJS: a component
// type, plus a block that inserts it.
editor.Components.addType('hero', {
model: {
defaults: {
traits: ['title', 'description'],
attributes: { class: 'hero' },
components: [
{ type: 'text', tagName: 'h1' },
{ type: 'text', tagName: 'p' },
],
},
},
});
editor.BlockManager.add('hero', {
label: 'Hero',
category: 'Sections',
content: { type: 'hero' },
});दोनों एक लेखक के लिए एक ही काम करते हैं - दो संपादन योग्य फ़ील्ड वाले पृष्ठ पर एक शीर्षक hero अनुभाग डालें। कोड में लगभग कुछ भी समान नहीं है, जो कि बिंदु है: यह एक वास्तुशिल्प रूपांतरण है, और इसे डेटा माइग्रेशन के रूप में अनुमान लगाना यह है कि ये परियोजनाएं कैसे गलत हो जाती हैं।
हां, लेकिन माइग्रेशन आमतौर पर एक साधारण निर्यात या आयात ऑपरेशन के बजाय एक वास्तुशिल्प रूपांतरण है।
कोई कनवर्टर नहीं है, और कभी भी एक होने की संभावना नहीं है - ऊपर दिए गए दो कोड नमूने क्यों देखें। इसके बजाय जो है वह काम का काफी अनुमानित क्रम है।
Gutenberg ब्लॉक से GrapesJS संपादक तक
उत्पादन WordPress स्थापना को माइग्रेट करने से पहले, वर्तमान ब्लॉक आर्किटेक्चर और रेंडरिंग पाइपलाइन का ऑडिट करें। ऑडिट कोई औपचारिकता नहीं है - एक ऐसी साइट जिसके सभी ब्लॉक PHP में प्रस्तुत होते हैं, वह एक से अलग परियोजना है जिसके ब्लॉक स्थिर मार्कअप हैं, और आप बिना देखे यह नहीं बता सकते कि आपके पास कौन सा है।
तीन आकार, काम के बढ़ते क्रम में। हम यहां उद्देश्य पर कोई अवधि नहीं देते हैं: एक ही ब्लॉक गिनती एक पखवाड़े या एक चौथाई हो सकती है, जो इस बात पर निर्भर करता है कि वे ब्लॉक क्या करते हैं।
सामग्री काफी हद तक कोर ब्लॉकों से बनाई गई है, और लेआउट पारंपरिक हैं।
आपकी खुद की एक ब्लॉक लाइब्रेरी, और एक संपादन अनुभव जो पहले ही एक बार सिलवाया जा चुका है।
ब्लॉक वास्तव में PHP हैं, और WordPress स्थापना वह है जिस पर व्यवसाय चलता है।
यदि आपकी परियोजना तीसरे कॉलम में है, तो पहले पूछने लायक प्रश्न यह नहीं है कि "हम कैसे माइग्रेट करते हैं?" लेकिन "इसके किस हिस्से को वास्तव में एक अलग संपादक की आवश्यकता है?" - उत्तर अक्सर एक स्क्रीन होता है, पूरी साइट नहीं।
आपको प्रत्येक संपादक सुविधा स्वयं बनाने की आवश्यकता नहीं है। सामान्य कार्यक्षमता और एकीकरण के लिए प्लगइन्स के साथ GrapesJS का विस्तार करें - उसी तरह जैसे एक WordPress प्रोजेक्ट एक लिखने के बजाय एक प्लगइन तक पहुंचता है।
तैयार ब्लॉक एक लेखक कैनवास पर खींचता है, मूल लेआउट टुकड़ों से लेकर पूर्ण हेडर और फुटर तक।
श्रेणी ब्राउज़ करेंशुरुआती ब्लॉक सेट अधिकांश संपादक शुरू करते हैं।
उन टीमों के लिए एक व्यापक पुस्तकालय जिन्हें पहले दिन लेआउट विविधता की आवश्यकता होती है।
हेडर अनुभाग एक लेखक मार्कअप को छुए बिना कॉन्फ़िगर कर सकता है।
एक ही कॉन्फ़िगरेशन मॉडल के साथ पाद लेख अनुभाग।
एक पूर्ण संपादन उपकरण पट्टी के लिए अंतर्निहित इनलाइन पाठ संपादक स्वैप करें। परिचित नाम, कैनवास के अंदर चल रहे हैं।
श्रेणी ब्राउज़ करेंकैनवास के अंदर एक पूर्ण संपादन टूलबार।
किसी अन्य सिस्टम से जाने वाले लेखकों के लिए एक परिचित टूलबार।
एक तीसरा विकल्प, यदि आपके उपयोगकर्ता इसे पहले से ही जानते हैं।
अंतर्निहित इनलाइन उपकरण पट्टी पर अतिरिक्त नियंत्रण।
जहां संपादक सहेजता है। यह वह परत है जिसमें a WordPress REST मार्ग प्लग होता है - एक ही इंटरफ़ेस, एक अलग समापन बिंदु।
श्रेणी ब्राउज़ करेंसीधे हेडलेस बैकएंड में सहेजें।
अपने स्वयं के सर्वर के साथ एक होस्ट किए गए डेटाबेस में सहेजें।
कहीं भी कुछ भी भेजने से पहले ड्राफ्ट को ब्राउज़र में रखें।
एक कैनवास को बहु-पृष्ठ परियोजना में बदलें।
Tailwind और Bootstrap ब्लॉक सेट हैं, इसलिए संपादक द्वारा उत्पादित मार्कअप आपके द्वारा पहले से शिप किए गए डिज़ाइन सिस्टम से मेल खाता है।
श्रेणी ब्राउज़ करेंआपके द्वारा पहले से ही शिप की जाने वाली उपयोगिता कक्षाओं के खिलाफ लेखक।
उन कक्षाओं पर बनाया गया एक ब्लॉक पुस्तकालय।
वर्तमान Bootstrap मार्कअप पैदा करता है।
वही, पिछले प्रमुख संस्करण पर अभी भी परियोजनाओं के लिए।
फॉर्म और अपलोड, मीडिया और परिनियोजन एकीकरण, और एक घटक-लाइब्रेरी प्रीसेट - अपने स्वयं के शेल्फ को देने के बजाय सीधे जुड़ा हुआ है।
कैटलॉग में दो लिस्टिंग वास्तव में एआई-संचालित हैं। उनके पीछे अभी तक कोई एआई श्रेणी पृष्ठ नहीं है, इसलिए उन्हें खाली शेल्फ पर भेजे जाने के बजाय सीधे यहां लिंक किया गया है। grapesjs-gpt-plugin · grapesjs-image-ai-thumbai
इस कैटलॉग में कोई WordPress या Gutenberg प्लगइन नहीं है, और यह पृष्ठ अन्यथा दिखावा नहीं करता है। यहां संपादक-पक्ष के टुकड़े हैं जिनसे एक कस्टम संपादक इकट्ठा किया गया है।
कैटलॉग अंत से अंत तक चला 2026-09-03.
सात ठोस उत्पाद, जिनमें से प्रत्येक एक संपादक है जिसके चारों ओर एक अलग काम है।
किसी उत्पाद के अंदर दृश्य संपादन जिसकी आपके ग्राहक सदस्यता लेते हैं, आपकी अपनी योजनाओं, सीमाओं और ऑनबोर्डिंग के साथ।
एक सेवा के रूप में पेज बिल्डरWordPress के लिए एक कस्टम संपादन अनुभव, जिसके पीछे WordPress को सामग्री बैकएंड के रूप में रखा गया है।
वास्तुकला देखेंसामग्री पर एक दृश्य परत जो बिना सिर वाले बैकएंड में रहती है और API के माध्यम से वितरित की जाती है।
हेडलेस CMS संपादकवही संपादक किसी और के नाम से भेजा गया - आपका, या आपके ग्राहकों।
व्हाइट-लेबल बिल्डरएक संपादक एक स्क्रीन के अंदर घुड़सवार है जो पहले से ही किसी अन्य एप्लिकेशन का मालिक है।
एम्बेड करने योग्य पेज बिल्डरविपणन पृष्ठों के लिए एक केंद्रित संपादक, एक विवश ब्लॉक सेट और तेजी से प्रकाशन के साथ।
लैंडिंग पेज बिल्डरउसी इंजन ने ईमेल मार्कअप की ओर इशारा किया, इसके साथ आने वाली बाधाओं के साथ।
ईमेल बिल्डरकोर फ्रेमवर्क-अज्ञेयवादी है: यह एक DOM तत्व में प्रस्तुत करता है, इसलिए इसे एकीकृत करना ज्यादातर एक सवाल है कि कौन सा जीवनचक्र हुक इनिशियलाइज़र कहता है।
एक संपादक इंजन
स्पष्ट रूप से कहने लायक एक चेतावनी: GrapesJS मूल React, Vue या Angular घटक संपादक नहीं है। यह अपने स्वयं के कैनवास में HTML और CSS को संपादित करता है, और फ्रेमवर्क रैपर यह है कि आप इसे कैसे माउंट और नियंत्रित करते हैं - न कि कैनवास कैसे प्रस्तुत करता है। यदि आपको कैनवास के अंदर लाइव रेंडर करने के लिए अपने ढांचे के स्वयं के घटकों की आवश्यकता है, तो यह एक अलग आवश्यकता और उपकरणों का एक अलग सेट है।
वह पंक्ति ढूंढें जो आप जो बना रहे हैं उससे मेल खाती हो। इनमें से पांच Gutenberg पर इंगित करते हैं, और यह कोई शिष्टाचार नहीं है - यह वह जगह है जहां उन परियोजनाओं को शुरू करना चाहिए।
| आपकी आवश्यकता | अनुशंसित प्रारंभिक बिंदु |
|---|---|
| मूल WordPress संपादन | Gutenberg |
| ब्लॉग और सामग्री संपादन | Gutenberg |
| एक WordPress-पहली वेबसाइट | Gutenberg |
| एक मौजूदा Gutenberg-भारी परियोजना | Gutenberg — माइग्रेशन का मूल्यांकन करें |
| एक कस्टम विज़ुअल एडिटर | GrapesJS |
| एक HTML और CSS केंद्रित पेज बिल्डर | GrapesJS |
| एक पेज बिल्डर एक सेवा के रूप में बेचा जाता है | GrapesJS |
| एक एम्बेड करने योग्य संपादक | GrapesJS |
| आपकी अपनी ब्रांडिंग के तहत एक संपादक | GrapesJS |
| बिना सिर वाले बैकएंड पर एक विज़ुअल एडिटर | GrapesJS |
| एक कस्टम संपादन अनुभव | GrapesJS |
आप वास्तव में क्या बना रहे हैं?
एक WordPress वेबसाइट, जहां WordPress संपूर्ण एप्लिकेशन है
Gutenberg
संपादन सतह पहले से ही स्थापित, एकीकृत और परिचित है। दूसरा जोड़ने से बनाए रखने के लिए दूसरी चीज़ जुड़ जाती है।
एक प्रकाशन, उन लेखकों के साथ जो हर दिन WordPress में काम करते हैं
Gutenberg
संशोधन, शेड्यूलिंग, भूमिकाएं और मीडिया लाइब्रेरी ऐसी विशेषताएं हैं जो यहां मायने रखती हैं, और वे सभी WordPress पक्ष पर हैं।
WordPress सामग्री बैकएंड के रूप में, लेकिन आपका अपना संपादन अनुभव
WordPress + GrapesJS
यह ऊपर हाइब्रिड आर्किटेक्चर है। CMS रखें, केवल संपादन परत बदलें, और बीच में एकीकरण के लिए बजट बनाएं।
आपका खुद का एक एप्लिकेशन, जहां संपादक एक ऐसी सुविधा है जिसे आप शिप करते हैं
GrapesJS
इस चित्र में निर्माण करने के लिए कोई WordPress नहीं है, और एक संपादक ढांचा बिल्कुल वैसा ही आकार है जो आप चाहते हैं।
एक संपादक जिसका उपयोग आपके ग्राहक करते हैं, आपकी ब्रांडिंग के तहत या उनकी
GrapesJS
ब्रांडिंग, किरायेदारी और विवश संपादन वे सभी चीजें हैं जिन्हें आप एक ढांचे में नियंत्रित करते हैं और CMS में विरासत में प्राप्त करते हैं।
कोई सार्वभौमिक विजेता नहीं है। वह संपादक आर्किटेक्चर चुनें जो आपके उत्पाद से मेल खाता हो।
इस तुलना पर पहुंचने वाली अधिकांश टीमें "Gutenberg ठीक है" और "हम एक उत्पाद बना रहे हैं" के बीच के पैमाने पर कहीं हैं। इस पर तीन पद हैं, दो नहीं।
इसे तब चुनें जबमूल WordPress संपादन पर्याप्त है, और आपको जो घर्षण लगता है वह संपादक समस्या के बजाय एक थीम या प्लगइन समस्या है।
व्यापक अंतर से सबसे सस्ता विकल्प, और इस तरह के पृष्ठ की तुलना में अधिक बार सही विकल्प आमतौर पर स्वीकार करता है। इस साइट पर कुछ भी काम करने वाली WordPress साइट को अपने स्वयं के संपादक से हटाने का कारण नहीं है।
इसे तब चुनें जबआपको अतिरिक्त ब्लॉक, अतिरिक्त नियंत्रण, या एक सख्त संपादन स्क्रीन की आवश्यकता है - लेकिन WordPress संपादन मॉडल स्वयं आपके लिए सही है।
Gutenberg वास्तव में एक्स्टेंसिबल है। कस्टम ब्लॉक, ब्लॉक पैटर्न, block supports, फ़िल्टर और slot fills लोगों का क्या मतलब है, इसका एक बहुत बड़ा हिस्सा कवर करते हैं जब वे कहते हैं कि संपादक वह नहीं करता जो वे चाहते हैं।
इसे तब चुनें जबआपको एक अलग या काफी अधिक अनुकूलन योग्य दृश्य संपादन अनुभव की आवश्यकता है - आमतौर पर क्योंकि संपादक आपके द्वारा बेची जाने वाली चीज़ों का हिस्सा है।
बदलने के बजाय जोड़ें: WordPress ठीक वहीं रह सकता है जहां वह है, सामग्री और उपयोगकर्ताओं का मालिक है, जबकि एक दूसरी संपादन सतह उस मामले में काम करती है जिसके लिए इसे कभी नहीं बनाया गया था।
GJS.Market GrapesJS पर संपादक बनाता है, जिसमें वे भी शामिल हैं जो WordPress इंस्टॉलेशन के बगल में बैठते हैं। यदि आपने इसे अब तक पढ़ा है और हाइब्रिड आर्किटेक्चर वह है जिसकी आपको आवश्यकता है, तो यह वह हिस्सा है जिसमें हम मदद कर सकते हैं।
हमें बताएं कि आपके ब्लॉक क्या करते हैं, इससे पहले कि आप हमें बताएं कि कितने हैं। किसी भी स्कोपिंग बातचीत में पहला सवाल यह है कि क्या वे PHP में प्रस्तुत करते हैं।
Gutenberg रखें जब मूल WordPress संपादन अनुभव बिल्कुल वही हो जो आपके प्रोजेक्ट की आवश्यकता है। GrapesJS चुनें जब आपको अपने स्वयं के उत्पाद, वर्कफ़्लो और आर्किटेक्चर के आसपास एक विज़ुअल एडिटर बनाने की आवश्यकता हो।
संपादक चलाएं, फिर हमें बताएं कि आप क्या बना रहे हैं। संक्षिप्त में कुछ मिनट लगते हैं।
GrapesJS आज़माएंतैयार ब्लॉक, इनलाइन संपादक, स्टोरेज बैक एंड और CSS फ्रेमवर्क पैक, सभी एक ही इंजन के लिए।
प्लगइन्स का अन्वेषण करेंवास्तुकला, WordPress एकीकरण और Gutenberg प्रवासन, उन लोगों के साथ जिन्होंने इसे किया है।
किसी विशेषज्ञ से बात करेंGutenberg एक WordPress-मूल संपादन अनुभव है। GrapesJS आपके स्वयं के दृश्य संपादन अनुभव के निर्माण के लिए एक रूपरेखा है। वह चुनें जिसका आकार आपके उत्पाद से मेल खाता हो, और दूसरे को वहीं रखें जहां वह पहले से काम करता है।
-thumbnail.jpg&w=3840&q=70)
