Craft.js विकल्प: के साथ एक प्रोडक्शन विज़ुअल एडिटर बनाएं GrapesJS

कोई स्कोर नहीं, क्योंकि पंक्तियाँ तुलनीय मात्रा नहीं हैं। प्रत्येक क्षमता को लेबल किया जाता है कि यह कहां से आता है: परियोजना में शामिल, ऐड-ऑन के माध्यम से पहुंच योग्य, या आपके स्वयं के कोड द्वारा परिभाषित।

• ✓अंतर्निहित
• +ऐड-ऑन
• ·रिवाज

2026-09-03 पर दोनों परियोजनाओं के स्वयं के दस्तावेज़ीकरण के खिलाफ जाँच की गई: Craft.js 0.2.12 और GrapesJS 0.23.6। "कस्टम" एक विवरण है, आलोचना नहीं - कई पंक्तियों के लिए यह ठीक यही कारण है कि एक टीम एक अविचारी ढांचे को चुनती है।

सबसे बड़ा अंतर केवल सुविधाओं की संख्या नहीं है। दो ढांचे डेवलपर्स को विज़ुअल एडिटर बनाने के लिए अलग-अलग शुरुआती बिंदु देते हैं।

• ढांचे द्वारा प्रदान किया गया
• आपके द्वारा प्रदान किया गया

यदि आपको जो परतें बनानी होंगी, वे उस पहले कॉलम में Craft.js से ऊपर बैठती हैं, तो GrapesJS मूल्यांकन के लायक है। यदि वे इसके नीचे बैठते हैं, तो माइग्रेट करने से आपको बहुत कम खरीदता है।

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

स्टॉक GrapesJS संपादक जिसमें कोई प्लगइन्स और कोई डिज़ाइन सिस्टम नहीं है। यह वही है जो कोर आपको कुछ भी कॉन्फ़िगर करने से पहले देता है।

दोनों परियोजनाएं उस चीज़ को कॉल करती हैं जिसे उपयोगकर्ता "घटक" के चारों ओर खींचता है, लेकिन दो परिभाषाएँ विनिमेय नहीं हैं। यह वह अंतर है जो तय करता है कि माइग्रेशन कितना काम करता है।

अवधारणाएं कैसे मेल खाती हैं

• Craft.js Component→↓GrapesJS Component Type

  React डिस्क्रिप्टर के साथ एक Craft.js घटक एक मॉडल के साथ एक पंजीकृत घटक प्रकार बन जाता है और डिफ़ॉल्ट हो जाता है। यह जो मार्कअप बनाता है वह उस मॉडल में चला जाता है।

• React Props→↓Traits / Properties / Attributes

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

• Craft.js Editor State→↓GrapesJS Project Data

  क्रमबद्ध नोड ट्री प्रोजेक्ट डेटा बन जाता है। दोनों JSON हैं, लेकिन आकार अलग-अलग हैं, इसलिए यह एक ऐसा परिवर्तन है जिसे आप लिखते हैं और परीक्षण करते हैं।

• Custom Editor UI→↓GrapesJS UI + Custom Commands / Panels

  आपके द्वारा React में लिखे गए सेटिंग्स पैनल को अंतर्निहित विशेषता पैनल द्वारा बदल दिया जाता है, साथ ही कस्टम कमांड और पैनल जहां आपको ऐसे व्यवहार की आवश्यकता होती है जो कोर में नहीं होता है।

यह एक वैचारिक मानचित्रण है, स्वचालित कनवर्टर नहीं। कोई भी उपकरण Craft.js रिज़ॉल्वर नहीं पढ़ता है और GrapesJS घटक प्रकारों का उत्सर्जन नहीं करता है - ऊपर दिया गया पत्राचार वह है जिसे आप लागू करते हैं, एक बार प्रति घटक प्रकार।

एक ही विचार - एक संपादन योग्य शीर्षक और विवरण के साथ एक hero अनुभाग - प्रत्येक तरफ परिभाषित। उन्हें एक अवधारणा की दो परिभाषाओं के रूप में पढ़ें, न कि एक ही फ़ाइल के पहले और बाद में।

// Craft.js: a component is a React component plus a `craft` descriptor.
// The editor drives it through connectors from useNode().
import { useNode } from '@craftjs/core';

export const Hero = ({ title, description }) => {
  const { connectors: { connect, drag } } = useNode();

  return (
    <section ref={(ref) => connect(drag(ref))} className="hero">
      <h1>{title}</h1>
      <p>{description}</p>
    </section>
  );
};

