GrapesJS के साथ अधिक संपूर्ण दृश्य संपादन अनुभव बनाएं। Puck अपने स्वयं के घटकों की रचना के लिए एक मजबूत React-प्रथम संपादक है। यदि आपका उत्पाद एक पूर्ण पृष्ठ बिल्डर, वेबसाइट संपादक, ईमेल बिल्डर या ग्राहक-सामना करने वाले दृश्य संपादक के रूप में विकसित हो रहा है, तो GrapesJS आपको एकीकृत और विस्तारित करने के लिए एक व्यापक संपादक आधार देता है।
React घटकों में, React रेंडरिंग आउट।
एक दृश्य दस्तावेज़, फिर आप उससे जो कुछ भी प्रकाशित करते हैं।
26k+
GrapesJS GitHub सितारे
100+
प्लगइन्स GJS.Market पर
1.4M+
GrapesJS npm डाउनलोड/माह
BSD-3-Clause
GrapesJS कोर लाइसेंस
GrapesJS और GJS.Market आंकड़े, सत्यापित 2026-09-03। वे उस परियोजना का वर्णन करते हैं जिसकी यह पृष्ठ अनुशंसा करता है, Puck के विरुद्ध स्कोर नहीं - एक स्टार गिनती इस बात का प्रमाण नहीं है कि एक संपादक आपके उत्पाद को दूसरे से बेहतर सूट करता है।
दोनों ओपन-सोर्स संपादक हैं जिन्हें आप स्व-होस्ट कर सकते हैं और अपने उपयोगकर्ताओं के सामने रख सकते हैं। वे अलग-अलग वास्तुशिल्प दिशाओं से शुरू होते हैं, इसलिए असली सवाल यह नहीं है कि कौन सा बेहतर है - यह है कि क्या आप React घटक संपादक या पूर्ण दृश्य संपादन अनुभव का निर्माण कर रहे हैं।
आपका संपादक एक React घटक संपादक है, और इसे यही रहना चाहिए।
यह आपके उत्पाद का वर्णन करता है
इस पृष्ठ पर कुछ भी माइग्रेट करने का कारण नहीं है। Puck अच्छी तरह से प्रलेखित, सक्रिय रूप से विकसित और MIT-लाइसेंस प्राप्त है।
Puck दस्तावेज़ पढ़ेंआपका संपादक अपने आप में एक उत्पाद सतह बन रहा है, जिसमें मेल खाने के लिए सबसिस्टम हैं।
यह आपके रोडमैप का वर्णन करता है
एक व्यापक संपादक नींव का मतलब है आपकी टीम के लिए डिजाइन, निर्माण और रखरखाव के लिए कम संपादक बुनियादी ढांचा।
कोई लाइव एडिटर खोलेंये ठोस उत्पाद संकेत हैं, न कि इस बारे में दावा कि अधिकांश टीमें क्या करती हैं। यदि उनमें से कई आपके रोडमैप का वर्णन करते हैं, तो आपके संपादक ने एक घटक विन्यासकर्ता को पीछे छोड़ दिया है।
उपयोगकर्ताओं ने विज़ुअल पेज संरचना, पुनः प्रयोज्य ब्लॉक, उत्तरदायी नियंत्रण, परिसंपत्ति वर्कफ़्लो, टेम्प्लेट, शैली नियंत्रण, परतें और कई पृष्ठों के लिए पूछना शुरू कर दिया है - अधिक घटकों के बजाय संपादक सुविधाएँ।
React घटक के बजाय JSON पर क्रमबद्ध प्रॉप्स के साथ, आपको अनुभागों, घटकों, शैलियों, परिसंपत्तियों और लेआउट से बने एक पृष्ठ की आवश्यकता होती है - एक ऐसा दस्तावेज़ जिसे आपके उपयोगकर्ता संपादित करते हैं, न कि एक कॉन्फ़िगरेशन जिसे वे भरते हैं।
यदि एक ही संपादक को विभिन्न एप्लिकेशन वातावरणों में पुनः उपयोग किया जाना है, या कहीं एम्बेडेड React होस्ट नहीं है, तो फ्रेमवर्क स्वतंत्रता सैद्धांतिक होना बंद कर देती है।
एक दृश्य शैली परत एक बड़ा सबसिस्टम है। जब "उपयोगकर्ताओं को रिक्ति चुनने दें" एक रोडमैप आइटम में बदल जाता है, तो एक संपादक जिसके पास पहले से ही Style Manager है, एक प्रोजेक्ट को सहेजता है।
निर्यात, स्थिर प्रकाशन, तृतीय-पक्ष एम्बेड और ईमेल सभी पोर्टेबल मार्कअप चाहते हैं। React घटकों के माध्यम से विशेष रूप से प्रतिपादन उन लोगों को आवश्यकता से अधिक कठिन बनाता है।
ईमेल अपनी बाधाओं के साथ एक अलग रेंडरिंग लक्ष्य है। यह वह नहीं है जिसके लिए Puck प्रलेखित किया गया है, और यह एक वर्कफ़्लो है जिसे GrapesJS पारिस्थितिकी तंत्र पहले से ही कवर करता है।
एक बार जब संपादक ग्राहकों के लिए भुगतान करने का हिस्सा हो जाता है, तो संपादक के बुनियादी ढांचे के निर्माण और रखरखाव की लागत स्वयं एक कार्यान्वयन विवरण के बजाय एक उत्पाद निर्णय बन जाती है।
आपको केवल इसलिए माइग्रेट करने की आवश्यकता नहीं है क्योंकि GrapesJS मौजूद है। Puck एक अच्छी तरह से प्रलेखित, MIT-लाइसेंस प्राप्त, सक्रिय रूप से विकसित संपादक है, और उत्पादों की एक पूरी श्रेणी के लिए यह बेहतर फिट है।
Puck आपके React पेड़ के अंदर चलता है, इसलिए आपके घटक, संदर्भ, हुक और डिज़ाइन सिस्टम बिना एकीकरण परत के संपादक में उपलब्ध हैं।
यदि उपयोगकर्ता जो संपादित करते हैं वह टाइप किए गए प्रॉप्स के साथ एक घटक ट्री है, तो Puck इसे सीधे व्यक्त करता है। एक विज़ुअल दस्तावेज़ मॉडल एक अतिरिक्त अनुवाद चरण होगा।
एक निश्चित घटक सेट के साथ एक विन्यासकर्ता को Style Manager, Asset Manager या Layer Manager की आवश्यकता नहीं होती है। अप्रयुक्त सबसिस्टम अभी भी छिपाने के लिए सतह क्षेत्र हैं।
Puck दस्तावेज़ तेरह ओवरराइड स्लॉट प्लस संरचना है, इसलिए जो टीमें पूरे संपादन अनुभव को डिजाइन करने का इरादा रखती हैं, उनके पास एक स्पष्ट रास्ता है।
ऑप्ट-इन React Server Component समर्थन, गतिशील प्रॉप्स, रिज़ॉल्वर और बाहरी डेटा स्रोत सभी प्रलेखित हैं, React-मूल चिंताएं।
यदि आपके रोडमैप में कुछ भी मार्कअप या शैलियों को नेत्रहीन रूप से संपादित करने की आवश्यकता नहीं है, तो व्यापक संपादक नींव वह क्षमता है जिसे आप उपयोग किए बिना ले जाएंगे।
यदि वे आपके उत्पाद का वर्णन करते हैं, तो Puck पर बने रहना सही कॉल है - और इस पृष्ठ ने अपना काम किया है।
अभी भी तुलना कर रहे हैं? पूर्ण फीचर मैट्रिक्स देखेंPuck को React घटकों को संपादित करने और रचना करने के आसपास डिज़ाइन किया गया है। GrapesJS को दृश्य दस्तावेज़ संपादन के आसपास डिज़ाइन किया गया है, और इसे करने के लिए संपादक उप-प्रणालियों का एक व्यापक सेट प्रदान करता है।
घटक और उनके प्रॉप्स सामग्री मॉडल हैं।
एक दृश्य दस्तावेज़ सामग्री मॉडल है।
किसी भी मॉडल को दूसरे की लापता क्षमताओं के रूप में वर्णित नहीं किया जा सकता है: मॉड्यूल के रूप में कुछ भी GrapesJS जहाजों को Puck के शीर्ष पर लागू किया जा सकता है, और Puck मूल रूप से React के साथ जो कुछ भी करता है उसे GrapesJS में एकीकृत किया जा सकता है। अंतर शुरुआती बिंदु है।
शुरुआती बिंदु क्या बदलता है कि उत्पाद समाप्त होने से पहले आपकी टीम को कितना संपादक बुनियादी ढांचा इकट्ठा करना पड़ता है - जो कि अगले दो खंड ठोस रूप से उत्तर देते हैं।
कोई भी आर्किटेक्चर सार्वभौमिक रूप से बेहतर नहीं है। वे अलग-अलग चीजों के लिए अनुकूलन करते हैं, और सही वह है जो आपके उपयोगकर्ता वास्तव में संपादन कर रहे हैं।
वास्तविक निर्णय शायद ही कभी "Puck या GrapesJS" होता है। यह है कि आपकी टीम को कितना संपादक बुनियादी ढांचा अपनाना चाहिए और लागू करना चाहिए। यह तालिका प्रत्येक परियोजना के स्वयं के दस्तावेज़ीकरण से प्रत्येक क्षमता को पढ़ती है: "कोर" का अर्थ है एक प्रलेखित मॉड्यूल, "कॉन्फ़िगर करने योग्य" का अर्थ है कि परियोजना कॉन्फ़िगरेशन या ओवरराइड के माध्यम से इसका समर्थन करती है, और "कस्टम कार्यान्वयन" का अर्थ है कि आपकी टीम इसे लिखती है। इनमें से किसी भी सेल का मतलब "असंभव" नहीं है।
| योग्यता | Puck | GrapesJS |
|---|---|---|
| React घटक संपादन | कोर ताकत | एकीकरण - कस्टम घटक प्रकार या React आवरण |
| दृश्य कैनवास | उपलब्ध iframe पूर्वावलोकन | कोर |
| ब्लॉक | Components और कॉन्फ़िगरेशन | कोर — Block Manager |
| शैली प्रणाली | कस्टम और कॉन्फ़िगर करने योग्य | कोर — Style Manager |
| परतें और रूपरेखा | उपलब्ध और अनुकूलन योग्य | कोर — Layer Manager |
| संपत्ति | कस्टम कार्यान्वयन या एकीकरण | कोर — Asset Manager |
| उत्तरदायी संपादन | Viewports और कॉन्फ़िगरेशन | कोर — Device Manager |
| Commands | कस्टम, आपके आवेदन में | कोर — Commands |
| भंडार | आवेदन की जिम्मेदारी | कोर - Storage Manager, साथ ही आपका एकीकरण |
| परियोजना डेटा | JSON घटक प्रॉप्स का | प्रोजेक्ट डेटा — संरचना, शैली, संपत्ति और पृष्ठ |
| HTML और CSS आउटपुट | प्राथमिक मॉडल नहीं | कोर उपयोग का मामला |
| कस्टम संपादक UI | अत्यधिक अनुकूलन योग्य | अत्यधिक अनुकूलन योग्य |
| प्लगइन्स | Plugin API | Plugin API और बाज़ार पारिस्थितिकी तंत्र |
| ईमेल वर्कफ़्लोज़ | प्रलेखित फोकस नहीं | पारिस्थितिकी तंत्र के माध्यम से उपलब्ध है |
puckeditor.com/docs और grapesjs.com/डॉक्स के खिलाफ सत्यापित 2026-09-03। एक परियोजना के लिए "कस्टम कार्यान्वयन" चिह्नित क्षमता कोई दोष नहीं है - यह एक डिजाइन निर्णय है कि पुस्तकालय में क्या है और आपके आवेदन में क्या है।
ये GrapesJS कोर के प्रलेखित मॉड्यूल हैं, और वे एक विज़ुअल वेबसाइट बिल्डर, SaaS पेज बिल्डर, CMS संपादक, ईमेल बिल्डर या व्हाइट-लेबल संपादक के लिए "एक व्यापक संपादक नींव" का ठोस अर्थ है।
एक लाइव दस्तावेज़ को प्रस्तुत करने वाला एक पूर्ण दृश्य संपादन वातावरण, न कि किसी घटक ट्री का पूर्वावलोकन।
संपादन योग्य घटक प्रकारों को उनके स्वयं के मॉडल, traits और कैनवास पर व्यवहार के साथ परिभाषित करें।
पुनः प्रयोज्य ड्रैग-एंड-ड्रॉप ब्लॉक पंजीकृत करें जिनसे उपयोगकर्ता पृष्ठ बनाते हैं।
टाइपोग्राफी, रिक्ति, रंग, आयाम और बहुत कुछ के लिए दृश्य नियंत्रण, चयनकर्ता द्वारा स्कोप।
संपादक के अंदर से छवियों और अन्य मीडिया को ब्राउज़ करें, अपलोड करें और पुनः उपयोग करें।
व्यूपोर्ट परिभाषित करें और उपयोगकर्ताओं को प्रतिक्रियाशील ब्रेकपॉइंट पर संपादित करने दें।
संपादक डेटा को स्थानीय या दूरस्थ संग्रहण और autosave के साथ अपने स्वयं के बैकएंड से कनेक्ट करें।
स्क्रिप्ट संपादक व्यवहार का विस्तार और विस्तार करें, और इसे अपने UI से बांधें।
कोर संपादक को संशोधित किए बिना कार्यक्षमता जोड़ें - वह एक्सटेंशन बिंदु जिस पर पारिस्थितिकी तंत्र बनाया गया है।
पोर्टेबल मार्कअप और शैलियों को निर्यात करें जिन्हें आप कहीं भी नियंत्रित कर सकते हैं।
HTML ईमेल और MJML वर्कफ़्लो के लिए एक ही संपादक का विस्तार करें पारिस्थितिकी तंत्र प्लगइन्स के माध्यम से।
क्षमता के आधार पर, प्रत्येक परियोजना की अपनी शब्दावली में। दोनों परियोजनाएं चलती हैं, इसलिए यह दर्शाता है कि नीचे दी गई सत्यापन तिथि के अनुसार उनके दस्तावेज़ीकरण में क्या शामिल है। जहां भी ईमानदार उत्तर "समर्थित, लेकिन आप इसे कॉन्फ़िगर या कार्यान्वित करते हैं" वहां सेल नंगे हां/नहीं से बचते हैं।
| योग्यता | GrapesJS | Puck |
|---|---|---|
| स्थापत्यशैली | अपने स्वयं के घटक वृक्ष के साथ दृश्य दस्तावेज़ संपादक | React घटक वृक्ष, टाइप किए गए प्रॉप्स के रूप में संपादित |
| लाइसेंस | BSD-3-Clause core, MIT React wrapper | MIT — @puckeditor/core 0.23.0 |
| खुला स्रोत | हाँ | हाँ |
| React निर्भरता | कोर में कोई नहीं; आधिकारिक React आवरण उपलब्ध है | आवश्यक — React रनटाइम है |
| फ्रेमवर्क लचीलापन | फ्रेमवर्क-अज्ञेयवादी कोर | React-डिजाइन द्वारा केंद्रित |
| दृश्य कैनवास | कोर — iframe में एक लाइव दस्तावेज़ | अंतर्निहित - समान-मूल iframe पूर्वावलोकन |
| अवयव | Component एक मॉडल के साथ प्रकार, दृश्य और traits | कोर ताकत - आपके अपने React घटक |
| ब्लॉक | कोर — Block Manager | Component दराज; slot घोंसले के शिकार के लिए खेत |
| परतें/रूपरेखा | कोर — Layer Manager | निर्मित - रूपरेखा क्षेत्र, ओवरराइड के माध्यम से बदली जा सकती है |
| शैली प्रबंधन | कोर Style Manager दृश्य CSS नियंत्रणों के साथ | आपका अपना CSS और डिज़ाइन सिस्टम; Theming API संपादक को स्टाइल करता है UI |
| संपत्ति और मीडिया | कोर Asset Manager प्लग करने योग्य स्रोतों के साथ | कस्टम कार्यान्वयन - एक फ़ील्ड UI या एक बाहरी स्रोत की आपूर्ति करें |
| डिवाइस पूर्वावलोकन | कोर — Device Manager | में निर्मित Viewports |
| उत्तरदायी संपादन | Style Manager के माध्यम से दृश्य ब्रेकपॉइंट संपादन | व्यूपोर्ट स्विचिंग; उत्तरदायी नियम आपके अपने CSS में रहते हैं |
| Commands | कोर — Commands | आवेदन की जिम्मेदारी - प्रेषण और कार्रवाई |
| पूर्ववत करें और फिर से करें | कोर — UndoManager | निर्मित - प्रलेखित इतिहास API |
| रिच टेक्स्ट एडिटिंग | बिल्ट-इन RTE, विस्तार योग्य | अंतर्निहित richtext फ़ील्ड और रिच-टेक्स्ट मेनू घटक |
| कस्टम घटक | Component API — addType() | कोर - कोई भी React घटक प्लस एक ComponentConfig |
| कस्टम संपादक UI | अत्यधिक अनुकूलन योग्य - पैनल, कस्टम दृश्य, पूर्ण UI प्रतिस्थापन | अत्यधिक अनुकूलन योग्य - तेरह ओवरराइड स्लॉट प्लस संरचना |
| टेम्पलेट्स | Plugin — टेम्पलेट्स प्रबंधक लिस्टिंग | आवेदन की जिम्मेदारी - सहेजे गए डेटा को संग्रहीत और पुनः लोड करें |
| भंडार | कोर Storage Manager, स्थानीय या आपका बैकएंड | आवेदन की जिम्मेदारी - आप डेटा को बनाए रखते हैं |
| परियोजना डेटा | Components, शैलियाँ, संपत्ति, पृष्ठ और संपादक स्थिति | JSON घटक प्रॉप्स का, सामग्री और जड़ के तहत |
| HTML और CSS आउटपुट | कोर उपयोग का मामला - पोर्टेबल HTML और CSS निर्यात करता है | प्राथमिक मॉडल नहीं - आउटपुट React प्रदान किया जाता है |
| React प्रतिपादन | एकीकरण React माउंट करें, या निर्यात मार्कअप प्रस्तुत करें | कोर - एक रेंडर घटक सहेजे गए डेटा को फिर से चलाता है |
| React Server Components | क्लाइंट-साइड संपादक - अपनी एकीकरण आवश्यकताओं की जाँच करें | ऑप्ट-इन समर्थन, प्रलेखित |
| ईमेल वर्कफ़्लोज़ | प्लगइन पारिस्थितिकी तंत्र के माध्यम से उपलब्ध है | प्रलेखित उपयोग का मामला नहीं |
| MJML | Plugin — MJML प्रीसेट और निर्यात | लागू नहीं |
| प्लगइन्स | Plugin API और एक सार्वजनिक बाज़ार | Plugin API और UI ओवरराइड करता है |
| एआई सहायता | मूल में नहीं - कस्टम एकीकरण | प्रलेखित एआई प्लगइन और क्लाउड क्लाइंट |
| स्व-होस्टिंग | हाँ - आप संपादक चलाते हैं | हाँ - आप संपादक चलाते हैं |
| सफेद लेबल | बदली UI, पैनल और ब्रांडिंग | Theming API और UI ओवरराइड करता है |
| SaaS एम्बेडिंग | संपादक को अपने उत्पाद के अंदर एम्बेड करें | संपादक को अपने React उत्पाद के अंदर एम्बेड करें |
| कस्टम बैकएंड और डेटाबेस | Storage Manager अपने से बात करता है API | आवेदन की जिम्मेदारी - आप परिवहन के मालिक हैं |
| अनुमतियां | आवेदन की जिम्मेदारी - आपके द्वारा उजागर किए गए आदेशों को गेट करें | अंतर्निहित — अनुमतियाँ API और टॉगलिंग सुविधा |
| प्रकाशन-व्यवसाय | आवेदन की जिम्मेदारी | आवेदन की जिम्मेदारी |
| Plugin बाज़ार | GJS.Market — 100+ plugins | समुदाय प्लगइन सूची |
प्रत्येक परियोजना के आधिकारिक दस्तावेज के विरुद्ध सत्यापित 2026-09-03। "कोर" का अर्थ है पुस्तकालय का एक प्रलेखित मॉड्यूल; "कॉन्फ़िगरेशन के माध्यम से" और "कस्टम कार्यान्वयन" का मतलब है कि क्षमता तक पहुंच योग्य है लेकिन आपकी टीम इसे इकट्ठा करती है। यहां किसी भी सेल का मतलब नहीं है कि कोई प्रोजेक्ट कुछ नहीं कर सकता।
npm install grapesjs @grapesjs/reactimport { useRef } from 'react';
import grapesjs from 'grapesjs';
import GjsEditor from '@grapesjs/react';
import 'grapesjs/dist/css/grapes.min.css';
// GrapesJS runs on the client: it owns an iframe canvas and a live document.
// In Next.js, mount it from a client component.
export default function Editor() {
return (
<GjsEditor
grapesjs={grapesjs}
options={{
height: '100vh',
storageManager: { type: 'remote', autosave: true },
}}
onEditor={(editor) => {
// Register the component types you mapped from your Puck config here.
}}
/>
);
}आपके घटक आपके रहते हैं। संपादक उनके और आपके उपयोगकर्ताओं द्वारा बनाए जा रहे दस्तावेज़ के बीच बैठता है, और आपके स्वयं के बैकएंड में सहेजता है।
प्रति पंक्ति एक उत्पाद आकार, एक निर्णय। इनमें से तीन Puck पर जाते हैं, और एक वास्तव में एक टाई है - यदि प्रत्येक पंक्ति एक ही तरह से इंगित करती है, तो तालिका पढ़ने लायक नहीं होगी।
| आप क्या बना रहे हैं | बेहतर प्रारंभिक बिंदु |
|---|---|
| एक React घटक कॉन्फिगरेटर | Puck |
| आपके React डिज़ाइन सिस्टम के लिए एक संपादक | Puck |
| एक अत्यधिक कस्टम, React-मूल संपादन अनुभव | Puck |
| एक मार्केटिंग पेज बिल्डर | GrapesJS |
| आपके SaaS उत्पाद के अंदर एक पेज बिल्डर | GrapesJS |
| एक ग्राहक-सामना करने वाला वेबसाइट बिल्डर | GrapesJS |
| एक ईमेल बिल्डर | GrapesJS |
| एक ढांचा-स्वतंत्र दृश्य संपादक | GrapesJS |
| बिना सिर वाले CMS के लिए एक दृश्य संपादन सतह | या तो |
यदि आप अभी तक यह नहीं कह सकते हैं कि कौन सी पंक्ति आपके उत्पाद का वर्णन करती है, तो संपादक चुनना समय से पहले है। उन तीन चीजों को लिखें जिन्हें आपके उपयोगकर्ताओं को बदलने में सक्षम होना चाहिए, और उत्तर आमतौर पर अपने आप हल हो जाता है।
यह वह अनुभाग है जो शेष पृष्ठ को अत्यधिक आशाजनक होने से रोकता है। GrapesJS संपादन परत प्रदान करता है। आपके SaaS के पास अभी भी प्रमाणीकरण, प्राधिकरण, दृढ़ता, बिलिंग, प्रकाशन और व्यावसायिक तर्क है - और यह परियोजना का बड़ा आधा हिस्सा है।
8 जिम्मेदारियां
सब कुछ जो इसे एक संपादक के बजाय एक उत्पाद बनाता है।
5 जिम्मेदारियां
संपादन परत, प्रलेखित मॉड्यूल के रूप में आप कॉन्फ़िगर करते हैं।
6 जिम्मेदारियां
दोनों के बीच एकीकरण - वास्तविक परियोजना।
यह वह भाग है जो Puck डिफ़ॉल्ट रूप से सही हो जाता है, और भाग a GrapesJS एकीकरण के बारे में जानबूझकर किया जाना चाहिए। आपके उपयोगकर्ताओं को उन घटकों और ब्लॉकों के साथ काम करना चाहिए जो आपके उत्पाद के लिए समझ में आते हैं, न कि सामान्य पेज-बिल्डर आदिम के साथ।
लैंडिंग पृष्ठ वास्तव में जिन अनुभागों से बना है।
पैनल में ब्लॉक
पुनः प्रयोज्य क्रोम और इंटरैक्टिव टुकड़े।
पैनल में ब्लॉक
स्टोरफ्रंट-विशिष्ट घटक अपने स्वयं के डेटा के साथ।
पैनल में ब्लॉक
GrapesJS में ये addType() के साथ पंजीकृत घटक प्रकार हैं और Block Manager के माध्यम से उजागर होते हैं, जिसमें उपयोगकर्ता द्वारा बदले जा सकने वाले प्रॉप्स के लिए traits होता है। पैलेट को अपने सिस्टम तक सीमित करना ही आउटपुट को बाद में पुलिसिंग किए बिना ब्रांड पर रखता है।
ब्लॉक और प्रीसेट ब्राउज़ करेंचार प्रकाशित संपादक, सभी एक ही कोर चला रहे हैं। जब तक आप क्लिक नहीं करते तब तक कुछ भी लोड नहीं होता है, इसलिए पृष्ठ तेज़ रहता है।
फ़ुलस्क्रीन खोलेंGrapesJS प्रोजेक्ट का अपना डेमो - पूर्ण डिफ़ॉल्ट पैनल सेट के साथ मुफ्त बेसलाइन।
iframe में एक बाहरी डेमो लोड करता है
आप जो निर्माण कर रहे हैं उसके आधार पर समूहीकृत। नीचे दिया गया प्रत्येक कार्ड एक वास्तविक सूची है - नाम, मूल्य और थंबनेल सीधे कैटलॉग से आते हैं, इसलिए यहां कुछ भी एक प्लगइन का विज्ञापन नहीं कर सकता है जो मौजूद नहीं है।
React UI एक उत्पाद के अंदर एक बिल्डर डालने वाली टीमों के लिए परतें और संपादक गोले।
श्रेणी ब्राउज़ करेंउस स्टैक पर पहले से ही निर्मित उत्पादों के लिए एक shadcn/ui-आधारित संपादक इंटरफ़ेस।
React UI अपने स्वयं के संपादक क्रोम के निर्माण के लिए घटक।
संपादक को शून्य से कॉन्फ़िगर करने के बजाय शुरू करने के लिए एक React-उन्मुख प्रीसेट।
एक न्यूनतम संपादक खोल जो पैनलों को तब तक छुपाता है जब तक कि उनकी आवश्यकता न हो।
बेसलाइन ब्लॉक सेट उपयोगकर्ता पहले दिन से खींचते हैं।
एकल संपादक उदाहरण के अंदर बहु-पृष्ठ परियोजनाएं।
तैयार लेआउट को टेम्पलेट्स के रूप में सहेजें और पुनः उपयोग करें।
अभिगम्यता और संपादक के अंदर SEO ऑडिटिंग।
MJML संलेखन, ईमेल के लिए जो ग्राहकों को प्रस्तुत करता है।
एक न्यूज़लेटर-उन्मुख संपादन प्रीसेट।
से संदेश लिखने के लिए ईमेल-सुरक्षित ब्लॉक.
उन हिस्सों के लिए एक HTML/CSS एस्केप हैच जिन्हें हाथ से लिखा जाना चाहिए।
Tailwind ब्लॉक, समृद्ध पाठ और मौजूदा सिस्टम को कैनवास में लाने के लिए उत्तरदायी नियंत्रण।
श्रेणी ब्राउज़ करेंTailwind-आधारित ब्लॉकों पर पहले से ही Tailwind पर है।
इनलाइन संपादन के लिए एक विस्तारित रिच-टेक्स्ट टूलबार।
उत्तरदायी संपादन के लिए ब्रेकपॉइंट प्रबंधन।
Cloudinary संपादक के संपत्ति स्रोत के रूप में।
उत्पाद प्रकार के अनुसार चार शुरुआती बिंदु। प्रत्येक लिस्टिंग वास्तविक है और कैटलॉग से लाइव कीमत है।
आपके उत्पाद के अंदर एक बिल्डर के लिए
सामग्री-भारी साइटों के लिए
टेम्प्लेट और कैंपेन के लिए
किसी मौजूदा घटक लायब्रेरी के लिए
दिखाई गई कीमतें वर्तमान कैटलॉग कीमतें हैं।
Puck और GrapesJS अलग-अलग सामग्री और संपादक मॉडल का उपयोग करते हैं, इसलिए माइग्रेशन पैकेज प्रतिस्थापन के बजाय डेटा-मॉडल परिवर्तन है। नीचे दी गई हर चीज़ उस परिवर्तन का वर्णन करती है।
आपका कॉन्फ़िगरेशन, साथ ही प्रत्येक रखे गए घटक के प्रॉप्स।
संरचना, शैली, मीडिया और संपादक स्थिति को कवर करने वाला एक परियोजना दस्तावेज।
मौजूदा सामग्री मॉडल और संपादक कॉन्फ़िगरेशन को मैप किया जाना चाहिए, पोर्ट नहीं किया जाना चाहिए। अगले दो खंड मैपिंग और रोडमैप दिखाते हैं।
एक ही विचार के लिए प्रत्येक पक्ष की अपनी शब्दावली होती है: एक चीज जिसे उपयोगकर्ता रख सकते हैं, और इसके कुछ हिस्सों को वे संपादित कर सकते हैं। एक प्रवास दोनों के बीच का परिवर्तन है।
एक ट्रांसफ़ॉर्म जिसे आप प्रति घटक प्रकार में एक बार लिखते हैं। कोई स्वचालित कनवर्टर नहीं है - यह काम है।
अवयव
प्रत्येक Puck घटक प्रकार GrapesJS घटक प्रकार बन जाता है।
संपादन योग्य फ़ील्ड
Puck फ़ील्ड traits, विशेषताएँ या संपादन योग्य चाइल्ड घटक बन जाते हैं।
प्रॉप्स और डिफॉल्ट
defaultProps घटक मॉडल के डिफ़ॉल्ट पर मैप करता है।
मान्यता
फ़ील्ड बाधाएँ विशेषता परिभाषाओं या आपकी अपनी जांच में चली जाती हैं।
प्रतिपादन
एक React रेंडर फ़ंक्शन मार्कअप बन जाता है जिसे कैनवास होस्ट कर सकता है।
ब्लॉक
कॉन्फ़िगरेशन में जो निहित था वह एक स्पष्ट ब्लॉक पंजीकरण बन जाता है।
संग्रहीत सामग्री
मौजूदा Puck JSON को परियोजना डेटा में बदलना होगा।
Editor UI
पैनल, फ़ील्ड और ओवरराइड पुनः कॉन्फ़िगर किए गए हैं, पोर्ट नहीं किए गए हैं।
माइग्रेशन प्रयास घटकों की संख्या, आपकी मौजूदा सामग्री स्कीमा, किसी भी कस्टम संपादक व्यवहार और आपके एकीकरण पर निर्भर करता है। मुट्ठी भर सरल घटक बीस्पोक फ़ील्ड यूआई के साथ एक बड़ी लाइब्रेरी से बहुत अलग काम है।
एक वैचारिक पहले और बाद में, मानचित्रण के आकार को दिखाने के लिए सरलीकृत। सटीक क्षेत्र-से-विशेषता पत्राचार को सार्वभौमिक स्वचालित रूपांतरण के बजाय उदाहरण के रूप में मानें।
-thumbnail.jpg&w=3840&q=70)
-thumbnail.jpg&w=3840&q=70)
// Puck: a component is configuration + a React render function.
// Field types are documented at puckeditor.com/docs/api-reference/fields
const config = {
components: {
Hero: {
fields: {
title: { type: 'text' },
description: { type: 'textarea' },
image: { type: 'text' },
},
defaultProps: {
title: 'Ship faster',
description: 'The visual editor your team already knows.',
image: '/hero.png',
},
render: ({ title, description, image }) => (
<section className="hero">
<img src={image} alt="" />
<h1>{title}</h1>
<p>{description}</p>
</section>
),
},
},
};// GrapesJS: a component type owns its markup, its editable traits and how it
// is exposed to the canvas. Traits are the closest analogue to Puck fields.
editor.Components.addType('hero', {
model: {
defaults: {
tagName: 'section',
attributes: { class: 'hero' },
traits: [
{ name: 'title', type: 'text', changeProp: true },
{ name: 'description', type: 'text', changeProp: true },
{ name: 'image', type: 'text', changeProp: true },
],
components: [
{ type: 'image' },
{ tagName: 'h1', type: 'text', content: 'Ship faster' },
{ tagName: 'p', type: 'text', content: 'The visual editor…' },
],
},
},
});
// A block is what makes the type draggable from the panel. Puck derives this
// from the config; in GrapesJS it is a separate, explicit registration.
editor.Blocks.add('hero-block', {
label: 'Hero',
category: 'Sections',
content: { type: 'hero' },
});कॉन्फ़िगरेशन इसका केवल आधा है। आपके उपयोगकर्ताओं ने पहले से सहेजी हुई कोई भी चीज़ Puck JSON है, और इसे चलना होगा और आपके नए प्रकार के घटकों में बदलना होगा।
// Existing Puck content is a JSON tree of { type, props } nodes. Migrating it
// means walking that tree and emitting the GrapesJS component definitions your
// new types understand — a transform you write once, per component type.
function puckNodeToGjs(node) {
const map = {
Hero: ({ title, description, image }) => ({
type: 'hero',
title,
description,
image,
}),
// …one entry per component type in your Puck config
};
const toGjs = map[node.type];
if (!toGjs) throw new Error(`Unmapped Puck component: ${node.type}`);
return toGjs(node.props);
}
// Puck stores content under `data.content`; `data.root` holds page-level props.
const components = puckData.content.map(puckNodeToGjs);
editor.setComponents(components);वैचारिक उदाहरण। फ़ील्ड प्रकार, विशेषता परिभाषाएँ और सटीक घटक मॉडल आपके अपने घटकों पर निर्भर करेगा।
विस्तृत सूची
जो मौजूद है उसे सूचीबद्ध करें: Puck घटक, उनके फ़ील्ड, आपके सामग्री प्रकार, सहेजे गए JSON, रेंडरर और प्रकाशन प्रवाह। माइग्रेशन में अधिकांश आश्चर्य इस सूची में हैं।
मानचित्र घटक
कोड लिखने से पहले पत्राचार तय करें: Puck घटक से GrapesJS घटक प्रकार, Puck फ़ील्ड से विशेषता, विशेषता या कस्टम UI, Puck लेआउट से घटक संरचना, Puck डेटा को प्रोजेक्ट डेटा के लिए।
संपादक का पुनर्निर्माण करें UI
केवल उस इंटरफ़ेस को फिर से बनाएं जिसका आपके उपयोगकर्ता वास्तव में उपयोग करते हैं। माइग्रेशन उन पैनलों को छोड़ने का सबसे सस्ता क्षण है जिन्हें किसी ने नहीं खोला है।
मौजूदा सामग्री को माइग्रेट करें
संग्रहीत Puck पेड़ पर चलें और उन घटक परिभाषाओं का उत्सर्जन करें जिन्हें आपके नए प्रकार समझते हैं। परिवर्तन को संस्करण नियंत्रण में रखें - आप इसे एक से अधिक बार चलाएंगे।
दोनों को समानांतर में चलाएं
जहां जोखिम अधिक है, पुराने संपादक को पुरानी सामग्री प्रस्तुत करते हुए रखें जबकि नया नई सामग्री लेता है। दोहरी रेंडरिंग आपको रोकने की क्षमता खरीदता है।
मान्य करें
दृश्य आउटपुट, उत्तरदायी व्यवहार, प्रकाशन, सहेजे गए डेटा और आपके उपयोगकर्ता वास्तव में किए जाने वाले वर्कफ़्लो की तुलना करें - न केवल संपादक लोड करता है।
कट ओवर
तुलना साफ़ हो जाने के बाद उपयोगकर्ताओं को आगे बढ़ाएँ, पुराना पथ तब तक पहुँचा जा सकता है जब तक कि नया पूर्ण उपयोग चक्र से न गुजर जाए.
ऊपर दी गई हर चीज़ गाइड है - किसी ईमेल की आवश्यकता नहीं है, कुछ भी गेट नहीं है, कोई वादा किया गया समयरेखा नहीं है। माइग्रेशन प्रयास इस बात पर निर्भर करता है कि आपके पास कितने घटक हैं, आपने कितना कस्टम संपादक व्यवहार बनाया है और कितनी सामग्री पहले से मौजूद है, इसलिए हम उस अवधि को उद्धृत नहीं करेंगे जिसके पीछे हम खड़े नहीं हो सकते।
Puck कॉन्फ़िगरेशन, फ़ील्ड, प्रॉप्स और रेंडर, GrapesJS घटक प्रकारों, traits, ब्लॉक और स्टोरेज से मेल खाता है।
आठ चीजें जिन्हें प्रति घटक प्रकार मैप किया जाना है, ऊपर सूचीबद्ध हैं।
क्या Puck बनी रहती है बनाम GrapesJS परियोजना क्या रखती है, और प्रत्येक टुकड़ा कहां उतरता है।
संपादक React ऐप के अंदर कैसे माउंट होता है, और Next.js में इसका क्या मतलब है।
कौन से सबसिस्टम को पहले कॉन्फ़िगर करना है ताकि संपादक कच्चे के बजाय समाप्त महसूस करे।
एक समय में एक सतह को माइग्रेट करें, मूल रखें, और स्रोत के खिलाफ रेंडर किए गए आउटपुट को अलग करें।
हम आपके मौजूदा Puck घटकों और सामग्री मॉडल को उत्पादन-तैयार GrapesJS कार्यान्वयन के लिए मैप करने में मदद कर सकते हैं। आर्किटेक्चर समीक्षा के बाद स्कोप और शेड्यूल पर सहमति होती है - हम कोडबेस देखने से पहले टाइमलाइन उद्धृत नहीं करते हैं।
वास्तुकला की समीक्षा
हम आपके Puck कॉन्फ़िगरेशन, सामग्री मॉडल और संपादक अनुकूलन पढ़ते हैं, और लिखते हैं कि वास्तव में क्या स्थानांतरित करना है।
Component मानचित्रण
प्रत्येक Puck घटक अपने traits, ब्लॉक और बाधाओं के साथ एक निर्दिष्ट GrapesJS घटक प्रकार बन जाता है।
डेटा माइग्रेशन
आपकी संग्रहीत सामग्री के लिए एक रूपांतरण, एक नमूने के बजाय आपके वास्तविक डेटा के खिलाफ चलता है।
कस्टम संपादक UI
आपके उपयोगकर्ताओं को जिन पैनल, क्रोम और इंटरैक्शन की आवश्यकता होती है — वे आपके उत्पाद से मेल खाने के लिए बनाए गए हैं, न कि डिफ़ॉल्ट डेमो से.
प्लगइन्स और एक्सटेंशन
मार्केटप्लेस प्लगइन्स जहां वे फिट होते हैं, कस्टम प्लगइन्स जहां वे नहीं करते हैं।
बैकएंड एकीकरण
भंडारण, संपत्ति, अनुमतियाँ और प्रकाशन आपके स्वयं के API और डेटाबेस में वायर्ड हैं।
परीक्षण और तैनाती
आउटपुट तुलना, उत्तरदायी जांच और एक कटओवर योजना वापस आने के तरीके के साथ।
कोई एक सबसे अच्छा विकल्प नहीं है - यह इस बात पर निर्भर करता है कि आपका संपादक किस लिए है। GrapesJS सबसे मजबूत विकल्प है जब आपको कैनवास, ब्लॉक, शैलियों, परतों, संपत्तियों और उत्तरदायी संपादन के साथ एक व्यापक दृश्य संपादक नींव की आवश्यकता होती है। Craft.js Puck-प्रथम ढांचे के रूप में React के करीब है। यदि आपका संपादक वास्तव में React घटक विन्यासकर्ता है, तो सबसे अच्छा विकल्प Puck पर रहना हो सकता है।
हाँ, एक विशिष्ट प्रकार के उत्पाद के लिए। दोनों आपको एक इन-ऐप विज़ुअल एडिटर बनाने देते हैं और दोनों ओपन सोर्स और सेल्फ-होस्ट किए गए हैं। वे शुरुआती बिंदु में भिन्न हैं: Puck एक React घटक वृक्ष का संपादन करता है, GrapesJS एक दृश्य दस्तावेज़ संपादित करता है। GrapesJS एक वास्तविक विकल्प है जब आपको विज़ुअल दस्तावेज़ मॉडल की आवश्यकता होती है; यह तब और भी बुरा होता है जब React घटक सामग्री मॉडल होते हैं।
Puck एक React-पहला संपादक है जो आपके स्वयं के React घटकों को बनाने और कॉन्फ़िगर करने के आसपास बनाया गया है: इसका डेटा JSON घटक प्रकारों और प्रॉप्स का वर्णन करता है, और प्रतिपादन React के माध्यम से होता है। GrapesJS एक व्यापक विज़ुअल एडिटर फाउंडेशन है जो एक विज़ुअल दस्तावेज़ के चारों ओर बनाया गया है, जिसमें घटकों, ब्लॉकों, शैलियों, परतों, संपत्तियों, उपकरणों, कमांड और स्टोरेज के लिए प्रलेखित मॉड्यूल हैं, और प्रथम श्रेणी आउटपुट के रूप में HTML और CSS हैं।
Puck React के अंदर चलता है — React संपादक और रेंडर किए गए आउटपुट दोनों के लिए रनटाइम है। इसका डेटा सादा JSON है, इसलिए कोई अन्य सिस्टम इसे पढ़ सकता है, लेकिन संपादन और प्रतिपादन अनुभव डिज़ाइन द्वारा React-मूल है। यह React उत्पादों के लिए एक ताकत है और एक बाधा है यदि एक ही संपादक को कहीं चलाना है React होस्ट नहीं है।
हाँ। GrapesJS एक आधिकारिक React रैपर, @grapesjs/react भेजता है, और कोर एडिटर फ्रेमवर्क-अज्ञेयवादी है, इसलिए यह किसी भी अन्य क्लाइंट-साइड घटक की तरह React या Next.js एप्लिकेशन के अंदर माउंट होता है। माउंटिंग पैटर्न के लिए GrapesJS React एकीकरण मार्गदर्शिका देखें।
आप React घटकों को GrapesJS संपादक में एकीकृत कर सकते हैं, लेकिन उस तरह से नहीं जैसे Puck करता है। GrapesJS घटक प्रकार कैनवास दस्तावेज़ में अपने मार्कअप के मालिक होते हैं, इसलिए एक React घटक को आमतौर पर GrapesJS प्रकार के रूप में मिलान traits के साथ प्रतिबिंबित किया जाता है, या एक कस्टम दृश्य के माध्यम से कैनवास में प्रस्तुत किया जाता है। यह मूल मॉडल के बजाय एक एकीकरण परत है।
हाँ। GrapesJS एक क्लाइंट-साइड एडिटर है जिसके पास iframe कैनवास है, इसलिए इसे क्लाइंट घटक से माउंट करना होगा। Pages Router में जिसका आमतौर पर मतलब SSR अक्षम के साथ एक गतिशील आयात है; App Router में एक क्लाइंट घटक पर्याप्त है।
इसके प्राथमिक मॉडल के रूप में नहीं। Puck घटक प्रॉप्स को संपादित करता है, और मार्कअप और स्टाइलिंग आपके द्वारा लिखे गए React घटकों से आती है। आप निश्चित रूप से एक ऐसा घटक बना सकते हैं जो कच्चे मार्कअप या वर्ग के नाम स्वीकार करता है, लेकिन HTML या CSS संपादन सतह नहीं है, जिस तरह से GrapesJS एक Style Manager और एक संपादन योग्य दस्तावेज़ प्रदान करता है।
हाँ - इसे एम्बेड करने के लिए डिज़ाइन किया गया है, और इसका उपयोग SaaS उत्पादों के अंदर संपादन परत के रूप में किया जाता है। यह संपादक को प्रदान करता है, उत्पाद नहीं: प्रमाणीकरण, संगठन, अनुमतियाँ, बिलिंग, दृढ़ता और प्रकाशन आपके निर्माण के लिए बने हुए हैं।
हाँ। यह मुख्य उपयोग का मामला है: एक कैनवास, एक ब्लॉक पैलेट, शैली नियंत्रण, परतें, संपत्ति, उत्तरदायी उपकरण और HTML और CSS आउटपुट। आप जो जोड़ते हैं वह आपकी अपनी ब्लॉक लाइब्रेरी, संपादक UI और स्टोरेज है।
हाँ। संपादक UI बदली जा सकती है - पैनल, बटन और दृश्यों को स्वैप या पुनर्निर्माण किया जा सकता है, और कोई विक्रेता ब्रांडिंग नहीं है जिसे आपको प्रदर्शित करने की आवश्यकता है। मल्टी-टेनेंट ब्रांडिंग, प्रति-किरायेदार ब्लॉक सेट और अनुमतियाँ ऐसी चीजें हैं जिन्हें आपका एप्लिकेशन शीर्ष पर लागू करता है।
हां, ईमेल ब्लॉक और MJML संलेखन और निर्यात के लिए इकोसिस्टम प्लगइन्स का उपयोग करना। ईमेल रेंडरिंग अपना स्वयं का अनुशासन है: कोई भी संपादक सार्वभौमिक ईमेल-क्लाइंट संगतता की गारंटी नहीं दे सकता है, इसलिए टेम्प्लेट को अभी भी उन ग्राहकों में परीक्षण की आवश्यकता है जिनका आपके प्राप्तकर्ता वास्तव में उपयोग करते हैं।
हाँ, इसे बदलकर। Puck घटक प्रकारों और प्रॉप्स के JSON पेड़ को संग्रहीत करता है; GrapesJS घटकों, शैलियों, संपत्तियों और पृष्ठों का वर्णन करने वाले प्रोजेक्ट डेटा को संग्रहीत करता है। माइग्रेशन का अर्थ है Puck पेड़ पर चलना और GrapesJS घटक परिभाषाओं को उत्सर्जित करना जो आपके नए प्रकार समझते हैं - एक परिवर्तन जिसे आप प्रति घटक प्रकार में एक बार लिखते हैं।
नहीं। कोई स्वचालित कनवर्टर नहीं है, और कोई भी पृष्ठ जो दावा करता है वह इसे बढ़ा-चढ़ाकर बता रहा है। दो संपादक अलग-अलग चीजों को बनाए रखते हैं, इसलिए मैपिंग आपके घटकों और आपकी सामग्री स्कीमा पर निर्भर करती है। जो पुनः उपयोग किया जा सकता है वह परिवर्तन का आकार है, जो यह पृष्ठ दिखाता है।
यह घटक प्रकारों की संख्या पर निर्भर करता है, आपने कितना कस्टम संपादक व्यवहार बनाया है, कितनी सामग्री पहले से मौजूद है और आपका रेंडरर React से कितना युग्मित है। हम एक अवधि प्रकाशित नहीं करते हैं, क्योंकि स्वच्छ डेटा के साथ छह घटकों का माइग्रेशन और हाथ से संपादित JSON के साथ साठ में से एक का माइग्रेशन एक ही प्रोजेक्ट नहीं है।
हां, लेकिन आप इसे जानबूझकर कनेक्ट करते हैं। आम तौर पर आप प्रति डिज़ाइन-सिस्टम घटक के लिए GrapesJS घटक प्रकार पंजीकृत करते हैं, प्रॉप्स को उजागर करते हैं जिन्हें उपयोगकर्ता traits के रूप में बदल सकते हैं, और प्रत्येक को Block Manager में जोड़ते हैं। वह बाधा ही आउटपुट को ऑन-ब्रांड बनाए रखती है।
हाँ। Storage Manager को अपने स्वयं के API के माध्यम से पढ़ने और लिखने के लिए कॉन्फ़िगर किया जा सकता है, इसलिए प्रोजेक्ट डेटा आपके डेटाबेस में आपके द्वारा चुने गए किसी भी आकार में रहता है। किसी तृतीय-पक्ष सेवा से कुछ भी नहीं गुजरना पड़ता है।
हाँ। यह एक npm पैकेज है जिसे आप अपने स्वयं के एप्लिकेशन में बंडल करते हैं - इसमें कोई होस्ट की गई सेवा नहीं है, कोई खाता नहीं है और कोई प्रति-सीट लाइसेंस नहीं है। कोर BSD-3-Clause लाइसेंस प्राप्त है और React आवरण MIT है।
नहीं, GrapesJS बिना किसी मार्केटप्लेस प्लगइन के पूरी तरह से प्रयोग करने योग्य है, और कोर मॉड्यूल मुफ्त और खुले स्रोत हैं। प्लगइन्स मौजूद हैं इसलिए आप इसे बनाने के बजाय एक क्षमता खरीद सकते हैं - एक संपादक UI शेल, ईमेल टूलींग, एक ब्लॉक लाइब्रेरी - जब वह व्यापार आपकी टीम के लिए इसके लायक हो।
केवल तभी जब आपका संपादक घटक-विन्यासकर्ता मॉडल से आगे निकल गया हो। यदि उपयोगकर्ता विज़ुअल स्टाइलिंग, ब्लॉक, लेयर्स, एसेट्स, टेम्प्लेट, रिस्पॉन्सिव कंट्रोल या गैर-React आउटपुट के लिए पूछ रहे हैं, तो एक व्यापक नींव काम को बचाएगी। यदि आपका संपादक आपके React घटकों की रचना करता है और उसे यही करते रहना चाहिए, तो Puck पर बने रहना सही कॉल है।
यदि Puck पहले से ही आपके React घटक मॉडल में फिट बैठता है, तो स्विच करने का कोई कारण नहीं हो सकता है। लेकिन अगर आपका संपादक एक पूर्ण दृश्य उत्पाद बन रहा है, तो GrapesJS आपको निर्माण, अनुकूलित और विस्तार करने के लिए एक व्यापक आधार देता है।
एक लाइव एडिटर खोलें, फिर डॉक्स पढ़ें और बनाएं। देखना शुरू करने के लिए इंस्टॉल करने के लिए कुछ भी नहीं।
एक लाइव डेमो खोलेंसंपादक को उस चीज़ के साथ विस्तारित करें जो आप अन्यथा बनाएंगे: UI गोले, ब्लॉक, ईमेल, संपत्ति और भंडारण।
प्लगइन्स ब्राउज़ करेंहम आपके Puck कार्यान्वयन का ऑडिट करते हैं, लक्ष्य वास्तुकला डिजाइन करते हैं और आपके साथ माइग्रेशन करते हैं।
किसी विशेषज्ञ से बात करें