Our new DetailsPro update allows you to take any of your widget designs and add them right onto your Home Screen. This post will tell you a bit more about why we made this feature, how it works, and what you can do with it.

Designers have been using DetailsPro to design widgets for years, but up until today testing a widget in a live preview has been difficult and cumbersome. Not only have you needed a Mac and Xcode to see what the widget looks like, you’ve also had to write the special widget-style code that’s required to configure a widget in your project. Ideally, we wanted a way to use DetailsPro quickly to mockup a widget and just be able to add it straight to the Home Screen and let iOS (or iPadOS or macOS) give it a true render so we could see exactly how it renders for real.

And that’s just what we did!

How to add widgets to your Home Screen

Adding widgets to your Home Screen from DetailsPro is especially easy because you can already use any designs you have in the app that are in a “widget” size (or, start with any of our free or premium templates).

DetailsPro automatically pulls these out front in a handy new Widgets tab that you’ll find in the main DetailsPro screen. From here you can quickly browse your widgets and create new widgets.

The new Widgets tab lets you quickly browse your widgets and create new widgets.

To add a widget, you just go through the normal iOS flow. You don’t have to do anything special with your files beforehand.

First, go to your Home Screen and press-and-hold to add a new widget. Next, select DetailsPro in the widget browser and you’ll be able to pick any widget size.

You can select a widget placement in any standard size or one of the reference template widgets.

Finally, once that widget has been placed on your Home Screen, long-press and edit the widget to select one of your designs.

Your widget designs are automatically filtered when configuring a placement on your Home Screen.

And that’s it! Now, iOS will render your SwiftUI widget from scratch and you’ll see just how everything is lining up. This is a great way to check out whether your .padding()‘s and .font()‘s are feeling right, or if you want to make anything bigger or smaller.

How we made it easy for you to design great widgets

We’ve added two extra features in this new update that make it even easier to get started. The first is our April ’25 template pack, Art Collection, which contains a bunch of widgets. The first three are free for everyone and the other five are offered as a part of DetailsPro Premium. We designed these to be cover a lot of the super common widgets you might want to create so you can quickly start out with one of these and customize them with your content.

The April ’25 template pack celebrates our new update with a focus on beautiful, standard widgets.

The second is a separate type of widget you can add called Design Template. This widget is a reference widget you can use if you’re really trying to create something specific and to take advantage of the default margins and sizes iOS uses. This widget auto-detects these values on any device and under any combination of accessibility settings and presents them to you. Then, you can use this information in your next widget design to perfectly match the padding or make something off of the sizing. We don’t expect everyone to need to use this widget, but we know some will certainly enjoy it.

You can use the Design Template reference widget to take advantage of the default margins and sizes iOS uses.

You can get started today with version 5.4.0 of DetailsPro.