hivewrite-sdk 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +106 -42
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,31 +1,45 @@
1
- # hivewrite-sdk
1
+ # HiveWrite Email Editor SDK
2
2
 
3
- Email Editor SDK for React and JavaScript applications.
3
+ The HiveWrite Email Editor SDK is a powerful, flexible, and easy-to-integrate drag-and-drop email builder for your React or JavaScript applications.
4
+
5
+ [![NPM Version](https://img.shields.io/npm/v/hivewrite-sdk.svg)](https://www.npmjs.com/package/hivewrite-sdk)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4
7
 
5
8
  ## Installation
6
9
 
10
+ ### Via NPM
7
11
  ```bash
8
12
  npm install hivewrite-sdk
9
13
  ```
10
14
 
11
- ## Usage in React
15
+ ### Via CDN (Plain HTML/JS)
16
+ ```html
17
+ <script src="https://cdn.jsdelivr.net/npm/hivewrite-sdk/bundle.min.js"></script>
18
+ ```
19
+
20
+ ---
21
+
22
+ ## Quick Start
23
+
24
+ ### React Integration
12
25
 
13
26
  ```tsx
14
27
  import React, { useEffect, useRef } from 'react';
15
28
  import { EmailEditor } from 'hivewrite-sdk';
16
29
 
17
- const EmailEditorComponent = () => {
30
+ const MyEditor = () => {
18
31
  const containerRef = useRef(null);
19
32
 
20
33
  useEffect(() => {
21
34
  if (containerRef.current) {
22
35
  EmailEditor.init({
23
- apiKey: 'YOUR_API_KEY',
36
+ apiKey: 'your-api-key',
24
37
  container: containerRef.current,
25
38
  mode: 'FULL_EDITOR',
26
39
  callbacks: {
27
- onLoad: () => console.log('Editor Loaded'),
28
- onSave: (design) => console.log('Saved:', design)
40
+ onLoad: () => console.log('Editor ready'),
41
+ onSave: (design) => console.log('Saved:', design),
42
+ onExport: (html) => console.log('HTML:', html)
29
43
  }
30
44
  });
31
45
  }
@@ -33,45 +47,95 @@ const EmailEditorComponent = () => {
33
47
 
34
48
  return <div ref={containerRef} style={{ height: '100vh', width: '100%' }} />;
35
49
  };
50
+ ```
36
51
 
37
- export default EmailEditorComponent;
52
+ ### Plain JavaScript Integration
53
+
54
+ ```html
55
+ <div id="editor-container" style="height: 100vh;"></div>
56
+
57
+ <script src="https://cdn.jsdelivr.net/npm/hivewrite-sdk/bundle.min.js"></script>
58
+ <script>
59
+ EmailEditor.init({
60
+ apiKey: 'your-api-key',
61
+ container: '#editor-container',
62
+ mode: 'FULL_EDITOR',
63
+ callbacks: {
64
+ onLoad: () => console.log('Ready!')
65
+ }
66
+ });
67
+ </script>
38
68
  ```
39
69
 
40
- ## Usage in Plain HTML/JS
70
+ ---
41
71
 
42
- You can use the SDK via a CDN (like JSDelivr) or by hosting the `bundle.min.js` file yourself.
72
+ ## API Reference
43
73
 
44
- ### Using a CDN (UNPKG/JSDelivr)
45
- ```html
46
- <!DOCTYPE html>
47
- <html>
48
- <head>
49
- <title>Email Editor Test</title>
50
- </head>
51
- <body>
52
- <div id="editor" style="height: 100vh;"></div>
53
-
54
- <!-- Load the SDK -->
55
- <script src="https://cdn.jsdelivr.net/npm/hivewrite-sdk/bundle.min.js"></script>
56
-
57
- <script>
58
- EmailEditor.init({
59
- apiKey: 'YOUR_API_KEY',
60
- container: '#editor',
61
- mode: 'FULL_EDITOR',
62
- callbacks: {
63
- onLoad: () => console.log('SDK Loaded'),
64
- onSave: (design) => console.log('Design:', design)
65
- }
66
- });
67
- </script>
68
- </body>
69
- </html>
74
+ ### `EmailEditor.init(config: SDKConfig)`
75
+ Initializes and mounts the editor.
76
+
77
+ #### `SDKConfig` Parameters:
78
+
79
+ | Parameter | Type | Required | Description |
80
+ | :--- | :--- | :--- | :--- |
81
+ | `apiKey` | `string` | Yes | Your HiveWrite API Key. |
82
+ | `container` | `string \| HTMLElement` | Yes | CSS selector or DOM element to mount the editor. |
83
+ | `mode` | `string` | Yes | `'FULL_EDITOR'`, `'DESIGN_ONLY'`, `'READ_ONLY'`, `'HTML_IMPORT'` |
84
+ | `user` | `object` | No | `{ id: string, email: string }` for tracking. |
85
+ | `branding` | `object` | No | Custom white-labeling options (see below). |
86
+ | `mergeTags` | `array` | No | Array of `{ label, value }` for dynamic content. |
87
+ | `callbacks` | `object` | No | Event hooks for SDK actions. |
88
+
89
+ ---
90
+
91
+ ### Callbacks
92
+
93
+ | Callback | Arguments | Description |
94
+ | :--- | :--- | :--- |
95
+ | `onLoad` | `()` | Triggered when the editor is fully initialized. |
96
+ | `onSave` | `(jsonDesign: any)` | Triggered when the user clicks save or `saveDesign` is called. |
97
+ | `onExport` | `(html: string)` | Triggered when the user exports or `exportHtml` is called. |
98
+ | `onError` | `(err: any)` | Triggered during initialization or processing errors. |
99
+ | `onImageUpload`| `(file: File)` | **Async**. Intercept image uploads and return a URL string. |
100
+ | `onTemplateChange`| `(id: string)` | Triggered when a new template is selected. |
101
+
102
+ ---
103
+
104
+ ### Methods
105
+
106
+ #### `loadTemplate(data: { templateId?: string; design?: any })`
107
+ Loads a template by ID or a raw JSON design object.
108
+
109
+ #### `saveDesign(callback?: (json: any) => void)`
110
+ Manually triggers the save process. Returns the JSON design.
111
+
112
+ #### `exportHtml(callback?: (html: string) => void)`
113
+ Compiles the current design into MJML-based responsive HTML.
114
+
115
+ #### `importHTML(data: { html: string })`
116
+ Imports raw HTML (Experimental).
117
+
118
+ ---
119
+
120
+ ## Advanced Features
121
+
122
+ ### White Labeling (`branding`)
123
+ Customize the editor appearance to match your brand:
124
+ - `primaryColor`: Accent color for buttons and highlights.
125
+ - `logoUrl`: Custom logo in the editor sidebar/loading screen.
126
+ - `hidePoweredBy`: Remove HiveWrite branding.
127
+ - `customCSS`: Inject global CSS for deep styling overrides.
128
+
129
+ ### Merge Tags
130
+ Provide dynamic tags for personalization:
131
+ ```javascript
132
+ mergeTags: [
133
+ { label: 'First Name', value: '{{first_name}}' },
134
+ { label: 'Unsubscribe Link', value: '{{unsub_url}}' }
135
+ ]
70
136
  ```
71
137
 
72
- ## Features
73
- - Drag & Drop Interface
74
- - MJML Export
75
- - Custom Sections
76
- - Merge Tags
77
- - White Labeling
138
+ ---
139
+
140
+ ## License
141
+ MIT © [Pillars Developer](https://github.com/babbermaven)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hivewrite-sdk",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Email Editor SDK for React and JavaScript applications",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",