If you’re a React developer looking to enable your users with a powerful drag-and-drop email builder, you’re in the right place. Unlayer’s embeddable builder lets you integrate content creation tools into your app in minutes, without reinventing the wheel.
While this guide will walk you through embedding Unlayer’s Email Builder using our React SDK, we've also put together a comprehensive guide to embeddable React email builders if you are looking to explore the bigger picture.
For now, let's focus on configuration tips, lifecycle methods, and where to go next to enhance your integration.
Step 1: Install the Unlayer React SDK
Install our React SDK via npm or yarn:
npm install @unlayer/react
or
yarn add @unlayer/react
Check out the React SDK documentation for full API details and usage patterns.
Step 2: Import and Use the Component
Import the UnlayerEditor into your component and add it to your JSX:
import { UnlayerEditor } from '@unlayer/react';
const EmailEditor = () => {
  return <UnlayerEditor />;
};
export default EmailEditor;
Explore the GitHub repo to view source code and raise issues.
Step 3: Add Lifecycle Methods (Optional but Recommended)
The SDK supports lifecycle methods that allow you to interact with the builder.
<UnlayerEditor
  onLoad={() => console.log('Builder Loaded')}
  onDesignUpdated={design => console.log('Design Updated', design)}
  onExport={html => console.log('Exported HTML', html)}
/>
These hooks are useful for autosaving, triggering previews, or exporting content on user actions.
Step 4: Customize the Look and Tools
You can customize the builder’s UI to match your app’s branding:
<UnlayerEditor
  options={{
    appearance: {
      theme: 'dark',
      panels: {
        tools: { dock: 'left' },
      },
    },
    tools: {
      text: { enabled: true },
      image: { enabled: true },
    },
  }}
/>
Want to go further? Unlayer supports full theming, custom fonts, and the ability to hide certain tools from end-users.
Try Unlayer’s playground to see how different props and hooks affect the editor.
Step 5: Save or Export the Final Design
You can trigger design export or save programmatically:
const exportHTML = () => {
  editorRef.current.exportHtml(data => {
    const { html } = data;
    // Save or send this HTML wherever needed
  });
};
For headless workflows, Unlayer also supports exporting to JSON, plain text, PDF, or image formats.Â
Ready to integrate? Start your free trial and begin embedding today.
What’s Next?
Here are some ways to take your integration further:
Unlayer helps you move fast without compromising on control, design quality, or extensibility. Start building with the SDK, or book a demo if you’re looking for enterprise-grade support and deployment options.
