Vanilla JS Reference

The core @pexelize/editor package works in any JavaScript environment without a framework.

Installation

npm install @pexelize/editor @pexelize/editor-types

Or load via CDN:

<script src="https://cdn.pexelize.com/editor/latest/pexelize.min.js"></script>

Quick Start

<!DOCTYPE html>
<html>
<head>
  <style>
    #editor-container { height: 100vh; }
  </style>
</head>
<body>
  <div id="editor-container"></div>
  <script type="module">
    import { init, createEditor } from '@pexelize/editor';

    await init();

    const editor = await createEditor('editor-container', {
      user: { id: 'user-1', name: 'Jane', email: 'jane@example.com' },
      appearance: { theme: 'light' },
    });

    editor.addEventListener('ready', () => {
      console.log('Editor ready');
    });

    editor.addEventListener('change', (design) => {
      console.log('Changed', design);
    });
  </script>
</body>
</html>

API

`init()`

Initializes the Pexelize SDK. Must be called once before createEditor.

function init(): Promise<void>;

`createEditor()`

Creates an editor instance inside the given container element.

function createEditor(
  containerId: string,
  config: PexelizeConfig,
): Promise<PexelizeEditorInstance>;

Parameter	Type	Description
`containerId`	`string`	ID of the DOM element to mount the editor into.
`config`	`PexelizeConfig`	Full editor configuration. See Configuration.

`destroy()`

Destroys the editor instance and cleans up all resources.

const editor = await createEditor('editor-container', config);
// later...
editor.destroy();

`isReady()`

Returns whether the editor is fully initialized.

editor.isReady(); // boolean

PexelizeEditorInstance Methods

Method	Signature	Description
`loadDesign`	`(design: DesignJson) => void`	Load a design.
`getDesign`	`() => DesignJson`	Get the current design JSON.
`exportHtml`	`() => Promise<ExportHtmlData>`	Export as HTML.
`exportImage`	`(options?: ExportImageOptions) => Promise<ExportImageData>`	Export as image.
`exportPdf`	`(options?: ExportPdfOptions) => Promise<ExportPdfData>`	Export as PDF.
`undo`	`() => void`	Undo last action.
`redo`	`() => void`	Redo last action.
`setViewMode`	`(mode: ViewMode) => void`	Switch desktop/tablet/mobile.
`setTheme`	`(theme: ThemeMode) => void`	Switch light/dark.
`showPreview`	`() => void`	Open preview.
`hidePreview`	`() => void`	Close preview.
`destroy`	`() => void`	Destroy the editor.
`isReady`	`() => boolean`	Check ready state.
`addEventListener`	`(event: string, handler: Function) => void`	Subscribe to events.
`removeEventListener`	`(event: string, handler: Function) => void`	Unsubscribe from events.

PexelizeConfig

The full configuration object passed to createEditor:

interface PexelizeConfig {
  user: { id: string; name: string; email: string };
  locale?: string;
  translations?: Record<string, Record<string, string>>;
  textDirection?: 'ltr' | 'rtl';
  mergeTags?: MergeTag[];
  designTags?: Record<string, string>;
  specialLinks?: SpecialLink[];
  modules?: Module[];
  displayConditions?: DisplayCondition[];
  appearance?: AppearanceConfig;
  tools?: ToolsConfig;
  customTools?: CustomTool[];
  fonts?: FontDefinition[];
  bodyValues?: BodyValues;
  header?: DesignJson;
  footer?: DesignJson;
  editor?: { minRows?: number; maxRows?: number };
  features?: FeaturesConfig;
  assetStorage?: AssetStorageConfig;
  ai?: AIConfig;
  callbacks?: PexelizeCallbacks;
}

See Configuration for the full reference of every option.

Complete Example

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; }
    .toolbar { padding: 8px; display: flex; gap: 8px; }
    #editor-container { height: calc(100vh - 48px); }
  </style>
</head>
<body>
  <div class="toolbar">
    <button id="btn-export">Export HTML</button>
    <button id="btn-undo">Undo</button>
    <button id="btn-redo">Redo</button>
    <button id="btn-save">Save</button>
  </div>
  <div id="editor-container"></div>

  <script type="module">
    import { init, createEditor } from '@pexelize/editor';

    await init();

    const editor = await createEditor('editor-container', {
      user: { id: '1', name: 'Jane', email: 'jane@example.com' },
      appearance: { theme: 'light', accentColor: '#4f46e5' },
      ai: { mode: 'pexelize' },
    });

    document.getElementById('btn-export').addEventListener('click', async () => {
      const { html } = await editor.exportHtml();
      console.log(html);
    });

    document.getElementById('btn-undo').addEventListener('click', () => editor.undo());
    document.getElementById('btn-redo').addEventListener('click', () => editor.redo());

    document.getElementById('btn-save').addEventListener('click', () => {
      const design = editor.getDesign();
      fetch('/api/designs', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(design),
      });
    });
  </script>
</body>
</html>

warning

Always call editor.destroy() before removing the container element from the DOM to prevent memory leaks.

tip

For SPAs without a framework, call init() once at app startup and createEditor/destroy per route transition.

Installation​

Quick Start​

API​

init()​

createEditor()​

destroy()​

isReady()​

PexelizeEditorInstance Methods​

PexelizeConfig​

Complete Example​