General Structure

All properties have the same general structure using the following object keys.

Key	Value	Notes
title	string	See Title for more information
id	string	See ID for more information
format	string	See Format for more information
visible	string	See Visible for more information
enabled	string	See Enabled for more information
responsive	boolean	See Responsive for more information

Code Example

This example shows a real-world control for a hero overlay. The slider only appears when the overlay is enabled and it outputs a Tailwind class.

{
  "title": "Overlay Opacity",
  "id": "overlayOpacity",
  "format": "bg-opacity-[{{value}}%]",
  "visible": "showOverlay == true",
  "enabled": "overlayStyle != 'none'",
  "responsive": false,
  "slider": {
    "default": 60,
    "min": 0,
    "max": 100,
    "round": true,
    "units": "%"
  }
}