खुला स्रोत · स्व-होस्टेड

अपना खुद का निर्माण करें ओपन-सोर्स पेज बिल्डर

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

निर्माण शुरू करें प्लगइन्स का अन्वेषण करें पेज बिल्डरों की तुलना करें
खुला स्रोतस्व-होस्टेडअनुकूलनएक्स्टेंसिबलकोई संपादक विक्रेता लॉक-इन नहीं

ब्लॉक, कैनवास और शैली नियंत्रण - आपके आवेदन के अंदर, आपके बुनियादी ढांचे पर चल रहे हैं।

26k+

GitHub सितारे

BSD-3-Clause

कोर लाइसेंस

1.4M+

मासिक npm डाउनलोड

100+

GJS.Market पर प्लगइन्स

कौन सा ओपन सोर्स आपको खरीदता है

एक ओपन-सोर्स पेज बिल्डर आपको क्या देता है?

ओपन सोर्स एक फीचर सूची नहीं है - यह आपके उत्पाद में संपादक पर अधिकारों का एक सेट है। ये छह हैं जो आपके निर्माण के तरीके को बदलते हैं।

कोड नियंत्रण

संपादक का स्रोत पठनीय है। आप उस रेखा के लिए एक व्यवहार का पता लगा सकते हैं जो इसका कारण बनता है, इसे पैच कर सकते हैं, और यदि आपको कभी भी करना हो तो इसे फोर्क कर सकते हैं।

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

GrapesJS एक क्लाइंट-साइड लाइब्रेरी है जिसे आप बंडल करते हैं। कुछ भी घर नहीं कहता है, और संपादक किसी और के अपटाइम की परवाह किए बिना काम करता रहता है।

डेटा स्वामित्व

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

UI नियंत्रण

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

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

आपका APIs, आपका प्रमाणीकरण, आपका परिसंपत्ति भंडारण, आपकी प्रकाशन पाइपलाइन। संपादक आपके द्वारा दिए गए कार्यों को कॉल करता है।

कोई संपादक विक्रेता लॉक-इन नहीं

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

ग़लतफ़हमी

ओपन सोर्स का मतलब स्क्रैच से सब कुछ बनाना नहीं है

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

खुला स्रोत

इसका मतलब यह नहीं है कि
सब कुछ स्वयं बनाएं

खुला स्रोत

आर्थिक सामर्थ्य
अपनाअनुकूलित करेंविस्तार

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

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

स्क्रैच बनाम फाउंडेशन

स्क्रैच से एक पेज बिल्डर बनाएं, या ओपन सोर्स से शुरू करें?

एक उपयोगी तुलना के बारे में ईमानदार होना चाहिए कि कौन सी क्षमताएं काम करती हैं, जो एक API के रूप में आती हैं जिसे आपको अभी भी उपयोग करना है, और जो किसी भी तरह से बस आपके हैं। यह तालिका उन तीनों को अलग करती है।

योग्‍यताखरोंच से निर्माण करेंओपन-सोर्स फाउंडेशन
दृश्य कैनवासइसे बनाओमें निर्मित
Component मॉडलइसे बनाओमें निर्मित
खींचें और छोड़ेंइसे बनाओमें निर्मित
ब्लॉकइसे बनाओAPI अंतर्निहित - सामग्री आपकी है
बिछानाइसे बनाओमें निर्मित
उत्तरदायी संपादनइसे बनाओअंतर्निहित - आप इसे कॉन्फ़िगर करते हैं
संपत्तिइसे बनाओअंतर्निहित - आप इसे कॉन्फ़िगर करते हैं
समृद्ध पाठइसे बनाओमें निर्मित
पूर्ववत करें / फिर से करेंइसे बनाओमें निर्मित
भंडारइसे बनाओअपना बैकएंड कनेक्ट करें
प्रकाशन-व्‍यवसायइसे बनाओअपना वर्कफ़्लो बनाएँ
कस्टम संपादक UIइसे बनाओअंतर्निहित - आप इसे कॉन्फ़िगर करते हैं
Plugin वास्तुकलाइसे बनाओमें निर्मित
उत्पाद तर्कइसे बनाओआपका आवेदन

grapesjs 0.23.6 पर 2026-09-03 के खिलाफ एक ब्राउज़र में प्रत्येक API चलाकर सत्यापित किया जाता है, न कि एक फीचर सूची पढ़कर। "बिल्ट इन" का अर्थ है मॉड्यूल कोर पैकेज में जहाज; "API बिल्ट इन" का अर्थ है तंत्र जहाज करता है लेकिन सामग्री नहीं है।

वास्तुकला देखें

ओपन सोर्स आपको नियंत्रण से दूर किए बिना एक शुरुआत देता है।

इंजन

GrapesJS को अपने ओपन-सोर्स पेज बिल्डर इंजन के रूप में क्यों उपयोग करें?

GrapesJS एक फ्रेमवर्क-अज्ञेयवादी विज़ुअल एडिटर है जिसे आप npm से इंस्टॉल करते हैं और अपने स्वयं के UI में माउंट करते हैं। ये इसके वे हिस्से हैं जिन पर आप वास्तव में निर्माण करेंगे - और जहां हर एक रुकता है।

