[{"data":1,"prerenderedAt":689},["ShallowReactive",2],{"doc-content/docs/developer/widget-config":3,"doc-surroundings/docs/developer/widget-config":596,"docs-navigation":606},{"path":4,"draft":5,"date":6,"dateUpdated":7,"title":8,"body":9,"description":595,"image":6,"imageAlt":6},"/docs/developer/widget-config",false,null,"2025-05-15","Widget Config",{"type":10,"value":11,"toc":593},"minimark",[12,16,25,28,31,589],[13,14,8],"h1",{"id":15},"widget-config",[17,18,19,20,24],"p",{},"The ",[21,22,23],"code",{},"widget.json"," file contains information about your widget, such as its name, version, etc.",[17,26,27],{},"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.",[17,29,30],{},"Here are the basic config settings you can use:",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-json shiki shiki-themes github-dark github-dark","{\n    // Widget display name (required)\n    \"name\": \"My Great Widget\",\n\n    // Widget short description (required)\n    \"description\": \"A great widget that does great things greatly!\",\n\n    // Version of the widget (required)\n    \"version\": \"1.0.0\",\n\n    // Author display name (required)\n    \"author\": \"Joe Dev\",\n\n    // One or more categories for the widget (defaults to misc)\n    // dashboard, clocks, weather, system, text, reminders, calendar, astronomical, misc\n    \"categories\": [\"system\", \"clocks\"],\n\n    // A list of permissions required by the widget (optional)\n    // Currently you can specify: reminders, or calendar\n    \"permissions\": [],\n\n    // The unique id for the widget (required).\n    // Internally this is the ID that Holoram uses to reference\n    // the widget, so it must be unique. We suggest you follow this format:\n    // com.your-company-or-website.widget-name\n    \"id\": \"com.ideapunch.mega-widget\",\n\n    // The default size and placement of the widget when added to a theme.\n    \"defaultSize\": {\n        \"placementY\": \"top\",\n        \"placementX\": \"right\",\n        \"x\": 10,\n        \"y\": 12,\n        \"width\": 50,\n        \"height\": 30\n    },\n\n    // The minimum and maximum size (in pixels) you want to restrict\n    // the widget to when resized by the user. These are optional.\n    // Set the values to zero or remove them if you don't need them.\n    \"minHeight\": 100,\n    \"minWidth\": 100,\n    \"maxHeight\": 500,\n    \"maxWidth\": 500,\n\n    // The aspect ratio determines how a widget is constrained.\n    // Can be \"auto-height\", false, or a numeric ratio:\n    //\n    // \"aspectRatio\": \"auto-height\",\n    // Auto-height is useful for widgets that let the user\n    // select from a variety of display options, causing the widget\n    // to change vertical size as needed.\n    //\n    // \"aspectRatio\": false,\n    // Setting the ratio to false specifies an unconstrained widget.\n    // Unconstrained widgets are generally discouraged due to CSS\n    // overflow issues.\n    //\n    // \"aspectRatio\": 1.33\n    // Using an integer specifies a fixed width-to-height ratio.\n    // To calculate the ratio of a specific set of dimensions, divide\n    // the long dimension by the short. For example, 16:9 = 2.11\n    // or 400:300 = 1.33. A square widget would have a dimension of 1.\n\n    \"aspectRatio\": \"auto-height\",\n\n    // The settings array will define all user-editable settings\n    // for a widget. Those are described on their own pages.\n    \"settings\": []\n}\n","json","",[21,39,40,49,56,73,80,86,99,104,110,123,128,134,147,152,158,164,185,190,196,202,211,216,222,228,234,240,253,258,264,273,286,299,312,325,338,349,355,360,366,372,378,391,403,416,428,433,439,445,451,457,463,469,475,480,486,492,498,504,509,515,521,527,533,539,544,557,562,568,574,583],{"__ignoreMap":37},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"suv1-","{\n",[41,50,52],{"class":43,"line":51},2,[41,53,55],{"class":54},"sJ8bj","    // Widget display name (required)\n",[41,57,59,63,66,70],{"class":43,"line":58},3,[41,60,62],{"class":61},"s8ozJ","    \"name\"",[41,64,65],{"class":47},": ",[41,67,69],{"class":68},"s4wv1","\"My Great Widget\"",[41,71,72],{"class":47},",\n",[41,74,76],{"class":43,"line":75},4,[41,77,79],{"emptyLinePlaceholder":78},true,"\n",[41,81,83],{"class":43,"line":82},5,[41,84,85],{"class":54},"    // Widget short description (required)\n",[41,87,89,92,94,97],{"class":43,"line":88},6,[41,90,91],{"class":61},"    \"description\"",[41,93,65],{"class":47},[41,95,96],{"class":68},"\"A great widget that does great things greatly!\"",[41,98,72],{"class":47},[41,100,102],{"class":43,"line":101},7,[41,103,79],{"emptyLinePlaceholder":78},[41,105,107],{"class":43,"line":106},8,[41,108,109],{"class":54},"    // Version of the widget (required)\n",[41,111,113,116,118,121],{"class":43,"line":112},9,[41,114,115],{"class":61},"    \"version\"",[41,117,65],{"class":47},[41,119,120],{"class":68},"\"1.0.0\"",[41,122,72],{"class":47},[41,124,126],{"class":43,"line":125},10,[41,127,79],{"emptyLinePlaceholder":78},[41,129,131],{"class":43,"line":130},11,[41,132,133],{"class":54},"    // Author display name (required)\n",[41,135,137,140,142,145],{"class":43,"line":136},12,[41,138,139],{"class":61},"    \"author\"",[41,141,65],{"class":47},[41,143,144],{"class":68},"\"Joe Dev\"",[41,146,72],{"class":47},[41,148,150],{"class":43,"line":149},13,[41,151,79],{"emptyLinePlaceholder":78},[41,153,155],{"class":43,"line":154},14,[41,156,157],{"class":54},"    // One or more categories for the widget (defaults to misc)\n",[41,159,161],{"class":43,"line":160},15,[41,162,163],{"class":54},"    // dashboard, clocks, weather, system, text, reminders, calendar, astronomical, misc\n",[41,165,167,170,173,176,179,182],{"class":43,"line":166},16,[41,168,169],{"class":61},"    \"categories\"",[41,171,172],{"class":47},": [",[41,174,175],{"class":68},"\"system\"",[41,177,178],{"class":47},", ",[41,180,181],{"class":68},"\"clocks\"",[41,183,184],{"class":47},"],\n",[41,186,188],{"class":43,"line":187},17,[41,189,79],{"emptyLinePlaceholder":78},[41,191,193],{"class":43,"line":192},18,[41,194,195],{"class":54},"    // A list of permissions required by the widget (optional)\n",[41,197,199],{"class":43,"line":198},19,[41,200,201],{"class":54},"    // Currently you can specify: reminders, or calendar\n",[41,203,205,208],{"class":43,"line":204},20,[41,206,207],{"class":61},"    \"permissions\"",[41,209,210],{"class":47},": [],\n",[41,212,214],{"class":43,"line":213},21,[41,215,79],{"emptyLinePlaceholder":78},[41,217,219],{"class":43,"line":218},22,[41,220,221],{"class":54},"    // The unique id for the widget (required).\n",[41,223,225],{"class":43,"line":224},23,[41,226,227],{"class":54},"    // Internally this is the ID that Holoram uses to reference\n",[41,229,231],{"class":43,"line":230},24,[41,232,233],{"class":54},"    // the widget, so it must be unique. We suggest you follow this format:\n",[41,235,237],{"class":43,"line":236},25,[41,238,239],{"class":54},"    // com.your-company-or-website.widget-name\n",[41,241,243,246,248,251],{"class":43,"line":242},26,[41,244,245],{"class":61},"    \"id\"",[41,247,65],{"class":47},[41,249,250],{"class":68},"\"com.ideapunch.mega-widget\"",[41,252,72],{"class":47},[41,254,256],{"class":43,"line":255},27,[41,257,79],{"emptyLinePlaceholder":78},[41,259,261],{"class":43,"line":260},28,[41,262,263],{"class":54},"    // The default size and placement of the widget when added to a theme.\n",[41,265,267,270],{"class":43,"line":266},29,[41,268,269],{"class":61},"    \"defaultSize\"",[41,271,272],{"class":47},": {\n",[41,274,276,279,281,284],{"class":43,"line":275},30,[41,277,278],{"class":61},"        \"placementY\"",[41,280,65],{"class":47},[41,282,283],{"class":68},"\"top\"",[41,285,72],{"class":47},[41,287,289,292,294,297],{"class":43,"line":288},31,[41,290,291],{"class":61},"        \"placementX\"",[41,293,65],{"class":47},[41,295,296],{"class":68},"\"right\"",[41,298,72],{"class":47},[41,300,302,305,307,310],{"class":43,"line":301},32,[41,303,304],{"class":61},"        \"x\"",[41,306,65],{"class":47},[41,308,309],{"class":61},"10",[41,311,72],{"class":47},[41,313,315,318,320,323],{"class":43,"line":314},33,[41,316,317],{"class":61},"        \"y\"",[41,319,65],{"class":47},[41,321,322],{"class":61},"12",[41,324,72],{"class":47},[41,326,328,331,333,336],{"class":43,"line":327},34,[41,329,330],{"class":61},"        \"width\"",[41,332,65],{"class":47},[41,334,335],{"class":61},"50",[41,337,72],{"class":47},[41,339,341,344,346],{"class":43,"line":340},35,[41,342,343],{"class":61},"        \"height\"",[41,345,65],{"class":47},[41,347,348],{"class":61},"30\n",[41,350,352],{"class":43,"line":351},36,[41,353,354],{"class":47},"    },\n",[41,356,358],{"class":43,"line":357},37,[41,359,79],{"emptyLinePlaceholder":78},[41,361,363],{"class":43,"line":362},38,[41,364,365],{"class":54},"    // The minimum and maximum size (in pixels) you want to restrict\n",[41,367,369],{"class":43,"line":368},39,[41,370,371],{"class":54},"    // the widget to when resized by the user. These are optional.\n",[41,373,375],{"class":43,"line":374},40,[41,376,377],{"class":54},"    // Set the values to zero or remove them if you don't need them.\n",[41,379,381,384,386,389],{"class":43,"line":380},41,[41,382,383],{"class":61},"    \"minHeight\"",[41,385,65],{"class":47},[41,387,388],{"class":61},"100",[41,390,72],{"class":47},[41,392,394,397,399,401],{"class":43,"line":393},42,[41,395,396],{"class":61},"    \"minWidth\"",[41,398,65],{"class":47},[41,400,388],{"class":61},[41,402,72],{"class":47},[41,404,406,409,411,414],{"class":43,"line":405},43,[41,407,408],{"class":61},"    \"maxHeight\"",[41,410,65],{"class":47},[41,412,413],{"class":61},"500",[41,415,72],{"class":47},[41,417,419,422,424,426],{"class":43,"line":418},44,[41,420,421],{"class":61},"    \"maxWidth\"",[41,423,65],{"class":47},[41,425,413],{"class":61},[41,427,72],{"class":47},[41,429,431],{"class":43,"line":430},45,[41,432,79],{"emptyLinePlaceholder":78},[41,434,436],{"class":43,"line":435},46,[41,437,438],{"class":54},"    // The aspect ratio determines how a widget is constrained.\n",[41,440,442],{"class":43,"line":441},47,[41,443,444],{"class":54},"    // Can be \"auto-height\", false, or a numeric ratio:\n",[41,446,448],{"class":43,"line":447},48,[41,449,450],{"class":54},"    //\n",[41,452,454],{"class":43,"line":453},49,[41,455,456],{"class":54},"    // \"aspectRatio\": \"auto-height\",\n",[41,458,460],{"class":43,"line":459},50,[41,461,462],{"class":54},"    // Auto-height is useful for widgets that let the user\n",[41,464,466],{"class":43,"line":465},51,[41,467,468],{"class":54},"    // select from a variety of display options, causing the widget\n",[41,470,472],{"class":43,"line":471},52,[41,473,474],{"class":54},"    // to change vertical size as needed.\n",[41,476,478],{"class":43,"line":477},53,[41,479,450],{"class":54},[41,481,483],{"class":43,"line":482},54,[41,484,485],{"class":54},"    // \"aspectRatio\": false,\n",[41,487,489],{"class":43,"line":488},55,[41,490,491],{"class":54},"    // Setting the ratio to false specifies an unconstrained widget.\n",[41,493,495],{"class":43,"line":494},56,[41,496,497],{"class":54},"    // Unconstrained widgets are generally discouraged due to CSS\n",[41,499,501],{"class":43,"line":500},57,[41,502,503],{"class":54},"    // overflow issues.\n",[41,505,507],{"class":43,"line":506},58,[41,508,450],{"class":54},[41,510,512],{"class":43,"line":511},59,[41,513,514],{"class":54},"    // \"aspectRatio\": 1.33\n",[41,516,518],{"class":43,"line":517},60,[41,519,520],{"class":54},"    // Using an integer specifies a fixed width-to-height ratio.\n",[41,522,524],{"class":43,"line":523},61,[41,525,526],{"class":54},"    // To calculate the ratio of a specific set of dimensions, divide\n",[41,528,530],{"class":43,"line":529},62,[41,531,532],{"class":54},"    // the long dimension by the short. For example, 16:9 = 2.11\n",[41,534,536],{"class":43,"line":535},63,[41,537,538],{"class":54},"    // or 400:300 = 1.33. A square widget would have a dimension of 1.\n",[41,540,542],{"class":43,"line":541},64,[41,543,79],{"emptyLinePlaceholder":78},[41,545,547,550,552,555],{"class":43,"line":546},65,[41,548,549],{"class":61},"    \"aspectRatio\"",[41,551,65],{"class":47},[41,553,554],{"class":68},"\"auto-height\"",[41,556,72],{"class":47},[41,558,560],{"class":43,"line":559},66,[41,561,79],{"emptyLinePlaceholder":78},[41,563,565],{"class":43,"line":564},67,[41,566,567],{"class":54},"    // The settings array will define all user-editable settings\n",[41,569,571],{"class":43,"line":570},68,[41,572,573],{"class":54},"    // for a widget. Those are described on their own pages.\n",[41,575,577,580],{"class":43,"line":576},69,[41,578,579],{"class":61},"    \"settings\"",[41,581,582],{"class":47},": []\n",[41,584,586],{"class":43,"line":585},70,[41,587,588],{"class":47},"}\n",[590,591,592],"style",{},"html pre.shiki code .suv1-, html code.shiki .suv1-{--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s8ozJ, html code.shiki .s8ozJ{--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .s4wv1, html code.shiki .s4wv1{--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":37,"searchDepth":51,"depth":51,"links":594},[],"How to configure your widget using widget.json in Hologram.",[597,602],{"title":598,"path":599,"stem":600,"sectionTitle":601,"children":-1},"Hologram Widget Class","/docs/developer/widget-class","docs/developer/02.widget-class","Building Widgets",{"title":603,"path":604,"stem":605,"children":-1},"Widget Settings","/docs/developer/widget-settings","docs/developer/04.widget-settings",[607],{"title":608,"path":609,"stem":610,"children":611,"navigation":78},"Welcome to Hologram","/docs","docs/0.index",[612,613,617,621,625,683],{"title":608,"path":609,"stem":610,"navigation":78},{"title":614,"path":615,"stem":616,"navigation":78},"Themes & Wallpapers","/docs/themes","docs/1.themes",{"title":618,"path":619,"stem":620,"navigation":78},"Widgets","/docs/widgets","docs/2.widgets",{"title":622,"path":623,"stem":624,"navigation":78},"Settings","/docs/settings","docs/4.settings",{"title":626,"navigation":627,"sectionTitle":628,"collapsible":78,"path":629,"stem":630,"children":631,"page":5},"Developer",{"sectionTitle":628,"collapsible":78},"Developing Widgets","/docs/developer","docs/developer",[632,636,638,640,641,645,649,653,657,661,667,671,675,679],{"title":633,"path":634,"stem":635,"navigation":78},"Widget Developer Guide","/docs/developer/guide","docs/developer/01.guide",{"title":598,"path":599,"stem":600,"navigation":637,"sectionTitle":601},{"sectionTitle":601},{"title":8,"path":4,"stem":639,"navigation":78},"docs/developer/03.widget-config",{"title":603,"path":604,"stem":605,"navigation":78},{"title":642,"path":643,"stem":644,"navigation":78},"Widget Color Settings","/docs/developer/widget-color-settings","docs/developer/05.widget-color-settings",{"title":646,"path":647,"stem":648,"navigation":78},"Creating Widget Presets","/docs/developer/widget-presets","docs/developer/06.widget-presets",{"title":650,"path":651,"stem":652,"navigation":78},"Making Widgets Scale","/docs/developer/making-widgets-scale","docs/developer/07.making-widgets-scale",{"title":654,"path":655,"stem":656,"navigation":78},"Simple Widget Example","/docs/developer/simple-example","docs/developer/07.simple-example",{"title":658,"path":659,"stem":660,"navigation":78},"Apple Script","/docs/developer/apple-script","docs/developer/08.apple-script",{"title":662,"path":663,"stem":664,"navigation":665,"sectionTitle":666},"Hologram API","/docs/developer/api","docs/developer/10.api",{"sectionTitle":666},"API Reference",{"title":668,"path":669,"stem":670,"navigation":78},"Weather","/docs/developer/weather","docs/developer/11.weather",{"title":672,"path":673,"stem":674,"navigation":78},"Timer","/docs/developer/timer","docs/developer/12.timer",{"title":676,"path":677,"stem":678,"navigation":78},"Utility Class","/docs/developer/util","docs/developer/13.util",{"title":680,"path":681,"stem":682,"navigation":78},"Third Party Libraries","/docs/developer/third-party","docs/developer/14.third-party",{"title":684,"path":685,"stem":686,"navigation":687,"sectionTitle":688},"Frequently Asked Questions","/docs/faq","docs/faq",{"sectionTitle":688},"Help",1755585913038]