Widget Config

The widget.json file contains information about your widget, such as its name, version, etc.

This file is also where you will specify any user-modifiable settings that you want to appear in the widget's settings panel (color controls, options, etc.). User settings are described on their own pages.

Here are the basic config settings you can use:

{
    // Widget display name (required)
    "name": "My Great Widget",

    // Widget short description (required)
    "description": "A great widget that does great things greatly!",

    // Version of the widget (required)
    "version": "1.0.0",

    // Author display name (required)
    "author": "Joe Dev",

    // The unique id for the widget (required).
    // Internally this is the ID that Holoram uses to reference
    // the widget, so it must be unique. We suggest you follow this format:
    // com.your-company-or-website.widget-name
    "id": "com.ideapunch.mega-widget",

    // The default size and placement of the widget when added to a theme.
    "defaultSize": {
        "placementY": "top",
        "placementX": "right",
        "x": 10,
        "y": 12,
        "width": 50,
        "height": 30
    }

    // The minimum and maximum size (in pixels) you want to restrict
    // the widget to when resized by the user. These are optional.
    // Set the values to zero or remove them if you don't need them.
    "minHeight": 100,
    "minWidth": 100,
    "maxHeight": 500,
    "maxWidth": 500,

    // The aspect ratio determines how a widget is constrained.
    // Can be "auto-height", false, or a numeric ratio:
    //
    // "aspectRatio": "auto-height",
    // Auto-height is useful for widgets that let the user
    // select from a variety of display options, causing the widget
    // to change vertical size as needed.
    //
    // "aspectRatio": false,
    // Setting the ratio to false specifies an unconstrained widget.
    // Unconstrained widgets are generally discouraged due to CSS
    // overflow issues.
    //
    // "aspectRatio": 1.33
    // Using an integer specifies a fixed width-to-height ratio.
    // To calculate the ratio of a specific set of dimensions, divide
    // the long dimension by the short. For example, 16:9 = 2.11
    // or 400:300 = 1.33. A square widget would have a dimension of 1.

    "aspectRatio": "auto-height",

    // The settings array will define all user-editable settings
    // for a widget. Those are described on their own pages.
    "settings": []
}