Next.js

The editor is client-only — it manipulates <canvas> and uses browser APIs.

App Router

app/editor/page.tsx

import { DesignEditor } from '@fastlabai/design-editor'
import '@fastlabai/design-editor/theme.css'

export default function Page() {
  return (
    <main style={{ height: '100vh' }}>
      <DesignEditor />
    </main>
  )
}

The package marks its components with 'use client', so App Router treats this correctly with no extra config.

Pages Router

pages/editor.tsx

import dynamic from 'next/dynamic'

const DesignEditor = dynamic(
  () => import('@fastlabai/design-editor').then((m) => m.DesignEditor),
  { ssr: false },
)

export default function Editor() {
  return (
    <div style={{ height: '100vh' }}>
      <DesignEditor />
    </div>
  )
}

SSR-safe imports

Type-only imports and pure-data utilities are SSR-safe and can be used in app/api/* routes or getServerSideProps:

import type { IScene, MediaProvider } from '@fastlabai/design-editor'

CSS

Import the theme CSS once in a Server Component or in globals.css:

app/layout.tsx

import '@fastlabai/design-editor/theme.css'