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.

tsxApp.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.
`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.