npm install @distralabs/[email protected]
npm install [email protected] [email protected] [email protected]
npm install framer-motion lucide-react

const nextConfig = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      canvas: false,
      fs: false,
    };
    return config;
  },
};

module.exports = nextConfig;

@import "@distralabs/media-editor/dist/index.css";

'use client';

import dynamic from 'next/dynamic';

const ImageEditor = dynamic(
  () => import('@distralabs/media-editor').then(mod => ({ default: mod.ImageEditor })),
  { ssr: false }
);

mkdir -p public
cp node_modules/@distralabs/media-editor/dist/MediaInfoModule.wasm public/
cp node_modules/@distralabs/media-editor/dist/*.js public/
cp -r node_modules/@distralabs/media-editor/dist/umd public/

Your Next.js App
├── app/
│   ├── globals.css          # Import SDK styles here
│   ├── layout.tsx           # Root layout
│   └── studio/
│       ├── theme.ts         # Shared theme configuration
│       ├── image/
│       │   └── page.tsx     # ImageEditor page
│       └── video/
│           └── page.tsx     # VideoEditor page
├── public/
│   ├── MediaInfoModule.wasm # Video processing (2.3 MB)
│   ├── worker.js            # FFmpeg worker
│   ├── decode_worker.js     # Video decoder
│   ├── encode_worker.js     # Video encoder
│   └── umd/
│       └── ffmpeg-core.wasm # FFmpeg core (31 MB)
└── next.config.js           # Configure webpack and rewrites

const [file, setFile] = useState<File | null>(null);
const [showEditor, setShowEditor] = useState(false);

const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
  const selectedFile = e.target.files?.[0];
  if (selectedFile) {
    setFile(selectedFile);
    setShowEditor(true);
  }
};

return (
  <>
    <input type="file" accept="image/*" onChange={handleFileSelect} />
    {showEditor && file && (
      <ImageEditor
        licenseKey="YOUR_KEY"
        files={file}
        onClose={() => setShowEditor(false)}
        callback={(result) => {
          console.log('Exported:', result.base64);
        }}
      />
    )}
  </>
);

const handleExport = useCallback((result: any) => {
  // Create download link
  const link = document.createElement('a');
  link.href = result.base64 || result.videoUrl;
  link.download = `edited-${Date.now()}.${result.videoUrl ? 'mp4' : 'png'}`;
  link.click();

  // Or upload to server
  fetch('/api/upload', {
    method: 'POST',
    body: JSON.stringify({ data: result.base64 }),
    headers: { 'Content-Type': 'application/json' }
  });
}, []);

const theme = {
  'background.primary': '#0f172a',
  'text.primary': '#ffffff',
  'accent.primary': '#3b82f6',
  'accent.secondary': '#06b6d4',
  'border.default': '#334155',
};

<ImageEditor theme={theme} showThemeCreator={false} />