एक विज़ुअल पेज बिल्डर बनाएँ आपके SaaS के लिए

यह वही है जो आपके SaaS के अंतिम उपयोगकर्ता को वास्तव में मिलता है - वह हिस्सा जिसे वे देखते हैं, उपयोग करते हैं और इसके लिए रहते हैं।

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

अपना इंजीनियरिंग समय अपने SaaS पर व्यतीत करें - किसी संपादक के पुनर्निर्माण पर नहीं।

आधिकारिक डेमो - ओपन-सोर्स संपादक जिसमें कोई पूर्व निर्धारित लागू नहीं होता है। यह वह आधार रेखा है जिससे आपका SaaS शुरू होगा।

एक ही संपादक कोर बहुत अलग उत्पादों का समर्थन करता है। अपने निकटतम चुनें।

संपादक एक परत है, सिस्टम नहीं। वह सब कुछ जो व्यावसायिक रूप से मायने रखता है - खाते, डेटा, सीमाएं, प्रकाशन - आपका रहता है।

आकार के बजाय एकीकरण विवरण चाहते हैं? एम्बेड करने योग्य पेज बिल्डर गाइड पढ़ें

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

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

// The editor core. Mount it anywhere inside your customer dashboard.
const editor = grapesjs.init({
  container: '#editor',
});

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

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

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

यह संपादक कोर है। प्लगइन्स और अपने स्वयं के एकीकरण के माध्यम से अपनी SaaS की आवश्यकता की कार्यक्षमता जोड़ें।

नीचे दी गई प्रत्येक सूची GJS.Market पर एक वास्तविक उत्पाद है, जिसकी कीमत कैटलॉग से लाइव है। जहां एक क्षमता एक प्लगइन के बजाय GrapesJS कोर का हिस्सा है, इसे यहां आपको बेचे जाने के बजाय ऊपर आर्किटेक्चर अनुभाग में वर्णित किया गया है।

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

चार शुरुआती संयोजन, कीमत लाइव है। हर एक GrapesJS प्लस प्लगइन्स है जो विशेष उत्पाद को वास्तव में चाहिए।

कीमतें लाइव कैटलॉग से आती हैं और बदल सकती हैं। मुफ्त प्लगइन्स मुक्त रहते हैं।

एक बार जब ग्राहक स्वयं संपादित कर सकते हैं, तो आपके उत्पाद में क्या परिवर्तन होते हैं.

योजनाओं में पैकेज संपादन का एक तरीका। यह आकार का एक उदाहरण है, विशिष्ट कीमतों की सिफारिश नहीं।

1. 01

   मूलवर्ती

   टेम्पलेट और कोर संपादन।

2. 02

   प्रो

   उन्नत ब्लॉक और अतिरिक्त कार्यक्षमता।

3. 03

   व्यापार

   उन्नत अनुमतियाँ और सहयोग।

4. 04

   Enterprise

   कस्टम एकीकरण और उन्नत वर्कफ़्लोज़।

उदाहरण SaaS पैकेजिंग। आपका मूल्य निर्धारण मॉडल आपके ग्राहकों की ज़रूरत की सुविधाओं और वर्कफ़्लो के आसपास बनाया जा सकता है।

पेज बिल्डर को केवल एक सुविधा नहीं होना चाहिए - यह आपकी SaaS योजनाओं के मूल्य को बढ़ा सकता है।

आप जहां बैठते हैं उसके आधार पर एक ही निर्णय अलग दिखता है।

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

यह पृष्ठ उत्पाद निर्णय को कवर करता है। दो पड़ोसी गाइड उन हिस्सों पर गहराई से जाते हैं जिन्हें यह केवल छूता है।

ईमानदार संस्करण: आप सभी काम से परहेज नहीं कर रहे हैं, आप उस हिस्से से बच रहे हैं जो अब तक लिखे गए हर पेज बिल्डर में समान है।

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

इस पृष्ठ पर सब कुछ कुछ कुछ है कि आप स्वयं निरीक्षण कर सकते हैं इंगित करता है। आंकड़े सत्यापित 2026-08-27.

आगे बढ़ने के तीन तरीके, यह इस बात पर निर्भर करता है कि आप इसमें से कितना स्वयं करना चाहते हैं।