unlayer-integration

Integrate Unlayer Editor

Overview

Unlayer provides official wrappers for React, Vue, and Angular, plus a plain JavaScript embed. All wrappers share the same underlying API — only the editor access pattern differs.

This skill covers the email, page, popup, and document builders. For the standalone Image Editor or @unlayer/react-image-editor, use unlayer-image-editor.

Which Framework?

Framework	Package	Install	Editor Access
React	react-email-editor	npm i react-email-editor	useRef<EditorRef> → ref.current?.editor
Vue	vue-email-editor	npm i vue-email-editor	this.$refs.emailEditor.editor
Angular	angular-email-editor	npm i angular-email-editor	@ViewChild → this.emailEditor.editor
Plain JS	CDN script tag	<script> embed	Global unlayer object

⚠️ Before installing any Unlayer package, verify the version exists on npm:

npm view react-email-editor version   # check latest published version

Never pin a version number you haven't verified. Use npm install <package> --save without a version to get the latest, or run npm view <package> versions --json to see all available versions.

---

React (Complete Working Example)

npm install react-email-editor --save

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

const EmailBuilder = () => {
  const emailEditorRef = useRef<EditorRef>(null);
  const [saving, setSaving] = useState(false);

  // Save design JSON + export HTML to your backend
  const handleSave = () => {
    const unlayer = emailEditorRef.current?.editor;
    if (!unlayer) return;

    setSaving(true);
    unlayer.exportHtml(async (data) => {
      try {
        const response = await fetch('/api/templates', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            design: data.design,  // Save this — needed to edit later
            html: data.html,      // The rendered HTML output
          }),
        });
        if (!response.ok) throw new Error('Save failed');
        console.log('Saved successfully');
      } catch (err) {
        console.error('Save error:', err);
      } finally {
        setSaving(false);
      }
    });
  };

  // Load a saved design when editor is ready
  const onReady: EmailEditorProps['onReady'] = async (unlayer) => {
    try {
      const response = await fetch('/api/templates/123');
      if (response.ok) {
        const saved = await response.json();
        unlayer.loadDesign(saved.design); // Pass the saved design JSON
      }
    } catch (err) {
      console.log('No saved design, starting blank');
    }
  };

  return (
    <div>
      <button onClick={handleSave} disabled={saving}>
        {saving ? 'Saving...' : 'Save'}
      </button>
      <EmailEditor
        ref={emailEditorRef}
        onReady={onReady}
        options={{
          projectId: 123456, // Dashboard > Project > Settings
          displayMode: 'email',
        }}
      />
    </div>
  );
};

export default EmailBuilder;