Edit Mode vs Live Mode

The designMode option controls whether the editor runs in admin mode ('edit') or end-user mode ('live'). This determines which editing controls are visible and which row-level permissions are enforced.

Edit mode (admin)

The admin sees all controls: row actions panel, drag handles, column resizing, and full property editing. Row-level permissions (selectable, draggable, duplicatable, deletable) can be configured per row to prepare templates for end-users.

pexelize.init({
  containerId: 'editor',
  editorKey: 'pk_xxx',
  designMode: 'edit',
  editorMode: 'email',
});

In edit mode, the properties panel shows a Row Actions section where admins can lock down individual rows -- marking them as non-draggable, non-deletable, or non-selectable. These permissions are saved in the Design JSON and enforced when the same design is loaded in live mode.

Live mode (end-user)

End-users see a simplified editor. Row-level permissions set by the admin are enforced: locked rows cannot be moved or deleted, and non-selectable rows are not interactive. Plan-level feature gating is also applied -- certain tools or features may be hidden based on the user's plan.

pexelize.init({
  containerId: 'editor',
  editorKey: 'pk_xxx',
  designMode: 'live',
  editorMode: 'email',
});

info

designMode defaults to 'live'. If you don't set it, end-user restrictions are active.

Typical use case

SaaS platforms where admins create templates and end-users customize them:

1. Admin opens the editor in designMode: 'edit', builds a template, locks the header and footer rows (non-deletable, non-draggable), and saves the Design JSON.
2. End-user opens the same design in designMode: 'live'. They can edit text and swap images in unlocked rows but cannot remove or reorder the locked header/footer.

// Admin creating a template
pexelize.init({
  containerId: 'editor',
  editorKey: 'pk_xxx',
  designMode: 'edit',
  editorMode: 'email',
});

// End-user customizing the template
pexelize.init({
  containerId: 'editor',
  editorKey: 'pk_xxx',
  designMode: 'live',
  editorMode: 'email',
  design: savedTemplateJson,
});

Row-level permissions

These properties in the Design JSON control what end-users can do with each row in live mode:

Property	Default	Effect in live mode
selectable	true	Whether the row can be selected/edited
draggable	true	Whether the row can be reordered
duplicatable	true	Whether the row can be duplicated
deletable	true	Whether the row can be deleted

The same properties exist on content blocks, giving admins fine-grained control over which parts of a template are editable.

Next steps

• Design JSON -- See where row permissions live in the JSON structure
• Editor Modes -- Choose between email, web, and popup