@fraczled/sdk 1.0.1
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.
- package/README.md +135 -0
- package/dist/docs.html +528 -0
- package/dist/fraczled-sdk.es.js +10 -0
- package/dist/fraczled-sdk.es.js.map +1 -0
- package/dist/fraczled-sdk.umd.js +965 -0
- package/dist/fraczled-sdk.umd.js.map +1 -0
- package/dist/html2canvas.esm-dgT_1dIT.js +4872 -0
- package/dist/html2canvas.esm-dgT_1dIT.js.map +1 -0
- package/dist/index-B0_rImap.js +27478 -0
- package/dist/index-B0_rImap.js.map +1 -0
- package/dist/index.es-DQ40b3Xp.js +6679 -0
- package/dist/index.es-DQ40b3Xp.js.map +1 -0
- package/dist/purify.es-BpFm6ZGf.js +554 -0
- package/dist/purify.es-BpFm6ZGf.js.map +1 -0
- package/dist/signup.html +560 -0
- package/index.d.ts +368 -0
- package/package.json +43 -0
package/README.md
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
# @fraczled/sdk
|
|
2
|
+
|
|
3
|
+
Embed a powerful design editor in your application with the Fraczled SDK.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @fraczled/sdk
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
```typescript
|
|
14
|
+
import { createFraczledEditor } from '@fraczled/sdk';
|
|
15
|
+
|
|
16
|
+
const editor = createFraczledEditor({
|
|
17
|
+
apiKey: 'YOUR_LICENSE_KEY',
|
|
18
|
+
projectId: 'YOUR_PROJECT_ID',
|
|
19
|
+
container: document.getElementById('editor'),
|
|
20
|
+
services: {
|
|
21
|
+
licenseEndpoint: 'https://api.fraczled.com/api/license/validate',
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
// Listen for changes
|
|
26
|
+
editor.on('change', (state) => {
|
|
27
|
+
console.log('Design changed:', state);
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
// Save the design (JSON string)
|
|
31
|
+
const designJSON = editor.save();
|
|
32
|
+
const designState = JSON.parse(designJSON);
|
|
33
|
+
|
|
34
|
+
// Cleanup when done
|
|
35
|
+
editor.destroy();
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Compatibility
|
|
39
|
+
|
|
40
|
+
- Desktop browsers only (mobile and tablet are not supported yet).
|
|
41
|
+
|
|
42
|
+
## Configuration
|
|
43
|
+
|
|
44
|
+
```typescript
|
|
45
|
+
interface EditorConfig {
|
|
46
|
+
// Required
|
|
47
|
+
apiKey: string; // Your dev_* or prod_* license key
|
|
48
|
+
projectId: string; // Your project ID (from signup or dashboard)
|
|
49
|
+
container: HTMLElement;
|
|
50
|
+
|
|
51
|
+
// Optional
|
|
52
|
+
showCredit?: boolean;
|
|
53
|
+
initialState?: {
|
|
54
|
+
pages: Page[];
|
|
55
|
+
settings: DocumentSettings;
|
|
56
|
+
};
|
|
57
|
+
services?: {
|
|
58
|
+
licenseEndpoint?: string;
|
|
59
|
+
aiEndpoint?: string;
|
|
60
|
+
unsplashProxyBaseUrl?: string;
|
|
61
|
+
};
|
|
62
|
+
assets?: {
|
|
63
|
+
injectTailwind?: boolean;
|
|
64
|
+
tailwindCdnUrl?: string;
|
|
65
|
+
injectFont?: boolean;
|
|
66
|
+
fontHref?: string;
|
|
67
|
+
injectBaseStyles?: boolean;
|
|
68
|
+
showLoader?: boolean;
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Production note
|
|
74
|
+
|
|
75
|
+
By default, the SDK injects the Tailwind CDN and Google Fonts for convenience. For production use,
|
|
76
|
+
set `assets.injectTailwind = false` and provide your own CSS bundle (and optionally your own fonts)
|
|
77
|
+
to avoid relying on external CDNs.
|
|
78
|
+
|
|
79
|
+
## License Keys
|
|
80
|
+
|
|
81
|
+
### Development Keys (dev_*)
|
|
82
|
+
- 100-day free trial
|
|
83
|
+
- Works on localhost, staging, and development domains only
|
|
84
|
+
- Full feature access for testing
|
|
85
|
+
|
|
86
|
+
### Production Keys (prod_*)
|
|
87
|
+
- Required for production domains
|
|
88
|
+
- Available with Team ($150/mo) or Business ($250/mo) plans
|
|
89
|
+
|
|
90
|
+
Note: SDK license keys are used in client-side code. Treat them as publishable and lock them to allowed domains + projectId in your dashboard.
|
|
91
|
+
|
|
92
|
+
## Plans
|
|
93
|
+
|
|
94
|
+
| Feature | Team ($150/mo) | Business ($250/mo) |
|
|
95
|
+
|---------|----------------|-------------------|
|
|
96
|
+
| Production Domains | 1 | Unlimited |
|
|
97
|
+
| Editor Loads | 10,000/month | Unlimited |
|
|
98
|
+
| AI Features | Yes | Yes |
|
|
99
|
+
| Export (Web/Print) | Yes | Yes |
|
|
100
|
+
| Support | Standard | Priority |
|
|
101
|
+
|
|
102
|
+
## Getting Started
|
|
103
|
+
|
|
104
|
+
1. **Sign up for a trial** at [fraczled.com/signup](https://fraczled.com/signup)
|
|
105
|
+
2. You'll receive a `dev_*` key and project ID
|
|
106
|
+
3. Install the SDK and start building
|
|
107
|
+
4. When ready for production, purchase a Team or Business plan
|
|
108
|
+
|
|
109
|
+
## API Reference
|
|
110
|
+
|
|
111
|
+
### createFraczledEditor(config)
|
|
112
|
+
|
|
113
|
+
Creates a new editor instance.
|
|
114
|
+
|
|
115
|
+
**Returns:**
|
|
116
|
+
```typescript
|
|
117
|
+
{
|
|
118
|
+
store: Store; // Access to the underlying store
|
|
119
|
+
on: (event, callback) => void; // Subscribe to events
|
|
120
|
+
save: () => string; // Export current design JSON
|
|
121
|
+
destroy: () => void; // Cleanup
|
|
122
|
+
}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Events
|
|
126
|
+
|
|
127
|
+
- `change` - Fired when the design state changes
|
|
128
|
+
- `save` - Fired when the user saves
|
|
129
|
+
- `select` - Fired when selection changes
|
|
130
|
+
- `export` - Fired when user exports
|
|
131
|
+
|
|
132
|
+
## Support
|
|
133
|
+
|
|
134
|
+
- Documentation: [fraczled.com/docs](https://fraczled.com/docs)
|
|
135
|
+
- Email: support@fraczled.com
|
package/dist/docs.html
ADDED
|
@@ -0,0 +1,528 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>Fraczled Embed Guide</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
9
|
+
<link
|
|
10
|
+
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&family=Source+Serif+4:wght@400;600&display=swap"
|
|
11
|
+
rel="stylesheet"
|
|
12
|
+
/>
|
|
13
|
+
<style>
|
|
14
|
+
:root {
|
|
15
|
+
--bg: #0f111a;
|
|
16
|
+
--bg-soft: #151a26;
|
|
17
|
+
--ink: #e7ebf3;
|
|
18
|
+
--muted: #9aa4b2;
|
|
19
|
+
--accent: #79c2b6;
|
|
20
|
+
--accent-strong: #9ad5cb;
|
|
21
|
+
--accent-warm: #f7c8a4;
|
|
22
|
+
--card: rgba(255, 255, 255, 0.06);
|
|
23
|
+
--stroke: rgba(255, 255, 255, 0.12);
|
|
24
|
+
--code-bg: #0b0f18;
|
|
25
|
+
--shadow: 0 30px 80px rgba(8, 12, 20, 0.45);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
* {
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
body {
|
|
33
|
+
margin: 0;
|
|
34
|
+
font-family: "Source Serif 4", serif;
|
|
35
|
+
background: radial-gradient(circle at top, rgba(60, 105, 120, 0.35), transparent 45%),
|
|
36
|
+
linear-gradient(135deg, #0f111a 0%, #0d141e 35%, #0b1018 100%);
|
|
37
|
+
color: var(--ink);
|
|
38
|
+
min-height: 100vh;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
body::before {
|
|
42
|
+
content: "";
|
|
43
|
+
position: fixed;
|
|
44
|
+
inset: 0;
|
|
45
|
+
background-image:
|
|
46
|
+
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0),
|
|
47
|
+
radial-gradient(circle at 1px 1px, rgba(121, 194, 182, 0.18) 1px, transparent 0);
|
|
48
|
+
background-size: 24px 24px, 120px 120px;
|
|
49
|
+
opacity: 0.25;
|
|
50
|
+
pointer-events: none;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
a {
|
|
54
|
+
color: var(--accent-strong);
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.page {
|
|
59
|
+
position: relative;
|
|
60
|
+
max-width: 1100px;
|
|
61
|
+
margin: 0 auto;
|
|
62
|
+
padding: 48px 24px 96px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
header {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: space-between;
|
|
69
|
+
gap: 24px;
|
|
70
|
+
flex-wrap: wrap;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.brand {
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
gap: 12px;
|
|
77
|
+
font-family: "Space Grotesk", sans-serif;
|
|
78
|
+
font-weight: 700;
|
|
79
|
+
letter-spacing: 0.02em;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.brand-dot {
|
|
83
|
+
width: 14px;
|
|
84
|
+
height: 14px;
|
|
85
|
+
border-radius: 999px;
|
|
86
|
+
background: linear-gradient(135deg, var(--accent), #7db9f7);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
nav {
|
|
90
|
+
display: flex;
|
|
91
|
+
flex-wrap: wrap;
|
|
92
|
+
gap: 16px;
|
|
93
|
+
font-family: "Space Grotesk", sans-serif;
|
|
94
|
+
font-size: 14px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.hero {
|
|
98
|
+
margin-top: 48px;
|
|
99
|
+
display: grid;
|
|
100
|
+
grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
|
|
101
|
+
gap: 36px;
|
|
102
|
+
align-items: center;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.hero h1 {
|
|
106
|
+
font-family: "Space Grotesk", sans-serif;
|
|
107
|
+
font-size: clamp(32px, 4vw, 48px);
|
|
108
|
+
margin: 0 0 16px;
|
|
109
|
+
letter-spacing: -0.01em;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.hero p {
|
|
113
|
+
margin: 0 0 24px;
|
|
114
|
+
font-size: 18px;
|
|
115
|
+
line-height: 1.6;
|
|
116
|
+
color: var(--muted);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.hero-actions {
|
|
120
|
+
display: flex;
|
|
121
|
+
flex-wrap: wrap;
|
|
122
|
+
gap: 12px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.button {
|
|
126
|
+
padding: 12px 18px;
|
|
127
|
+
border-radius: 999px;
|
|
128
|
+
border: 1px solid transparent;
|
|
129
|
+
background: var(--accent);
|
|
130
|
+
color: #071016;
|
|
131
|
+
font-family: "Space Grotesk", sans-serif;
|
|
132
|
+
font-weight: 600;
|
|
133
|
+
cursor: pointer;
|
|
134
|
+
display: inline-flex;
|
|
135
|
+
align-items: center;
|
|
136
|
+
gap: 8px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.button.secondary {
|
|
140
|
+
background: transparent;
|
|
141
|
+
border-color: var(--stroke);
|
|
142
|
+
color: var(--ink);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.hero-card {
|
|
146
|
+
background: var(--card);
|
|
147
|
+
border: 1px solid var(--stroke);
|
|
148
|
+
border-radius: 20px;
|
|
149
|
+
padding: 24px;
|
|
150
|
+
box-shadow: var(--shadow);
|
|
151
|
+
backdrop-filter: blur(10px);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.hero-card h3 {
|
|
155
|
+
margin: 0 0 16px;
|
|
156
|
+
font-family: "Space Grotesk", sans-serif;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.pill-list {
|
|
160
|
+
display: flex;
|
|
161
|
+
flex-wrap: wrap;
|
|
162
|
+
gap: 10px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.pill {
|
|
166
|
+
padding: 8px 12px;
|
|
167
|
+
border-radius: 999px;
|
|
168
|
+
background: rgba(121, 194, 182, 0.16);
|
|
169
|
+
color: var(--accent-strong);
|
|
170
|
+
font-family: "Space Grotesk", sans-serif;
|
|
171
|
+
font-size: 13px;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
section {
|
|
175
|
+
margin-top: 64px;
|
|
176
|
+
padding-top: 12px;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
section h2 {
|
|
180
|
+
font-family: "Space Grotesk", sans-serif;
|
|
181
|
+
font-size: 28px;
|
|
182
|
+
margin: 0 0 12px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
section p {
|
|
186
|
+
margin: 0 0 16px;
|
|
187
|
+
color: var(--muted);
|
|
188
|
+
line-height: 1.6;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.grid {
|
|
192
|
+
display: grid;
|
|
193
|
+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
194
|
+
gap: 16px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.card {
|
|
198
|
+
background: var(--card);
|
|
199
|
+
border: 1px solid var(--stroke);
|
|
200
|
+
border-radius: 16px;
|
|
201
|
+
padding: 20px;
|
|
202
|
+
box-shadow: 0 14px 30px rgba(7, 10, 15, 0.28);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.card h3 {
|
|
206
|
+
font-family: "Space Grotesk", sans-serif;
|
|
207
|
+
margin: 0 0 8px;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.card ul {
|
|
211
|
+
margin: 0;
|
|
212
|
+
padding-left: 18px;
|
|
213
|
+
color: var(--muted);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
pre {
|
|
217
|
+
background: var(--code-bg);
|
|
218
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
219
|
+
border-radius: 14px;
|
|
220
|
+
padding: 18px;
|
|
221
|
+
overflow-x: auto;
|
|
222
|
+
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
code {
|
|
226
|
+
font-family: "JetBrains Mono", monospace;
|
|
227
|
+
font-size: 13px;
|
|
228
|
+
color: #e2e8f0;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.callout {
|
|
232
|
+
border-left: 3px solid var(--accent);
|
|
233
|
+
padding: 14px 16px;
|
|
234
|
+
background: rgba(121, 194, 182, 0.08);
|
|
235
|
+
border-radius: 12px;
|
|
236
|
+
margin-top: 16px;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.table {
|
|
240
|
+
width: 100%;
|
|
241
|
+
border-collapse: collapse;
|
|
242
|
+
font-family: "Space Grotesk", sans-serif;
|
|
243
|
+
font-size: 14px;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.table th,
|
|
247
|
+
.table td {
|
|
248
|
+
text-align: left;
|
|
249
|
+
padding: 12px;
|
|
250
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
251
|
+
vertical-align: top;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.table th {
|
|
255
|
+
color: var(--accent-warm);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.fade-in {
|
|
259
|
+
animation: fadeUp 700ms ease both;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.reveal {
|
|
263
|
+
animation: fadeUp 800ms ease both;
|
|
264
|
+
animation-delay: var(--delay, 0s);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
@keyframes fadeUp {
|
|
268
|
+
from {
|
|
269
|
+
opacity: 0;
|
|
270
|
+
transform: translateY(16px);
|
|
271
|
+
}
|
|
272
|
+
to {
|
|
273
|
+
opacity: 1;
|
|
274
|
+
transform: translateY(0);
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
@media (max-width: 900px) {
|
|
279
|
+
.hero {
|
|
280
|
+
grid-template-columns: 1fr;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
</style>
|
|
284
|
+
</head>
|
|
285
|
+
<body>
|
|
286
|
+
<div class="page">
|
|
287
|
+
<header class="fade-in">
|
|
288
|
+
<div class="brand">
|
|
289
|
+
<span class="brand-dot"></span>
|
|
290
|
+
Fraczled Embed Guide
|
|
291
|
+
</div>
|
|
292
|
+
<nav>
|
|
293
|
+
<a href="#quickstart">Quick start</a>
|
|
294
|
+
<a href="#config">Config</a>
|
|
295
|
+
<a href="#events">Events</a>
|
|
296
|
+
<a href="#deploy">Deploy</a>
|
|
297
|
+
<a href="#support">Support</a>
|
|
298
|
+
</nav>
|
|
299
|
+
</header>
|
|
300
|
+
|
|
301
|
+
<section class="hero fade-in" style="--delay: 0.1s">
|
|
302
|
+
<div>
|
|
303
|
+
<h1>Drop the Fraczled editor into your site in minutes.</h1>
|
|
304
|
+
<p>
|
|
305
|
+
Use the Fraczled SDK to embed a full design studio inside your app.
|
|
306
|
+
You control the container, licensing, and data flow. The editor
|
|
307
|
+
handles the heavy lifting.
|
|
308
|
+
</p>
|
|
309
|
+
<div class="hero-actions">
|
|
310
|
+
<a class="button" href="#quickstart">Start embedding</a>
|
|
311
|
+
<a class="button secondary" href="#deploy">Deploy checklist</a>
|
|
312
|
+
</div>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="hero-card">
|
|
315
|
+
<h3>What you need</h3>
|
|
316
|
+
<div class="pill-list">
|
|
317
|
+
<span class="pill">apiKey (dev_ or prod_)</span>
|
|
318
|
+
<span class="pill">projectId</span>
|
|
319
|
+
<span class="pill">A container div</span>
|
|
320
|
+
<span class="pill">React + React DOM</span>
|
|
321
|
+
</div>
|
|
322
|
+
<p class="callout">
|
|
323
|
+
The editor fills its container. Give it a height or the UI will be blank.
|
|
324
|
+
</p>
|
|
325
|
+
</div>
|
|
326
|
+
</section>
|
|
327
|
+
|
|
328
|
+
<section id="quickstart" class="reveal" style="--delay: 0.2s">
|
|
329
|
+
<h2>Quick start (bundler)</h2>
|
|
330
|
+
<p>
|
|
331
|
+
Install the SDK with npm and mount the editor in any HTML element.
|
|
332
|
+
Make sure you have React and React DOM installed in your project.
|
|
333
|
+
</p>
|
|
334
|
+
<pre><code>npm install @fraczled/sdk</code></pre>
|
|
335
|
+
<pre><code>import { createFraczledEditor } from "@fraczled/sdk";
|
|
336
|
+
|
|
337
|
+
const editor = createFraczledEditor({
|
|
338
|
+
apiKey: "dev_your_key",
|
|
339
|
+
projectId: "proj_123",
|
|
340
|
+
container: document.getElementById("fraczled-editor"),
|
|
341
|
+
services: {
|
|
342
|
+
licenseEndpoint: "https://api.your-app.com/api/license/validate"
|
|
343
|
+
}
|
|
344
|
+
});
|
|
345
|
+
|
|
346
|
+
editor.on("change", (state) => {
|
|
347
|
+
console.log("Design updated", state);
|
|
348
|
+
});
|
|
349
|
+
|
|
350
|
+
const json = editor.save();
|
|
351
|
+
editor.destroy();</code></pre>
|
|
352
|
+
<div class="callout">
|
|
353
|
+
Tip: createFraczledEditor is an alias of createOurEditorApp. Use either.
|
|
354
|
+
</div>
|
|
355
|
+
</section>
|
|
356
|
+
|
|
357
|
+
<section class="reveal" style="--delay: 0.3s">
|
|
358
|
+
<h2>Quick start (script tag)</h2>
|
|
359
|
+
<p>
|
|
360
|
+
Prefer a no-bundler setup? Host the UMD file and use the global
|
|
361
|
+
FraczledSDK object.
|
|
362
|
+
</p>
|
|
363
|
+
<pre><code><div id="fraczled-editor" style="height: 100vh"></div>
|
|
364
|
+
<script src="https://your-cdn.com/fraczled-sdk.umd.js"></script>
|
|
365
|
+
<script>
|
|
366
|
+
FraczledSDK.createFraczledEditor({
|
|
367
|
+
container: document.getElementById("fraczled-editor"),
|
|
368
|
+
apiKey: "dev_your_key",
|
|
369
|
+
projectId: "proj_123",
|
|
370
|
+
services: {
|
|
371
|
+
licenseEndpoint: "https://api.your-app.com/api/license/validate"
|
|
372
|
+
}
|
|
373
|
+
});
|
|
374
|
+
</script></code></pre>
|
|
375
|
+
</section>
|
|
376
|
+
|
|
377
|
+
<section id="config" class="reveal" style="--delay: 0.35s">
|
|
378
|
+
<h2>Configuration reference</h2>
|
|
379
|
+
<p>These are the most common options used by website integrations.</p>
|
|
380
|
+
<table class="table">
|
|
381
|
+
<thead>
|
|
382
|
+
<tr>
|
|
383
|
+
<th>Field</th>
|
|
384
|
+
<th>Required</th>
|
|
385
|
+
<th>Notes</th>
|
|
386
|
+
</tr>
|
|
387
|
+
</thead>
|
|
388
|
+
<tbody>
|
|
389
|
+
<tr>
|
|
390
|
+
<td>apiKey</td>
|
|
391
|
+
<td>Yes</td>
|
|
392
|
+
<td>Your dev_ or prod_ license key.</td>
|
|
393
|
+
</tr>
|
|
394
|
+
<tr>
|
|
395
|
+
<td>projectId</td>
|
|
396
|
+
<td>Yes</td>
|
|
397
|
+
<td>Project identifier from your dashboard.</td>
|
|
398
|
+
</tr>
|
|
399
|
+
<tr>
|
|
400
|
+
<td>container</td>
|
|
401
|
+
<td>Yes</td>
|
|
402
|
+
<td>HTMLElement that will host the editor.</td>
|
|
403
|
+
</tr>
|
|
404
|
+
<tr>
|
|
405
|
+
<td>showCredit</td>
|
|
406
|
+
<td>No</td>
|
|
407
|
+
<td>Hide the credit watermark if your plan allows it.</td>
|
|
408
|
+
</tr>
|
|
409
|
+
<tr>
|
|
410
|
+
<td>initialState</td>
|
|
411
|
+
<td>No</td>
|
|
412
|
+
<td>Load a saved design state on boot.</td>
|
|
413
|
+
</tr>
|
|
414
|
+
<tr>
|
|
415
|
+
<td>services.licenseEndpoint</td>
|
|
416
|
+
<td>No</td>
|
|
417
|
+
<td>Remote license validation endpoint.</td>
|
|
418
|
+
</tr>
|
|
419
|
+
<tr>
|
|
420
|
+
<td>services.aiEndpoint</td>
|
|
421
|
+
<td>No</td>
|
|
422
|
+
<td>Custom AI endpoint for Magic Write.</td>
|
|
423
|
+
</tr>
|
|
424
|
+
<tr>
|
|
425
|
+
<td>services.unsplashProxyBaseUrl</td>
|
|
426
|
+
<td>No</td>
|
|
427
|
+
<td>Proxy Unsplash requests through your backend.</td>
|
|
428
|
+
</tr>
|
|
429
|
+
<tr>
|
|
430
|
+
<td>assets.injectTailwind</td>
|
|
431
|
+
<td>No</td>
|
|
432
|
+
<td>Disable if your site already ships Tailwind.</td>
|
|
433
|
+
</tr>
|
|
434
|
+
<tr>
|
|
435
|
+
<td>assets.injectFont</td>
|
|
436
|
+
<td>No</td>
|
|
437
|
+
<td>Disable if you load fonts yourself.</td>
|
|
438
|
+
</tr>
|
|
439
|
+
<tr>
|
|
440
|
+
<td>assets.injectBaseStyles</td>
|
|
441
|
+
<td>No</td>
|
|
442
|
+
<td>Adds minimal base styles for the editor root.</td>
|
|
443
|
+
</tr>
|
|
444
|
+
<tr>
|
|
445
|
+
<td>assets.showLoader</td>
|
|
446
|
+
<td>No</td>
|
|
447
|
+
<td>Show a branded loader while assets load.</td>
|
|
448
|
+
</tr>
|
|
449
|
+
</tbody>
|
|
450
|
+
</table>
|
|
451
|
+
</section>
|
|
452
|
+
|
|
453
|
+
<section id="events" class="reveal" style="--delay: 0.4s">
|
|
454
|
+
<h2>Events and saving</h2>
|
|
455
|
+
<p>
|
|
456
|
+
Use events to react to user actions. Save JSON when you want to persist
|
|
457
|
+
a design and reload it later.
|
|
458
|
+
</p>
|
|
459
|
+
<pre><code>editor.on("save", (payload) => {
|
|
460
|
+
console.log("User saved", payload);
|
|
461
|
+
});
|
|
462
|
+
|
|
463
|
+
const json = editor.save();
|
|
464
|
+
editor.store.loadJSON(json);</code></pre>
|
|
465
|
+
<div class="grid">
|
|
466
|
+
<div class="card">
|
|
467
|
+
<h3>Events</h3>
|
|
468
|
+
<ul>
|
|
469
|
+
<li>change - design state updated</li>
|
|
470
|
+
<li>save - user saved the design</li>
|
|
471
|
+
<li>select - selection changed</li>
|
|
472
|
+
<li>export - JSON exported</li>
|
|
473
|
+
</ul>
|
|
474
|
+
</div>
|
|
475
|
+
<div class="card">
|
|
476
|
+
<h3>Data tips</h3>
|
|
477
|
+
<ul>
|
|
478
|
+
<li>Store JSON in your database.</li>
|
|
479
|
+
<li>Load JSON on editor boot.</li>
|
|
480
|
+
<li>Always set a container height.</li>
|
|
481
|
+
</ul>
|
|
482
|
+
</div>
|
|
483
|
+
</div>
|
|
484
|
+
</section>
|
|
485
|
+
|
|
486
|
+
<section id="deploy" class="reveal" style="--delay: 0.45s">
|
|
487
|
+
<h2>Deploy checklist</h2>
|
|
488
|
+
<div class="grid">
|
|
489
|
+
<div class="card">
|
|
490
|
+
<h3>Licensing</h3>
|
|
491
|
+
<ul>
|
|
492
|
+
<li>Use dev_ keys for localhost and staging.</li>
|
|
493
|
+
<li>Switch to prod_ keys for production domains.</li>
|
|
494
|
+
<li>Allowlist origins in your dashboard.</li>
|
|
495
|
+
</ul>
|
|
496
|
+
</div>
|
|
497
|
+
<div class="card">
|
|
498
|
+
<h3>Layout</h3>
|
|
499
|
+
<ul>
|
|
500
|
+
<li>Give the editor a fixed height or full viewport.</li>
|
|
501
|
+
<li>Ensure the container is not display: none.</li>
|
|
502
|
+
<li>Call editor.destroy() on page teardown.</li>
|
|
503
|
+
</ul>
|
|
504
|
+
</div>
|
|
505
|
+
<div class="card">
|
|
506
|
+
<h3>Assets</h3>
|
|
507
|
+
<ul>
|
|
508
|
+
<li>Disable Tailwind injection if it conflicts.</li>
|
|
509
|
+
<li>Host the UMD file on your CDN.</li>
|
|
510
|
+
<li>Provide a custom font href if needed.</li>
|
|
511
|
+
</ul>
|
|
512
|
+
</div>
|
|
513
|
+
</div>
|
|
514
|
+
</section>
|
|
515
|
+
|
|
516
|
+
<section id="support" class="reveal" style="--delay: 0.5s">
|
|
517
|
+
<h2>Support</h2>
|
|
518
|
+
<p>Need help integrating or debugging an embed?</p>
|
|
519
|
+
<div class="card">
|
|
520
|
+
<h3>Contact</h3>
|
|
521
|
+
<p>Email: support@fraczled.com</p>
|
|
522
|
+
<p>Docs: https://fraczled.com/docs</p>
|
|
523
|
+
<p>GitHub: https://github.com/fraczled/sdk/issues</p>
|
|
524
|
+
</div>
|
|
525
|
+
</section>
|
|
526
|
+
</div>
|
|
527
|
+
</body>
|
|
528
|
+
</html>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import "react";
|
|
2
|
+
import "react-dom/client";
|
|
3
|
+
import { S as o, b as p, a as c, d } from "./index-B0_rImap.js";
|
|
4
|
+
export {
|
|
5
|
+
o as Store,
|
|
6
|
+
p as createFraczledEditor,
|
|
7
|
+
c as createOurEditorApp,
|
|
8
|
+
d as createStore
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=fraczled-sdk.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fraczled-sdk.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|