Hero.craft = {
  props: {
    title: 'Build faster',
    description: 'Create beautiful pages',
  },
  related: {
    // The panel that edits those props is a React component you write.
    settings: HeroSettings,
  },
};

// GrapesJS: a component type owns its markup and its editable traits.
// Traits are the closest analogue to Craft.js props.
editor.Components.addType('hero', {
  model: {
    defaults: {
      tagName: 'section',
      attributes: { class: 'hero' },
      traits: [
        { name: 'title', type: 'text', changeProp: true },
        { name: 'description', type: 'text', changeProp: true },
      ],
      components: [
        { tagName: 'h1', type: 'text', content: 'Build faster' },
        { tagName: 'p', type: 'text', content: 'Create beautiful pages' },
      ],
    },
  },
});

// A block is what makes the type draggable from the panel. Craft.js derives
// the equivalent from your toolbox; in GrapesJS it is a separate registration.
editor.Blocks.add('hero', {
  label: 'Hero',
  category: 'Sections',
  content: { type: 'hero' },
});

// The trait panel edits those traits. You do not write it.

और वह सामग्री जो पहले से मौजूद है

Component परिभाषाएँ इसका केवल आधा हैं। आपके उपयोगकर्ताओं द्वारा पहले से बनाई गई हर चीज़ Craft.js नोड प्रारूप में संग्रहीत है, और इसे स्थानांतरित करने का अर्थ है उस पेड़ पर चलना और उन परिभाषाओं का उत्सर्जन करना जिन्हें आपके नए घटक प्रकार समझते हैं।

// Craft.js persists `query.serialize()` — a JSON map of nodes keyed by id,
// each with { type: { resolvedName }, props, nodes }. Migrating it means
// walking that map and emitting the GrapesJS component definitions your new
// types understand: a transform you write once, per component type.
const toGrapesJs = {
  Hero: ({ title, description }) => ({ type: 'hero', title, description }),
  // …one entry per resolver entry in your Craft.js editor
};

function craftNodeToGjs(nodes, id) {
  const node = nodes[id];
  const map = toGrapesJs[node.type.resolvedName];
  if (!map) throw new Error(`Unmapped Craft.js component: ${node.type.resolvedName}`);

  return {
    ...map(node.props),
    components: (node.nodes ?? []).map((child) => craftNodeToGjs(nodes, child)),
  };
}

const nodes = JSON.parse(craftSerializedJson);
editor.setComponents(craftNodeToGjs(nodes, 'ROOT').components);

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

तीन व्यापक स्तर। उनमें से कोई भी अवधि नहीं रखता है, क्योंकि ईमानदार उत्तर पूरी तरह से आपके कोडबेस पर निर्भर करता है - और एक पृष्ठ जो आपको एक संख्या का वादा करता है जिसे वह नहीं जान सकता है, वह आपको योजना बनाने में मदद नहीं कर रहा है।

1. सरल

   बुनियादी घटक, थोड़ा कस्टम संपादक तर्क

   मुट्ठी भर घटक प्रकार, एक छोटी सेटिंग्स सतह, और सामग्री जिसने अभी तक कई विविधताएं जमा नहीं की हैं।

   आप शायद यहाँ हैं यदि

   • लगभग दस घटक प्रकारों से कम
   • सेटिंग्स पैनल ज्यादातर टेक्स्ट और नंबर इनपुट होते हैं
   • अभी तक उत्पादन में बहुत कम या कोई सामग्री नहीं है

   आमतौर पर अपेक्षाकृत केंद्रित प्रवासन।

2. मध्यम

   कस्टम घटक, संपादक इंटरफ़ेस, भंडारण और टेम्पलेट

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

   आप शायद यहाँ हैं यदि

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

   घटक और डेटा मैपिंग की आवश्यकता है।

3. मनोग्रंथि

   डीप React रेंडरिंग निर्भरता और कस्टम व्यवहार

   Components जो ऐप संदर्भ, गैर-स्पष्ट स्थानों में विस्तारित संपादक व्यवहार और संपादन अनुभव में एम्बेडेड व्यावसायिक नियमों पर निर्भर करता है।

   आप शायद यहाँ हैं यदि

   • Components प्रस्तुत करने के लिए ऐप स्थिति या संदर्भ पढ़ें
   • कस्टम स्थिति प्रबंधन संपादक में वायर्ड
   • व्यवसाय नियम जो संपादक व्यवहार में रहते हैं, डेटा में नहीं

   एक वास्तुकला समीक्षा और एक चरणबद्ध प्रवास की आवश्यकता है।