कोर

दृश्य संपादन

एक कैनवास जिसे आपके उपयोगकर्ता सीधे लिखते हैं: इसका पूर्वावलोकन करने के बजाय वास्तविक DOM का चयन करें, स्थानांतरित करें, घोंसला बनाएं और संपादित करें।

कोर

अवयव

टाइप किए गए traits के साथ पुनः प्रयोज्य सामग्री संरचनाएं, इसलिए एक बाज़ारिया एक div के बजाय एक फॉर्म फ़ील्ड में एक शीर्षक संपादित करता है।

कोर API

ब्लॉक

draggable पैनल कोर है; इसमें ब्लॉक नहीं हैं। आप अपना खुद का पंजीकरण करते हैं, या एक ब्लॉक प्लगइन स्थापित करते हैं।

कोर

बिछाना

क्षेत्रों और चयनकर्ताओं के साथ एक स्टाइल मैनेजर, इसलिए उपयोगकर्ता CSS को छुए बिना कुछ कैसा दिखता है, यह बदल देता है।

कोर

उत्तरदायी संपादन

डिवाइस ब्रेकप्वाइंट एक कोर मॉड्यूल हैं। आप परिभाषित करते हैं कि आपका उत्पाद कौन से उपकरण प्रदान करता है और वे किस चौड़ाई के लिए मैप करते हैं।

कोर API

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

एक प्लगइन एक फ़ंक्शन है जो संपादक प्राप्त करता है। यही पूरा अनुबंध है, और यही कारण है कि एक पारिस्थितिकी तंत्र मौजूद है।

कोर

HTML/CSS वर्कफ़्लो

आउटपुट HTML और CSS है जिसे आप पढ़ सकते हैं, अलग कर सकते हैं और परोस सकते हैं। उपयोगी तब जब आप जो चीज़ बना रहे हैं वह वास्तव में वेब के लिए हो।

प्लगइन्स के माध्यम से

ईमेल वर्कफ़्लोज़

ईमेल कोर पैकेज में नहीं है। MJML और न्यूज़लेटर प्रीसेट इसे जोड़ते हैं - एक वास्तविक क्षमता, लेकिन एक स्थापित।

GrapesJS दस्तावेज़ पढ़ें
किसका मालिक है

GrapesJS संपादक को संभालता है। आपका एप्लिकेशन उत्पाद को संभालता है।

"ओपन सोर्स" और "आपके पास एक पेज बिल्डर" के बीच की हर परत किसी की है। आपके कौन से हैं, इसके बारे में स्पष्ट होना एक यथार्थवादी योजना और एक आश्चर्य के बीच का अंतर है।

  1. Open Sourceखुला स्रोत
  2. GrapesJSखुला स्रोत
  3. Your Applicationआप इसके मालिक हैं
  4. Your Backendआप इसके मालिक हैं
  5. GJS.Market Pluginsवैकल्पिक
  6. Your Page Builderपरिणाम

GrapesJS

ओपन-सोर्स विज़ुअल एडिटिंग फाउंडेशन: कैनवास, घटक, ब्लॉक, शैलियाँ, संपत्ति और प्लगइन अनुबंध।

आपका आवेदन

प्रमाणीकरण, डैशबोर्ड, बिलिंग, उपयोगकर्ता, अनुमतियाँ और संपादक के आसपास उत्पाद अनुभव।

आपका बैकएंड

भंडारण, परियोजनाएं, प्रकाशन, संस्करण और व्यावसायिक तर्क जो आपके उत्पाद को भुगतान करने लायक बनाता है।

GJS.Market प्लगइन्स

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

आप अपने उत्पाद को आउटसोर्स नहीं कर रहे हैं। आप कैनवास को फिर से लिखने से इनकार कर रहे हैं।

स्‍थापत्‍यशैली

अपना खुद का पेज बिल्डर आर्किटेक्चर बनाएं

संपादक एक परत है, सिस्टम नहीं। यहां वह जगह है जहां यह बैठता है, इसके चारों ओर क्या है, और यह क्या वापस करता है - ताकि आप देख सकें कि इस आरेख का कितना कोड आपको लिखना है।
  1. Your Product

    वह सब कुछ जो आपके उत्पाद को आपका बनाता है। इसमें से कोई भी संपादक से नहीं आता है।

    • Authentication
    • Billing
    • Users
    • Permissions
  2. React / Vue / Angular / Your UI

    जो कुछ भी आप पहले से ही बनाते हैं। GrapesJS फ्रेमवर्क-अज्ञेयवादी है और एक कंटेनर तत्व में माउंट होता है।

  3. GrapesJS — Editor Foundation

    ओपन-सोर्स परत। npm से स्थापित, आपके द्वारा कॉन्फ़िगर किया गया, आपके बुनियादी ढांचे पर चल रहा है।

    • Blocks
    • Styles
    • Assets
    • Components
  4. Your Backend

    आपका API, आपका डेटाबेस, आपके नियम। GrapesJS आपके द्वारा लिखे गए लोड और स्टोर फ़ंक्शंस को कॉल करता है।

    • Storage
    • Versions
    • Publishing
    • Business Logic

