GrapesJS के साथ एक ड्रैग-एंड-ड्रॉप पेज बिल्डर बनाएं

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

स्टॉक GrapesJS डेमो: दाईं ओर ब्लॉक पैलेट, बीच में कैनवास, स्टाइल मैनेजर और लेयर ट्री। यहां आप जो कुछ भी देख रहे हैं वह ओपन-सोर्स कोर में है।

छह सबसिस्टम जो कोर के साथ शिप करते हैं, और जिन्हें आपके उपयोगकर्ता एक इशारे के रूप में अनुभव करते हैं।

GrapesJS एक होस्ट किए गए बिल्डर उत्पाद के बजाय एक स्व-होस्टेड, ओपन-सोर्स संपादक ढांचा है। यह अंतर ही वह संपूर्ण कारण है कि यह किसी और के एप्लिकेशन के अंदर फिट बैठता है।

नीचे एक ही संपादक कोर, हर बार एक अलग नौकरी के लिए कॉन्फ़िगर किया गया।

नीचे एक ही समस्या चाहने के अलग-अलग कारण: पृष्ठ निर्माण के लिए हर बार डेवलपर की आवश्यकता नहीं होनी चाहिए।

एक पेज बिल्डर एक विशेषता नहीं है। यह एक दर्जन उप-प्रणालियाँ हैं जिन्हें सभी को एक-दूसरे से सहमत होना पड़ता है - और फिर उत्पाद बढ़ने पर सहमत होते रहें।

अपना उत्पाद बनाएं - खरोंच से कोई अन्य पेज बिल्डर नहीं।

कोई भी कॉलम काम से मुक्त नहीं है। अंतर यह है कि कौन सा काम आपका है।

प्रकाशन उद्देश्य पर आपके कॉलम में रहता है: यह वह हिस्सा है जिसे आपके डोमेन, आपके CDN और आपकी रिलीज़ प्रक्रिया से मेल खाना है।

GrapesJS आपके एप्लिकेशन के अंदर एक परत है, न कि वह प्लेटफ़ॉर्म जिसे आप अपने उपयोगकर्ताओं को सौंपते हैं। आपका ऐप उपयोगकर्ताओं, सामग्री और प्रकाशन निर्णय को बनाए रखता है।

किसी मौजूदा ऐप के अंदर संपादक को माउंट करने के यांत्रिकी के लिए - iframes, रूटिंग, ऑथ हैंडऑफ़ - देखें एम्बेड करने योग्य पेज बिल्डर गाइड

संपादक का Device Manager कैनवास को ब्रेकप्वाइंट के बीच स्विच करता है, और डिवाइस के सक्रिय होने पर सेट की गई शैलियाँ केवल उस चौड़ाई पर लागू होती हैं।

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

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

• Hero

  शीर्षक, सहायक पंक्ति और एक प्राथमिक कार्रवाई।

• हैडर

  लोगो और नेविगेशन, छोटी स्क्रीन पर एक मेनू में ढहना।

• सुविधाऐं

  आइकन, शीर्षक और प्रतिलिपि के साथ लाभों के लिए एक कॉलम सेट.

• मूल्य निर्धारण

  अनुशंसित स्तर के रूप में हाइलाइट किए गए एक कार्ड के साथ योजना बनाएं।

• प्रशंसापत्र

  एक एट्रिब्यूशन और अवतार के साथ उद्धरण।

• दर्शकदीर्घा

  Asset Manager से भरा एक छवि ग्रिड।

• सीटीए

  कार्रवाई के लिए एक एकल, केंद्रित कॉल।

• संपर्क करें

  आप जो भी समापन बिंदु चुनते हैं उससे जुड़ा एक प्रपत्र।

• पाद लेख

  लिंक कॉलम, कानूनी पाठ और द्वितीयक नेविगेशन।

यह वह अंतर है जो यह तय करता है कि GrapesJS एक वेबसाइट-बिल्डर खिलौना है या एक संपादक कोर जिस पर आप उत्पाद बना सकते हैं।

1. Block
2. ↓घटक
3. ↓कस्टम Component
4. ↓आपका उत्पाद

क्योंकि कस्टम घटक आपके अपने कोड द्वारा समर्थित होते हैं, एक GrapesJS संपादक उन चीजों को संपादित कर सकता है जिनकी कोई अवधारणा नहीं है - आपकी योजनाओं के लिए वायर्ड एक मूल्य निर्धारण तालिका, आपके कैटलॉग को पढ़ने वाला एक उत्पाद ग्रिड, आपके API पर एक फॉर्म पोस्टिंग।

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

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

