How to Embed Unlayer Email Builder in React: 5 Easy Steps 🚀

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 roll? Try Unlayer React Builder now.

What’s Next?

Here are some ways to take your integration further:

• Create Custom Tools

• Apply Themes & Layout

• Load and Save Designs

• Preview Designs

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.