GrapesJS संपादन अनुभव को संभालता है। आपका एप्लिकेशन वह सब कुछ संभालता है जो आपके उत्पाद को अद्वितीय बनाता है।

देखें कि एकीकरण कैसे काम करता है
बक्सों का इस्तेमाल करें

आप ओपन-सोर्स पेज बिल्डर के साथ क्या बना सकते हैं?

छह उत्पाद टीमें वास्तव में इस नींव पर जहाज करती हैं। हर एक एक ही संपादक के आसपास अलग-अलग काम है।

SaaS पेज बिल्डर

अपने ग्राहकों को अपने घटकों और अपनी अनुमतियों के साथ आपके उत्पाद के अंदर पृष्ठ बनाने और अनुकूलित करने दें।

एक SaaS पेज बिल्डर बनाएं

वेबसाइट बिल्डर

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

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

लैंडिंग पेज बिल्डर

विपणक को बिना किसी तैनाती के अभियान पृष्ठों को शिप करने का एक दृश्य तरीका दें - और अपने डिज़ाइन सिस्टम को छोड़े बिना।

लैंडिंग पेज बिल्डर बनाएं

CMS दृश्य संपादक

CMS या हेडलेस CMS में विज़ुअल संपादन जोड़ें, ताकि संपादक फ़ील्ड सूची के बजाय पृष्ठ देखें.

एक CMS संपादक बनाएं

ईमेल बिल्डर

एक ही संपादक, ईमेल की ओर इशारा किया। MJML और न्यूज़लेटर प्रीसेट आउटपुट को संभालते हैं; वे प्लगइन्स हैं, कोर नहीं।

एक ईमेल बिल्डर बनाएं

आंतरिक सामग्री उपकरण

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

भेंट

ओपन-सोर्स पेज बिल्डर किसके लिए है?

चार स्थितियाँ जहाँ संपादक का मालिक होना उस काम के लायक है जिसकी लागत आती है।

01

SaaS संस्थापक

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

02

उत्पाद टीम

आपको पहले से मौजूद एप्लिकेशन के अंदर विज़ुअल संपादन की आवश्यकता है, जो पहले से ही उपयोग किए जाने वाले ढांचे पर है।

03

डेवलपर्स

आप संपादक वास्तुकला, डेटा मॉडल और हर एकीकरण बिंदु पर नियंत्रण चाहते हैं।

04

एजेंसियों

आप पुनः प्रयोज्य दृश्य संपादन बुनियादी ढांचा चाहते हैं जिसे आप प्रति साइट पुनः लाइसेंस देने के बजाय क्लाइंट प्रोजेक्ट में ले जा सकते हैं।

जब यह फिट बैठता है

आपको GrapesJS कब चुनना चाहिए?

GrapesJS आवश्यकता के एक विशिष्ट आकार का एक अच्छा उत्तर है। यदि इस सूची में से अधिकांश आपकी सूची है, तो यह फिट बैठता है।

जब आपको आवश्यकता हो तो GrapesJS चुनें:

  • आपके द्वारा नियंत्रित बुनियादी ढांचे पर स्व-होस्टिंग
  • किसी मौजूदा अनुप्रयोग के अंदर एक एम्बेड करने योग्य संपादक
  • एप्लिकेशन आर्किटेक्चर पर नियंत्रण
  • अनुकूलन योग्य संपादन वर्कफ़्लो
  • कस्टम घटक और ब्लॉक
  • आपका अपना बैकएंड और डेटा मॉडल
  • आपकी अपनी प्रकाशन पाइपलाइन
  • प्लगइन्स के माध्यम से एक्स्टेंसिबिलिटी
  • HTML/CSS-उन्मुख आउटपुट
  • एक स्टैंडअलोन टूल के बजाय एक SaaS एकीकरण
  • एक निश्चित होस्ट किए गए प्लेटफ़ॉर्म के बजाय एक अनुकूलन योग्य संपादक

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

GrapesJS से शुरू करें
जब ऐसा नहीं होता है

दूसरा पेज बिल्डर कब बेहतर हो सकता है?

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

  • एक होस्ट किया गया मंच

    आप एक प्रबंधित उत्पाद चाहते हैं, बुनियादी ढांचा नहीं

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

  • एक React घटक संपादक

    आपकी आवश्यकता React घटकों की रचना कर रही है

    यदि पृष्ठ आपके स्वयं के React घटकों के पेड़ हैं और कभी भी HTML आप हाथ से संपादित नहीं करते हैं, तो एक React-पहला संपादक आपके डेटा मॉडल से HTML/CSS-उन्मुख मॉडल से अधिक सीधे मेल खाता है।

  • एक संपूर्ण वेबसाइट बिल्डर

    आपको पूरे एप्लिकेशन की जरूरत है, फाउंडेशन की नहीं

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

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

ओपन-सोर्स पेज बिल्डरों की तुलना करें
चार अलग-अलग चीजें

वे सभी एक ही तरह के उत्पाद नहीं हैं

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