Storage Manager आपके API का ग्राहक है, सेवा नहीं। इसे अपने समापन बिंदुओं पर इंगित करें और संपादक उनके माध्यम से लोड और सहेजता है।

const editor = grapesjs.init({
  container: '#editor',

  // Each page is a row in your database, behind your own auth.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

// Publishing stays on your side — your domains, your CDN, your workflow.
async function publish() {
  await fetch(`/api/pages/${pageId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html: editor.getHtml(), css: editor.getCss() }),
  });
}

GrapesJS को अपने स्वयं के बैकएंड से कनेक्ट करें और तय करें कि परियोजनाएं, पृष्ठ, संपत्ति और उपयोगकर्ता कैसे संग्रहीत किए जाते हैं। GJS.Market प्लगइन्स बेचता है - यह आपके डेटा को होस्ट नहीं करता है।

नीचे दिया गया प्रत्येक कार्ड एक वास्तविक सूची है - नाम, कीमतें और थंबनेल कैटलॉग से लाइव प्रस्तुत करते हैं, इसलिए इस पृष्ठ पर कुछ भी वास्तव में बिक्री के लिए क्या है, से बहाव नहीं कर सकता है।

ब्लॉक

ब्लॉक लाइब्रेरी उपयोगकर्ताओं को इससे खींचने का विस्तार करें।

इस श्रेणी को ब्राउज़ करें

ब्लॉक

Plugin Basic Blocks

लेआउट आदिम का स्टार्टर सेट - कॉलम, पाठ, चित्र, लिंक - इसलिए पैलेट पहले दिन खाली नहीं है।

निःशुल्कप्लगइन देखें

ब्लॉक

Plugin Blocky for Tailwind CSS

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

US$59,00प्लगइन देखें

UX को खींचें और छोड़ें

हावभाव को स्वयं स्पष्ट और अधिक सटीक बनाएं।

इस श्रेणी को ब्राउज़ करें

खींचें और छोड़ें

Placeholder 2.0 - Premium Drag Experience

एक स्पष्ट ड्रॉप संकेतक, ताकि उपयोगकर्ता इसे जारी करने से पहले देख सकें कि ब्लॉक कहां उतरेगा।

US$99,00प्लगइन देखें

रिक्ति

GrapesJS LayoutEnhancer: Precision Spacing Tool

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

US$49,00प्लगइन देखें

टेम्पलेट्स

उपयोगकर्ताओं को तैयार शुरुआती बिंदु दें।

इस श्रेणी को ब्राउज़ करें

पूर्व निर्धारित

Webpage Preset

एक तैयार वेब-पेज संपादक कॉन्फ़िगरेशन - ब्लॉक, पैनल और स्टाइलिंग एक साथ वायर्ड।

निःशुल्कप्लगइन देखें

टेम्पलेट्स

Templates Manager

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

US$39,00प्लगइन देखें

पुनः प्रयोज्य घटक

एक बार अनुभाग बनाएं और पृष्ठों पर उनका पुनः उपयोग करें।

इस श्रेणी को ब्राउज़ करें

पुनः प्रयोज्य

Symbols

एक अनुभाग को पृष्ठों में पुनः उपयोग किए गए प्रतीक में बदल देता है - इसे एक बार संपादित करें और हर उदाहरण का अनुसरण करता है।

निःशुल्कप्लगइन देखें

प्रतिसंवेदी

ब्रेकपॉइंट और प्रति-डिवाइस स्टाइल प्रबंधित करें।

इस श्रेणी को ब्राउज़ करें

प्रतिसंवेदी

Responsive Pack — Breakpoint Manager for GrapesJS

ब्रेकप्वाइंट जोड़ता है और प्रबंधित करता है ताकि उपयोगकर्ता प्रति स्क्रीन आकार के लेआउट को फिर से स्टाइल कर सकें।

US$14,00प्लगइन देखें

संपत्ति

मीडिया प्रबंधन और अपलोड का विस्तार करें।

इस श्रेणी को ब्राउज़ करें

संपत्ति

Grapesjs Cloudinary

Asset Manager को Cloudinary पर इंगित करता है, इसलिए वास्तविक मीडिया पाइपलाइन में भूमि अपलोड करता है।

निःशुल्कप्लगइन देखें

अपलोड

Grapesjs Uppy

Uppy-संचालित अपलोडिंग - प्रगति और पुनः शुरू करने योग्य स्थानान्तरण के साथ फ़ाइलों को खींचें।

निःशुल्कप्लगइन देखें

भंडार

परियोजना की दृढ़ता और पुनर्प्राप्ति का विस्तार करें।

इस श्रेणी को ब्राउज़ करें

भंडार

Grapesjs Firebase Storage

परियोजनाओं को Firebase तक बनाए रखता है जब आप पहले भंडारण समापन बिंदु नहीं बनाना चाहते हैं।

निःशुल्कप्लगइन देखें

स्वतः सेव

Autosave & Restore — Crash Recovery for GrapesJS

कार्य की पुनर्प्राप्त करने योग्य प्रतिलिपि को प्रगति पर रखता है, इसलिए एक बंद टैब उपयोगकर्ता को उनके पृष्ठ की लागत नहीं देता है।

US$12,00प्लगइन देखें

पेज

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

इस श्रेणी को ब्राउज़ करें

पेज

Pages Manager

एक संपादक सत्र में बहु-पृष्ठ परियोजनाएं, एक पृष्ठ सूची के साथ उपयोगकर्ता नेविगेट कर सकते हैं।

US$25,00प्लगइन देखें

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

अंतर्निहित HTML और CSS से परे आउटपुट स्वरूप जोड़ें।

इस श्रेणी को ब्राउज़ करें

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

Export Zip

तैयार पृष्ठ को डाउनलोड करने योग्य HTML और CSS बंडल के रूप में निर्यात करता है।

निःशुल्कप्लगइन देखें

SEO और पहुंच

लाइव होने से पहले पृष्ठों का ऑडिट करें।

इस श्रेणी को ब्राउज़ करें

SEO और ए11वाई

Grapesjs A11Y Seo — Accessibility auditor + SEO for GrapesJS

संपादक के अंदर पृष्ठ का ऑडिट करता है और प्रकाशन से पहले पहुंच और SEO समस्याओं को चिह्नित करता है।

निःशुल्कप्लगइन देखें

एआई

कैनवास पर AI-सहायता प्राप्त संलेखन जोड़ें।

इस श्रेणी को ब्राउज़ करें

एआई

Grapesjs GPT Plugin

OpenAI-समर्थित कमांड के माध्यम से कैनवास पर सामग्री उत्पन्न करता है और फिर से लिखता है।

निःशुल्कप्लगइन देखें

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

कीमतें कैटलॉग से लाइव प्रस्तुत करती हैं।

दो फाइलें और आपके पास स्क्रीन पर एक संपादक है। उसके बाद सब कुछ कॉन्फ़िगरेशन है।

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// The editor core. Mount it on any container in your app.
const editor = grapesjs.init({
  container: '#editor',
});

// A block is what the user drags. A component is what it becomes
// on the canvas once dropped — and what your app can then control.
editor.BlockManager.add('pricing-table', {
  label: 'Pricing',
  category: 'Sections',
  content: { type: 'pricing-table' },
});

editor.DomComponents.addType('pricing-table', {
  model: {
    defaults: {
      // Lock the frame, let the user edit only what you allow.
      draggable: 'main, section',
      traits: ['plan', 'currency'],
    },
  },
});

1. ब्लॉक जोड़ें
2. →घटकों को अनुकूलित करें
3. →भंडारण कॉन्फ़िगर करें
4. →अपना बैकएंड कनेक्ट करें
5. →प्रकाशित करना

यहां से काम उत्पाद-विशिष्ट है: आपके उपयोगकर्ताओं को कौन सा ब्लॉक मिलता है, आप कौन से घटक प्रकार पंजीकृत करते हैं, और जहां परियोजनाएं संग्रहीत की जाती हैं।

कोर फ्रेमवर्क-अज्ञेयवादी है - यह DOM कंटेनर पर माउंट होता है। ये पृष्ठ प्रत्येक के लिए वायरिंग को कवर करते हैं।

केवल ऐसी विशेषताएं जिन्हें प्रत्येक परियोजना के प्रकाशित पैकेज और दस्तावेज़ीकरण के विरुद्ध जांचा जा सकता है। क्षमताएं डिज़ाइन लक्ष्य से भिन्न होती हैं - Craft.js इरादे से हेडलेस है, Puck React-प्रथम है, Builder.io एक होस्ट किया गया प्लेटफ़ॉर्म है।

npm रजिस्ट्री के खिलाफ सत्यापित लाइसेंस 2026-09-03: grapesjs 0.23.6 BSD-3-Clause के रूप में प्रकाशित होता है; @measured/puck, @craftjs/core और @builder.io/react MIT के रूप में प्रकाशित करते हैं। क्षमताएं प्रत्येक परियोजना के सार्वजनिक दस्तावेज़ीकरण को दर्शाती हैं - निर्णय लेने से पहले उनकी जांच करें।

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

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