Next.js पेज बिल्डर के साथGrapesJS

GrapesJS विज़ुअल एडिटिंग इंजन प्रदान करता है। Next.js इसके चारों ओर एप्लिकेशन आर्किटेक्चर प्रदान करता है। नीचे एक ही सूची दो बार पढ़ी गई है: एक संपादक किससे बना होता है, और एक बार जब आप GrapesJS को अपनाते हैं तो प्रत्येक भाग का निर्माण कौन करता है।

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

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

React स्टार्टर एकीकरण: GrapesJS मानक ब्लॉक, परत और स्टाइल पैनल के साथ React घटक से लगाया गया।

GrapesJS को एक ब्राउज़र की आवश्यकता है। यह तत्वों को मापता है, श्रोताओं को जोड़ता है और जिस क्षण यह आरंभ होता है DOM को उत्परिवर्तित करता है, इसलिए संपादक Client Component के अंदर आता है और इसका सेटअप एक प्रभाव के अंदर होता है। यही पूरी बाधा है - बाकी सब कुछ सामान्य है React।

'use client';

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

export default function GrapesEditor() {
  const containerRef = useRef<HTMLDivElement>(null);
  const editorRef = useRef<Editor | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // Runs only in the browser: effects never execute during SSR.
    const editor = grapesjs.init({
      container: containerRef.current,
      height: '100vh',
      storageManager: false,
      blockManager: {
        blocks: [
          {
            id: 'section',
            label: 'Section',
            content: '<section class="py-16"><h2>Headline</h2></section>',
          },
          { id: 'text', label: 'Text', content: '<p>Edit me</p>' },
        ],
      },
    });

    editorRef.current = editor;

    // Strict Mode mounts twice in development; without this you get two editors.
    return () => {
      editor.destroy();
      editorRef.current = null;
    };
  }, []);

  return <div ref={containerRef} />;
}

import GrapesEditor from '@/components/GrapesEditor';

// A Server Component. It renders the Client Component; it never touches
// the editor instance, and no 'use client' is needed here.
export default function EditorPage() {
  return <GrapesEditor />;
}

उदाहरण इस तरह क्यों दिखता है

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

// components/GrapesEditor.tsx
'use client';
// …useRef + useEffect + grapesjs.init()

// app/editor/page.tsx — stays a Server Component
import GrapesEditor from '@/components/GrapesEditor';
export default function Page() {
  return <GrapesEditor />;
}

import dynamic from 'next/dynamic';

// In the Pages Router every page is a client entry point, so ssr: false
// is allowed here — and skips the prerender pass entirely.
const GrapesEditor = dynamic(() => import('@/components/GrapesEditor'), {
  ssr: false,
  loading: () => <p>Loading editor…</p>,
});

export default function EditorPage() {
  return <GrapesEditor />;
}

यदि आप माइग्रेट कर रहे हैं, तो डायनेमिक () रैपर को पार न करें। App Router में यह या तो Server Component के अंदर पूरी तरह से विफल हो जाता है या डुप्लिकेट काम करता है जो 'use client' पहले से ही करता है।

Server Components वे जगह हैं जहां संपादक के आसपास का काम होता है। वे डेटा लाते हैं, सर्वर-साइड लॉजिक चलाते हैं और एप्लिकेशन शेल प्रदान करते हैं। Client Component GrapesJS को आरंभ करता है, अपने जीवनचक्र का मालिक है और हर ब्राउज़र इंटरैक्शन को संभालता है। प्रॉप्स सीमा पार करते हैं; संपादक उदाहरण कभी नहीं करता है।

import GrapesEditor from '@/components/GrapesEditor';

export default async function EditorPage({
  params,
}: {
  params: Promise<{ projectId: string }>;
}) {
  const { projectId } = await params;

  // Server side: auth, permissions and data fetching stay here.
  const res = await fetch(`${process.env.API_URL}/projects/${projectId}`, {
    cache: 'no-store',
  });
  const initialProject = await res.json();

  // The Client Component receives plain, serialisable props.
  return <GrapesEditor projectId={projectId} initialProject={initialProject} />;
}

आसपास के एप्लिकेशन के लिए Server Components का उपयोग करते समय संपादक क्लाइंट-साइड रखें।

हां, लेकिन संपादक को क्लाइंट पर ही इनिशियलाइज़ किया जाना चाहिए क्योंकि यह ब्राउज़र APIs और DOM पर निर्भर करता है।

