# @topol.io/editor > Official package for Topol Editor. Latest version **0.3.0** (published 2025-11-10) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @topol.io/editor pnpm add @topol.io/editor yarn add @topol.io/editor bun add @topol.io/editor ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.3.0 | | Published | 2025-11-10 | | First published | 2022-01-26 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM | | Dependencies | 1 | | Unpacked size | 33.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Topol.io | | Maintainers | ecomail, tomsq | | Keywords | plugin, editor, email, topol, topol.io, email templates | ## Links - npm: https://www.npmjs.com/package/@topol.io/editor - Homepage: https://topol.io - npm.io page: https://npm.io/package/@topol.io/editor ## Dependencies (1) - [load-script](https://npm.io/package/load-script.md) ^2.0.0 ## Alternatives - [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads - [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads - [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads - [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads - [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads ## Recent versions - 0.3.0 (latest) — 2025-11-10 - 2.0.0-alpha.2 (alpha) — 2026-09-16 - 0.0.0-alfa.1 (alfa) — 2022-01-26 - 2.0.0-alpha.1 — 2026-09-11 - 1.0.0-alpha.9 — 2026-08-21 - 1.0.0-alpha.8 — 2026-08-20 - 1.0.0-alpha.7 — 2026-08-20 - 1.0.0-alpha.6 — 2026-08-19 - 1.0.0-alpha.5 — 2026-08-18 - 1.0.0-alpha.4 — 2026-04-28 - 1.0.0-alpha.3 — 2026-04-28 - 1.0.0-alpha.2 — 2026-04-28 - 1.0.0-alpha.1 — 2026-02-17 - 1.0.0-alpha.0 — 2026-02-16 - 0.2.1 — 2025-06-02 - … 30 more at https://npm.io/package/@topol.io/editor/versions ## README Tailwind CSS --- Easy and quick! Drag and drop HTML editor and builder for beautiful responsive email templates. # Documentation ## Installation Install Editor from NPM using: ```sh npm install @topol.io/editor //or yarn add @topol.io/editor ``` ## Usage Add HTML element Editor will load to ```html
``` In your JS or TS file import TopolPlugin, initialize the editor, as an ID provide the id you defined the HTML, in this example its `app` For more options see the docs for [TopolOptions configuration](https://docs.topol.io/reference/topol-options.html) ```js import TopolPlugin from "@topol.io/editor"; const TOPOL_OPTIONS = { id: "#app", authorize: { apiKey: "YOUR_API_TOKEN", userId: "some-user-id", }, callbacks: { onSave(json, html) {}, }, }; TopolPlugin.init(TOPOL_OPTIONS); ``` ## Call Topol Plugin actions To call actions to the editor import: ```js import { TopolPlugin } from "@topol.io/editor"; TopolPlugin.save(); ``` ### List of all available TopolPlugin actions: | Action | Description | | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | `TopolPlugin.save()` | Saves the content of the editor [more info](https://docs.topol.io/guide/how-to-use-custom-topbar.html#save-and-saveandclose) | | `TopolPlugin.load(template)` | Loads the provided template [more info](https://docs.topol.io/guide/how-to-load-and-save-template.html#loading-template) | | `TopolPlugin.togglePreview()` | Toggles editor preview [more info](https://docs.topol.io/guide/how-to-use-custom-topbar.html#changing-preview-mode) | | `TopolPlugin.togglePreviewSize()` | Toggles editor preview size [more info](https://docs.topol.io/guide/how-to-use-custom-topbar.html#changing-preview-mode) | | `TopolPlugin.undo()` | Undo change in editor [more info](https://docs.topol.io/guide/how-to-use-custom-topbar.html#undo-and-redo) | | `TopolPlugin.redo()` | Redo change in editor [more info](https://docs.topol.io/guide/how-to-use-custom-topbar.html#undo-and-redo) | | `TopolPlugin.setSavedBlocks(savedblock: ISavedBlock[])` | Sets the saved blocks [more info](https://docs.topol.io/guide/saved-blocks.html) | | `TopolPlugin.createNotification(notification: INotification)` | Creates editor's notification [more info](https://docs.topol.io/guide/custom-notifications.html) | | `TopolPlugin.changeEmailToMobile()` | Change email to mobile view [more info](https://docs.topol.io/guide/mobile-first.html#mobile-first-email-template) | | `TopolPlugin.changeEmailToDesktop()` | Change email to desktop view [more info](https://docs.topol.io/guide/mobile-first.html#mobile-first-email-template) | | `TopolPlugin.toggleBlocksAndStructuresVisibility()` | Toggle hidden structures visibility for blocks and structures [more info](https://docs.topol.io/guide/mobile-first.html#mobile-first-email-template) | | `TopolPlugin.destroy()` | Destroys the editor initialization | | `TopolPlugin.chooseFile()` | Chooses the file if image block is active [more info](https://docs.topol.io/guide/custom-filemanager.html#choosefile) | | `TopolPlugin.openPremadeTemplatesSelection()` | Opens the premade templates modal pick [more info](https://docs.topol.io/guide/premade-templates-in-editor.html) | | `TopolPlugin.refreshComments(key: string)` | Refreshes the conversation [more info](https://docs.topol.io/guide/comments.html#refreshcomments) | | `TopolPlugin.setActiveMembers(activeMemers: string[])` | Sets the active members | | `TopolPlugin.setTemplateName(name: string)` | Sets the name of template [more info](https://docs.topol.io/guide/rename-template.html) | | `TopolPlugin.updateApiAuthorizationHeader(newHeader: string \| Record)` | Refreshes the authorization tokens [more info](https://docs.topol.io/guide/security.html#refresh-token) | | `TopolPlugin.updateCustomBlockContent(content: string)` | Refreshes the authorization tokens [more info](https://docs.topol.io/guide/custom-block.html#inserting-custom-html-in-custom-dialog-component) | | `TopolPlugin.setMergeTags(mergeTags: Array)` | Sets new array of merge tags. [more info](https://docs.topol.io/guide/merge-tags.html#update-merge-tags) |
### List of all editor callbacks | Event | Description | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `onSave` | Returns object which contains html and json of the template [more info](https://docs.topol.io/guide/callbacks.html#on-save) | | `onSaveAndClose` | Returns object which contains html and json of the template [more info](https://docs.topol.io/guide/callbacks.html#on-save-and-close) | | `onTestSend` | Returns object which contains email, html and json of the template [more info](https://docs.topol.io/guide/callbacks.html#on-test-email-send) | | `onOpenFileManager` | When user clicks file manager open [more info](https://docs.topol.io/guide/custom-filemanager.html#onopenfilemanager) | | `onLoaded` | After editor template is loaded using `TopolPlugin.load()` [more info](https://docs.topol.io/guide/callbacks.html#on-loaded) | | `onInit` | When editor inits [more info](https://docs.topol.io/guide/callbacks.html#on-init) | | `onBlockSave` | When user saves block in editor, returns object of type ISavedBlock [more info](https://docs.topol.io/guide/callbacks.html#on-block-save) | | `onBlockRemove` | When user removes saved block, returns id of saved block to be removed [more info](https://docs.topol.io/guide/callbacks.html#on-block-remove) | | `onBlockEdit` | When user edits saved block, returns id of saved block to be updated [more info](https://docs.topol.io/guide/callbacks.html#on-block-edit) | | `onUndoChange` | When user clicks undo button, retunrs number of steps user undone [more info](https://docs.topol.io/guide/callbacks.html#on-undo-change) | | `onRedoChange` | When user clicks redo button, retunrs number of steps user redone [more info](https://docs.topol.io/guide/callbacks.html#on-redo-change) | | `onPreview` | When user switches to preview [more info](https://docs.topol.io/guide/callbacks.html#on-preview) | | `onAlert` | When alert appears in editor [more info](https://docs.topol.io/guide/callbacks.html#on-alert) | | `onClose` | When close is click inside WindowBar [more info](https://docs.topol.io/guide/top-bar.html#window-bar) | | `onEdittedWithoutSaveChanged` | When user is about to leave an editor with unsaved changes [more info](https://docs.topol.io/guide/disable-before-leaving-modal.html#before-exit-modal-when-user-has-unsaved-changes) | | `onOpenCustomBlockDialog` | When user clicks on the open dialog in custom block [more info](https://docs.topol.io/guide/custom-block.html#inserting-custom-html-in-custom-dialog-component) | | `onTemplateRename` | When user clicks on the pencil icon next to the template name [more info](https://docs.topol.io/guide/rename-template.html#rename-template) | | `updateTestingEmailAddresses` | When user edits the email list in preview [more info](https://docs.topol.io/guide/sending-a-test-email.html#managing-saving-emails-yourself) | | `onError` | When an error that cannot be handled happened in the editor [more info](https://docs.topol.io/guide/callbacks.html#onerror) |
## TypeScript Topol Editor provides full TypeScript integration and exports all necessary types. ```ts import { ITopolOptions, INotification, ISavedBlock } from "@topol.io/editor"; ``` --- _Source: https://npm.io/package/@topol.io/editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._