@creaditor/web-starterkit

🌐 A powerful visual editor for building beautiful web pages

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

✨ Features

• 🎨 Visual Drag & Drop - Intuitive interface for building web pages
• 📱 Responsive Design - Mobile-friendly pages 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
• ⚡ Self-Contained - All files bundled, no CDN required

📦 Installation

npm install @creaditor/web-starterkit

Or with yarn:

yarn add @creaditor/web-starterkit

🚀 Quick Start

Simple HTML Integration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Editor</title>
</head>
<body>
    <div id="root"></div>

    <!-- Load the editor bundle -->
    <script src="node_modules/@creaditor/web-starterkit/dist/creaditor.bundle.js"></script>

    <script>
        // Initialize the editor
        const editor = new cdtrStarter({
            target: document.getElementById('root'),
            width: '1000px',
            language: 'en',
            onSave: (data) => {
                console.log('Page saved:', data);
                // Send to your backend
            }
        });
    </script>
</body>
</html>

🔧 Configuration

The web starterkit shares the same cdtrStarter API as the newsletter starterkit. The key differences are:

Note: The web engine does not yet ship a prebuilt sections catalog (the newsletter starterkit exposes hero / team / testimonials / footer sections). sections is currently empty for web and will be populated as web section templates are added under engines/web/sections.

Publish

On the web channel the Publish button opens the SEO modal, publishes, then calls your onPublish hook — with the loader still up — so you can run your own follow-up before the user sees the success card. See PUBLISH-HOOK.md for the signature, how to signal completion, and the creaditor:publish window event.

🏗️ How it's built

This package is a thin wrapper. The bundle is produced from @creaditor/core:

cd ../../core && npm run build:web:starterkit
# outputs to core/web-starterkit-dist/, then copied into dist/ on publish

• Entry: core/web.starterkit.index.js
• Webpack config: core/webpack.web.starterkit.js

📄 License

ISC