Cómo configurar GrapesJS con Vite (guía completa 2026)

Por qué Vite for GrapesJS

Vite ofrece a GrapesJS un servidor de desarrollo rápido y un paquete de producción optimizado con Casi ninguna configuración. GrapesJS incluye una build ESM, así que Vite se encarga de La caja. Esta guía instala GrapesJS, importa el CSS y el núcleo, y la inicializa El editor.

1. Instalación

npm create vite@latest my-editor
cd my-editor
npm install grapesjs

2. Inicializar en el archivo de entrada

En src/main.js:

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

const editor = grapesjs.init({
  container: '#gjs',
  height: '100vh',
  fromElement: true,
  storageManager: false,
  components: '<h1>Hello from GrapesJS</h1>',
});

export default editor;

Añadir el contenedor a index.html:

<div id="gjs"></div>
<script type="module" src="/src/main.js"></script>

3. Correr y construir

npm run dev     # fast HMR dev server
npm run build   # optimized production bundle

Si alguna vez ves una advertencia previa al empaquetar, fija GrapesJS vite.config.js:

export default {
  optimizeDeps: { include: ['grapesjs'] },
};

4. Añadir un plugin

import grapesjs from 'grapesjs';
import preset from 'grapesjs-preset-webpage';

grapesjs.init({
  container: '#gjs',
  plugins: [preset],
  pluginsOpts: { 'grapesjs-preset-webpage': {} },
});

Resolución de problemas

Si el editor carga pero parece sin estilo, se te olvidó import 'grapesjs/dist/css/grapes.min.css' hacerlo en tu archivo de entrada. Si Vite registra una advertencia previa al agrupamiento de dependencias, añade grapesjs a optimizeDeps.include en vite.config.js. ¿Usar Vite en modo SSR (SvelteKit, Nuxt, Astro)? Inicializa GrapesJS solo en el cliente: el servidor de desarrollo también se renderiza en el servidor, y el editor necesita el DOM. Para la producción, no se requiere nada especial: vite build el tree-shake y agrupa GrapesJS como cualquier dependencia de ESM.

Requisitos previos

Necesitarás Node.js 18+ y un proyecto Vite (npm create vite@latest). GrapesJS incluye un módulo ES, así que Vite lo maneja prácticamente sin configuración — Esta guía cubre los pocos casos en los que necesitas darle un empujón.

Añadir bloques personalizados al editor

Registrar bloques arrastrables con el Gestor de bloques después grapesjs.initde:

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.

Uso de GrapesJS dentro de un framework en Vite

Si tu app Vite usa React o Vue, monta GrapesJS en un efecto solo para cliente para que sea nunca se ejecuta durante ningún paso SSR y el contenedor existe primero:

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

export default function Editor() {
  const ref = useRef(null);
  useEffect(() => {
    let editor;
    import('grapesjs').then(({ default: grapesjs }) => {
      editor = grapesjs.init({ container: ref.current, height: '100vh' });
    });
    return () => editor?.destroy();
  }, []);
  return <div ref={ref} />;
}

Consejos de rendimiento

Importa GrapesJS dinámicamente (import('grapesjs')), así que Vite lo divide en Su propio bloque y el resto de tu app sigue siendo ligero. vite build Lo sacude y lo minimiza para la producción sin trabajo extra. Si al menos una parte de tu La app usa el editor, cárgalo detrás de la ruta que lo necesita.

Resolución de errores comunes

El editor carga sin estilo significa que lo olvidaste import 'grapesjs/dist/css/grapes.min.css' en tu entrada. R La advertencia previa al empaquetar se soluciona añadiendo grapesjs a optimizeDeps.include en vite.config.js. Un SSR "documento no está definido" (SvelteKit/Nuxt/Astro on Vite) significa que debes inicializar el editor solo en el cliente.

Vite vs Webpack para GrapesJS

Vite es la opción de configuración más baja — gestiona la compilación ESM y la importación de CSS desde el y te da un servidor de desarrollo rápido. Alcance para Webpack solo cuando un proyecto ya existente ya lo estandariza; la configuración de GrapesJS en sí es igual de sencilla en cualquiera de los dos.

Próximos pasos

Ver el GrapesJS + Svelte relacionado y GrapesJS + React , consulta las Mercado GrapesJS, o empieza desde el GJS. Página principal del mercado.

Preguntas frecuentes

¿Cómo importo estilos GrapesJS en Vite?

Importar 'grapesjs/dist/css/grapes.min.css' en tu archivo de entrada — Vite Lo inyecta en desarrollo y lo empaqueta para producción.

¿GrapesJS necesita una configuración especial de Vite?

Normalmente no. Si tienes un problema previo al empaquetar, añade grapesjs a optimizeDeps.include.

¿Puedo usar plugins con Vite?

Sí — instálalo vía npm, importarlo y pásalo en el plugins array de grapesjs.init.