Installation

The Templatical SDK can be installed via npm or included directly via CDN script tag.

npm

Install the SDK using your preferred package manager:

# npm
npm install @templatical/embedded

# yarn
yarn add @templatical/embedded

# pnpm
pnpm add @templatical/embedded

# bun
bun add @templatical/embedded

Then import it in your JavaScript or TypeScript code:

import { init } from '@templatical/embedded';

The npm package ships as an ES module with full TypeScript type definitions included.

CDN

Include the SDK directly via <script> and <link> tags. No build step required.

<link rel="stylesheet" href="https://templatical.com/sdk/templatical.css">
<script src="https://templatical.com/sdk/templatical.js"></script>

When loaded via CDN, the SDK is available as a global Templatical object on window:

const editor = await Templatical.init({
  container: '#email-editor',
  auth: {
    url: 'https://your-app.com/api/token',
  },
});

The CDN bundle is fully self-contained — it includes all dependencies and requires no additional setup.

Requirements

• Browsers: Chrome 80+, Firefox 80+, Safari 14+, Edge 80+
• JavaScript: ES2020+ support required
• Container: Must have defined width and height (the editor fills its container)

Framework Integration

Below are complete integration examples for popular frameworks. Each example handles initialization, cleanup, and basic event handling.

<div id="email-editor"></div>

<link rel="stylesheet" href="https://templatical.com/sdk/templatical.css">
<script src="https://templatical.com/sdk/templatical.js"></script>
<script>
  var editor = Templatical.init({
    container: '#email-editor',
    auth: {
      url: 'https://your-app.com/api/token',
    },
    onSave: function (result) {
      console.log(result.html);
    },
  });
</script>

Cleanup

Always call unmount() when removing the editor from the page to properly clean up event listeners, timers, and DOM elements:

// On the editor instance
editor.unmount();

// Or using the named export (unmounts the current instance)
import { unmount } from '@templatical/embedded';
unmount();

This is especially important in single-page applications where the editor component may be mounted and unmounted multiple times during the application lifecycle.

TypeScript Support

The npm package includes full TypeScript type definitions. All configuration options, callback payloads, and instance methods are fully typed:

import { init, unmount } from '@templatical/embedded';
import type {
  TemplaticalConfig,
  TemplaticalInstance,
  SaveResult,
  Template,
  TemplateContent,
  ThemeOverrides,
  Placeholder,
  FontsConfig,
  CustomFont,
  AuthConfig,
  ViewportSize,
  SdkError,
} from '@templatical/embedded';

Next Steps

After installation, proceed to Configuration to learn about all available options, callbacks, and the instance API.