React Drag-and-Drop Seitenbauer

// Install
npm install grapesjs grapesjs-preset-webpage

// React page builder component
import { useEffect, useRef } from 'react';
import grapesjs from 'grapesjs';
import webpagePlugin from 'grapesjs-preset-webpage';
import 'grapesjs/dist/css/grapes.min.css';
import { loadFunnelTranslations } from '@/lib/i18n-page';
import type { GetStaticProps } from 'next';
import { useTranslation } from 'next-i18next';

export default function PageBuilder() {
  const containerRef = useRef(null);

  useEffect(() => {
    const editor = grapesjs.init({
      container: containerRef.current,
      plugins: [webpagePlugin],
      storageManager: { type: 'local' },
    });

    return () => editor.destroy();
  }, []);

  return <div ref={containerRef} style={{ height: '100vh' }} />;
}