Fraczled Embed Guide
Get API Key

Drop the Fraczled editor into your site in minutes.

Use the Fraczled SDK to embed a full design studio inside your app. You control the container, licensing, and data flow. The editor handles the heavy lifting.

Start embedding Deploy checklist

What you need

apiKey (dev_ or prod_) projectId A container div React + React DOM

The editor fills its container. Give it a height or the UI will be blank.

Quick start (bundler)

Install the SDK with npm and mount the editor in any HTML element. Make sure you have React and React DOM installed in your project. 

npm install @fraczled/sdk
import { createFraczledEditor } from "@fraczled/sdk";

const editor = createFraczledEditor({
  apiKey: "dev_your_key",
  projectId: "proj_123",
  container: document.getElementById("fraczled-editor")
});

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

const json = editor.save();
editor.destroy();
Tip: createFraczledEditor is an alias of createOurEditorApp. Use either.

Quick start (script tag)

Prefer a no-bundler setup? Host the UMD file and use the global FraczledSDK object. 

<div id="fraczled-editor" style="height: 100vh"></div>
<script src="https://your-cdn.com/fraczled-sdk.umd.js"></script>
<script>
  FraczledSDK.createFraczledEditor({
    container: document.getElementById("fraczled-editor"),
    apiKey: "dev_your_key",
    projectId: "proj_123"
  });
</script>

Configuration reference

These are the most common options used by website integrations.

Field Required Notes
apiKey Yes Your dev_ or prod_ license key.
projectId Yes Project identifier from your dashboard.
container Yes HTMLElement that will host the editor.
showCredit No Hide the credit watermark if your plan allows it.
initialState No Load a saved design state on boot.
services.aiEndpoint No Custom AI endpoint for Magic Write.
services.unsplashProxyBaseUrl No Proxy Unsplash requests through your backend.
services.licenseRequest No Extra metadata sent to license validation (origin, customerId, sdkVersion).
services.licenseTimeoutMs No Timeout in milliseconds for license validation.
assets.injectTailwind No Disable if your site already ships Tailwind.
assets.injectFont No Disable if you load fonts yourself.
assets.injectBaseStyles No Adds minimal base styles for the editor root.
assets.showLoader No Show a branded loader while assets load.
customPanels No Add custom sidebar tabs and panels (SDK only).
ui.hideDefaultPanels No Hide all built-in sidebar tabs (SDK only).
ui.hiddenPanels No Hide specific panels by id (default or custom).

Customize the sidebar (SDK only)

You can add your own tabs and panels in the SDK, hide any of the vanilla editor tabs, or show only custom tabs. This is client-side only and does not change your server licensing configuration.

Custom panels

Provide a customPanels array. Each panel gets access to the editor store, current state, and helpers like closePanel() and setActivePanel().

Hide default tabs

Use ui.hideDefaultPanels to remove all built-in tabs, or ui.hiddenPanels to hide specific tabs by id. 

import { createFraczledEditor, ToolType } from "@fraczled/sdk";

createFraczledEditor({
  apiKey: "dev_your_key",
  projectId: "proj_123",
  container: document.getElementById("fraczled-editor"),
  ui: {
    hideDefaultPanels: false,
    hiddenPanels: [ToolType.TEMPLATES, ToolType.BRAND]
  },
  customPanels: [
    {
      id: "my-product:approvals",
      label: "Approvals",
      render: ({ store, state, closePanel }) => (
        <div>
          <p>Selected: {state.selection.length}</p>
          <button onClick={() => store.exportJSON()}>Export JSON</button>
          <button onClick={closePanel}>Close</button>
        </div>
      )
    }
  ]
});

Built-in tab ids

  • ToolType.TEMPLATES (Create)
  • ToolType.DESIGN
  • ToolType.ELEMENTS
  • ToolType.DRAW
  • ToolType.TEXT
  • ToolType.IMAGES
  • ToolType.BRAND
  • ToolType.UPLOADS
  • ToolType.QR_CODE
  • ToolType.LAYERS

Behavior notes

  • Hidden tabs are removed from the UI only.
  • Removing customPanels restores vanilla panels.
  • Custom panels do not affect server licensing.

Events and saving

Use events to react to user actions. Save JSON when you want to persist a design and reload it later. 

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

const json = editor.save();
editor.store.loadJSON(json);

Events

  • change - design state updated
  • save - user saved the design
  • select - selection changed
  • export - JSON exported

Data tips

  • Store JSON in your database.
  • Load JSON on editor boot.
  • Always set a container height.

Licensing and entitlements

The SDK validates license keys against the Fraczled licensing server and returns plan details + entitlements. You can use those to gate features or show upgrade prompts inside your app.

License response

  • plan (free, team, business, pro, enterprise)
  • entitlements (features + limits)
  • showWatermark, upgradeUrl, expiresAt

UI indicators

  • Bottom bar shows the active plan.
  • SDK embeds also display the SDK version.
  • License invalidation can lock the editor UI.
{
  "isValid": true,
  "plan": "team",
  "showWatermark": true,
  "entitlements": {
    "features": { "templates": true, "draw": true },
    "limits": { "maxPages": 50 }
  },
  "upgradeUrl": "https://fraczled.com/upgrade"
}
For full lockout protection, gate the SDK bundle on your server. See the license enforcement guide in /docs/license-enforcement.md.

Deploy checklist

Licensing

  • Use dev_ keys for localhost and staging.
  • Switch to prod_ keys for production domains.
  • Allowlist origins in your dashboard.

Layout

  • Give the editor a fixed height or full viewport.
  • Ensure the container is not display: none.
  • Call editor.destroy() on page teardown.

Assets

  • Disable Tailwind injection if it conflicts.
  • Host the UMD file on your CDN.
  • Provide a custom font href if needed.

Support

Need help integrating or debugging an embed?

Contact

Email: support@fraczled.com

Docs: https://www.fraczled.com/doc

GitHub: https://github.com/fraczled/sdk/issues