एम्बेड करने योग्य संपादक फ्रेमवर्क

पुस्तकालयों आप npm से स्थापित करते हैं और आपके पास पहले से मौजूद एप्लिकेशन के अंदर माउंट करते हैं। आप UI, बैकएंड और प्रकाशन पाइपलाइन की आपूर्ति करते हैं; पुस्तकालय संपादन की आपूर्ति करता है।

इस समूह में

  • GrapesJS

React संपादक फ्रेमवर्क

अपने स्वयं के React घटक वृक्ष पर एक संपादक बनाने के लिए पुस्तकालय। एक पृष्ठ घटकों का वर्णन करने वाला JSON है, मार्कअप नहीं - जो सही मॉडल है यदि आपके पृष्ठ पहले से ही React हैं।

इस समूह में

  • Puck
  • Craft.js

विज़ुअल वेबसाइट बिल्डर्स

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

इस समूह में

  • Silex
  • Webstudio

CMS/सामग्री प्लेटफ़ॉर्म

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

इस समूह में

  • Webiny
क्षेत्र

सर्वश्रेष्ठ ओपन-सोर्स पेज बिल्डर्स तुलना

योग्‍यताGrapesJSPuckCraft.jsSilexWebstudioWebiny
लाइसेंसBSD-3-ClauseMITMITAGPL-3.0AGPL-3.0MIT*
स्व-होस्टेडहाँ - एक क्लाइंट-साइड लाइब्रेरी जिसे आप बंडल करते हैंहाँहाँहाँ - डॉकर, npm या स्रोतप्रकाशित साइटें हाँ; दस्तावेज़ उत्पादन में बिल्डर को स्व-होस्टिंग के खिलाफ सलाह देते हैंहां, लेकिन केवल एडब्ल्यूएस - दस्तावेज़ स्पष्ट हैं कि और कुछ भी समर्थित नहीं है
आपके ऐप में एम्बेड करने योग्यहाँ - लाइब्रेरी को किसी भी कंटेनर तत्व में माउंट करेंहाँ - आपके पेड़ में "सिर्फ एक React घटक"हां, लेकिन यह एक टूलकिट है: आप संपादक UI स्वयं बनाते हैंNode सर्वर के रूप में। कोई प्रलेखित फ्रंट-एंड एडिटर माउंट नहींनहीं - बिल्डर पैकेज निजी है और npm पर प्रकाशित नहीं किया गया हैनहीं - एक iframe पूरी तरह से तैनात Webiny स्टैक में
दृश्य संपादक✓✓✓✓✓✓
खींचें और छोड़ें✓✓✓✓✓✓
कस्टम घटक✓✓✓✓सत्यापित नहीं किया गया✓
उत्तरदायी संपादन✓✓कस्टम - आप इसे बनाते हैंआंशिक✓✓
कस्टम बैकएंड/स्टोरेजभंडारण API - आपका अपना लोड और स्टोर फ़ंक्शनonPublish/onChange - आप डेटा सहेजते हैंserialize() / deserialize() - आप JSON को सहेजते हैंभंडारण और होस्टिंग के लिए कनेक्टर APIकोई कनेक्टर नहीं API; सीएलआई निर्यात के माध्यम से डेटा छोड़ देता हैसंग्रहण परियोजना निर्माण के समय तय किया जाता है और बाद में बदला नहीं जा सकता
Plugin वास्तुकला✓✓कोई नहीं - डिजाइन द्वारा✓सत्यापित नहीं किया गया✓
HTML/CSS आउटपुट✓——✓✓—
ईमेल वर्कफ़्लोज़प्लगइन के माध्यम से—————
React✓✓✓प्राथमिक फोकस नहीं✓✓
ढांचाFramework-agnosticReactReactFramework-agnostic (built on GrapesJS)React (React Router v7 output)React (Next.js supported)
सत्यापित संस्करणgrapesjs 0.23.6@puckeditor/core 0.23.0@craftjs/core 0.2.12@silexlabs/silex 3.9.00.296.06.4.9
नवीनतम रिलीज़Released 2026-08-26Released 2026-08-07No commits on any branch since 2025-02Released 2026-07-26Released 2026-09-01Released 2026-08-27

प्रत्येक रिपॉजिटरी की अपनी लाइसेंस फ़ाइल, npm रजिस्ट्री से संस्करण और बहिष्करण, प्रत्येक परियोजना के स्वयं के दस्तावेज़ीकरण से क्षमताएं पढ़े जाते हैं। सत्यापित 2026-09-03। "सत्यापित नहीं" का मतलब है कि हमें किसी भी तरह से प्राथमिक स्रोत नहीं मिला - ऐसा नहीं है कि क्षमता गायब है। डैश का मतलब है कि परियोजना उस उपयोग के मामले को लक्षित नहीं करती है। *वेबिनी का रूट लाइसेंस एक एंटरप्राइज़ निर्देशिका बनाता है और प्रति-पैकेज लाइसेंस को स्थगित करता है; वर्तमान डिफ़ॉल्ट शाखा पर वह निर्देशिका अनुपस्थित है और प्रत्येक प्रति-पैकेज लाइसेंस MIT है।

