इलेक्ट्रॉन के साथ GrapesJS डेस्कटॉप ऐप कैसे बनाएं (पूरी गाइड 2026)

GrapesJS इलेक्ट्रॉन क्यों फिट बैठता है

इलेक्ट्रॉन वेब पेजों को डेस्कटॉप विंडो में प्रस्तुत करता है, और GrapesJS एक ब्राउज़र संपादक है, इसलिए यह रेंडरर में बिना किसी बदलाव के चलता है। डेस्कटॉप ट्विस्ट स्टोरेज है: इसके बजाय एक सर्वर की, आप इलेक्ट्रॉन के आईपीसी के माध्यम से डिस्क पर परियोजनाओं को सहेजते हैं। यह मार्गदर्शिका माउंट करती है संपादक, डिस्क पर सुरक्षित रूप से सहेजता है, और HTML/CSS निर्यात करता है - पूरी तरह से ऑफ़लाइन।

1. प्रीलोड से एक सुरक्षित सेव/लोड एपीआई को उजागर करें

चालू रखें contextIsolation और केवल वही पुल करें जो आपको चाहिए preload.js:

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('store', {
  load: () => ipcRenderer.invoke('page:load'),
  save: (data) => ipcRenderer.invoke('page:save', data),
});

2. मुख्य प्रक्रिया में डिस्क I/O को संभालें

const { app, ipcMain } = require('electron');
const fs = require('fs/promises');
const path = require('path');

const file = path.join(app.getPath('userData'), 'page.json');

ipcMain.handle('page:load', async () => {
  try { return JSON.parse(await fs.readFile(file, 'utf8')); }
  catch { return {}; }
});

ipcMain.handle('page:save', async (_e, data) => {
  await fs.writeFile(file, JSON.stringify(data));
  return { status: 'ok' };
});

3. रेंडरर में GrapesJS माउंट करें

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

const editor = grapesjs.init({
  container: '#gjs',
  height: '100vh',
  fromElement: true,
  storageManager: false,
});

// Load saved project on start, save on demand.
window.store.load().then((p) => p.project && editor.loadProjectData(p.project));

document.getElementById('save').onclick = () =>
  window.store.save({
    project: editor.getProjectData(),
    html: editor.getHtml(),
    css: editor.getCss(),
  });

सुरक्षा युक्तियाँ

एक डेस्कटॉप संपादक अभी भी एक कड़ी सुरक्षा मुद्रा का हकदार है। रखें contextIsolation: true और , sandbox: trueऔर रेंडरर में कभी भी सक्षम nodeIntegration न करें - प्रीलोड स्क्रिप्ट के माध्यम से contextBridge केवल एक न्यूनतमload/एपीआईsave को उजागर करें। डिस्क (आकार, आकार) पर लिखने से पहले मुख्य प्रक्रिया में पेलोड को मान्य करें, क्योंकि रेंडरर रिमोट GrapesJS कोड लोड करता है। इसके तहत लिखें app.getPath('userData') ताकि फाइलें ओएस-उपयुक्त स्थान पर उतरें, और परमाणु लेखन (अस्थायी फ़ाइल + नाम बदलें) पर विचार करें ताकि क्रैश मिड-सेव कभी भी प्रोजेक्ट को दूषित न करे।

आवश्यक शर्तें

आपको 18+ और इलेक्ट्रॉन Node.js आवश्यकता होगी। संपादक किसी भी वेब की तरह रेंडरर में चलता है पृष्ठ; डेस्कटॉप ट्विस्ट स्टोरेज है - आप इसके बजाय इलेक्ट्रॉन के आईपीसी के माध्यम से डिस्क पर सहेजते हैं एक HTTP सर्वर का। मुख्य/रेंडरर स्प्लिट, प्रीलोड स्क्रिप्ट और आईपीसी से परिचित पर्याप्त है।

संपादक में कस्टम ब्लॉक जोड़ें

