npm package: @ss_sammo/react-email-editor
Description: Production-ready drag-and-drop email template editor powered by easy-email.
Latest version: 0.1.1

# `@mailbuilder/react-email-editor`

Production-oriented drag-and-drop email editor built on top of the `easy-email` ecosystem.

## Features

- Drag-and-drop MJML email building with JSON as the canonical template format
- JSON -> MJML -> HTML server rendering helpers
- MJML import back into editor JSON
- Merge tags, preview data, and logic-friendly template engine adapters
- Reusable blocks, preset templates, marketing widgets, and block studio schemas
- Adapter-driven asset manager, translation flow, AI actions, and template persistence
- Ready-to-install React and Next.js examples in this workspace

## Minimum React Setup

```tsx
import '@mailbuilder/react-email-editor/styles.css';
import {
  MailBuilderProvider,
  MailBuilderShell,
  createEmptyTemplate,
} from '@mailbuilder/react-email-editor';

const template = createEmptyTemplate();

export function App() {
  return (
    <MailBuilderProvider template={template}>
      <MailBuilderShell />
    </MailBuilderProvider>
  );
}
```

If you want a tiny starter config object, this is enough:

```ts
import type { MailBuilderConfig } from '@mailbuilder/react-email-editor';

export const config: MailBuilderConfig = {
  height: 'calc(100vh - 120px)',
};
```

## Image API Adapter

Use `createFetchAssetAdapter` when your React app should call its own API for image and asset management:

```tsx
import '@mailbuilder/react-email-editor/styles.css';
import {
  MailBuilderProvider,
  MailBuilderShell,
  createEmptyTemplate,
  createFetchAssetAdapter,
} from '@mailbuilder/react-email-editor';

const template = createEmptyTemplate();

const config = {
  assets: createFetchAssetAdapter({
    baseUrl: '/api/assets',
  }),
};

export function App() {
  return (
    <MailBuilderProvider template={template} config={config}>
      <MailBuilderShell />
    </MailBuilderProvider>
  );
}
```

`createFetchAssetAdapter` keeps the existing `MailBuilderConfig.assets` contract. It maps your backend into the editor's asset manager with these default endpoints:

- `GET /api/assets?folderId=<id|null>` -> `{ folders, files }`
- `POST /api/assets/files` with `FormData` fields `file` and optional `folderId` -> `AssetFile`
- `POST /api/assets/folders` with JSON `{ parentId, name }` -> `AssetFolder`
- `PATCH /api/assets/files/:fileId` with JSON `{ name }` -> `AssetFile`
- `DELETE /api/assets/files/:fileId` -> `{ success: true }`
- `PATCH /api/assets/folders/:folderId` with JSON `{ name }` -> `AssetFolder`
- `DELETE /api/assets/folders/:folderId` -> `{ success: true }`

Override the default routes by passing `endpoints` in `createFetchAssetAdapter(options)`.

## Examples

- `apps/react-example` shows a regular React app with local mock assets and an optional API-backed asset adapter via `VITE_MAILBUILDER_ASSET_API_BASE_URL`.
- `apps/next-example` shows a Next.js integration with working sample asset API routes under `app/api/assets`.

## Server Rendering

For server rendering helpers use the dedicated server entry:

```ts
import { renderTemplateToHtml } from '@mailbuilder/react-email-editor/server';
```