Browse documentation

Widgets

Create your first Widget

Create, preview, build, and install a glanceable widget with refresh behavior.

On this page

Create a weather-style widget without writing Monkey C. You can design and preview in the browser; building requires DialStudio desktop and the Garmin build tools.

1. Start the project

  1. Open Editor and choose Widget.
  2. Select a watch that supports widget glances.
  3. Start from the default widget or a template.

The project remains a draft until the first meaningful edit. Rename the project, change a layer, configure data, or change the target device to save it and give it a permanent project URL.

2. Review the surfaces

The default widget includes a compact Glance and a Detail page. Use the surface control to switch between them.

Keep the Glance short. It should answer one question at a glance, such as the current status, next event, or latest value. Use the Detail page for supporting rows, charts, explanations, and actions.

If a widget does not need a full page, remove or skip the Detail page. If it needs a manual refresh or account sign-in action, add the Detail page and place the action there.

3. Choose a data source

Select the background, open Data, and choose a source:

  • Static content for values you type into layers.
  • Garmin watch data for steps, heart rate, battery, or weather.
  • Web service for JSON from your own HTTPS endpoint.

For a web service, enter the endpoint, choose GET or POST, and test the response when possible. Map response paths to shared values such as title, value, summary, and status. Layers bound to those values update together.

If the service requires sign-in, enable OAuth and enter the authorization URL, redirect URL, client ID, scopes, and token result key. Replace all example URLs before building.

4. Set refresh behavior

Use Updates to decide how data stays current:

  • Update when opened refreshes as the wearer opens the widget.
  • Allow manual refresh permits wearer-triggered refresh.
  • Schedule refreshes a web-service widget in the background, from 5 to 1440 minutes.
  • Keep saved data offline shows the last cached result when the phone or service is unavailable.

Do not leave a non-static widget without a refresh path. Studio reports that as a blocking design issue.

5. Preview real states

Use the footer scenario selector while editing, then choose Preview to check the widget without editing panels. Review loading, fresh, stale, offline, unauthorized, empty, and error states on both surfaces.

Make sure the Glance still makes sense when values are missing or stale. On the Detail page, add clearer language or a connect action when the unauthorized state needs account sign-in.

6. Save and build

After the project reports Saved, choose Build. Confirm the target watch and start the desktop build. Unsupported widget features are blocked before compilation.

When the build completes, continue to the installation guide. Transfer the .prg file to the watch, then open it from the watch's widget loop or glance list.

Up nextWidget editor