​

layermetry SDK

​

Overview

​

Documentation Files

​

Integration Guides

1. Next.js ImageEditor Integration
   • Complete guide for ImageEditor integration
   • Interface documentation and prop reference
   • Theme customization examples
   • Step-by-step implementation
   • Callback handling and export options
2. Next.js VideoEditor Integration
   • Complete guide for VideoEditor integration
   • WASM setup instructions (critical!)
   • Video processing workflow
   • Performance considerations
   • Export and encoding options

​

Troubleshooting

3. FAQ
   • Common issues and solutions
   • React version compatibility problems
   • License validation errors
   • WASM loading failures
   • Build and deployment issues
   • Quick troubleshooting checklist

​

Quick Start

​

1. Install Dependencies

npm install @layermetry/media-editor

​

2. Configure Next.js

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

module.exports = nextConfig;

​

3. Import SDK Styles

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

​

4. Use Dynamic Imports

'use client';

import dynamic from 'next/dynamic';

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

​

5. Copy WASM Files (Video Only)

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

​

Key Concepts

​

Which React version?

​

Why Dynamic Imports?

​

Why WASM Files?

​

Theme System

• Background colors (primary, secondary, tertiary)
• Text colors (primary, secondary)
• Accent colors (primary, secondary, hover)
• Border colors
• Component-specific colors (buttons, inputs, toolbar, canvas, etc.)

​

Architecture

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

​

Common Patterns

​

File Upload with Preview

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

​

Export and Download

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

​

Custom Theme

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

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

​

Example Project

• Landing page with studio selection
• Image Studio with drag-and-drop
• Video Studio with export modal
• Custom branded theme implementation
• Proper file handling and state management

​

API Reference

​

ImageEditor Props

​

VideoEditor Props

​

Performance Tips

​

Image Editor

• ✅ Fast load time (~500ms)
• ✅ Works on mobile devices
• ✅ Low memory usage (less than 100MB)
• ✅ Instant export

​

Video Editor

• ⚠️ Longer load time (~2s) due to WASM
• ⚠️ Desktop only (mobile not supported)
• ⚠️ High memory usage (500MB+ for HD video)
• ⚠️ Slow export (1-2 minutes for 30s 1080p video)

1. Show loading indicators during export
2. Warn users about processing time
3. Recommend shorter clips or lower resolution
4. Consider server-side processing for production apps

​

Version Compatibility

​

Support

​

Documentation

• Integration Guides: This folder
• API Docs: Coming soon
• Video Tutorials: Coming soon

​

Getting Help

• 📧 Email: support@layermetry.com
• 💬 Support Portal: Contact your account manager
• 📚 Docs: https://docs.layermetry.com

​

Reporting Bugs

1. Next.js version
2. React version
3. SDK version
4. Error messages
5. Steps to reproduce
6. Browser/OS information

​

License

​

Changelog

​

v2.0.0 (Current)

• Published as @layermetry/media-editor. The old @distralabs name is retired.
• Works in React 18 and React 19, in Vue, Angular, Svelte, Next.js and plain HTML — the editor ships as a browser custom element, so the host framework no longer matters.
• One package instead of 162.
• ffmpeg removed: 31 MB of WebAssembly is now 0. Export uses the browser’s own video hardware.
• A faster export path, measured at 4.4 times the previous exporter. Opt in with export={{ experimental: true }}.

​

v1.1.9

• Next.js 14 compatibility
• React 18.2 support
• Theme customization
• Video timeline improvements
• Bug fixes

• ImageEditor Integration →
• VideoEditor Integration →

• Check the FAQ →