उस उत्तर का उपयोगी संस्करण अधिक विशिष्ट है, क्योंकि इसके दो हिस्से अलग-अलग तरीके से विफल होते हैं।

यह जल्दी सही होने के लिए सबसे उपयोगी चीज है, और गलत होने में सबसे आसान है। संपादक एक संलेखन वातावरण है। प्रकाशित पृष्ठ आपके स्वयं के Next.js रेंडरिंग आर्किटेक्चर का उपयोग कर सकता है - स्थिर पीढ़ी, स्ट्रीमिंग, पुनर्वैधीकरण, एज कैशिंग, यह सब।

// The public route. GrapesJS is not imported here, so the editor
// bundle never reaches a visitor.
export const revalidate = 3600;

export default async function PublishedPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const res = await fetch(`${process.env.API_URL}/published/${slug}`, {
    next: { revalidate: 3600 },
  });

  // Already sanitised on the way in — see the publish route below.
  const { html, css } = await res.json();

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: css }} />
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </>
  );
}

GrapesJS स्थानीय और दूरस्थ भंडारण एडेप्टर शिप करता है और आपको अपना खुद का पंजीकरण करने देता है। एक कस्टम एडाप्टर आमतौर पर सही विकल्प होता है, क्योंकि यह हर पढ़ने और लिखने को आपके द्वारा नियंत्रित मार्ग के पीछे रखता है और प्रमाणित कर सकता है।

