The Developer-First Drag & Drop Builder for React Applications

Embed production-ready email, landing page and document builders in minutes—not months—with full control over UX, functionality, and scalability.

Trusted by Dev Teams
Powering High-Scale Platforms

1M+
renders per day
30+
customization hooks
99.9%
uptime SLA
400K+
monthly end-users
Keap Logo

Keap Saved 1 Year Worth of Development Time with Unlayer

“Unlayer was more user-friendly and came with the added bonus of a landing page builder. Their integrated solution lets us focus on helping small businesses succeed, while Unlayer's builder expertise gets our users to value faster.”

Rich Sharpe
Rich Sharpe
Senior Product Manager @ Keap

Build vs Buy

From integration to extensibility, here's what you gain by embedding Unlayer instead of building from scratch.

Integration Time

Unlayer (SDK + React Plugin)
5 min with React plugin.
In-House Build
160-240+ hours for MVP.

Customization

Unlayer (SDK + React Plugin)
Config-driven custom tools/themes.
In-House Build
Manual UI/content logic.

Scalability

Unlayer (SDK + React Plugin)
Proven 1M+ renders/day.
In-House Build
Custom infra required.

Extensibility

Unlayer (SDK + React Plugin)
Add blocks without touching core.
In-House Build
Build plugin system from scratch.

Support & Docs

Unlayer (SDK + React Plugin)
Versioned updates + human support.
In-House Build
Internal bug-fixing burden.

Install a React Content Builder in Minutes — Native to Your Tech Stack

Embed a fully-featured drag-and-drop builder into your app using a native React component. Minimal setup. Full control. Built to work with your stack, not around it.

1

Install via npm

The easiest way to use React Email Editor is to install it from NPM and include it in your own React build process.

npm install react-email-editor --save
2

Import & render it in your app

Require the EmailEditor component and render it with JSX:

import React, { useRef } from 'react';
import { render } from 'react-dom';

import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';

const App = (props) => {
  const emailEditorRef = useRef<EditorRef>(null);

  const exportHtml = () => {
    const unlayer = emailEditorRef.current?.editor;

    unlayer?.exportHtml((data) => {
      const { design, html } = data;
      console.log('exportHtml', html);
    });
  };

  const onReady: EmailEditorProps['onReady'] = (unlayer) => {
    // editor is ready
    // you can load your template here;
    // the design json can be obtained by calling
    // unlayer.loadDesign(callback) or unlayer.exportHtml(callback)

    // const templateJson = { DESIGN JSON GOES HERE };
    // unlayer.loadDesign(templateJson);
  };

  return (
    <div>
      <div>
        <button onClick={exportHtml}>Export HTML</button>
      </div>

      <EmailEditor ref={emailEditorRef} onReady={onReady} />
    </div>
  );
};

render(<App />, document.getElementById('app'));
3

Customize your stack

Add React Components as Custom Blocks:

<EmailEditor
  tools={{
    productCarousel: {
      icon: "🛒", 
      component: ProductCarousel, // Your React component
      props: { apiEndpoint: "/api/products" } 
    }
  }}
/>

Ready to Build Something Amazing?

Start embedding Unlayer's powerful builder into your application today. Join thousands of developers creating incredible user experiences.

Unlayer vs Alternatives

Why developers prefer Unlayer over other embeddable builders:

Full control over styling, configuration, and behavior through comprehensive APIs

Easily add custom tools and property panels using JavaScript

Supports React, Angular, and Vue with dedicated libraries

Well-documented APIs for saving, loading, exporting, and more

Clean integration flow that fits naturally into modern dev stacks

Unlayer vs Alternatives Comparison

Why Teams Choose Unlayer

Launch in Days, Not Quarters

Unlayer's SDK and plugins for React, Angular, and Vue integrate quickly with minimal setup. Add editing, save/load, and white-labeling without diverting your dev team from core product work.

Launch in Days, Not Quarters - Unlayer integration timeline

Built-In AI That Speeds Up Content

Unlayer's AI features reduce manual work by generating headlines, CTA text, and images based on simple prompts—helping users move faster while staying in control of the final content.

Built-In AI Content Generation Features

One SDK. Multiple Builders.

Unlayer supports email, page, document, and popup builders—all through a single integration. Add new content types without rebuilding or maintaining separate tools.

One SDK Multiple Builders - Email, Page, Document, Popup

Explore Developer-First Capabilities

Content Creation

Give users the tools to build beautiful, responsive emails, landing pages, and docs—no coding required.

True WYSIWYG design with editable and locked regions
Multi-column layouts, dividers, spacers, mobile-specific visibility
Dynamic fields with merge tags for personalization
Inline styling, smart formatting, undo/redo, and responsive preview
Design audits and metadata fields like preheaders built-in
Content Creation - Unlayer capability demonstration

Ready to Save 1,000+ Dev Hours?

Unlayer helps you launch faster, scale smarter, and give your users an editing experience they'll actually enjoy.