GrapesJS React Page Builder

npm install grapesjs @grapesjs/react

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

export default function GrapesJSEditor() {
  const editorRef = useRef(null);

  useEffect(() => {
    const editor = grapesjs.init({
      container: editorRef.current,
      fromElement: false,
      height: '100vh',
      storageManager: false,
    });
    return () => editor.destroy();
  }, []);

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

// pages/editor.tsx (Next.js)
import dynamic from 'next/dynamic';

const GrapesJSEditor = dynamic(() => import('../components/GrapesJSEditor'), {
  ssr: false,
});

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