एक React पेज बिल्डर बनाएंस्क्रैच से संपादक का निर्माण किए बिना

असंशोधित ओपन-सोर्स संपादक। यह नींव है जो इस पृष्ठ पर बाकी सब कुछ बनाता है - कैनवास, ब्लॉक, स्टाइल मैनेजर, डिवाइस स्विचिंग, पूर्ववत / फिर से करें, निर्यात करें।

एक React पेज बिल्डर एक विज़ुअल एडिटिंग इंटरफ़ेस है जो React एप्लिकेशन में एम्बेडेड है जो उपयोगकर्ताओं को HTML और CSS को हाथ से लिखे बिना पृष्ठ सामग्री बनाने, संशोधित करने और व्यवस्थित करने देता है।

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

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

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

• दृश्य कैनवास — GrapesJS कोर
• अवयव — GrapesJS कोर
• ब्लॉक — GrapesJS कोर
• खींचें और छोड़ें — GrapesJS कोर
• शैली प्रबंधक — GrapesJS कोर
• उत्तरदायी संपादन — GrapesJS कोर
• संपत्ति — GrapesJS कोर
• समृद्ध पाठ — GrapesJS कोर
• पूर्ववत करें / फिर से करें — GrapesJS कोर
• भंडार — GrapesJS कोर
• उपकरण — GrapesJS कोर
• निर्यातित माल — GrapesJS कोर
• प्लगइन सिस्टम — GrapesJS कोर
• पेज — प्लगइन्स
• टेम्पलेट्स — प्लगइन्स
• अनुमतियां — आपका आवेदन
• प्रकाशन-व्‍यवसाय — आपका आवेदन

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

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

स्क्रैच से विज़ुअल एडिटर न बनाएं। एक सिद्ध संपादक नींव के आसपास अपना React उत्पाद बनाएं।

प्रत्येक परत का एक काम होता है। उन्हें अलग रखें और पूरी चीज बदली जा सकती है - संपादक सहित, जो एक मानक का उपयोग करने का बिंदु है।

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

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

✓ = प्रलेखित क्षमता। कस्टम = समर्थित, लेकिन आप इसे लागू करते हैं। एकीकरण के माध्यम से/निर्भर करता है/उद्यम = विक्रेता द्वारा निर्धारित शर्तों के तहत उपलब्ध है। - = पेशकश नहीं की गई, या उत्पाद की क्षमता के रूप में प्रलेखित नहीं है।
प्रत्येक परियोजना के आधिकारिक दस्तावेज़ीकरण, npm रजिस्ट्री मेटाडेटा और GitHub रिपॉजिटरी के विरुद्ध सत्यापित 2026-09-02। उत्पाद क्षमताएं और मूल्य निर्धारण समय के साथ बदलते हैं - वास्तुशिल्प निर्णय लेने से पहले वर्तमान दस्तावेज़ीकरण की जांच करें।

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

तीन परिणाम, जिनमें से एक GrapesJS नहीं है। यदि कोई तुलना पृष्ठ आपको यह नहीं बता सकता है कि कब दूर जाना है, तो यह तुलना नहीं है।

दो पैकेज और एक घटक। रैपर कोर लाइब्रेरी को बंडल नहीं करता है, इसलिए दोनों को इंस्टॉल करें। नीचे दिया गया उदाहरण लिखा गया है - @grapesjs/react रैपर के लिए कोर को स्पष्ट रूप से पारित करने की आवश्यकता होती है, जो कि अधिकांश तृतीय-पक्ष ट्यूटोरियल को छोड़ देता है।

'use client';

import grapesjs, { type Editor } from 'grapesjs';
import GjsEditor from '@grapesjs/react';
import 'grapesjs/dist/css/grapes.min.css';

