GrapesJS + React

उत्पादन-तैयार बनाएं React पेज बिल्डर GrapesJS के साथ

ओपन-सोर्स GrapesJS संपादक से शुरू करें और जब आपको उनकी आवश्यकता हो तो GJS.Market से उत्पादन-तैयार प्लगइन्स, ब्लॉक और एकीकरण जोड़ें।

खुला स्रोत: BSD-3-Clause कोर, MIT React आवरण26k+ GitHub सितारे100+ मार्केटप्लेस प्लगइन्सस्व-होस्टेड - आपका डेटा, आपका आउटपुटReact और Next.js संगत
लाइव डेमो

देखें कि आप क्या बना सकते हैं

तीन वास्तविक GrapesJS संपादक: मुफ़्त ओपन-सोर्स बेसलाइन और GJS.Market पर बेचे जाने वाले दो प्रोडक्शन एडिटर। एक टैब चुनें, उसे लोड करें और कैनवास पर कुछ खींचें।

पूर्ण स्क्रीन में खोलें

GrapesJS प्रीसेट React, आधिकारिक React रैपर और shadcn/ui के साथ बनाया गया है, इसलिए एडिटर क्रोम पहले से ही एक आधुनिक React ऐप जैसा दिखता है। अन्यथा आप खुद को डिजाइन करने में महीनों लगा देंगे।

grapesjsshadcn.netlify.appPremium

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

आप जो देखते हैं वह पसंद है?

shadcn/ui संपादक पर GJS.Market प्राप्त करें

स्क्रैच से संपादक के बुनियादी ढांचे के पुनर्निर्माण के बजाय अपना खुद का संपादक बनाएं।

वास्तविक लागत

संपादक के बुनियादी ढांचे के निर्माण में 6 महीने खर्च न करें

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

आप खरोंच से क्या बनाएंगे

  • खींचें और छोड़ें
  • अवयव
  • ब्लॉक
  • स्टाइल मैनेजर
  • उत्तरदायी संपादन
  • परिसंपत्ति प्रबंधक
  • पूर्ववत करें और फिर से करें
  • भंडार
  • HTML और CSS निर्यात
  • रिच टेक्स्ट एडिटिंग
  • पेज
  • डिवाइस मैनेजर
  • Plugin वास्तुकला
  • संपादक यूआई

खरोंच से

3-6+ महीने

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

GrapesJS + GJS.Market

मिनटों में शुरू करें

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

संपादक का पुनर्निर्माण न करें। अपना उत्पाद बनाएं।

क्यों GrapesJS

GrapesJS के साथ निर्माण क्यों करें?

यह एकमात्र संपादक ढांचा नहीं है, बल्कि यह वह है जो आपके हाथों में सबसे अधिक नियंत्रण छोड़ता है।

खुला स्रोत

कोर BSD-3-Clause लाइसेंस प्राप्त है और आधिकारिक React आवरण MIT है। दोनों व्यावसायिक उपयोग की अनुमति देते हैं, और आप इसके हर हिस्से को स्वयं होस्ट करते हैं।

फ्रेमवर्क फ्रेंडली

React, Next.js, Vue, Angular और सादा जावास्क्रिप्ट। संपादक एक कंटेनर में माउंट होता है, इसलिए यह इसके चारों ओर ढेर को निर्देशित नहीं करता है।

उत्पादन के लिए तैयार

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

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

Components, ब्लॉक, पैनल, कमांड और स्टोरेज सभी प्लग करने योग्य हैं। अपना खुद का बनाएं, या जो पहले से मौजूद है उसे स्थापित करें।

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

संपादक आपके सर्वर पर चलता है और आपके डेटाबेस में सादे HTML और CSS आउटपुट करता है। कुछ भी घर पर फोन नहीं करता है, और अगर कोई विक्रेता अपनी योजना बदलता है तो कुछ भी काम करना बंद नहीं करता है।

विशाल पारिस्थितिकी तंत्र

100+ प्लगइन्स, प्रीसेट और GJS.Market पर पुस्तकालयों को ब्लॉक करें, संगतता नोट्स, समीक्षा के साथ और प्रत्येक लिस्टिंग पर निर्देश स्थापित करें।

