# @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

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

Or with yarn:

```bash
yarn add @creaditor/web-starterkit
```

## 🚀 Quick Start

### Simple HTML Integration

```html
<!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:

| Option | Newsletter default | Web default |
|--------|--------------------|-------------|
| `channel` | `"newsletter"` | `"web"` |
| `width` | `650px` | `1000px` |

> **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`.

## 🏗️ How it's built

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

```bash
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
