Skip to main content

How Pexelize Works

Pexelize gives you a full drag-and-drop editor inside your web application. You install a lightweight SDK, point it at a container element, and the editor renders automatically. The SDK provides a clean JavaScript API to control the editor, load designs, and export content.

Integration flow​

  1. Install the SDK (@pexelize/editor-sdk) or a framework wrapper (@pexelize/react-editor, @pexelize/vue-editor, @pexelize/angular-editor).
  2. Initialize with your editorKey from the Pexelize Dashboard.
  3. The editor renders inside a container element you provide. Users get a full drag-and-drop visual editor with content tools, styling panels, and a live canvas.
  4. Save designs as JSON to your database. Load them back anytime to resume editing.
  5. Export the finished design as HTML, PDF, PNG, or ZIP.

What you control​

The SDK gives you full control over the editor through a simple API:

WhatHow
Load a saved designeditor.loadDesign(json)
Export HTMLeditor.exportHtml()
Change the themeeditor.setAppearance({ theme: 'dark' })
Enable/disable toolseditor.setToolsConfig({ video: { enabled: false } })
Listen to changeseditor.addEventListener('design:updated', callback)
Add dynamic contenteditor.setMergeTags([{ name: 'First Name', value: '{{first_name}}' }])

All methods return promises and work with TypeScript out of the box.

Key benefits​

  • No CSS conflicts -- The editor is fully sandboxed. Your app's styles won't break the editor, and the editor's styles won't leak into your page.
  • Automatic updates -- The editor stays up to date with new features and fixes without you changing any code.
  • Lightweight -- The SDK package is small. The full editor loads asynchronously and does not block your page.
  • Framework support -- First-class wrappers for React, Vue, Angular, and vanilla JavaScript.
info

The SDK authenticates using your editorKey. All configuration (appearance, tools, features) is applied through the SDK API after initialization.

Next steps​