@creaditor/newsletter-starterkit
v1.0.12
Published
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
Readme
@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
npm install @creaditor/newsletter-starterkitOr with yarn:
yarn add @creaditor/newsletter-starterkit🚀 Quick Start
Simple HTML Integration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Newsletter Editor</title>
</head>
<body>
<div id="root"></div>
<!-- Load the editor bundle -->
<script src="node_modules/@creaditor/newsletter-starterkit/dist/creaditor.bundle.js"></script>
<script>
// Initialize the editor
const editor = new cdtrStarter({
target: document.getElementById('root'),
width: '650px',
language: 'en',
onSave: (data) => {
console.log('Newsletter saved:', data);
// Send to your backend
}
});
</script>
</body>
</html>With Configuration
const editor = new cdtrStarter({
target: document.getElementById('root'),
width: '650px',
language: 'en',
// Document name
documentName: 'My Newsletter',
// User information
user: {
id: 'user123',
email: '[email protected]',
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
Constructor Options
| 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 |
Methods
// Get newsletter data as JSON
const data = await editor.commands.toJSON();🎨 Customization
Custom Fonts
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'
}
]
});Merge Tags (Personalization)
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)
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
With CDN (if self-hosting)
<script src="https://your-cdn.com/creaditor.bundle.js"></script>
<script>
const editor = new cdtrStarter({
target: document.getElementById('root')
});
</script>With React (Load via useEffect)
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 <div ref={rootRef} />;
}🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📄 License
ISC © Adi L
🔗 Links
Made with ❤️ by Adi L