const editor = grapesjs.init({
  container: containerRef.current,
  storageManager: {
    type: 'nextjs-api',
    autosave: true,
    stepsBeforeSave: 5,
  },
  plugins: [
    // Registered as a plugin so the adapter exists before the first load.
    (editor) => {
      editor.Storage.add('nextjs-api', {
        async load() {
          const res = await fetch(`/api/projects/${projectId}`);
          return res.ok ? res.json() : {};
        },
        async store(project) {
          await fetch(`/api/projects/${projectId}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(project),
          });
        },
      });
    },
  ],
});

import { NextResponse } from 'next/server';

// Your own persistence layer — Postgres, MySQL, Mongo, S3, a headless CMS.
// GrapesJS never talks to it; it only ever talks to this route.
import { loadProject, saveProject } from '@/lib/projects';
import { requireProjectAccess } from '@/lib/auth';

export async function GET(
  _request: Request,
  { params }: { params: Promise<{ projectId: string }> },
) {
  const { projectId } = await params;
  await requireProjectAccess(projectId);

  return NextResponse.json(await loadProject(projectId));
}

export async function PUT(
  request: Request,
  { params }: { params: Promise<{ projectId: string }> },
) {
  const { projectId } = await params;
  await requireProjectAccess(projectId);

  const project = await request.json();
  if (typeof project !== 'object' || project === null) {
    return NextResponse.json({ error: 'Invalid project' }, { status: 400 });
  }

  await saveProject(projectId, project);
  return NextResponse.json({ ok: true });
}

• लोड: एडॉप्टर का load() init पर चलता है और उस प्रोजेक्ट को पुनर्स्थापित करता है जिस पर उपयोगकर्ता आखिरी बार काम कर रहा था।
• सहेजें: store() पूरी परियोजना को JSON के रूप में प्राप्त करता है। संपादक में विफलता को सामने लाने के लिए एक अस्वीकृत वादा लौटाएं।
• ऑटोसेव: autosave stepsBeforeSave बैचों के साथ परिवर्तन होता है ताकि आप हर कीस्ट्रोक पर न लिख सकें।
• ड्राफ़्ट: ड्राफ़्ट प्रोजेक्ट और प्रकाशित आउटपुट को अलग-अलग कॉलम में रखें, इसलिए संपादन कभी भी विज़िटर जो देखते हैं उसे परिवर्तित नहीं करता है।
• संस्करण: प्रोजेक्ट डेटा एक JSON दस्तावेज़ है — संस्करणों की एक परिशिष्ट-केवल तालिका में एक सम्मिलित करने की लागत आती है और रोलबैक खरीदती है।
• प्रकाशन: अपनी अनुमति जांच के साथ एक अलग समापन बिंदु, सहेजें मार्ग पर ध्वज नहीं।

उदाहरण: Supabase के साथ परियोजनाओं का भंडारण

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!, // server only — never NEXT_PUBLIC_
);

export async function loadProject(projectId: string) {
  const { data } = await supabase
    .from('projects')
    .select('project')
    .eq('id', projectId)
    .single();

  return data?.project ?? {};
}

export async function saveProject(projectId: string, project: unknown) {
  await supabase
    .from('projects')
    .upsert({ id: projectId, project, updated_at: new Date().toISOString() });
}

यह loadProject और saveProject को आयात के ऊपर के मार्ग की सीमा को लागू करता है। Prisma, Drizzle, Mongo, DynamoDB या REST कॉल के लिए किसी मौजूदा बैकएंड पर बॉडी को स्वैप करें और पृष्ठ पर और कुछ भी नहीं बदलता है।

उदाहरण: प्रोजेक्ट स्टोरेज को Vercel/Next.js परिनियोजन से जोड़ना

प्रकाशन लिखता है HTML और CSS आपका सार्वजनिक मार्ग वापस पढ़ता है। पुनर्वैधीकरण, कैशिंग और रेंडरिंग रणनीति सामान्य Next.js चिंताएँ बनी रहती हैं - संपादक अनुरोध पथ में नहीं है।

आप GrapesJS को किसी भी बैकएंड या डेटाबेस से कनेक्ट कर सकते हैं। संपादक में कुछ भी नहीं जानता है या परवाह नहीं करता है कि आपने किसे चुना है।

बॉक्स से बाहर कैनवास उपयोगकर्ताओं को सामान्य HTML देता है। कस्टम घटक प्रकार वे हैं कि संपादक इसके बजाय आपके उत्पाद के मार्कअप का उत्पादन कैसे शुरू करता है - वही अनुभाग जो आपका Next.js ऐप पहले से ही प्रस्तुत करता है, केवल उन गुणों के साथ जिन्हें आप उजागर करने का निर्णय लेते हैं।

// Your design system, expressed as something users can drop in,
// edit and style — but not break.
editor.Components.addType('pricing-table', {
  isComponent: (el) =>
    el.tagName === 'SECTION' && el.classList.contains('pricing'),

  model: {
    defaults: {
      tagName: 'section',
      classes: ['pricing'],
      // Structure the user cannot accidentally dismantle.
      droppable: false,
      // Fields exposed in the Settings panel.
      traits: [
        { name: 'plan', label: 'Plan name', type: 'text' },
        { name: 'price', label: 'Price', type: 'text' },
        { name: 'billing', label: 'Billing period', type: 'select',
          options: [
            { id: 'month', label: 'Monthly' },
            { id: 'year', label: 'Yearly' },
          ] },
      ],
      components: [
        { type: 'text', tagName: 'h3', content: 'Starter' },
        { type: 'text', tagName: 'p', content: '$19 / month' },
        { type: 'link', content: 'Choose plan', attributes: { href: '#' } },
      ],
    },
  },
});

एक ब्लॉक लाइब्रेरी बनाएं

ब्लॉक वे हैं जो उस पैनल में दिखाई देते हैं जिससे उपयोगकर्ता खींचता है। घटक प्रकार मौजूद होने के बाद एक को पंजीकृत करने में कुछ पंक्तियाँ खर्च होती हैं।

// A block is what the user drags. A component is what it becomes.
editor.Blocks.add('pricing-table', {
  label: 'Pricing table',
  category: 'Marketing',
  media: '<svg viewBox="0 0 24 24" width="24" height="24">' +
    '<rect x="3" y="4" width="18" height="16" rx="2" fill="currentColor"/></svg>',
  content: { type: 'pricing-table' },
});

• पुनः प्रयोज्य अनुभाग — hero, सुविधाएँ, प्रशंसापत्र, पाद लेख
• मार्केटिंग ब्लॉक - मूल्य निर्धारण तालिकाएं, लोगो दीवारें, कार्रवाई के लिए कॉल
• लेआउट ब्लॉक - कॉलम, स्पेसर, कंटेनर
• प्रपत्र — संपर्क, साइनअप, बहु-चरण
• ईकॉमर्स ब्लॉक — उत्पाद ग्रिड, कार्ट सारांश, चेकआउट संकेत
• एप्लिकेशन ब्लॉक — आपका उत्पाद जो कुछ भी करता है वह एक पृष्ठ दिखाने में सक्षम होना चाहिए

छवियों और संपत्तियों का प्रबंधन करें

Asset Manager चयन और सम्मिलन को संभालता है। फ़ाइलें कहाँ रहती हैं, उन्हें कौन अपलोड कर सकता है और जिसके माध्यम से अनुमति है वह अनुबंध का आपका पक्ष है।

assetManager: {
  // The library the user already has, loaded from your backend.
  assets: initialAssets,

  uploadFile: async (event) => {
    const files = event.dataTransfer
      ? event.dataTransfer.files
      : (event.target as HTMLInputElement).files;
    if (!files) return;

    const body = new FormData();
    Array.from(files).forEach((file) => body.append('files', file));

    // Your route authenticates the user and validates type and size
    // before anything is written to storage.
    const res = await fetch('/api/assets', { method: 'POST', body });
    const { urls } = await res.json();

    editor.AssetManager.add(urls);
  },
},

• अपने स्वयं के रूट हैंडलर के माध्यम से अपलोड करें ताकि सत्र कुकी, दर सीमा और ऑडिट लॉग सभी लागू हों।
• उन टीमों के लिए बाहरी URL की अनुमति दें जो पहले से ही कहीं और छवियों को होस्ट करती हैं.
• उपयोगकर्ता की मौजूदा लाइब्रेरी को प्रीलोड करें ताकि पिकर उनकी संपत्ति पर खुल जाए, न कि एक खाली पैनल।
• सर्वर पर MIME प्रकार और आकार को मान्य करें। संपादक का फ़ाइल इनपुट एक सुझाव है, नियंत्रण नहीं।
• CDN से परोसें और प्रोजेक्ट में CDN URL संग्रहीत करें, इसलिए प्रकाशित पृष्ठ कभी भी मीडिया के लिए आपके मूल स्थान पर न आएं।
• बड़े पुस्तकालयों को पृष्ठांकित करें - परिसंपत्ति पैनल खुशी-खुशी दस हजार थंबनेल प्रस्तुत करने का प्रयास करेगा।

संपादक दो अलग-अलग चीजें पैदा करता है और वे विनिमेय नहीं हैं। गलत को संग्रहीत करना वह गलती है जो "अपने पृष्ठ को संपादित करें" को "शुरू करें" में बदल देती है।

// Project data — the editable source. This is what you store.
const project = editor.getProjectData();

// HTML and CSS — the rendered output. Generate this when you publish.
const html = editor.getHtml();
const css = editor.getCss();

// Reopening an editing session needs the project data, not the HTML:
editor.loadProjectData(project);

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

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

• ब्लॉकड्रैग पैनल के लिए तैयार किए गए खंड और लेआउट आदिम।
• टेम्पलेट्सपूरे शुरुआती प्रीसेट - एक संपादक जो किसी चीज़ पर खुलता है, खाली कैनवास नहीं।
• भंडारदृढ़ता एडेप्टर, autosave और क्रैश रिकवरी।
• संपत्तिविजेट, मीडिया लाइब्रेरी और CDN एकीकरण अपलोड करें।
• पेजबहु-पृष्ठ परियोजनाएं, पृष्ठ वृक्ष और आंतरिक लिंकिंग।
• निर्यातित मालZIP निर्यात, HTML/CSS कन्वर्टर्स और परिनियोजन हुक।
• ईमेलMJML और एक ही कैनवास से ईमेल आउटपुट के लिए न्यूज़लेटर प्रीसेट।
• फार्मप्रपत्र घटक, इनपुट और तृतीय-पक्ष एम्बेड।
• एआईकॉपी जनरेशन, इमेज जनरेशन और असिस्टेड एडिटिंग।
• UIस्टाइल मैनेजर एक्सटेंशन, रूलर, पैलेट और एडिटर क्रोम।

GJS.Market कैटलॉग से लाइव लिस्टिंग, संपादक माउंट होने के बाद एक Next.js टीम द्वारा पूछे जाने वाले प्रश्न द्वारा समूहीकृत की जाती है।

React और Next.js एकीकरण

UI घटक से GrapesJS माउंट करने वाली टीमों के लिए स्टार्टर्स और React परतें।

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

GrapesJS React Demo — Starter Integration for React Developers

अपना खुद का लिखने से पहले पढ़ने के लिए एक कार्यशील React एकीकरण।

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

React UI for GrapesJS

संपादक के पैनलों को कैनवास के चारों ओर अपने स्वयं के React घटकों के रूप में पुनर्निर्माण करें।

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

Hero React Component GrapesJS

एक React घटक एक संपादन योग्य ब्लॉक के रूप में प्रस्तुत किया गया - आपके स्वयं के लिए पैटर्न।

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

GrapesJS Shadcn

एक पूर्ण संपादक खोल एक आधुनिक React डिजाइन प्रणाली के लिए फिर से स्टाइल किया गया।

US$999,99द्वारा

भंडारण एवं रिकवरी

"उपयोगकर्ता ने कुछ संपादित किया" और "यह कल भी है" के बीच सब कुछ।

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

Grapesjs Project Manager

CRUD लिखे बिना प्रोजेक्ट लिस्टिंग, निर्माण और स्विचिंग।

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

Autosave & Restore — Crash Recovery for GrapesJS

बंद टैब या खोए हुए कनेक्शन के बाद सत्र पुनर्प्राप्त करता है।

US$12,00द्वारा

IndexedDB Storage

ऑफ़लाइन-सक्षम स्थानीय दृढ़ता, आपके API के सामने एक ड्राफ्ट परत के रूप में उपयोगी।

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

Cloud Firestore

एक होस्ट की गई दृढ़ता बैकएंड यदि आप इसे नहीं चलाना चाहते हैं।

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

ब्लॉक, पेज और टेम्प्लेट

उपयोगकर्ता क्या खींचते हैं, पृष्ठ कहाँ रहते हैं और संपादक किस पर खुलता है।

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

Plugin Basic Blocks

स्टार्टर ब्लॉक सेट करें ताकि ड्रैग पैनल पहले दिन खाली न हो।

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

Pages Manager

संपादक में एक पेज ट्री के साथ बहु-पृष्ठ परियोजनाएं।

US$25,00द्वारा

Templates Manager

एक टेम्पलेट लाइब्रेरी उपयोगकर्ता शुरू कर सकते हैं और आप क्यूरेट कर सकते हैं।

US$39,00द्वारा

Plugin Blocky for Tailwind CSS

Tailwind-पहले से ही Tailwind के साथ स्टाइल करने वाली टीमों के लिए मूल ब्लॉक।

US$59,00द्वारा

संपत्ति, निर्यात और ईमेल

मीडिया हैंडलिंग और आउटपुट स्वरूपों में एक पेज बिल्डर बढ़ता है।

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

Grapesjs Cloudinary

Cloudinary परिसंपत्ति बैकएंड के रूप में, परिवर्तनों के साथ।

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

Grapesjs Uppy

एक उत्पादन-ग्रेड अपलोड विजेट Asset Manager में वायर्ड है।

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

Export Zip

एक प्रोजेक्ट को HTML और CSS बंडल के रूप में तैनात करने के लिए तैयार के रूप में डाउनलोड करें।

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

MJML Preset

उसी कैनवास को रिस्पॉन्सिव ईमेल आउटपुट में बदलें।

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

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

क्षमता के आधार पर, आप क्या लिखने के लिए साइन अप करेंगे। "एक्स्टेंसिबल" का अर्थ है कि लाइब्रेरी इंटरफ़ेस और डिफ़ॉल्ट प्रदान करती है, और आपसे इसे अपने बैकएंड पर इंगित करने की अपेक्षा करती है।

GrapesJS API पर 2026-09-02 के विरुद्ध सत्यापित किया गया।

पहले वास्तविक उपयोगकर्ता द्वारा संपादक खोलने से पहले पढ़ने लायक दो सूचियाँ हैं, बाद में नहीं।

इस स्टैक के लिए रिपोर्ट की गई लगभग हर एकीकरण विफलता निम्नलिखित सात में से एक है।

• ✕गलती

  GrapesJS को Server Component के अंदर आरंभ करना

  Server Components में कोई हुक नहीं है, कोई प्रभाव नहीं है और कोई DOM नहीं है। आयात हल हो सकता है, लेकिन संपादक के लिए माउंट करने के लिए कहीं नहीं है।

  ✓ठीक करना

  संपादक के स्वामित्व वाले मॉड्यूल के शीर्ष पर Client Component 'use client' का उपयोग करें।

• ✕गलती

  DOM मौजूद होने से पहले आरंभ करना

  रेंडर के दौरान init() कॉल करना, या एक रेफरी के खिलाफ जो अभी भी शून्य है, विफल हो जाता है क्योंकि कंटेनर तत्व अभी तक नहीं बनाया गया है।

  ✓ठीक करना

  माउंट के बाद इनिशियलाइज़ करें, useEffect के अंदर, और रेफ के मौजूद होने पर गार्ड करें।

• ✕गलती

  GrapesJS के दौरान SSR चलाना

  सर्वर तक पहुंचने वाली init() पर कोई भी कॉल ReferenceError: दस्तावेज़ परिभाषित नहीं है। अकेले आयात हानिरहित है।

  ✓ठीक करना

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

• ✕गलती

  संपादक इंस्टेंस को React स्थिति में रखना

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

  ✓ठीक करना

  रेफरी का प्रयोग करें। उन चीजों के लिए राज्य रखें जो UI वास्तव में प्रस्तुत करता है, जैसे कि एक बचत संकेतक।

• ✕गलती

  संपादक को अनावश्यक रूप से फिर से प्रस्तुत करना

  एक माता-पिता फिर से प्रस्तुत करता है जो प्रॉप्स को फिर से बनाता है या कंटेनर को फिर से माउंट करता है, पूरे कैनवास को फाड़ देता है और फिर से बनाता है।

  ✓ठीक करना

  GrapesJS जीवनचक्र को सामान्य React रेंडरिंग से अलग रखें - एक बार माउंट करें, फिर इसे अपने स्वयं के API के माध्यम से चलाएं।

• ✕गलती

  केवल HTML भंडारण

  HTML आउटपुट है, स्रोत नहीं। HTML से किसी प्रोजेक्ट को फिर से खोलने से घटक प्रकार, traits और संपादक स्थिति खो जाती है, इसलिए अगला संपादन एक चपटे पृष्ठ से शुरू होता है।

  ✓ठीक करना

  यदि उपयोगकर्ताओं को संपादन जारी रखने की आवश्यकता है तो प्रोजेक्ट डेटा जारी रखें। प्रकाशित करने पर HTML उत्पन्न करें।

• ✕गलती

  हर सार्वजनिक पेज पर GrapesJS चल रहा है

  संपादक रनटाइम को उन आगंतुकों के लिए शिपिंग करना जो कुछ भी संपादित नहीं कर सकते हैं, बिना किसी वापसी के बंडल आकार, मेमोरी और Core Web Vitals की लागत होती है।

  ✓ठीक करना

  प्रकाशित सामग्री से संपादक रनटाइम अलग करें - प्रकाशित पृष्ठों को सादे HTML और CSS के रूप में प्रस्तुत करें।

तीन स्कोप, प्रत्येक इसके पहले वाले में जोड़ता है। अधिकांश टीमें पहले पर ओवरशूट करती हैं और तीसरे से आश्चर्यचकित होती हैं।

1. 1सप्ताह एक

   MVP

   साबित करें कि संपादन अनुभव सही है, इससे पहले कि आप इसके आसपास कुछ भी बनाएं।

   • GrapesJS एक ग्राहक घटक में घुड़सवार
   • मुट्ठी भर बुनियादी ब्लॉक
   • स्थानीय या एकल-प्रोजेक्ट भंडारण
   • एक मार्ग पर सरल प्रकाशन
   यहां से शुरू करें
2. 2पहले वास्तविक उपयोगकर्ता

   उत्पादन

   वह सब कुछ जो एक डेमो को किसी ऐसी चीज़ में बदल देता है जिस पर एक ग्राहक भरोसा कर सकता है।

   • प्रत्येक संपादक मार्ग पर प्रमाणीकरण
   • अपने स्वयं के API के पीछे बैकएंड भंडारण
   • संपत्ति अपलोड और एक मीडिया लाइब्रेरी
   • आपके डिज़ाइन सिस्टम से मेल खाने वाले कस्टम घटक
   • अनुमतियाँ सर्वर-साइड लागू की गईं
   • संस्करण और प्रकाशन वर्कफ़्लो
   भंडारण अनुभाग देखें
3. 3वाणिज्यिक

   SaaS

   संपादक के चारों ओर उत्पाद परत, जिसके लिए आप वास्तव में शुल्क लेते हैं।

   • संगठन और टीमें
   • बिलिंग और योजना सीमाएँ
   • व्हाइट-लेबल संपादक UI
   • आपके उपयोगकर्ताओं के लिए क्यूरेट किया गया एक प्लगइन सेट
   • एक टेम्पलेट लाइब्रेरी
   • प्रकाशित पृष्ठों पर विश्लेषिकी
   SaaS पेज बिल्डर

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