इसकी कीमत कैसे है

मुफ्त शुरू करें। केवल उसी के लिए भुगतान करें जिसकी आपको आवश्यकता है।

विज़ुअल एडिटर प्राप्त करने के लिए आपको एक पूरा प्लेटफ़ॉर्म खरीदने की ज़रूरत नहीं है। इंजन हमेशा के लिए मुफ़्त है; आप केवल उन टुकड़ों के लिए भुगतान करते हैं जो अन्यथा आपको इंजीनियरिंग महीनों तक खर्च करते।

निःशुल्क

GrapesJS

संपादक कोर, BSD-3-Clause लाइसेंस के तहत। कैनवास, घटक मॉडल, स्टाइल इंजन, पूर्ववत स्टैक।

के साथ संयुक्त
प्रति प्लगइन भुगतान करें

GJS.Market

प्रीमियम प्लगइन्स, ब्लॉक लाइब्रेरी, एकीकरण और उन्नत कार्यक्षमता - एक समय में एक खरीदा गया, न कि किसी प्लेटफ़ॉर्म की सदस्यता के रूप में।

आपको देता है
तुम्हारा

आपका उत्पाद

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

बक्सों का इस्तेमाल करें

आप क्या बना रहे हैं?

संपादक कोर हर मामले में समान है। इसके ऊपर प्लगइन स्टैक क्या बदलता है।

जल्दी शुरू

मिनटों में आपका पहला React संपादक

कोड की कुछ पंक्तियों के साथ एक कार्यशील GrapesJS React संपादक प्राप्त करें।

पदासीन करना

npm install grapesjs @grapesjs/react
Builder.tsxTSX
import GjsEditor from '@grapesjs/react';
import 'grapesjs/dist/css/grapes.min.css';

export default function Builder() {
  return (
    <GjsEditor
      options={{
        height: '100vh',
        storageManager: false,
      }}
    />
  );
}
स्‍थापत्‍यशैली

बिल्ड योर React एडिटर स्टैक

  1. 1
    परत 1

    GrapesJS

    संपादक इंजन: घटक मॉडल, कैनवास, पूर्ववत स्टैक, स्टाइल इंजन, कमांड।

  2. 2
    परत 2

    @grapesjs/react

    आधिकारिक React आवरण। एक घटक संपादक को माउंट करता है; आपका बाकी ऐप साधारण React रहता है।

  3. 3
    परत 3

    UI/डिज़ाइन सिस्टम

    Editor क्रोम जो डेमो की तरह दिखने के बजाय आपके उत्पाद से मेल खाता है।

  4. 4
    परत 4

    ब्लॉक

    वे अनुभाग जिन्हें आपके उपयोगकर्ता वास्तव में कैनवास पर खींचते हैं.

  5. 5
    परत 5

    भंडार

    प्रोजेक्ट JSON को बनाए रखें और अपने स्वयं के API के लिए आउटपुट प्रदान करें, और एक क्रैश टैब से बचें।

  6. 6
    परत 6

    पेज

    एक लंबे दस्तावेज़ के बजाय बहु-पृष्ठ परियोजनाएँ।

  7. 7
    परत 7

    निर्यातित माल

    HTML और CSS को संपादक से बाहर और अपनी प्रकाशन पाइपलाइन में साफ करें।

  8. 8
    परत 8

    आपका API और डेटाबेस

    एक परत जो आपको कोई नहीं बेच सकता। यह आपके इंजीनियरिंग समय के लायक हिस्सा है।

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

प्लगइन्स के साथ अपना संपादक बनाएं

आठ प्लगइन्स React टीमें पहले तक पहुंचती हैं। प्रत्येक कार्ड वास्तविक लिस्टिंग से लिंक होता है, जहां कीमत, संगतता, समीक्षा और इंस्टॉल निर्देश रहते हैं।

React UI for GrapesJSReact

React UI for GrapesJS

React टीम से आधिकारिक GrapesJS रैपर। कोर मॉड्यूल के चारों ओर घोषणात्मक रैपर ताकि आप अपने स्वयं के UI घटकों से संपादक React का निर्माण कर सकें।

