TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published
Tailwind CSS

Easy and quick! Drag and drop HTML editor and builder for beautiful responsive email templates.



Install Editor from NPM using:

npm install @topol.io/editor-react


yarn add @topol.io/editor-react

Use in Component

In your React component import and add the simplest options.

For more options see the docs for TopolOptions configuration

import TopolEditor from '@topol.io/editor-react';

const customOptions = {
  authorize: {
    apiKey: "YOUR_API_TOKEN",
    userId: "some-user-id",
<TopolEditor options={customOptions}></TopolEditor>

Call Topol Plugin actions

To call actions to the editor import:

import { TopolPlugin } from '@topol.io/editor-react';


List of all available TopolPlugin actions:

Action Description
TopolPlugin.save() Saves the content of the editor more info
TopolPlugin.load(template) Loads the provided template more info
TopolPlugin.togglePreview() Toggles editor preview more info
TopolPlugin.togglePreviewSize() Toggles editor preview size
TopolPlugin.undo() Undo change in editor more info
TopolPlugin.redo() Redo change in editor more info
TopolPlugin.setSavedBlocks(savedblock: ISavedBlock[]) Sets the saved blocks more info
TopolPlugin.createNotification(notification: INotification) Creates editor's notification more info
TopolPlugin.changeEmailToMobile() Change email to mobile view more info
TopolPlugin.changeEmailToDesktop() Change email to desktop view more info
TopolPlugin.toggleBlocksAndStructuresVisibility() Toggle hidden structures visibility for blocks and structures more info
TopolPlugin.destroy() Destroys the editor initialization more info

Editor Events

The callbacks from editor are received as component events.

<TopolEditor options={customOptions} onSave={handleOnSave}></TopolEditor>

List of all editor events

Event Description
onSave Returns object which contains html and json of the template} more info
onSaveAndClose Returns object which contains html and json of the template more info
onTestSend Returns object which contains email, html and json of the template more info
onOpenFileManager When user clicks file manager open more info
onLoaded When editor is fully loaded
onInit When editor inits more info
onBlockSave When user saves block in editor, returns object of type ISavedBlock more info
onBlockRemove When user removes saved block, returns id of saved block to be removed more info
onBlockEdit When user edits saved block, returns id of saved block to be updated more info
onUndoChange When user clicks undo button, retunrs number of steps user undone more info
unRedoChange When user clicks redo button, retunrs number of steps user redone more info
onPreview When user switches to preview
onAlert When alert appears in editor more info


Topol Editor provides full TypeScript integration and exports all necessary types.

import { ITopolOptions, INotification, ISavedBlock }  from '@topol.io/editor-react';  

Package Sidebar


npm i @topol.io/editor-react



Weekly Downloads






Unpacked Size

50.8 kB

Total Files


Last publish


  • tomsq
  • ecomail