LeadsX10 | 10X Leads via Email Marketing software

LeadsX10 Drag & Drop Email Editor

Email Design with LeadsX10's Drag-and-Drop
Editor Wrapped in React.js

LeadsX10 Email Design Editor
Drag & Drop Email Creation

Introducing the Email Design Editor Kit, your comprehensive toolkit for crafting intuitive drag-and-drop email interfaces. With React DND Kit integration, effortlessly transform your components into draggable elements and droppable areas, all through simple hooks.

Embed our editor seamlessly now into your app now !

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

    const App = () => {
      const htmlString = "";
      const editorRef = useRef(null); // For JavaScript
      // const editorRef = useRef<EditorRef>(null); // Uncomment for TypeScript

      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={process.env.API_KEY} ref={editorRef} onReady={onReady} />
          <button onClick={onExport}>Export HTML</button>
        </div>
      );
    };

    export default App;
  
    import React, { useRef } from "react";
    import { LeadsX10Editor } from "leadsx10-email-editor"; // For JavaScript
    // import { LeadsX10Editor, EditorRef } from "leadsx10-email-editor"; // For TypeScript
    import "leadsx10-email-editor/dist/components/css/main.css";

    const App = () => {
      const htmlString = "";
      const editorRef = useRef(null); // For JavaScript
      // const editorRef = useRef<EditorRef>(null); // Uncomment for TypeScript

      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={process.env.API_KEY} ref={editorRef} onReady={onReady} />
          <button onClick={onExport}>Export HTML</button>
        </div>
      );
    };

    export default App;