How I Added Unlayer’s Drag-and-Drop Email Editor to Next.js in Under 15 Minutes

Source: Dev.to

I Was Experimenting with Unlayer’s SDK

I tried embedding Unlayer’s drag‑and‑drop email editor in a Next.js app. The SDK lets you:

• Export HTML and JSON designs in minutes
• Generate responsive, production‑ready email HTML
• Avoid the usual email‑client rendering quirks

Below is what I discovered and a step‑by‑step guide for other developers.

What I Discovered

Unlayer is like Stripe for email editing – it handles the rendering quirks so you can focus on your app.

Key Features

• Client‑side JavaScript wrapper that embeds a drag‑and‑drop editor
• Generates cross‑client compatible HTML ready for production
• Exports JSON (for storage/editing) and clean HTML (for sending)
• React wrapper available out of the box
• No backend dependency – runs entirely in the browser

Step 1: Installation

npm install react-email-editor

Step 2: Component Setup

'use client'

import { useRef } from 'react'
import dynamic from 'next/dynamic'

// Critical: Dynamic import with SSR disabled
// react-email-editor relies on browser APIs like `window`
// that aren't available during server‑side rendering
const EmailEditor = dynamic(
  () => import('react-email-editor').then((mod) => mod.EmailEditor),
  { ssr: false }
)

export default function Home() {
  const emailEditorRef = useRef(null)

  const exportHtml = () => {
    if (emailEditorRef.current) {
      emailEditorRef.current.editor.exportHtml((data: any) => {
        const { design, html } = data

        // Store JSON in your database for later editing
        console.log('Design JSON:', design)

        // Use HTML for sending emails
        console.log('Exported HTML:', html)

        // Download the HTML file
        const blob = new Blob([html], { type: 'text/html' })
        const url = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = 'newsletter.html'
        link.click()
        URL.revokeObjectURL(url)
      })
    }
  }

  return (
    <>
      {/* Newsletter Builder UI */}
      <div style={{ height: 'calc(100vh - 60px)' }}>
        <EmailEditor ref={emailEditorRef} />
        <button onClick={exportHtml}>Export HTML</button>
      </div>
    </>
  )
}

The Hurdle: SSR & Hydration

Problem: The editor tries to access window during server‑side rendering, causing a hydration error.

Solution: Use Next.js dynamic import with { ssr: false }. This forces the component to render only on the client, eliminating the mismatch.

This pattern is common for any browser‑only library in a Next.js project.

Key Implementation Details

The Result

In ~15 minutes I had:

• A fully functional drag‑and‑drop email editor
• Export functionality for JSON and HTML
• Responsive, production‑ready email HTML
• No custom rendering engine to maintain

What I Loved

Trade‑offs

Build vs. Buy

When deciding whether to build a custom email editor or use Unlayer, consider the following comparison:

Bottom Line

If you need a quick, reliable, and maintainable email editor, Unlayer’s SDK is a solid choice. It removes the heavy lifting of email‑client quirks, lets you ship fast, and keeps the codebase lean. The only extra work is handling the client‑only nature of the library in a SSR environment like Next.js.

Types of Apps

Build if:

• You have 6 + months and a dedicated team.
• You need extreme customization that Unlayer can’t provide.
• Email editing is your core product (not just a feature).

Buy (Unlayer) if:

• Email editing is a feature, not your product.
• You need to ship quickly.
• You want to focus engineering resources on core business logic.
• You need reliable cross‑client compatibility without the maintenance burden.

For most SaaS applications, the math is clear: Buy.
The time saved on rendering‑engine maintenance alone pays for the integration many times over.

Why Not Just Use a Rich Text Editor?

You might ask: “Why not use Tiptap or Quill?”

Rich‑text editors are great for documents, but they break for email layouts. Users need:

• Multi‑column layouts
• Responsive images
• Buttons that work across clients
• Structured templates

Unlayer provides a layout builder that guarantees mobile‑friendly output and saves designs as JSON for programmatic editing.

In production you’d:

1. Store the JSON design in your database.

2. Load saved designs with:

   editor.loadDesign(designJson);

3. Integrate with your email‑sending service.

4. Add custom blocks for your domain (e.g., product listings, user data).

Conclusion

Unlayer abstracts away email‑rendering complexity. If you need an email editor in your app, this SDK is worth evaluating. The time saved on rendering‑engine maintenance alone justifies the integration.

Sometimes the best code is the code you don’t have to write. 😉

I’m looking forward to exploring more and sharing with you!