निर्णय मार्गदर्शिका देखें
निर्णय गाइड

आपको कौन सा ओपन-सोर्स पेज बिल्डर चुनना चाहिए?

तीन प्रश्न, उस क्रम में जो वास्तव में क्षेत्र को संकीर्ण करता है। पहला अन्य दो की तुलना में अधिक विकल्पों को समाप्त करता है।

01

क्या आप संपादक के आसपास एक उत्पाद बना रहे हैं, या एक तैयार उपकरण की तलाश कर रहे हैं?

  • एक उत्पाद - संपादक मेरे आवेदन के अंदर रहता है

    जारी रखो

    आप एक नींव चाहते हैं जिसे आप एम्बेड और नियंत्रित करते हैं। प्रश्न 02 किस तरह को संकीर्ण करता है।

  • एक तैयार उपकरण - मैं इसके साथ साइटें बनाना चाहता हूं

    वेबसाइट बिल्डर

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

  • पूरी टीम के लिए एक सामग्री मंच

    CMS मंच

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

02

आपके उत्पाद में एक पृष्ठ क्या है - मार्कअप, या आपके घटकों का एक पेड़?

  • मार्कअप मैं सेवा कर सकता हूं, निर्यात कर सकता हूं और अंतर कर सकता हूं

    GrapesJS

    HTML और CSS आउटपुट, एक फ्रेमवर्क-अज्ञेयवादी संपादक, और आपके अपने डेटाबेस में एक स्टोरेज एडाप्टर।

  • मेरे अपने React घटकों का एक पेड़

    React संपादक

    यदि पृष्ठ घटक वृक्षों को JSON के रूप में क्रमबद्ध किया जाता है और कभी भी हाथ से संपादित मार्कअप नहीं किया जाता है, तो React-प्रथम संपादक निकटतम फिट है।

  • दोनों, सतह के आधार पर

    GrapesJS + React

    आधिकारिक React रैपर संपादक को React घटक के रूप में माउंट करता है जबकि आउटपुट HTML/CSS रहता है। यह SaaS के लिए सामान्य मामला है।

03

क्या आप होस्टिंग, अपग्रेड और स्टोरेज लेयर ले सकते हैं?

  • हां- हम अपना खुद का बुनियादी ढांचा चलाते हैं

    इसे स्व-होस्ट करें

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

  • अभी नहीं

    होस्ट किया गया संपादक

    एक होस्ट किया गया प्लेटफ़ॉर्म बुनियादी ढांचे को ले जाने वाले किसी और के लिए नियंत्रण का व्यापार करता है। यह एक वैध व्यापार है, विफलता नहीं।

  • हां, लेकिन हम हर सुविधा का निर्माण नहीं करना चाहते हैं

    फाउंडेशन + प्लगइन्स

    संपादक को स्व-होस्ट करें और उन टुकड़ों को खरीदें जो आपके उत्पाद के विभेदक नहीं हैं।

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

जल्दी शुरू

अपना ओपन-सोर्स पेज बिल्डर बनाना शुरू करें

npm से आपके बैकएंड में तार वाले पेज बिल्डर तक चार चरण। नीचे दिए गए प्रत्येक स्निपेट को प्रकाशन से पहले एक वास्तविक ब्राउज़र में grapesjs 0.23.6 के खिलाफ निष्पादित किया गया था - एक चेंजलॉग से अनुकूलित नहीं किया गया था।
  1. Your App
  2. GrapesJS
  3. Blocks · Components · Traits
  4. Your Storage API

  1. 01 - स्थापित करें

    अपने आवेदन में GrapesJS जोड़ें

    एक निर्भरता। कोई बिल्ड प्लगइन नहीं, कोई फ्रेमवर्क आवश्यकता नहीं।

    npm install grapesjs

  2. 02 - आरंभ करें

    संपादक को माउंट करें

    इसे एक कंटेनर पर इंगित करें और अपने डिवाइस ब्रेकपॉइंट चुनें। यह एक कार्यशील संपादक है।

    संपादक को माउंट करेंjs
    import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container: '#gjs',
  height: '100vh',
  width: 'auto',
  // Reads the markup already inside #gjs as the starting page.
  fromElement: true,
  // No storage yet — step 04 connects your backend.
  storageManager: false,
  deviceManager: {
    devices: [
      { id: 'desktop', name: 'Desktop', width: '' },
      { id: 'tablet', name: 'Tablet', width: '768px', widthMedia: '992px' },
      { id: 'mobile', name: 'Mobile', width: '320px', widthMedia: '480px' },
    ],
  },
});

  3. 03 - विस्तार

    ब्लॉक, घटक और प्लगइन्स जोड़ें

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

    ब्लॉक, घटक और प्लगइन्स जोड़ेंjs
    // A component type owns its markup and the traits your users can edit.
editor.Components.addType('cta', {
  model: {
    defaults: {
      tagName: 'a',
      attributes: { class: 'cta', href: '#' },
      components: 'Get started',
      traits: [
        { name: 'href', type: 'text', label: 'Link' },
        { name: 'title', type: 'text', label: 'Title' },
      ],
    },
  },
});

