एक पेज बिल्डर एम्बेड करें सीधे में आपका SaaS

एम्बेड करने योग्य प्लगइन्स का अन्वेषण करें

कैंवस
ब्लॉक
शैलियों
संपत्ति
पेज

आपका API
संपादक जिन अंतिम बिंदुओं से बात करता है
- परियोजनाओं
- संपत्ति
- उपयोगकर्ता
- अनुमतियां
आपका डेटाबेस
सामग्री वास्तव में कहाँ रहती है
- PostgreSQL
- MySQL
- MongoDB
- जो कुछ भी आप पहले से चलाते हैं
आपकी प्रकाशन संरचना
तैयार पृष्ठ दुनिया तक कैसे पहुंचता है
- वेबसाइट
- CDN
- CMS
- आवेदन

संपादक आपके एप्लिकेशन के अंदर रहता है - एक अलग प्लेटफॉर्म में नहीं।

एम्बेड क्यों करें

पेज बिल्डर क्यों एम्बेड करें?

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

अपना UX रखें

आपके ग्राहक आपके उत्पाद को कभी नहीं छोड़ते। संपादन ऐप में एक और स्क्रीन है जिसे वे पहले से जानते हैं, कहीं और के लिए हैंड-ऑफ नहीं है।

अपनी ब्रांडिंग बनाए रखें

पैनल, आइकन, टाइपोग्राफी और शब्दावली सभी को बदलने के लिए आपके हैं, इसलिए संपादक आपके आवेदन के मूल भाग के रूप में पढ़ता है।

अपना डेटा रखें

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

अपना बैकएंड रखें

संपादक आपके पास पहले से मौजूद समापन बिंदुओं को कॉल करता है। कोई समानांतर डेटा मॉडल नहीं, सत्य के दो स्रोतों के बीच कोई समन्वयन नहीं।

अपना प्रकाशन वर्कफ़्लो रखें

ड्राफ्ट, समीक्षा और प्रकाशन अपनी पाइपलाइन में रहने के लिए। संपादक सामग्री तैयार करता है; आपका बुनियादी ढांचा तय करता है कि यह कब लाइव होगा।

पूरा नियंत्रण रखें

ओपन-सोर्स कोर, स्व-होस्टेड, कोई सीट मूल्य निर्धारण नहीं और कोई मजबूर संपादक नहीं। आपके रोडमैप के बारे में कुछ भी किसी और पर निर्भर नहीं करता है।

क्या एम्बेडेड हो जाता है

आपके उपयोगकर्ताओं को जो कुछ भी चाहिए - आपके ऐप के अंदर

इनमें से कुछ GrapesJS कोर है और संपादक के माउंट होने पर काम करता है। इसमें से कुछ एक प्लगइन है। इसमें से कुछ आपके एप्लिकेशन का काम रहता है - प्रत्येक कार्ड कौन सा कहता है।

कोर

दृश्य कैनवास

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

कोर + प्लगइन्स

ब्लॉक

पुनः प्रयोज्य अनुभाग और घटक। अपने उत्पाद के मार्कअप से अपना स्वयं का परिभाषित करें, या एक तैयार सेट स्थापित करें।

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

कोर

शैली नियंत्रण

Style Manager के माध्यम से टाइपोग्राफी, रिक्ति, रंग और उत्तरदायी ब्रेकपॉइंट। इसे उन गुणों तक सीमित रखें जिनकी आपका डिज़ाइन सिस्टम अनुमति देता है।

कोर + प्लगइन्स

परिसंपत्ति प्रबंधक

संपादक को अपनी मीडिया लाइब्रेरी पर इंगित करें, या किसी होस्ट किए गए को किसी एसेट प्लगइन से कनेक्ट करें.

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

कोर + प्लगइन्स

भंडार

परियोजनाओं को अपने API और डेटाबेस में रिमोट Storage Manager के माध्यम से सहेजें। प्लगइन्स autosave, पुनर्प्राप्ति और होस्ट किए गए बैकएंड जोड़ते हैं।

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