export default function PageBuilder() {
  const onEditor = (editor: Editor) => {
    // The full GrapesJS API is yours from here: Blocks, Pages,
    // DeviceManager, Commands, StorageManager.
    editor.Blocks.add('hero', {
      label: 'Hero',
      category: 'Sections',
      content: '<section class="hero"><h1>Headline</h1></section>',
    });
  };

  return (
    <GjsEditor
      // Required. The wrapper does not bundle the core library.
      grapesjs={grapesjs}
      options={{
        height: '100vh',
        // Persistence is wired separately — see the storage step below.
        storageManager: false,
      }}
      onEditor={onEditor}
    />
  );
}

प्रत्येक टुकड़ा क्या करता है

परियोजनाओं को अपने स्वयं के डेटाबेस में सहेजें

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

// Persist projects to your own API. GrapesJS ships `local` and `remote`
// storage; `Storage.add` registers a fully custom adapter.
// Docs: grapesjs.com/docs/modules/Storage.html

const onEditor = (editor: Editor) => {
  editor.Storage.add('api', {
    async load() {
      const res = await fetch(`/api/pages/${pageId}`);
      return res.json(); // → the project JSON GrapesJS restores from
    },
    async store(project) {
      await fetch(`/api/pages/${pageId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(project),
      });
    },
  });
};

// …then point the editor at it:
options={{
  storageManager: { type: 'api', autosave: true, stepsBeforeSave: 5 },
}}

संपादक आउटपुट को लाइव पेज में बदलें

संपादक HTML और CSS वापस सौंपता है। आप उनके साथ जो करते हैं वह एक आवेदन निर्णय है: उन्हें Next.js मार्ग से प्रस्तुत करें, उन्हें CDN पर धकेलें, या उन्हें ईमेल के रूप में भेजें। संपादक सेवा पथ में नहीं है।

// Editor output → a production page.
// getHtml/getCss return the exact markup the canvas rendered.

const html = editor.getHtml();
const css = editor.getCss();

await fetch('/api/publish', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ slug, html, css }),
});

// Your app renders it wherever you control — a Next.js route, a CDN
// object, an email send. The editor is not in the serving path.

@grapesjs/react 0.23.6 के खिलाफ सत्यापित किया गया, जो React 18/19 और Next.js 15 को लक्षित करता है। जल्दी जानने लायक एक चेतावनी: React रैपर आपके UI के आसपास कैनवास बनाता है - यह आपके React घटकों अंदर को प्रस्तुत नहीं करता है। यदि कैनवास में लाइव React घटकों को प्रस्तुत करना एक कठिन आवश्यकता है, तो React-प्रथम संपादक एक बेहतर मेल है, और यह पृष्ठ ऊपर की तुलना में ऐसा कहता है।

अधिकांश "हमें अपने संपादक को बदलने की आवश्यकता है" बातचीत एक लापता क्षमता के बारे में निकलती है। एक संपादक को बदलने में एक चौथाई खर्च होता है; एक क्षमता जोड़ने में एक दोपहर का खर्च आता है।

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

कैटलॉग अस्थायी रूप से अनुपलब्ध है. सीधे मार्केटप्लेस ब्राउज़ करें.

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

लाइव कैटलॉग की कीमतें। एक स्टैक एक सुझाव है, बंडल नहीं - अपनी ज़रूरत के पुर्जे खरीदें।

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

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

यहाँ एक स्क्रीन पर पूरा तर्क है। बायां कॉलम केवल आप ही काम कर सकते हैं, क्योंकि यह आपका उत्पाद है। अन्य दो ऐसे काम हैं जो पहले से मौजूद हैं।

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

चार टीमें एक ही आवश्यकता और बहुत अलग बाधाओं के साथ इस पृष्ठ पर पहुंचती हैं।

तीन प्रश्न। चार उत्तरों में से दो GrapesJS नहीं हैं।

इनमें से प्रत्येक ऊपर दिए गए मैट्रिक्स की तुलना में काफी गहरा है - डेटा मॉडल, माइग्रेशन पथ और ऐसे मामले जहां दूसरा टूल जीतता है।

GrapesJS से शुरू करें, इसे React के साथ एकीकृत करें, और अपने संपादक को अपने उत्पाद की आवश्यक कार्यक्षमता के साथ विस्तारित करें।