// A block is what makes that type draggable from the panel — a separate,
// explicit registration, not something the type gives you for free.
editor.Blocks.add('cta-block', {
  label: 'CTA',
  category: 'Basic',
  content: { type: 'cta' },
});

  4. 04 - कनेक्ट करें

    संग्रहण, उपयोगकर्ता और प्रकाशन कनेक्ट करें

    स्टोरेज एडाप्टर वह जगह है जहां संपादक रुकता है और आपका उत्पाद शुरू होता है।

    संग्रहण, उपयोगकर्ता और प्रकाशन कनेक्ट करेंjs
    // Your backend, your schema, your auth. GrapesJS calls load() and store();
// everything inside them is yours.
editor.Storage.add('your-backend', {
  async load() {
    const res = await fetch(`/api/pages/${pageId}`, { credentials: 'include' });
    return res.ok ? res.json() : {};
  },
  async store(data) {
    await fetch(`/api/pages/${pageId}`, {
      method: 'PUT',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    return data;
  },
});

// Publishing is your workflow, not the editor's. getHtml()/getCss() give you
// the output; what happens to it is a decision only your product can make.
editor.Commands.add('publish-page', {
  run: (ed) => ({ html: ed.getHtml(), css: ed.getCss() }),
});

grapesjs 0.23.6 पर 2026-09-03 के खिलाफ सत्यापित।

वह पूरी सतह है: इंस्टॉल करें, माउंट करें, विस्तार करें, कनेक्ट करें। चरण 04 के पीछे सब कुछ - ऑथ, बिलिंग, संस्करण, डोमेन - आपका आवेदन है, और इसमें से कोई भी संपादक द्वारा तय नहीं किया जाता है।

एकीकरण मार्गदर्शिका पढ़ें
इसे अजमाएं

द एडिटर, रनिंग

फ़ुलस्क्रीन खोलें

परियोजना का अपना डेमो - कोर संपादक, डिफ़ॉल्ट पैनल, कुछ भी नहीं खरीदा।

grapesjs.com/demo.htmlनिःशुल्क

iframe में एक तृतीय-पक्ष डेमो लोड करता है। जब तक आप क्लिक नहीं करते तब तक कुछ भी लोड नहीं होता है।

पारिस्थितिकी तंत्र

अपने ओपन-सोर्स पेज बिल्डर का विस्तार करें

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

ब्लॉक

कोर ब्लॉक पैनल को शिप करता है, ब्लॉक नहीं। ये इसे भरते हैं।

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

Plugin Basic Blocks

एक स्टार्टर ब्लॉक सेट है, इसलिए पैनल पहले दिन खाली नहीं है।

निःशुल्कद्वारा
GrapesJS Bootstrap v5 Blocks

GrapesJS Bootstrap v5 Blocks

Bootstrap 5 घटकों को खींचने योग्य ब्लॉक के रूप में देखें।

निःशुल्कद्वारा
Plugin Blocky for Tailwind CSS

Plugin Blocky for Tailwind CSS

Tailwind-वर्ग के ब्लॉक पहले से ही Tailwind पर टीमों के लिए।

US$59,00द्वारा

भंडार

एडेप्टर जो ब्राउज़र के अलावा कहीं और प्रोजेक्ट बनाए रखते हैं।

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

Grapesjs Firebase Storage

एडाप्टर लिखने के बजाय परियोजनाओं को Firebase तक बनाए रखें।

निःशुल्कद्वारा
IndexedDB Storage

IndexedDB Storage

क्लाइंट-साइड दृढ़ता - ऑफ़लाइन और प्रोटोटाइप के लिए उपयोगी।

निःशुल्कद्वारा
Directus Storage

Directus Storage

परियोजनाओं को Directus बैकएंड में स्टोर करें।

निःशुल्कद्वारा

React

React ऐप के अंदर संपादक को माउंट करने वाली टीमों के लिए प्रीसेट और गोले।

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

GrapesJS Shadcn

एक ही कोर पर एक shadcn-स्टाइल वाला संपादक खोल।

US$999,99द्वारा
React UI for GrapesJS

React UI for GrapesJS

संपादक के लिए एक React इंटरफ़ेस परत।

निःशुल्कद्वारा
GrapesJS React Demo — Starter Integration for React Developers

GrapesJS React Demo — Starter Integration for React Developers

शुरू करने के लिए एक काम React एकीकरण।

निःशुल्कद्वारा

ईमेल

MJML और न्यूज़लेटर आउटपुट - वह क्षमता जो कोर पैकेज में शामिल नहीं है।

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

MJML Preset

MJML आउटपुट, इसलिए ईमेल HTML ग्राहकों के बीच प्रस्तुत करता है।

निःशुल्कद्वारा
Newsletter Preset

Newsletter Preset

एक न्यूज़लेटर-उन्मुख ब्लॉक सेट और कैनवास।

निःशुल्कद्वारा
GrapesJS Email Blocky – Premium Responsive Email Blocks

GrapesJS Email Blocky – Premium Responsive Email Blocks

उत्पादन ईमेल बिल्डर के लिए उत्तरदायी ईमेल ब्लॉक।

US$69,00द्वारा
सभी GJS.Market प्लगइन्स ब्राउज़ करें

क्षमता के आधार पर ब्राउज़ करें

क्यूरेटेड स्टैक

तीन शुरुआती बिंदु

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

कीमतों को कैटलॉग से लाइव पढ़ा जाता है।

बढ़ाएँ, बदलें नहीं

कोई सुविधा गुम है? संपादक का विस्तार करें।

अधिकांश "GrapesJS X नहीं कर सकते" निष्कर्ष वास्तव में "कोर पैकेज X शिप नहीं करता है" हैं। वे अलग-अलग समस्याएं हैं, और उनमें से केवल एक को एक अलग संपादक की आवश्यकता होती है।

संपादक को न बदलें क्योंकि एक सुविधा गायब है। इसे बढ़ाएं।

कुल लागत

एक ओपन-सोर्स पेज बिल्डर की वास्तव में लागत क्या है?

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

रूट ए

सब कुछ स्वयं बनाएं

आप अपने हैं:

  • संपादक वास्तुकला
  • कैनवास और घटक मॉडल
  • यूएक्स का संपादन
  • शीर्ष पर पूरा उत्पाद
  • परीक्षण
  • रखरखाव
  • भविष्य की हर सुविधा

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

रूट बी

GrapesJS से शुरू करें

आप अभी भी निर्माण करते हैं:

  • आपका आवेदन
  • आपका बैकएंड
  • भंडारण और संस्करण
  • प्रकाशन-व्‍यवसाय
  • उत्पाद-विशिष्ट कार्यक्षमता
  • उन्नयन और होस्टिंग

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

रूट सी

प्लगइन्स के साथ विस्तार करें

आप अभी भी निर्माण करते हैं:

  • आपका आवेदन
  • आपका बैकएंड
  • वे हिस्से जो वास्तव में आपके उत्पाद हैं
  • एकीकरण और आप जो स्थापित करते हैं उसका उन्नयन

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

हम जानबूझकर "खरोंच से पेज बिल्डर बनाने" के लिए कोई डॉलर का आंकड़ा प्रकाशित नहीं करते हैं। इसके लिए कोई विश्वसनीय सार्वजनिक बेंचमार्क नहीं है, ईमानदार उत्तर पूरी तरह से आपकी टीम और दायरे पर निर्भर करता है, और एक आविष्कृत संख्या इस पृष्ठ पर सबसे कम भरोसेमंद चीज होगी। इसके बजाय ऊपर की सतहों की गणना करें - वे वह चीज हैं जो आप वास्तव में व्यापार कर रहे हैं।

अन्य व्यापार

ओपन सोर्स बनाम होस्टेड पेज बिल्डर्स

यह एक व्यापार है, रैंकिंग नहीं। ओपन सोर्स आपको अधिक नियंत्रण देता है; होस्ट किया गया आपको संचालित करने के लिए कम देता है। दोनों कॉलम में ऐसी चीजें हैं जो आपके लिए मायने रखेंगी।

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

ओपन सोर्स आपको अधिक नियंत्रण देता है, लेकिन आप बुनियादी ढांचे और रखरखाव की जिम्मेदारी भी लेते हैं। यदि आपकी टीम में कोई भी वह जिम्मेदारी नहीं चाहता है, तो होस्ट करना ईमानदार उत्तर है।

FAQ

ओपन-सोर्स पेज बिल्डर प्रश्न

ओपन-सोर्स पेज बिल्डर क्या है?

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

सबसे अच्छा ओपन-सोर्स पेज बिल्डर कौन सा है?

एक सर्वश्रेष्ठ नहीं है - आपकी आवश्यकता के लिए एक सर्वश्रेष्ठ है। यदि आप एक संपादक को अपने स्वयं के एप्लिकेशन में एम्बेड कर रहे हैं और HTML/CSS आउटपुट चाहते हैं, तो GrapesJS फिट बैठता है। यदि पृष्ठ आपके React घटकों के पेड़ हैं, तो एक React-पहला संपादक बेहतर फिट बैठता है। यदि आप नींव के बजाय एक तैयार वेबसाइट-निर्माण एप्लिकेशन चाहते हैं, तो एक तैनाती योग्य वेबसाइट बिल्डर तेज़ होगा। उत्तर "पुस्तकालय या आवेदन?" पहले; यह किसी भी सुविधा तुलना की तुलना में अधिक विकल्पों को समाप्त करता है।

क्या GrapesJS खुला स्रोत है?

हाँ। कोर grapesjs पैकेज BSD-3-Clause लाइसेंस के तहत प्रकाशित किया जाता है, और आधिकारिक @grapesjs/react रैपर MIT के तहत प्रकाशित किया जाता है। दोनों अनुमेय लाइसेंस हैं। ध्यान दें कि GrapesJS कोर MIT नहीं है, इसके बावजूद कि बहुत सारे तुलनात्मक लेख क्या कहते हैं।

क्या मैं GrapesJS की स्व-मेजबानी कर सकता हूँ?

हाँ। GrapesJS एक क्लाइंट-साइड जावास्क्रिप्ट लाइब्रेरी है जिसे आप npm से इंस्टॉल करते हैं और अपने एप्लिकेशन के साथ बंडल करते हैं। कॉल करने के लिए कोई सेवा नहीं है और बनाने के लिए कोई खाता नहीं है, इसलिए यह वहां चलता है जहां आपका फ्रंटएंड चलता है।

क्या मैं SaaS के लिए ओपन-सोर्स पेज बिल्डर का उपयोग कर सकता हूँ?

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

क्या मैं संपादक UI को अनुकूलित कर सकता हूँ?

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

क्या मैं पेज बिल्डर को अपने डेटाबेस से जोड़ सकता हूं?

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

क्या मैं GrapesJS के साथ एक React पेज बिल्डर बना सकता हूं?

हाँ। आधिकारिक @grapesjs/react रैपर संपादक को React घटक के रूप में माउंट करता है, इसलिए यह आपके घटक वृक्ष के अंदर आपके राज्य के साथ रहता है और इसके चारों ओर घूमता है। संपादक कोर स्वयं ढांचा-अज्ञेयवादी रहता है - आवरण एक एकीकरण परत है, पुनर्लेखन नहीं।

क्या मैं GrapesJS के साथ एक वेबसाइट बिल्डर बना सकता हूँ?

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

क्या मैं GrapesJS के साथ एक ईमेल बिल्डर बना सकता हूँ?

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

क्या वाणिज्यिक परियोजनाओं के लिए GrapesJS मुफ़्त है?

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

GrapesJS और वेबस्टूडियो में क्या अंतर है?

वे विभिन्न श्रेणियों में बैठते हैं। GrapesJS एक BSD-3-Clause लाइब्रेरी है जिसे आप अपने स्वयं के एप्लिकेशन के अंदर इंस्टॉल और एम्बेड करते हैं, जहां आप UI, बैकएंड और प्रकाशन की आपूर्ति करते हैं। वेबस्टूडियो एक AGPL-3.0 विज़ुअल वेबसाइट बिल्डर है - अपने आप में एक एप्लिकेशन, एक होस्ट की गई पेशकश के साथ। लाइसेंस भी इस तरह से भिन्न होते हैं जो होस्ट किए गए उत्पादों के लिए मायने रखता है: AGPL-3.0 स्रोत-उपलब्धता दायित्वों को वहन करता है जो BSD-3-Clause नहीं करता है।

GrapesJS और Puck के बीच अंतर क्या है?

डेटा मॉडल और ढांचा। Puck एक MIT-लाइसेंस प्राप्त React संपादक है: एक पृष्ठ आपके JSON घटकों का एक React पेड़ है, जिसे React द्वारा प्रस्तुत किया गया है। GrapesJS फ्रेमवर्क-अज्ञेयवादी है और HTML और CSS आउटपुट के साथ काम करता है, जो मार्कअप परोसने या निर्यात करने वाले उत्पादों के लिए उपयुक्त है। यदि आपके पृष्ठ React घटक हैं, तो Puck उन्हें अधिक सीधे मानचित्र बनाते हैं; यदि वे वेब पेज हैं, तो GrapesJS करता है।

ओपन-सोर्स और होस्ट किए गए पेज बिल्डर के बीच क्या अंतर है?

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

क्या मुझे GJS.Market प्लगइन्स की आवश्यकता है?

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

क्या मैं कस्टम ब्लॉक और घटक बना सकता हूं?

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

शुरू हो जाओ

अपना खुद का ओपन-सोर्स पेज बिल्डर बनाएं

GrapesJS से प्रारंभ करें, अपने एप्लिकेशन पर नियंत्रण रखें, और संपादक को अपने उत्पाद की आवश्यकता की कार्यक्षमता के साथ विस्तारित करें।

निर्माण शुरू करें

GrapesJS आज़माएं

ब्राउज़र में एक वास्तविक संपादक लोड करें, फिर इसे इंस्टॉल करें और इसे अपने ऐप में माउंट करें।

GrapesJS आज़माएं
विस्तार

प्लगइन्स ब्राउज़ करें

ब्लॉक, भंडारण एडेप्टर, React गोले और ईमेल प्रीसेट - केवल वहीं स्थापित होते हैं जहां वे आपको वास्तविक काम बचाते हैं।

GJS.Market प्लगइन्स ब्राउज़ करें
तुलना करना

पेज बिल्डरों की तुलना करें

देखें कि उनमें से किसी एक के लिए आर्किटेक्चर करने से पहले ओपन-सोर्स विकल्प कैसे भिन्न होते हैं।

पेज बिल्डरों की तुलना करें

संपादक के मालिक हैं। डेटा के मालिक हैं। उत्पाद के मालिक हैं।

React पेज बिल्डरGrapesJS React एकीकरणSaaS पेज बिल्डरएम्बेड करने योग्य पेज बिल्डरड्रैग-एंड-ड्रॉप पेज बिल्डरWYSIWYG पेज बिल्डरReact ईमेल बिल्डरGrapesJS विकल्प