कोर + प्लगइन्स

पेज

प्रति प्रोजेक्ट एकाधिक पृष्ठ। कोर पेज मॉडल का समर्थन करता है; प्लगइन्स आपके उपयोगकर्ताओं द्वारा देखे जाने वाले प्रबंधन UI को जोड़ते हैं।

बहु-पृष्ठ प्लगइन्स ब्राउज़ करें

आपका ऐप

प्रकाशन-व्‍यवसाय

HTML और CSS निर्यात करें, फिर इसे अपने स्वयं के मसौदे को सौंपें और पाइपलाइन प्रकाशित करें। संपादक आपकी ओर से कभी प्रकाशित नहीं करता है।

आपका ऐप

अनुमतियां

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

यह काम किस प्रकार करता है

अपने संपादक को 5 चरणों में एम्बेड करें

1
01
पदासीन करना
संपादक को अपने मौजूदा फ्रंटएंड में जोड़ें। एक निर्भरता, साइन अप करने के लिए कोई सेवा नहीं, प्रावधान की कोई कुंजी नहीं।
2
02
कोई पर्वत
अपने स्वयं के ऐप शेल के अंदर एक कंटेनर पर GrapesJS को प्रारंभ करें। यह प्रस्तुत करता है कि आपने इसे कहां रखा है और इसके चारों ओर का पृष्ठ विरासत में मिलता है।
GrapesJS React के साथ Next.js पेज बिल्डर
3
03
अपना स्टोरेज कनेक्ट करें
रिमोट Storage Manager को अपने स्वयं के समापन बिंदुओं पर इंगित करें ताकि आपके डेटाबेस में प्रत्येक सेव लैंड, आपके सत्र द्वारा प्रमाणित हो।
भंडार
4
04
प्लगइन्स जोड़ें
केवल वही स्थापित करें जो आपके उत्पाद की आवश्यकता है - ब्लॉक, पृष्ठ, संपत्ति, निर्यात, एआई - और अपने स्वयं के घटकों को ब्लॉक के रूप में पंजीकृत करें।
ब्लॉक बहु-पृष्ठ एआई
5
05
प्रकाशित करना
संपादक से उत्पन्न HTML और CSS को पढ़ें और इसे मसौदे के माध्यम से धकेलें, आपके द्वारा पहले से चलाई जा रही पाइपलाइन की समीक्षा करें और प्रकाशित करें।
GrapesJS प्लगइन्स

देखें React एकीकरण देखें Next.js गाइड

संपादक कोर से प्रारंभ करें। केवल वही कार्यक्षमता जोड़ें जिसकी आपके उत्पाद को आवश्यकता है।

जल्दी शुरू

अपना पहला एम्बेडेड संपादक बनाएं

वास्तविक कोड के पांच चरण। उद्देश्य पर फ्रेमवर्क-अज्ञेयवादी - React और Next.js विशिष्टताएँ एक कड़ी दूर हैं।

इंस्टालेशन

npm install grapesjs

आरंभीकरण

editor.jsJS

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

// Mount the editor on any container inside your own app shell.
const editor = grapesjs.init({
  container: '#editor',
  height: '100%',
  fromElement: false,
});

भंडार

