---
title: "React email editor component (props API), MailKaro Docs"
description: "EmailEditor, the props-driven React email editor component in react-email-craft: pass design objects and config instead of the Unlayer-shaped ref API."
---

# React email editor component (props API)

The editor

# React email editor component (props API)

`EmailEditor` is the lower-level, fully props-driven component. Use it when you want design objects and config instead of the Unlayer shape.

tsx App.tsx

```
import { useRef } from "react";
import { EmailEditor, type EmailEditorRef } from "react-email-craft";
import { createEmptyDesign } from "email-craft-sdk";

function App() {
 const ref = useRef<EmailEditorRef>(null);
 return (
 <EmailEditor
 ref={ref}
 initialDesign={createEmptyDesign()}
 mergeTags={{ first_name: { label: "First name", value: "{{first_name}}", sample: "Alex" } }}
 config={{ appearance: { mode: "dark" } }}
 onDesignChange={(design) => save(design)}
 style={{ height: "100vh" }}
 />
 );
}
```

## Props

|Prop |Type |Default |Description |
|`initialDesign` |Design |- |Design to load on mount. Use `createEmptyDesign()` or `createStarterDesign()`. |
|`mergeTags` |Record<string, { label; value; sample? }> |- |Field-picker tags. |
|`config` |MailkaroConfig |- |See [Configuration](https://docs.mailkaro.com/configuration). |
|`onDesignChange` |(design: Design) => void |- |Fires on every design change. |
|`assetSources / assetConnectors` |AssetSource[] / AssetConnector[] |- |Extra asset libraries and connectors. |
|`className / style` |string / CSSProperties |- |Wrapper styling. |

## Ref methods

|Method |Type |Default |Description |
|`getDesign()` |() => Design |- |Current design JSON. |
|`exportHtml(mergeTags?)` |(tags?) => string |- |Rendered HTML; pass tag values to substitute. |
|`loadDesign(design)` |(design) => void |- |Replace the current design. |
|`saveSnapshot(label?)` |(label?) => void |- |Capture a version. |
|`getSnapshots()` |() => EditorSnapshot[] |- |List versions. |
|`restoreSnapshot(id)` |(id) => void |- |Restore a version. |

Source: https://docs.mailkaro.com/react