Skip to content

Getting Started

Install

npm install @fastlabai/design-editor
# optional: enables in-browser background removal
npm install @imgly/background-removal

react and react-dom 18+ are peer dependencies.

Use

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

export default function App() {
  return <DesignEditor />
}

That’s it. The editor uses sensible defaults: localStorage for autosave, Google Fonts for fonts, @imgly/background-removal for background removal (if installed), and an empty Library panel (configure mediaProvider to enable).

Customizing

Pass props to wire host integrations:

<DesignEditor
  mediaProvider={createMyMediaProvider()}
  fontProvider={createMyFontProvider()}
  onExport={async (blob, format, scene) => {
    const url = await uploadToS3(blob)
    await saveToDatabase(scene) // Save raw JSON to re-edit later
  }}
  onBack={() => router.push('/dashboard')}
/>

Theming

The package ships a CSS file with theme tokens you can override:

:root {
  --de-color-primary: #ec4899;
  --de-color-bg: #0f172a;
  --de-color-fg: #fafafa;
}

Next steps