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
enable	string	See Enable for more information
responsive	boolean	See Responsive for more information
info	string	A help tooltip displayed alongside the control
ai	object	See AI for more information

Many input controls also support a subtitle key inside the control's own object (for example "text": { "default": "", "subtitle": "Helper text" }) that displays helper text underneath the control — see each control's Supported Options for details.

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",
  "enable": "overlayStyle != 'none'",
  "responsive": false,
  "slider": {
    "default": 60,
    "min": 0,
    "max": 100,
    "round": true,
    "units": "%"
  }
}