Customization

The Templatical SDK allows you to customize the editor's appearance to match your application's design.

Theme

Plan Feature

This feature is only available on Growth and Scale plans.

Override the default theme colors by passing a theme object. All properties are optional — only override what you need.

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

const editor = await init({
  container: '#email-editor',
  auth: { url: 'https://your-app.com/api/token' },
  theme: {
    bg: '#1a1a2e',
    text: '#eaeaea',
    primary: '#e94560',
    primaryHover: '#c73e54',
    border: '#2a2a4a',
  },
});

Available properties:

Property	Description
bg	Main background color
bgElevated	Elevated surface background
bgHover	Hover state background
bgActive	Active state background
border	Border color
borderLight	Light border color
text	Primary text color
textMuted	Muted text color
textDim	Dimmed text color
primary	Primary accent color
primaryHover	Primary hover color
primaryLight	Primary light variant
secondary	Secondary color
secondaryHover	Secondary hover color
secondaryLight	Secondary light variant
success	Success color
successLight	Success light variant
warning	Warning color
warningLight	Warning light variant
danger	Danger/error color
dangerLight	Danger light variant
canvasBg	Email canvas background

Runtime Updates with setTheme()

Unlike the theme option passed to init() which sets the initial theme, setTheme() lets you change colors dynamically after the editor has been initialized — for example, when the user toggles dark mode in your application or selects a custom accent color. Only the properties you pass will be overridden; all other theme values remain unchanged.

// Toggle dark mode based on user preference
editor.setTheme({
  bg: '#0f0f10',
  bgElevated: '#1a1a1c',
  text: '#e4e4e7',
  border: '#2d2d30',
  canvasBg: '#27272a',
});

// Or just update the accent color
editor.setTheme({ primary: '#ff6600', primaryHover: '#e65c00' });

Custom Fonts

Plan Feature

This feature is only available on Growth and Scale plans.

Configure custom fonts available in the editor's font picker.

const editor = await init({
  container: '#email-editor',
  auth: { url: 'https://your-app.com/api/token' },
  fonts: {
    defaultFont: 'Inter',
    defaultFallback: 'sans-serif',
    customFonts: [
      {
        name: 'Inter',
        url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700',
        fallback: 'sans-serif',
      },
    ],
  },
});

Property	Type	Description
defaultFont	string	Default font name for new content
defaultFallback	string	Fallback font stack
customFonts	CustomFont[]	Array of custom font definitions
customFonts[].name	string	Font family name
customFonts[].url	string	URL to the font CSS (e.g., Google Fonts)
customFonts[].fallback	string	Fallback for this font