{"id":5614,"date":"2025-07-27T09:50:41","date_gmt":"2025-07-27T13:50:41","guid":{"rendered":"https:\/\/stepinto.vision\/?p=5614"},"modified":"2025-07-27T09:50:42","modified_gmt":"2025-07-27T13:50:42","slug":"widgets-getting-started-with-visionos-widgets","status":"publish","type":"post","link":"https:\/\/stepinto.vision\/example-code\/widgets-getting-started-with-visionos-widgets\/","title":{"rendered":"Widgets – Getting started with visionOS Widgets"},"content":{"rendered":"\n

Four key concepts that make widgets so compelling on visionOS.<\/p>\n\n\n\n

Widgets on one of the best new features coming in visionOS 26. They provide a vital and previously missing level of continuity. Widgets can be useful, decorative, interactive, and just plain playful. Let’s dive in with the basics, then a handful concepts.<\/p>\n\n\n\n

Widget Basics<\/h2>\n\n\n\n

To add a widget to an existing project, go to File > New > Target… <\/p>\n\n\n\n

With the visionOS template filter selected, look for Widget Extension and add it to your project. <\/p>\n\n\n\n

\"\"
Adding a Widget Extension<\/figcaption><\/figure>\n\n\n\n

This will add a new target to your Xcode project with some template files to get you started.<\/p>\n\n\n\n

    \n
  • An AppIntents file for configuration<\/li>\n\n\n\n
  • A WidgetBundle where we can add one or more widgets<\/li>\n\n\n\n
  • An example file with multiple structs that make up a widget<\/li>\n<\/ul>\n\n\n\n

    We can switch Xcode to build this target and run it in the Simulator.<\/p>\n\n\n\n

    \"\"
    Select the widget target<\/figcaption><\/figure>\n\n\n\n

    Building and testing widgets in the Simulator is perfect for quick iterations. The visionOS 26 beta has a dedicated Widgets app. After running your widget, open this app and look for it in the sidebar. <\/p>\n\n\n\n

    \"\"
    StepIntoWidgets selected in the Widgets app.<\/figcaption><\/figure>\n\n\n\n

    From here we can tap Add Widget. This will add the current version to next to this window. A few notes about working in the Simulator.<\/p>\n\n\n\n

      \n
    • The Simulator doesn’t support walls, so we can’t snap and lock them to surfaces.<\/li>\n\n\n\n
    • Sometimes the widget may not update after running it. Simply remove it and re-add it.<\/li>\n\n\n\n
    • Sometimes the widget preview may not update after running it. Simply select another widget, then select your widget again in the sidebar.<\/li>\n<\/ul>\n\n\n\n

      As of Xcode Beta 4, widgets seem to update their content anytime I run the app, but your experience may differ from mine.<\/p>\n\n\n\n

      We’ll add custom widget content in some future examples. For now, let’s use the “Favorite Emoji” example from the template and focus on some features. <\/p>\n\n\n\n

      Widget Size<\/h2>\n\n\n\n

      We can use supportedFamilies<\/code> to define an array of sizes for a widget. Not all sizes are supported on visionOS. As of visionOS Beta 4 we can use: [.systemSmall, .systemMedium, .systemExtraLargePortrait]<\/code>. No one really understands why Apple excluded the large square .systemLarge<\/code> from visionOS. Instead, we are encouraged to use .systemExtraLargePortrait<\/code>, which is new for visionOS.<\/p>\n\n\n\n