माइग्रेशन जटिलता इस बात पर निर्भर करती है कि मौजूदा ऐप को Craft.js से कितनी गहराई तक जोड़ा गया है।

बक्से एक प्रिंट करने योग्य योजना हैं, सहेजी गई स्थिति नहीं - यहां कुछ भी आपके ब्राउज़र में संग्रहीत नहीं है। आपकी टीम पहले से ही जो भी ट्रैकर उपयोग करती है, उसमें चरणों को कॉपी करें।

टीमें वास्तव में क्या करती हैं

1. 1

   GrapesJS में दृश्य परिभाषा का पुनर्निर्माण करें

   मार्कअप लें और अपने React घटक द्वारा उत्पादित स्टाइलिंग करें और इसे traits के साथ एक घटक प्रकार के रूप में व्यक्त करें। यह डिफ़ॉल्ट पथ है और यह आमतौर पर जितना लगता है उससे कम काम करता है, क्योंकि मार्कअप पहले से मौजूद है।

   लागत: प्रति घटक प्रकार की एक परिभाषा, हाथ से लिखी गई और किसी भी अन्य कोड की तरह समीक्षा की गई।

2. 2

   संपादक के बाहर व्यावसायिक तर्क का पुनः उपयोग करें

   मूल्य निर्धारण नियम, सत्यापन, डेटा लाने और स्वरूपण शायद ही कभी संपादक के होते हैं। उन्हें संपादक द्वारा कॉल किए गए मॉड्यूल में उठाएं, और वे इस कदम को अछूते रहते हैं।

   लागत: तर्क को पहले प्रतिपादन से अलग करने की आवश्यकता होती है, जो अक्सर परवाह किए बिना करने लायक होता है।

3. 3

   एक एकीकरण परत बनाएं जहां React रेंडरिंग की वास्तव में आवश्यकता हो

   कुछ घटकों को वास्तव में रेंडर समय पर React की आवश्यकता होती है। उन्हें संपादक के स्वामित्व वाले कंटेनर में प्रस्तुत किया जा सकता है, जिसमें संपादक परिणाम को एक घटक के रूप में मानता है।

   लागत: सबसे महंगा विकल्प। इसका उपयोग उन कुछ घटकों के लिए करें जिन्हें इसकी आवश्यकता है, न कि एक सामान्य रणनीति के रूप में।

4. 4

   घटकों के बजाय गुणों को मैप करें

   संपादन योग्य सतह वह है जिसकी आपके उपयोगकर्ता परवाह करते हैं। प्रत्येक संपादन योग्य प्रोप को किसी विशेषता या विशेषता के अनुसार मैप करना अनुभव को तब भी संरक्षित करता है जब नीचे का कार्यान्वयन पूरी तरह से नया हो।

   लागत: संपत्ति के नामों और प्रकारों का मिलान करना होगा, और चूक को फिर से स्थापित करना होगा।

GrapesJS चुनने का एक फायदा यह है कि आप हर सुविधा को खरोंच से लागू करने के बजाय प्लगइन्स के माध्यम से संपादक का विस्तार कर सकते हैं। ये GJS.Market कैटलॉग से वास्तविक लिस्टिंग हैं - नाम, कीमतें और छवियां सीधे बाज़ार से आती हैं, इसलिए यहां कुछ भी वास्तव में बिक्री के लिए जो है उससे दूर नहीं जा सकता है।

अपनी घटक लायब्रेरी का पुनर्निर्माण करें

चेकलिस्ट चरण 1 से 5। तैयार घटक और ब्लॉक सेट जिन्हें आप हाथ से परिभाषित करने के बजाय हर प्रकार से शुरू कर सकते हैं।

अनुभाग ब्राउज़ करें

Plugin Basic Blocks

पैलेट शुरू करने के लिए संरचनात्मक ब्लॉकों का एक आधारभूत सेट।

निःशुल्कद्वारा

GrapesJS Components Farmer

मौजूदा मार्कअप से घटक प्रकार उत्पन्न करता है।

निःशुल्कद्वारा

Plugin Forms

संपादन योग्य गुणों के साथ इनपुट घटक, विशेषता पैनल के लिए तैयार हैं।

निःशुल्कद्वारा

Users Blocks