रेंडरर में ब्लॉक प्रबंधक के साथ grapesjs.init खींचने योग्य ब्लॉक पंजीकृत करें:

editor.BlockManager.add('hero', {
  label: 'Hero section',
  category: 'Sections',
  content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});

एक समृद्ध सेट के लिए तैयार ब्लॉक पुस्तकालयों और प्रीसेट को GJS.Market से खींचें।

परमाणु डिस्क पर लिखता है

प्रोजेक्ट को एक अस्थायी फ़ाइल में लिखें और इसे जगह में नाम दें ताकि क्रैश मिड-सेव कभी न हो फ़ाइल को दूषित करता है:

ipcMain.handle('page:save', async (_e, data) => {
  const tmp = file + '.tmp';
  await fs.writeFile(tmp, JSON.stringify(data));
  await fs.rename(tmp, file);     // atomic on most filesystems
  return { status: 'ok' };
});

प्रदर्शन युक्तियाँ

अपने रेंडरर (Vite या Webpack के माध्यम से) के साथ GrapesJS बंडल करें ताकि यह स्थानीय फ़ाइलों से लोड हो सके और ऐप पूरी तरह से ऑफ़लाइन काम करता है। आलसी-लोड भारी प्लगइन्स केवल तभी जब उनकी सुविधा हो खोला गया। संपादक को नष्ट करें जब दृश्य अनमाउंट हो तो विंडोज़ के बीच नेविगेट करना या मार्ग उदाहरणों को लीक नहीं करते हैं।

सुरक्षा के मनन

रखें contextIsolation: true और , sandbox: trueऔर कभी नहीं रेंडरर में सक्षम करें nodeIntegration - केवल न्यूनतम उजागर करें loadsave / एपीआई के माध्यम सेcontextBridge। मान्य करें लिखने से पहले मुख्य प्रक्रिया में पेलोड (आकार और आकार), रेंडरर के बाद से दूरस्थ संपादक कोड लोड करता है। के तहत app.getPath('userData')लिखें।

सामान्य त्रुटियों का समस्या निवारण

रेंडरर में "आवश्यकता परिभाषित नहीं है" का अर्थ है कि आपने नोड का उपयोग करने का प्रयास किया है एपीआई सीधे — इसके बजाय प्रीलोड ब्रिज से गुजरें। एक अनस्टाइल या ब्लैंक कैनवास का मतलब है कि स्टाइलशीट लोड नहीं हुई या कंटेनर मौजूद नहीं था। चुपचाप विफल रहता है आमतौर पर आईपीसी चैनल का नाम या हैंडलर का मतलब होता है मेल नहीं खाता।

इलेक्ट्रॉन में GrapesJS का उपयोग कब करें

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

अगले चरण

संबंधित GrapesJS + Vite सेटअप देखें (रेंडरर को बंडल करने के लिए आसान) और GrapesJS + React गाइड, GrapesJS मार्केटप्लेस ब्राउज़ करें, या से शुरू करें GJS.Market होम पेज।

अक्सर पूछे जाने वाले प्रश्न

क्या GrapesJS इलेक्ट्रॉन में ऑफ़लाइन चल सकते हैं?

हाँ - बंडल GrapesJS रेंडरर के साथ और मुख्य के माध्यम से डिस्क पर परियोजनाओं को स्टोर करें प्रक्रिया। किसी नेटवर्क की आवश्यकता नहीं है।

मैं प्रोजेक्ट को डिस्क पर कैसे सहेजूं?

रेंडरर ipcRenderer.invoke से प्रोजेक्ट भेजें (उजागर प्रीलोड के माध्यम से) और इसे fs मुख्य प्रक्रिया में लिखें, के तहत app.getPath('userData').

क्या मुझे contextIsolation सक्षम करना चाहिए?

हाँ - इसे चालू रखें और इसके बजाय एक छोटे एपीआई को contextBridge उजागर करें सक्षम करने nodeIntegrationके .