निःशुल्कप्लगइन देखें
Reactor Preset for GrapesJSReact

Reactor Preset for GrapesJS

अपने स्वयं के React घटक सिस्टम को कैनवास में लाएं, इसलिए आपके उपयोगकर्ता जो चीजें खींचते हैं, वे वे घटक हैं जिन्हें आप पहले से ही शिप करते हैं।

निःशुल्कप्लगइन देखें
GrapesJS Shadcnपूर्व निर्धारित

GrapesJS Shadcn

React और shadcn/ui के साथ बनाया गया एक पूर्ण संपादक शेल। आमतौर पर संपादक क्रोम को डिजाइन करने और बनाने में बिताए गए महीनों को छोड़ देता है।

US$999,99प्लगइन देखें
Plugin Blocky for Tailwind CSSब्लॉक

Plugin Blocky for Tailwind CSS

पूर्व-निर्मित उत्तरदायी Tailwind CSS ब्लॉकों की एक बड़ी लाइब्रेरी, कैनवास पर खींचने के लिए तैयार है।

US$59,00प्लगइन देखें
Autosave & Restore — Crash Recovery for GrapesJSभंडार

Autosave & Restore — Crash Recovery for GrapesJS

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

US$12,00प्लगइन देखें
Grapesjs Project Managerपेज

Grapesjs Project Manager

परियोजना, टेम्पलेट और पृष्ठ प्रबंधन में निर्मित भंडारण प्रबंधकों के साथ - एकल-दस्तावेज़ संपादन से वास्तविक परियोजनाओं तक का सबसे तेज़ मार्ग।

निःशुल्कप्लगइन देखें
TinyMCE 8 Inline Text Editorसमृद्ध पाठ

TinyMCE 8 Inline Text Editor

अंतर्निहित समृद्ध टेक्स्ट एडिटर को TinyMCE से बदल देता है, इनलाइन संपादन जोड़ता है और ब्लॉक और इनलाइन तत्वों के लिए अलग-अलग टूलबार जोड़ता है।

US$69,00प्लगइन देखें
Autofill — Dummy Content Filler for GrapesJSएआई

Autofill — Dummy Content Filler for GrapesJS

एक कमांड में प्लेसहोल्डर सामग्री के साथ एक लेआउट भरता है, इसलिए एक रिक्त कैनवास कभी भी डेमो या डिज़ाइन समीक्षा को ब्लॉक नहीं करता है।

US$9,00प्लगइन देखें
तैयार ढेर

एक पूर्ण स्टैक की आवश्यकता है?

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

SaaS पेज बिल्डर स्टैक

किसी ऐसे संपादक को एम्बेड करने के लिए, जिसका उपयोग आपके ग्राहक आपके ऐप्लिकेशन के अंदर करते हैं

बिल्ड ए SaaS पेज बिल्डर

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

SEO और संपत्ति के साथ पूर्ण बहु-पृष्ठ साइटों के लिए

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

कीमतें बाज़ार से लाइव पढ़ी जाती हैं।

इसकी कीमत क्या होती है

React पेज बिल्डर बनाने में कितना खर्च आता है?

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

सबसिस्टमGrapesJS के साथखरोंच से निर्मित
Editor वास्तुकलाकोर में शामिलकिसी भी UI से पहले डिजाइन के सप्ताह
खींचें और छोड़ेंकोर में शामिलसप्ताह, फिर महीनों के किनारे के मामले
स्टाइल मैनेजरकोर में शामिलप्रति संपत्ति समूह सप्ताह
उत्तरदायी नियंत्रणकोर, प्लगइन द्वारा विस्तार योग्यसप्ताह, साथ ही चल रहे सुधार
Blocks और घटकब्लॉक लाइब्रेरी स्थापित करेंप्रति ब्लॉक दिन, हमेशा के लिए
भंडारण और autosaveएक प्लगइन स्थापित करें, इसे अपने API पर इंगित करेंसप्ताह, साथ ही क्रैश-रिकवरी कार्य
परिसंपत्ति प्रबंधककोर में शामिलअपलोड और CDN काम के साथ सप्ताह
परीक्षण और रखरखावसमुदाय के साथ साझा किया गयास्थायी टीम लागत