आपकी टीम को नलसाजी लिखे बिना अपना स्वयं का ब्लॉक सेट पंजीकृत करने देता है।

US$59,00द्वारा

नियंत्रण Craft.js टीमें हाथ से बनाती हैं

चेकलिस्ट चरण 6. इनलाइन समृद्ध पाठ संपादन, जो Craft.js परियोजना में लगभग हमेशा एक घटक होता है जिसे आपकी टीम में किसी ने लिखा था।

अनुभाग ब्राउज़ करें

GrapesJS Inline Text Editor — Compatible with CKEditor 5

अंतर्निहित पाठ संपादन को CKEditor के लिए स्वैप करता है 5.

US$69,00द्वारा

TinyMCE 8 Inline Text Editor

अंतर्निहित पाठ संपादन को TinyMCE के लिए स्वैप करता है 6.

US$69,00द्वारा

Froala Inline Text Editor

अंतर्निहित पाठ संपादन को Froala के लिए स्वैप करता है।

US$69,00द्वारा

Grapesjs RTE Extensions

अधिक स्वरूपण क्रियाओं के साथ अंतर्निहित पाठ उपकरण पट्टी का विस्तार करता है.

निःशुल्कद्वारा

अपने डिज़ाइन सिस्टम को कैनवास में लाएँ

यदि आपके React घटक किसी उपयोगिता या घटक ढांचे पर बनाए गए हैं, तो वही सिस्टम आपके उपयोगकर्ताओं द्वारा खींचे गए ब्लॉक का समर्थन कर सकता है।

अनुभाग ब्राउज़ करें

Plugin Blocky for Tailwind CSS

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

US$59,00द्वारा

Grapesjs Tailwind

कैनवास के अंदर Tailwind कक्षाएं प्रस्तुत करता है।

निःशुल्कद्वारा

GrapesJS Bootstrap v5 Blocks

Bootstrap 5 लेआउट और सामग्री ब्लॉक।

निःशुल्कद्वारा

Bootstrap 4 Blocks for GrapesJS

Bootstrap पुराने सिस्टम के लिए 4 ग्रिड और सामग्री ब्लॉक।

निःशुल्कद्वारा

परियोजना डेटा और मीडिया

चेकलिस्ट चरण 8 से 10. जहां दस्तावेज़ बने रहते हैं और अपलोड किया गया मीडिया कहां जाता है.

अनुभाग ब्राउज़ करें

IndexedDB Storage

दस्तावेज़ों को ब्राउज़र में रखता है — प्रोटोटाइप और ऑफ़लाइन कार्य के लिए उपयोगी.

निःशुल्कद्वारा

Cloud Firestore

प्रोजेक्ट डेटा को क्लाउड Firestore पर बनाए रखता है।

निःशुल्कद्वारा

Grapesjs Firebase Storage

स्टोर ने Firebase में मीडिया अपलोड किया।

निःशुल्कद्वारा

Grapesjs Cloudinary

Cloudinary के पीछे मीडिया लाइब्रेरी के रूप में Asset Manager का उपयोग करता है।

निःशुल्कद्वारा

इनमें से प्रत्येक एक अलग उत्पाद है, और प्रत्येक के पास आर्किटेक्चर, ट्रेड-ऑफ और प्लगइन्स के साथ अपना गाइड है जो लागू होता है।

यदि आपने तय कर लिया है कि GrapesJS फिट बैठता है, तो अभी भी एक दूसरा निर्णय है: मौजूदा संपादक को पार ले जाएं, या उसके बगल में एक नया बनाएं। उनकी कीमत अलग-अलग होती है।

प्रति पंक्ति एक आवश्यकता, एक प्रारंभिक बिंदु। इनमें से चार Craft.js पर इंगित करते हैं, जो अन्य पांच को पढ़ने लायक बनाता है।

कोई सार्वभौमिक विजेता नहीं है। सही विकल्प आपके संपादक वास्तुकला और उत्पाद आवश्यकताओं पर निर्भर करता है।

GJS.Market GrapesJS संपादकों का निर्माण और माइग्रेट करता है। यदि आप अकेले चेकलिस्ट के माध्यम से काम नहीं करना चाहते हैं, तो ये वे चरण हैं जिन्हें एक सहभागिता कवर करती है - और पहला एक आकलन है, जो अच्छी तरह से यह निष्कर्ष निकाल सकता है कि Craft.js पर बने रहना सही उत्तर है।

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