LeadsX10 Email Editor

Introducing LeadsX10's drag-and-drop email editor, now with a React.js wrapper. Elevate your email creation with intuitive design and robust features. Experience unmatched flexibility seamlessly integrated into your workflow. Step into the future of email design with LeadsX10.

Demo Preview

Blog Post

Here's a blog post with a quickstart guide: Documentation

Installation

Install Leadsx10 Email Editor from NPM for effortless integration into your React build process.

  npm install leadsx10-email-editor --force

Usage

Require the EmailEditor component and render it with JSX:

import React, { useRef } from "react";
//For Javascript
import { LeadsX10Editor } from "leadsx10-email-editor";
//For Typescript
import { LeadsX10Editor, EditorRef  } from "leadsx10-email-editor";
import "leadsx10-email-editor/dist/components/css/main.css";

const App = () => {
  const htmlString = "";
  //For Javascript
  const editorRef = useRef(null);
  //For Typescript
  const editorRef = useRef<EditorRef>(null);

  const onExport = () => {
    if (editorRef.current) {
      console.log(editorRef.current.exportHTML());
    }
  };

  const onReady = () => {
    alert("Editor loaded!");
    editorRef.current?.loadHTML(htmlString);
  };

  return (
    <div
      style={{
        width: "95vw",
        height: "100vh",
      }}
    >
      <LeadsX10Editor minHeight="80vh" apiKey={API_KEY} ref={editorRef} onReady={onReady} />
      <button onClick={onExport}>Export HTML</button>
    </div>
  );
};

export default App;

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

API_KEY

Sign up on our homepage and obtain your API key from the settings.

Support

For support, email : [email protected]

Used By

This project is used by the following companies:

• LeadsX10

Authors

• Hari Prakash M
• Pugalarasan M

License

Copyright (c) 2023 LeadsX10. MIT Licensed.