Widgets code-along

Widgetkit icon

Come and build a widget with us! Download a starter app and code along as we create a widget from start to finish. Discover fundamental concepts for widgets and their structure, learn how to rewrite your widget’s future and travel into alternate timelines, and explore how to create multiple widgets that highlight different features within your app.

Part 1: The adventure begins

Take your app on a most wondrous adventure to the home and Today screens of iPhone, iPad, and Mac. Grab the starter project and code along with us! We will guide you through the process of creating a widget for your app from start to finish so that you can provide people with beautiful views and glanceable information in an easily-accessible place. Discover how to create a widget project, learn fundamental concepts for widgets and their structure, configure the widget and its provider, and start exploring timeline concepts.

Once you’re finished, travel onward with us to part two of the Widgets Code-along where we’ll learn more about timelines, system intelligence, and configuration.

  • WWDC20

Widgets Code-along, part 1: The adventure begins

Part 2: Alternate timelines

Our code-along continues as we help our widget rewrite the future and travel into an alternate timeline. Continue where you left off from Part 1, or traverse time and space and begin with the Part 2 starter project to jump right into the action. Find out how you can integrate system intelligence into your widgets to help them dynamically change at different points during the day and surface the most relevant information. Explore core timeline concepts, support multiple widget families, and learn how to make your widget configurable.

Once you’ve helped your widget find its place in time, move on to the third and final part of the Widgets Code-along to discover advanced widget concepts and timelines.

  • WWDC20

Widgets Code-along, part 2: Alternate timelines

Part 3: Advancing timelines

Take your widget to the next level as we embark upon the third and final stage of the widgets code-along. Pick up where you left off in Part 2 or start with the Part 3 starter project to go warp speed ahead. We’ll explore advanced concepts for widgets, timelines, and configuration. Learn how to load in-process and background URLs and link directly to content within your app. And discover how to create multiple widgets that explore different features within your app, as well as making your widget dynamically configurable.

  • WWDC20

Widgets Code-along, part 3: Advancing timelines


  • WWDC20

Meet WidgetKit

  • WWDC20

What's new in SwiftUI

  • WWDC20

Add configuration and intelligence to your widgets

  • WWDC20

Build SwiftUI views for widgets