Skip to content

Configuration Editor (meta.json)

AlertForge overlays support an optional configuration panel that is automatically rendered from a JSON structure. This config system allows overlay authors to expose editable settings through a user-friendly GUI — no custom UI code required.

The system is powered by a JSON file referred to as meta.json.

File Structure

The expected format is:

{
  "config": {
    "key": {
      "type": "text",
      "label": "Display Label",
      "value": "Default Value"
    }
  }
}

You may also omit "config" and pass the object directly — both formats are supported.

Supported Field Types

Type Description
text Single-line input
number Numeric input
slider Same as number, but styled for slider controls
colorpicker HTML color input
checkbox Boolean toggle
dropdown Select from predefined options
image Upload and preview an image
group Collapsible section of nested fields
grouped-dropdown Auto-populated list of Streamer.bot events
hidden Invisible field for internal values

Example: Flat Config

{
  "config": {
    "title": {
      "type": "text",
      "label": "Overlay Title",
      "value": "Welcome!"
    },
    "accentColor": {
      "type": "colorpicker",
      "label": "Accent Color",
      "value": "#ff6600"
    }
  }
}

Example: Grouped Fields

{
  "config": {
    "appearance": {
      "type": "group",
      "label": "Appearance Settings",
      "fields": {
        "fontSize": {
          "type": "number",
          "label": "Font Size",
          "value": 16,
          "min": 10,
          "max": 48,
          "step": 2
        },
        "theme": {
          "type": "dropdown",
          "label": "Theme",
          "options": {
            "light": "Light",
            "dark": "Dark"
          },
          "value": "light"
        }
      }
    }
  }
}

Behavior

  • The editor reads meta.json from your overlay’s directory.
  • If it’s empty or missing, no GUI will be shown.
  • When users change values in the form, they are saved directly back to the config file using the Save button.
  • Changes are live-reflected in the preview iframe if it's open.

Notes

  • Images are uploaded via upload-asset.php and stored as assets/filename.ext
  • All paths are relative to the overlay’s folder
  • Advanced users can create nested groups and conditionally visible fields