storage.jsJS

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

  // Persist to your API, not to a third-party service.
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
    options: {
      remote: {
        urlStore: '/api/projects/123',
        urlLoad: '/api/projects/123',
        // Your session, your authorization rules.
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

प्लगइन्स और कस्टम ब्लॉक

plugins.jsJS

import grapesjs from 'grapesjs';
import blocksBasic from 'grapesjs-blocks-basic';

const editor = grapesjs.init({
  container: '#editor',
  plugins: [blocksBasic],
  pluginsOpts: {
    [blocksBasic]: { flexGrid: true },
  },
});

// Or register your own product's components as blocks.
editor.Blocks.add('pricing-table', {
  label: 'Pricing table',
  category: 'Your product',
  content: '<section class="pricing">…</section>',
});

प्रकाशन-व्‍यवसाय

publish.jsJS

// Publishing stays in your infrastructure.
async function publish(projectId) {
  const html = editor.getHtml();
  const css = editor.getCss();

  await fetch(`/api/projects/${projectId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html, css, status: 'published' }),
  });
}

यह केवल संपादक परत है

आपका एप्लिकेशन उपयोगकर्ताओं, डेटा, APIs और प्रकाशन वर्कफ़्लो के नियंत्रण में रहता है। GrapesJS कैनवास प्रस्तुत करता है और आपको HTML और CSS सौंपता है; बाकी सब कुछ आपके पास पहले से ही कोड है।

ऊपर कुछ भी आपके ग्राहकों की सामग्री को आपके अपने API के अलावा कहीं भी नहीं भेजता है।

स्‍वामित्‍व

आपका संपादक। आपका बैकएंड। आपका डेटा।

स्टैक को ऊपर से नीचे तक पढ़ें और ध्यान दें कि इसमें से कितना पहले से ही आपका है। GJS.Market एक परत की आपूर्ति करता है।

फ्रंटएंड

आपके द्वारा पहले से उपयोग किया जाने वाला फ़्रेमवर्क

React
Next.js
Vue
Angular
वेनिला जेएस

एंबेडेड संपादक

GrapesJS प्लस आपके द्वारा चुने गए प्लगइन्स

Editor कोर
ब्लॉक
भंडार
संपत्ति
निर्यातित माल

API
आपका REST या GraphQL API
- आपका प्रमाणीकरण
- आपका सत्यापन
- आपकी दर सीमाएँ
डाटाबेस
आपका डेटाबेस, आपकी स्कीमा
- आपका बैकअप
- आपका निवास
- आपका प्रतिधारण
प्रकाशन-व्‍यवसाय
आपका बुनियादी ढांचा
- आपके डोमेन
- आपका CDN
- आपकी रिहाई प्रक्रिया

GJS.Market संपादक क्षमताएं प्रदान करता है। आप उनके आस-पास की हर चीज़ पर नियंत्रण रखते हैं।

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

उत्पादन-तैयार प्लगइन्स के साथ अपने एम्बेडेड संपादक का विस्तार करें

नीचे दिया गया प्रत्येक प्लगइन GJS.Market पर एक वास्तविक सूची है, इसकी लाइव कीमत के साथ। अपने उत्पाद की आवश्यकता के अनुसार स्थापित करें और बाकी को छोड़ दें।

भंडार

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

भंडार

Grapesjs Firebase Storage

दृढ़ता परत लिखने के बजाय संपादक परियोजनाओं को Firebase में स्टोर करें।

भंडार

Autosave & Restore — Crash Recovery for GrapesJS

आपके उपयोगकर्ताओं के काम करते समय सहेजता है और क्रैश या खोए हुए टैब के बाद सत्र को पुनर्स्थापित करता है।

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

ब्लॉक

उपयोग के लिए तैयार सामग्री अनुभाग जोड़ें।

ब्लॉक

Plugin Blocky for Tailwind CSS

उन टीमों के लिए एक उत्पादन ब्लॉक लाइब्रेरी जिनकी डिज़ाइन प्रणाली पहले से ही Tailwind है।

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

ब्लॉक

Plugin Basic Blocks

एक नए संपादक को पहले दिन प्रयोग करने योग्य बनाने के लिए आवश्यक लेआउट और सामग्री ब्लॉक।

बहु-पृष्ठ

पूर्ण बहु-पृष्ठ वेबसाइट बनाएं।

पेज

Pages Manager

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

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

परियोजनाओं

Grapesjs Project Manager

उपयोगकर्ताओं को आपके ऐप के अंदर कई प्रोजेक्ट को एक साथ रखने की सुविधा देता है।

सफेद लेबल

संपादक अनुभव को अनुकूलित करें।

सफेद लेबल

Grapesjs Paneless

उन टीमों के लिए एक फिर से काम किया गया संपादक खोल जो चाहते हैं कि UI GrapesJS की तरह दिखना बंद कर दे।

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

संपत्ति

अपनी मीडिया लाइब्रेरी कनेक्ट करें.

संपत्ति

Grapesjs Cloudinary

Cloudinary के माध्यम से संपादक मीडिया की सेवा करता है और परिवर्तित करता है।

संपत्ति

Grapesjs Uppy

एसेट मैनेजर में उचित अपलोड अनुभव जोड़ता है.

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

नियंत्रित करें कि सामग्री कैसे निर्यात की जाती है.

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

Export Zip

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

सभी एम्बेड करने योग्य प्लगइन्स ब्राउज़ करें

अनुशंसित ढेर

अपने उत्पाद की आवश्यकता का स्टैक बनाएं

चार शुरुआती बिंदु, आज मौजूद लिस्टिंग से इकट्ठे किए गए हैं। कीमतें कैटलॉग से लाइव हैं।

SaaS पेज बिल्डर

आपके डैशबोर्ड के अंदर के पेज

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

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

एक पूर्ण साइट-निर्माण उत्पाद

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

ईमेल बिल्डर

अभियान और लेन-देन मेल

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

CMS संपादक

संरचित सामग्री पर दृश्य संपादन

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

कीमतें निर्माण समय पर बाज़ार से आती हैं और बदल सकती हैं। प्रत्येक प्लगइन वैकल्पिक है - संपादक कोर मुफ़्त है।

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

आप GrapesJS कहाँ एम्बेड कर सकते हैं?

एक ही संपादक कोर, प्लगइन्स और बाधाओं द्वारा एक अलग काम की ओर इशारा करता है जो आपके द्वारा इसके चारों ओर रखा जाता है।

SaaS प्लेटफॉर्म

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

SaaS पेज बिल्डर

CMS

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

हेडलेस CMS संपादक

सीआरएम और मार्केटिंग प्लेटफॉर्म

उपयोगकर्ताओं को उन ऑडियंस के बगल में लैंडिंग पृष्ठ और अभियान एसेट बनाने की अनुमति दें, जिन्हें वे पहले से प्रबंधित करते हैं.

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

वेबसाइट बनाने वाले

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

WYSIWYG पेज बिल्डर

ईमेल प्लेटफॉर्म

आपके उपयोगकर्ता पहले से ही फ़ॉलो कर रहे अभियान वर्कफ़्लो में एक विज़ुअल ईमेल बिल्डर एम्बेड करें.

ईमेल टेम्पलेट बिल्डर

एआई वेबसाइट निर्माता

एआई के साथ पहला ड्राफ्ट तैयार करें, फिर उपयोगकर्ताओं को फिर से संकेत देने के बजाय इसे नेत्रहीन रूप से परिष्कृत करने दें।

एआई प्लगइन्स

आंतरिक उपकरण

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

डेवलपर्स के लिए नो-कोड बिल्डर

हेडलेस प्लेटफॉर्म

उस आर्किटेक्चर के शीर्ष पर एक दृश्य परत जोड़ें जिसके लिए आप पहले से ही प्रतिबद्ध हैं, बजाय इसे बदलने के।

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

फ्रेमवर्क समर्थन

इसे उस स्टैक में एम्बेड करें जिसका आप पहले से उपयोग कर रहे हैं

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

React

सीधे अपने React एप्लिकेशन में एक विज़ुअल एडिटर बनाएं।

देखें React पेज बिल्डर

Next.js

संपादक को Next.js ऐप में एम्बेड करें, क्लाइंट पर लोड किया गया है ताकि यह कभी भी SSR को न छुए।

देखें Next.js गाइड

Vue

संपादक को Vue घटक से माउंट करें और इसे जीवनचक्र हुक के माध्यम से प्रबंधित करें।

देखें Vue पेज बिल्डर

Angular

संपादक को Angular घटक से प्रारंभ करें और इसे अपनी सेवाओं में तार करें।

देखें Angular बिल्डर

वेनिला जावास्क्रिप्ट

कोई ढांचा नहीं - एक स्क्रिप्ट टैग और एक कंटेनर तत्व पर्याप्त हैं।

देखें HTML ड्रैग एंड ड्रॉप बिल्डर

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

इसे स्वयं बनाने का वास्तव में क्या मतलब है

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

सबसिस्टम एक होममेड एडिटर का तात्पर्य है

Editor वास्तुकला
कैनवास और iframe आइसोलेशन
खींचें और छोड़ें
Block प्रणाली
शैली प्रबंधक
परत का पेड़
इतिहास को पूर्ववत करें/फिर से करें
भंडारण और autosave
परिसंपत्ति प्रबंधक
बहु-पृष्ठ मॉडल
उत्तरदायी संपादन
HTML/CSS निर्यात
क्रॉस-ब्राउज़र परीक्षण
चल रहा रखरखाव

खरोंच से निर्माण करें

इंजीनियरिंग के महीने

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

GrapesJS + GJS.Market

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

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

एक ही गंतव्य। एक मार्ग आपके रोडमैप को संपादक बुनियादी ढांचे पर खर्च करता है; दूसरा इसे आपके उत्पाद पर खर्च करता है।

क्यों GrapesJS

GrapesJS को अपने एम्बेडेड संपादक के रूप में क्यों उपयोग करें?

इसे एम्बेड करने के लिए डिज़ाइन किया गया था - यही कारण है कि आपको जिन एक्सटेंशन पॉइंट की आवश्यकता है वे पहले से ही मौजूद हैं।

खुला स्रोत

कोर BSD-3-Clause लाइसेंस के तहत जारी किया जाता है - अनुमेय, वाणिज्यिक के अनुकूल, और पठनीय जब आपको यह जानने की आवश्यकता होती है कि यह वास्तव में क्या करता है।

स्व-होस्टेड

संपादक आपके अपने एप्लिकेशन इंफ्रास्ट्रक्चर के अंदर चलता है। कॉल करने के लिए कोई सेवा नहीं है और कोई अपटाइम नहीं है जो पहले से आपका नहीं है।

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

कस्टम घटक, ब्लॉक, कमांड, पैनल और प्लगइन्स प्रथम श्रेणी के हैं। आपके उत्पाद का UI संपादन योग्य सामग्री बन सकता है।

फ्रेमवर्क के अनुकूल

React, Next.js, Vue, Angular और वेनिला जावास्क्रिप्ट। आधिकारिक @grapesjs/react रैपर MIT लाइसेंस प्राप्त है।

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

आपका एप्लिकेशन, आपका डेटा और आपका बुनियादी ढांचा आपके नियंत्रण में रहता है। आउटपुट सादा HTML और CSS है जिसे आप कहीं भी प्रस्तुत कर सकते हैं।

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

प्रत्येक क्षमता को स्वयं लिखने के बजाय 100+ लिस्टिंग के साथ संपादक का विस्तार करें GJS.Market.

अन्वेषण करें GrapesJS

26k+

GitHub सितारे

100+

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

10 years

सक्रिय विकास

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

इसे अपना बनाओ

संपादक को अपने उत्पाद की तरह महसूस कराएं

ब्रांडिंग
कस्टम UI
कस्टम घटक
कस्टम ब्लॉक
अनुमतियां
उपयोगकर्ता भूमिकाएँ
टेम्पलेट्स
संपत्ति पुस्तकालय
वर्कफ़्लो प्रकाशित करना
कस्टम APIs

आपके उपयोगकर्ताओं को ऐसा महसूस होना चाहिए कि वे आपके उत्पाद का उपयोग कर रहे हैं - न कि तृतीय-पक्ष संपादक।

व्हाइट-लेबल पेज बिल्डर का अन्वेषण करें

FAQ

एम्बेडिंग GrapesJS — सामान्य प्रश्न

शुरू हो जाओ

अपने उत्पाद में एक विज़ुअल एडिटर एम्बेड करें

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

सबसे लोकप्रिय

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

भंडारण, ब्लॉक, पृष्ठ, संपत्ति, निर्यात और एआई - लाइव कीमतों के साथ उत्पादन-तैयार लिस्टिंग।