Cómo construir una aplicación de escritorio GrapesJS con Electron (guía completa 2026)

Por qué GrapesJS encaja en Electron

Electron renderiza páginas web en una ventana de escritorio, y GrapesJS es un editor de navegador, Así que se ejecuta en el renderizador sin cambios. El giro del escritorio es el almacenamiento: en su lugar de un servidor, guardas proyectos en disco a través del IPC de Electron. Esta guía se monta el editor, guarda en disco de forma segura y exporta HTML/CSS — completamente offline.

1. Exponer una API segura de guardado/carga desde la precarga

Sigue contextIsolation adelante y solo lo que necesites preload.js:

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

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

2. Gestionar la E/S de disco en el proceso principal

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. Mount GrapesJS en el renderizador

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(),
  });

Consejos de seguridad

Un editor de escritorio sigue mereciendo una postura de seguridad estricta. Mantén contextIsolation: true y sandbox: true, y nunca habilita nodeIntegration en el renderizador — expone solo un mínimo load/save API en contextBridge un script de precarga. Valida la carga útil en el proceso principal antes de escribirla en disco (tamaño, forma), ya que el renderizador carga código remoto de GrapesJS. Escribe bajo app.getPath('userData') los archivos de So caen en la ubicación adecuada para el sistema operativo, y considera escrituras atómicas (archivo temporal + renombramiento) para que un fallo a mitad de partida nunca corrompa el proyecto.

Requisitos previos

Necesitarás Node.js 18+ y Electron. El editor se ejecuta en el renderizador como cualquier web paje; el giro de escritorio es el almacenamiento: guardas en disco a través del IPC de Electron de un servidor HTTP. Familiaridad con la división principal/renderizador, preload scripts y IPC es suficiente.

Añadir bloques personalizados al editor

Registra los bloques arrastrables con el Gestor de Bloques después grapesjs.init en el renderizador:

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

Saca librerías de bloques y presets listos de GJS. Haz marketing para un conjunto más rico.

Escrituras atómicas en disco

Escribe el proyecto en un archivo temporal y renombrarlo para que nunca haya un cierre a mitad de partida corrompe el archivo:

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' };
});

Consejos de rendimiento

Agrupa GrapesJS con tu renderizador (vía Vite o Webpack) para que cargue desde archivos locales Y la app funciona completamente offline. Plugins pesados de carga perezosa solo cuando su función es abierto. Destruye el editor cuando la vista se desmonte, así que navegar entre ventanas o Routes no filtra instancias.

Consideraciones de seguridad

Mantener contextIsolation: true y sandbox: true, y nunca Habilitar nodeIntegration en el renderizador — exponer solo un mínimo load/save API a través contextBridgede . Validar la carga útil (forma y tamaño) en el proceso principal antes de escribir, ya que el renderizador Carga código del editor remoto. Escribe bajo app.getPath('userData').

Resolución de errores comunes

"require no está definido" en el renderizador significa que intentaste usar Node APIs directas — pasa por el puente de precarga en su lugar. Un blank sin estilo o en blanco Lona significa que la hoja de estilo no se cargó o que el contenedor no estaba presente. Que las partidas guardadas fallen silenciosamente suele significar el nombre del canal IPC o el manejador No coincide.

Cuándo usar GrapesJS en Electron

GrapesJS se adapta a una aplicación de escritorio que necesita un editor visual offline — una página local o Diseñador de correo electrónico, un generador de documentación, una herramienta de contenido para quioscos. Porque es Con licencia MIT y autónoma, entregas toda la experiencia de edición dentro de tu Aplicación sin servidor y sin tarifas por asiento.

Próximos pasos

Consulta la configuración relacionada de GrapesJS + Vite (útil para empaquetar el renderizador) y GrapesJS + React guías, navega por el mercado de GrapesJS o empieza por el GJS. Página principal del mercado.

Preguntas frecuentes

¿Puede GrapesJS ejecutarse offline en Electron?

Sí — agrupa GrapesJS con el renderizador y almacena los proyectos en disco a través del principal proceso. No se necesita red.

¿Cómo guardo los proyectos en disco?

Envía el proyecto desde el renderizador con ipcRenderer.invoke (exposed mediante precarga) y escribe con fs en el proceso principal, bajo app.getPath('userData').

¿Debería activar contextIsolation?

Sí — déjalo activado y expone una pequeña API con contextBridge en su lugar de habilitar nodeIntegration.