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.

All packages are TypeScript ready and take the same TOPOL_OPTIONS configuration as the plain loader, so anything in this guide applies whichever one you pick.

Package	Framework
@topol.io/editor	Plain JavaScript or TypeScript
@topol.io/editor-react	React
@topol.io/editor-vue	Vue
@topol.io/editor-svelte	Svelte
@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.

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 for the full list of changes. TOPOL-io/skills has coding-agent skills for a new integration and for the 0.x to v1 migration.