---
title: "NPM & Frameworks"
description: "Integrate the Topol Email Editor through the official @topol.io/editor NPM packages, with dedicated components for React, Vue, Svelte, and Angular."
url: https://docs.topol.io/email-editor/guide/js-frameworks.html
---

# NPM Package Integration

The plugin loader works in any frontend stack, but loading a script by hand and cleaning it up on unmount is awkward inside a component-based framework. **These packages wrap the loader in a component that follows your framework's lifecycle**, so the editor mounts and tears down with the component that holds it.

> **Create your API token first**
>
> The packages wrap the editor, not the authorization. The editor still needs the **Public API key** from [Step 1 in Getting Started](https://docs.topol.io/email-editor/guide/getting-started.html#step-1-create-your-api-token).

All packages are TypeScript ready and take the same [`TOPOL_OPTIONS`](https://docs.topol.io/email-editor/guide/getting-started.html#step-2-add-the-plugin-to-your-application) configuration as the plain loader, so anything in this guide applies whichever one you pick.

| Package | Framework |
| --- | --- |
| [`@topol.io/editor`](https://www.npmjs.com/package/@topol.io/editor) | Plain JavaScript or TypeScript |
| [`@topol.io/editor-react`](https://www.npmjs.com/package/@topol.io/editor-react) | React |
| [`@topol.io/editor-vue`](https://www.npmjs.com/package/@topol.io/editor-vue) | Vue |
| [`@topol.io/editor-svelte`](https://www.npmjs.com/package/@topol.io/editor-svelte) | Svelte |
| [`@topol.io/editor-angular`](https://www.npmjs.com/package/@topol.io/editor-angular) | Angular |

Installation and usage for each package are documented in its npm README. For Next.js there is a dedicated walkthrough in [Next.js integration](https://docs.topol.io/email-editor/guide/integration-nextjs.html).

> **WARNING**
>
> These packages are still on `0.x` versions, which means minor releases can carry breaking changes. Pin the version you integrate against and read the release notes before upgrading.

**v1 is in alpha.** The upcoming v1 release adds Landing Page Editor support and renames `TopolPlugin`/`TopolEditor` to `EmailEditor`. See [NPM Packages: Upgrading from 0.x to v1](https://docs.topol.io/email-editor/guide/npm-v1-migration.html) for the full list of changes. [TOPOL-io/skills](https://github.com/TOPOL-io/skills) has coding-agent skills for a new integration and for the 0.x to v1 migration.