> ## Documentation Index
> Fetch the complete documentation index at: https://layermetry.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get started with layermetry SDK in under 5 minutes

## Quick Installation

Get up and running with the layermetry SDK in your Next.js application.

<Warning>
  **This page still describes the version 1 setup.** In version 2
  (`@layermetry/media-editor` 2.0.0) React is no longer pinned to 18.2.0 — React 18
  and React 19 both work, and the editor also runs with no React at all, so
  Next.js 15 is fine.

  Follow [Installation](/docs/installation) for the version 2 setup. This page is being
  rewritten.
</Warning>

### 1. Install the Package

<CodeGroup>
  ```bash npm theme={null}
  npm install @layermetry/media-editor
  ```

  ```bash yarn theme={null}
  yarn add @layermetry/media-editor
  ```

  ```bash pnpm theme={null}
  pnpm add @layermetry/media-editor
  ```
</CodeGroup>

### 2. Install Dependencies

<Warning>
  Version 2 works in **React 18 and React 19**, so any Next.js version is fine. It
  also works with no React at all. If you pinned `react@18.2.0` for version 1,
  remove the pin.
</Warning>

### 3. Configure Next.js

Create or update **next.config.js**:

```javascript next.config.js theme={null}
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      canvas: false,
      fs: false,
    };
    return config;
  },
};

module.exports = nextConfig;
```

### 4. Import SDK Styles

Add to **app/globals.css**:

```css app/globals.css theme={null}
@import "tailwindcss";

/* Import SDK styles */
@import "@layermetry/media-editor/dist/index.css";
```

### 5. Create Your First Editor

**app/studio/page.tsx:**

```typescript theme={null}
'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';

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

export default function StudioPage() {
  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 && selectedFile.type.startsWith('image/')) {
      setFile(selectedFile);
      setShowEditor(true);
    }
  };

  const handleExport = (result: any) => {
    console.log('Exported image:', result.base64);
    // Download or upload the result
    const link = document.createElement('a');
    link.href = result.base64;
    link.download = 'edited-image.png';
    link.click();
  };

  return (
    <div className="min-h-screen p-6">
      {!showEditor && (
        <div>
          <h1 className="text-3xl font-bold mb-4">Image Studio</h1>
          <input
            type="file"
            accept="image/*"
            onChange={handleFileSelect}
            className="mb-4"
          />
        </div>
      )}

      {showEditor && file && (
        <div className="fixed inset-0 z-50">
          <ImageEditor
            licenseKey="YOUR_LICENSE_KEY_HERE"
            apiUrl="https://localhost:3030/social"
            files={file}
            onClose={() => setShowEditor(false)}
            callback={handleExport}
          />
        </div>
      )}
    </div>
  );
}
```

### 6. Get Your License Key

Contact your account manager or email [support@layermetry.com](mailto:support@layermetry.com) to obtain your license key.

Replace `YOUR_LICENSE_KEY_HERE` with your actual JWT license key.

***

## Next Steps

<CardGroup cols={2}>
  <Card title="ImageEditor Integration" icon="image" href="/docs/integration-guides/nextjs-image-editor">
    Complete guide for integrating the ImageEditor component
  </Card>

  <Card title="VideoEditor Integration" icon="video" href="/docs/integration-guides/nextjs-video-editor">
    Complete guide for integrating the VideoEditor component
  </Card>

  <Card title="API Reference" icon="code" href="/docs/api-reference/image-editor">
    Detailed API documentation for all components
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/docs/troubleshooting/faq">
    Common issues and solutions
  </Card>
</CardGroup>

***

## Demo Application

Check out our example Next.js application in the SDK package at `examplenextjs/` for a complete working implementation with:

* 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

***

## Support

Need help? We're here for you:

* 📧 Email: [support@layermetry.com](mailto:support@layermetry.com)
* 📚 Documentation: [https://docs.layermetry.com](https://docs.layermetry.com)
* 💬 Contact your account manager

***

<Tip>
  For production deployments, make sure to use environment variables for your license key and API URL.
</Tip>