स्कोपिंग के लिए इंजीनियरिंग-समय का अनुमान। आपकी संख्या आपकी टीम और आवश्यकताओं पर निर्भर करेगी।

अल्टरनेटिव्स

GrapesJS बनाम Puck बनाम Craft.js बनाम Builder.io

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

योग्‍यताGrapesJSPuckCraft.jsBuilder.io
ओपन-सोर्स लाइसेंसBSD-3-ClauseMITMITमालिकाना
फ्रेमवर्क समर्थनकोई भी React, Next.js, Vue, Angular, वेनिलाReact केवलReact केवलReact, Next.js, Vue
स्व-होस्टेडहाँहाँ - आपके ऐप में एक लाइब्रेरीहाँ - आपके ऐप में एक लाइब्रेरीनहीं - होस्टेड सेवा
Plugin बाज़ारGJS.Market, 100+ प्लगइन्सकोई नहींकोई नहींअंतर्निहित एकीकरण
ईमेल बिल्डरहाँ, प्रीसेट के माध्यम सेनहींनहींनहीं
मूल्य निर्धारण मॉडलनिःशुल्क, प्रति प्लगइन भुगतान करेंनिःशुल्कनिःशुल्कसशुल्क योजनाएं

सत्यापित 2026-08-26। लाइसेंस और फ्रेमवर्क तथ्य प्रत्येक परियोजना के अपने पैकेज मेटाडेटा और दस्तावेज़ीकरण से आते हैं। आमने-सामने का विवरण: GrapesJS बनाम Craft.js · Puck संपादक वैकल्पिक · GrapesJS बनाम Builder.io

छिपा हुआ काम

एक प्रतिक्रिया-केवल संपादक लाइब्रेरी आपको बनाने के लिए क्या छोड़ती है

Craft.js और Puck आपको एक React ड्रैग-एंड-ड्रॉप ट्री देते हैं। उस पेड़ के आसपास एक संपादक से एक व्यक्ति जो कुछ भी उम्मीद करता है, वह अभी भी लिखने के लिए आपका है।

संपादक सबसिस्टमGrapesJSCraft.js / Puck
स्टाइल मैनेजरमें निर्मितअपना खुद का निर्माण करें
डिवाइस मैनेजर/उत्तरदायी संपादनमें निर्मितअपना खुद का निर्माण करें
परिसंपत्ति प्रबंधकमें निर्मितअपना खुद का निर्माण करें
पारिस्थितिकी तंत्र

वास्तविक उत्पादों का निर्माण करने वाले डेवलपर्स के लिए निर्मित

इस पृष्ठ पर कोई लोगो और कोई प्रशंसापत्र नहीं - बस पारिस्थितिकी तंत्र के आंकड़े आप स्वयं जांच सकते हैं।

26k+

GitHub सितारे

100+

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

10 years

सक्रिय विकास

$0

लाइसेंस शुल्क, हमेशा

GitHub पर GrapesJS रिपॉजिटरी से स्टार गिनती; GJS.Market कैटलॉग से प्लगइन गिनती। दोनों सत्यापित 2026-08-26।

FAQ

अक्सर पूछे जाने वाले प्रश्न

अगला कदम

स्क्रैच से शुरू किए बिना अपना React पेज बिल्डर बनाएं

ओपन-सोर्स GrapesJS कोर का उपयोग करें। अपने लिए आवश्यक प्लगइन्स जोड़ें। उस संपादक का निर्माण करें जिसकी आपके उत्पाद को वास्तव में आवश्यकता है।

मुफ्त में शुरू करें

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

एक संपादक कॉन्फ़िगर करें, एक प्रीसेट चुनें, और एक चल रहा GrapesJS सेटअप प्राप्त करें जिसे आप अपने React ऐप में छोड़ सकते हैं।

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

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

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

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

GrapesJS को एकीकृत करने में सहायता चाहिए?

यदि आप किसी ऐसे व्यक्ति को एकीकरण सौंपना चाहते हैं जिसने पहले एक भेज दिया है, तो हमारी सेवाएं इसी के लिए हैं।

एकीकरण के बारे में बात करें