@creaditor/newsletter-starterkit

> 📧 A powerful visual editor for creating beautiful email newsletters

A drag-and-drop newsletter editor with everything built-in. No external dependencies required!

✨ Features

- 🎨 Visual Drag & Drop - Intuitive interface for building newsletters
- 📱 Responsive Design - Mobile-friendly emails out of the box
- 🔧 Customizable - Full control over styles and components
- 🌍 i18n Support - Multiple languages supported
- 💾 Auto-save - Never lose your work
- 📝 Rich Text Editor - Powerful text editing capabilities
- 🖼️ Media Gallery - Easy image and media management
- 🎯 Merge Tags - Personalize emails for each recipient
- ⚡ Self-Contained - All files bundled, no CDN required

📦 Installation

``bash
npm install @creaditor/newsletter-starterkit
`

Or with yarn:

`bash
yarn add @creaditor/newsletter-starterkit
`

🚀 Quick Start

$3

`html









`javascript
const editor = new cdtrStarter({
target: document.getElementById('root'),
width: '650px',
language: 'en',

// Document name
documentName: 'My Newsletter',

// User information
user: {
id: 'user123',
email: 'user@example.com',
name: 'John Doe',
logo: 'https://example.com/logo.png'
},

// Initial components (optional)
components: [],

// Callbacks
onSave: (data) => {
console.log('Content saved:', data);
},

onChange: () => {
console.log('Content changed');
},

onSendTestEmail: (email) => {
console.log('Send test to:', email);
}
});
`

📖 API

$3

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| target | HTMLElement | required | The DOM element to mount the editor |
| width | string | '650px' | Width of the newsletter |
| language | string | 'en' | Editor language (en, he, etc.) |
| languageJson | object | - | Custom language translations |
| documentName | string | - | Name of the document |
| components | array | [] | Initial newsletter components |
| user | object | - | User information (id, email, name, logo) |
| onSave | function | - | Called when content is saved |
| onChange | function | - | Called when content changes |
| onSendTestEmail | function | - | Called when test email is requested |
| fonts | array | - | Available fonts |
| mergeTags | object | - | Merge tags for personalization |
| plugins | array | [] | Additional plugins |

$3

`javascript
// Get newsletter data as JSON
const data = await editor.commands.toJSON();
`

🎨 Customization

$3

`javascript
const editor = new cdtrStarter({
target: document.getElementById('root'),
fonts: [
{
id: 'Roboto',
cssRule: 'Roboto, sans-serif',
name: 'Roboto',
url: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap'
}
]
});
`

$3

`javascript
const editor = new cdtrStarter({
target: document.getElementById('root'),
mergeTags: {
items: [
{ value: 'name', label: 'First Name' },
{ value: 'email', label: 'Email' },
{ value: 'company', label: 'Company' }
],
prefix: '{{',
suffix: '}}',
title: 'Personalization'
}
});
`

🌍 Internationalization

Supported languages:
- English (en)
- Hebrew (he)
- Custom (provide your own languageJson)

`javascript
const editor = new cdtrStarter({
target: document.getElementById('root'),
language: 'he', // Hebrew
// Or provide custom translations:
languageJson: {
"save": "Save",
"cancel": "Cancel",
// ... more translations
}
});
`

📁 Package Contents

`
@creaditor/newsletter-starterkit/
└── dist/
├── creaditor.bundle.js (2.2MB - Main bundle)
├── index.html (Demo page)
└── [chunk files].js (Lazy-loaded modules)
`

📱 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

💡 Integration Examples

$3

`html


`

$3

`jsx
import { useEffect, useRef } from 'react';

function NewsletterEditor() {
const rootRef = useRef(null);

useEffect(() => {
// Load script
const script = document.createElement('script');
script.src = '/node_modules/@creaditor/newsletter-starterkit/dist/creaditor.bundle.js';
script.onload = () => {
new window.cdtrStarter({
target: rootRef.current,
width: '100%',
language: 'en'
});
};
document.body.appendChild(script);

return () => document.body.removeChild(script);
}, []);

return