@fraczled/sdk

Embed a powerful design editor in your application with the Fraczled SDK.

Installation

npm install @fraczled/sdk

Quick Start

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

const editor = createFraczledEditor({
  apiKey: "YOUR_LICENSE_KEY",
  projectId: "YOUR_PROJECT_ID",
  container: document.getElementById("editor")
});

// Listen for changes
editor.on("change", (state) => {
  console.log("Design changed:", state);
});

// Save the design (JSON string)
const designJSON = editor.save();
const designState = JSON.parse(designJSON);

// Cleanup when done
editor.destroy();

Compatibility

• Desktop browsers only (mobile and tablet are not supported yet).

Configuration

interface EditorConfig {
  // Required
  apiKey: string; // Your dev_* or prod_* license key
  projectId: string; // Your project ID (from signup or dashboard)
  container: HTMLElement;

  // Optional
  showCredit?: boolean;
  initialState?: {
    pages: Page[];
    settings: DocumentSettings;
  };
  services?: {
    aiEndpoint?: string;
    unsplashProxyBaseUrl?: string;
  };
  assets?: {
    injectTailwind?: boolean;
    tailwindCdnUrl?: string;
    injectFont?: boolean;
    fontHref?: string;
    injectBaseStyles?: boolean;
    showLoader?: boolean;
  };
  customPanels?: CustomSidebarPanel[];
}

Production note

By default, the SDK injects the Tailwind CDN and Google Fonts for convenience. For production use, set assets.injectTailwind = false and provide your own CSS bundle (and optionally your own fonts) to avoid relying on external CDNs.

License validation is always handled by https://fraczled.com and requires outbound HTTPS access.

Server-side enforcement (recommended)

To fully prevent unauthorized usage, gate the editor bundle on your server. See docs/license-enforcement.md for the full flow and sample code.

License Keys

Development Keys (dev_*)

• 100-day free trial
• Works on localhost, staging, and development domains only
• Full feature access for testing

Production Keys (prod_*)

• Required for production domains
• Available with Team ($150/mo) or Business ($250/mo) plans

Note: SDK license keys are used in client-side code. Treat them as publishable and lock them to allowed domains + projectId in your dashboard.

Plans

| Feature | Team ($150/mo) | Business ($250/mo) | | ------------------ | -------------- | ------------------ | | Production Domains | 1 | Unlimited | | Editor Loads | 10,000/month | Unlimited | | AI Features | Yes | Yes | | Export (Web/Print) | Yes | Yes | | Support | Standard | Priority |

Getting Started

1. Sign up for a trial at fraczled.com/signup
2. You'll receive a dev_* key and project ID
3. Install the SDK and start building
4. When ready for production, purchase a Team or Business plan

API Reference

createFraczledEditor(config)

Creates a new editor instance.

Returns:

{
  store: Store;           // Access to the underlying store
  on: (event, callback) => void;  // Subscribe to events
  save: () => string;             // Export current design JSON
  destroy: () => void;            // Cleanup
}

Events

• change - Fired when the design state changes
• save - Fired when the user saves
• select - Fired when selection changes
• export - Fired when user exports

Custom Sidebar Panels

You can add your own sidebar tools and panels inside the editor UI. Custom panels render inside the same side panel shell used by built-in tools, and receive access to the store and current state.

import { createFraczledEditor } from "@fraczled/sdk";
import { BadgeCheck } from "lucide-react";

const editor = createFraczledEditor({
  apiKey: "YOUR_LICENSE_KEY",
  projectId: "YOUR_PROJECT_ID",
  container: document.getElementById("editor"),
  customPanels: [
    {
      id: "my-product:approvals",
      label: "Approvals",
      icon: BadgeCheck,
      feature: "approvals", // optional entitlement key
      render: ({ store, state, closePanel, setActivePanel }) => (
        <div className="space-y-4">
          <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs text-slate-600">
            Selected elements: {state.selection.length}
          </div>
          <button
            className="w-full rounded-lg bg-slate-900 px-3 py-2 text-sm font-semibold text-white"
            onClick={() =>
              store.addElement({
                type: "text",
                name: "Approved Copy",
                content: "Approved Copy"
              })
            }
          >
            Insert Approved Copy
          </button>
          <button
            className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium"
            onClick={closePanel}
          >
            Close
          </button>
        </div>
      )
    }
  ]
});

Notes:

• id must be unique and should not match built-in tool labels (for example, Design or Elements).
• feature maps to entitlements.features[feature] and controls visibility/access based on licensing.
• render is called when the panel is active, so you can wire buttons directly to store methods or read from state.

Support

• Documentation: fraczled.com/docs
• Email: [email protected]