Element Locking

Element locking provides granular control over which aspects of an element users can modify. Polotno offers 6 independent locking properties for precise interaction control.

Quick start: Use User Roles with store.setRole('admin') for built-in locking UI. If you need custom controls, this page shows how to build your own.

Locking properties

All properties default to true.

Basic usage

Lock an element programmatically:

element.set({
  draggable: false,      // Cannot move
  resizable: false,      // Cannot resize
  removable: false,      // Cannot delete
  contentEditable: false, // Cannot edit content
  styleEditable: false,  // Cannot change style
});

console.log(element.locked); // true

Common patterns

Template placeholder — Users edit text, designer controls style:

element.set({
  contentEditable: true,  // Can edit text
  styleEditable: false,   // Cannot change appearance
  draggable: false,
  resizable: false,
});

Non-interactive overlay — Watermark, guide, or decoration:

element.set({
  selectable: false,  // Clicks pass through
  draggable: false,
  removable: false,
  alwaysOnTop: true,
});

Fixed background — Cannot move or delete, but can replace:

element.set({
  draggable: false,
  removable: false,
  contentEditable: true,  // Can change image
});

Custom locking UI demo

This example demonstrates how to build custom lock controls without using admin mode. Select elements and use the 🔒 Locks tab to control their properties:

Related

• User Roles — Admin mode for accessing locked elements
• Overlays and Watermarks — Using selectable, alwaysOnTop, and showInExport
• Element API — Complete element property reference