SwiftUI’s Previews feature allows you to see your views in action without launching the simulator.
Generate dynamic, interactive previews of your custom views.
Previews in Xcode | Apple Developer Documentation
While developing with previews, I thought it would be useful to have a list of preview snapshots, so I created a library to do that.
(Note)
This is for Views that use the SwiftUI preview feature. Snapshots of views that are not previewed will not be created.
What I created
I created yyokii/UIPreviewCatalog.
When you run createCatalog(previewItems:), a list of Preview images and a markdown file containing them will be output as shown below.
This is a library and needs to be installed in the target application. However, if this could be provided as a CLI tool or Mac app, it would be a one-time installation. I considered such a plan, but decided against it this time because I did not know how to implement it.
Motivation for development
Do you ever feel the following in development?
- I’ve just started a new project at work, and I wonder what kind of View is used in this application.
- I want to create a View by referring to a View used in an open source application. So I want to have a quick look at what kind of View is used in that app.
You can solve most of these problems by actually running the application. However, it may be difficult to see everything manually, or you may find the operation troublesome.
So I thought it would be useful to make a list of all the previews in SwiftUI, so I decided to make one.
In other words, I thought I’d create something in code that would allow you to “take a quick look at the Views used in your app” and help you do the following
- Catching up with the project
- Preventing the creation of the same kind of View
- If there are already similar Views, it will be easier to notice them when creating a new View.
I’m sure some projects are documenting their UI catalogs or creating debug views for similar purposes. That’s great. I think this library fits the use case where you don’t have that much done, but want to output something simple.
Usage
There are three steps to follow.
- Install the library
- Generate the
PreviewItemarray - Generate snapshot and Markdown files
Please refer to README for more details.
Issue
Currently, when I run it against a View that has animation, I get a blank image. If you have any ideas, comments or pull requests would be appreciated!
Animation Support — Issue #6 — yyokii/UIPreviewCatalog
Conclusion
I hope this content will be helpful to others.
I almost forgot to say…
Please give me a star if you like it. Your stars make me feel like I’m flying. yyokii/UIPreviewCatalog
