Securely embed the Fraczled editor.

app.post("/api/editor/init", async (req, res) => {
  const { licenseKey, projectId, origin } = req.body;

  const response = await fetch("https://fraczled.com/api/license/validate", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + licenseKey
    },
    body: JSON.stringify({ projectId, origin })
  });

  const data = await response.json().catch(() => null);
  const status = data && typeof data === "object" ? (data.status ?? data) : null;

  if (!response.ok || !status || status.isValid === false) {
    return res.status(403).json({ error: "license_invalid" });
  }

  const token = signSdkSession({ origin, projectId });
  res.json({ sdkUrl: "/api/editor/sdk?token=" + token });
});

<div id="fraczled-editor" style="height: 100vh"></div>
<script>
  async function loadEditor() {
    const response = await fetch("/api/editor/init", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        licenseKey: "prod_...",
        projectId: "proj_123",
        origin: window.location.origin
      })
    });

    if (!response.ok) {
      const error = await response.json().catch(() => ({}));
      throw new Error(error.message || "License validation failed");
    }

    const { sdkUrl } = await response.json();
    const script = document.createElement("script");
    script.src = sdkUrl;
    script.defer = true;
    document.head.appendChild(script);

    script.onload = () => {
      FraczledSDK.createFraczledEditor({
        container: document.getElementById("fraczled-editor"),
        apiKey: "prod_...",
        projectId: "proj_123"
      });
    };
  }

  loadEditor().catch((err) => {
    console.error(err);
    alert("Failed to load editor. Check the console for details.");
  });
</script>

createFraczledEditor({
  apiKey: "YOUR_LICENSE_KEY",
  projectId: "YOUR_PROJECT_ID",
  container: document.getElementById("editor"),
  showCredit: true,
  initialState: { pages: [], settings: {} },
  services: {
    licenseRequest: {
      projectId: "YOUR_PROJECT_ID",
      customerId: "cus_123",
      offlineLicense: OFFLINE_TOKEN
    },
    licenseTimeoutMs: 2500,
    aiEndpoint: "https://your-api.example.com/ai",
    unsplashProxyBaseUrl: "https://your-api.example.com/unsplash"
  },
  assets: {
    injectTailwind: true,
    tailwindCdnUrl: "https://cdn.tailwindcss.com",
    injectFont: true,
    fontHref: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap",
    injectBaseStyles: true,
    showLoader: true
  },
  ui: {
    hideDefaultPanels: false,
    hiddenPanels: [],
    topbarMode: "default",
    newDesignModal: {
      render: (ctx) => null,
      sizePresets: {
        social: [{ name: "Square", width: 1080, height: 1080, unit: "px", dpi: 72 }],
        print: [{ name: "Postcard", width: 6, height: 4, unit: "in", dpi: 300, bleed: 0.125 }]
      }
    }
  },
  customPanels: [],
  customContextMenuItems: [],
  customToolbarItems: [],
  keyboardShortcuts: {},
  customFonts: {},
  customTemplates: {},
  customExportFormats: [],
  customElementTypes: [],
  theme: {}
});

const editor = createFraczledEditor({ /* config */ });
const { store } = editor;

// Read state
console.log(store.state.pages, store.state.settings);

// Subscribe to changes
const unsubscribe = store.subscribe(() => {
  console.log("State updated", store.state);
});

// Mutate
store.addElement({ type: "text", content: "Hello", width: 240, height: 80 });
store.updateElement(store.state.selection[0], { color: "#0f172a" });

// Dirty state
if (store.hasUnsavedChanges()) {
  console.log("Unsaved changes detected");
}

// Persist
const json = store.exportJSON();
store.loadJSON(json);

// Cleanup
unsubscribe();

editor.on("change", (state) => {
  console.log("State updated", state);
});

editor.on("save", (payload) => {
  console.log("User saved", payload);
});

editor.on("export", (payload) => {
  console.log("Exported", payload);
});

// Persist
const json = editor.save();
await fetch("/api/designs", { method: "POST", body: json });

{
  "isValid": true,
  "state": "valid",
  "plan": "team",
  "showWatermark": false,
  "entitlements": {
    "ai": true,
    "export": { "web": true, "print": true },
    "features": {
      "templates": true,
      "topbarActions": true,
      "templateSave": true,
      "newDesignModal": true,
      "templateSizes": true
    },
    "limits": { "maxPages": 50 }
  }
}