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

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.”

Build vs Buy
From integration to extensibility, here's what you gain by embedding Unlayer instead of building from scratch.
Integration Time
Customization
Scalability
Extensibility
Support & Docs
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.
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
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'));
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

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.

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.

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.

Explore Developer-First Capabilities
Content Creation
Give users the tools to build beautiful, responsive emails, landing pages, and docs—no coding required.

Developer Resources
Everything you need to build, test, and launch — fast.
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.