Apple News Format Tutorials
Create a basic article and then add advanced design features.
- Apple News Format
- Apple News API
In these tutorials, you’ll download
article.json files and follow steps to add code. Preview your changes in News Preview as you go.
Before beginning the tutorial, make sure you have the following installed:
macOS or OS X 10.11.3 or later
The required version of Xcode for your News Preview version, as specified on the News Preview page. After you install Xcode, launch the application and agree to all license agreements. When you see the Welcome to Xcode window, you have finished installing Xcode.
iOS 11 or later SDK. This is part of the Xcode installation.
Text editing software of your choice. This is necessary only if you are editing the tutorial files yourself. See Choose a Text Editor.
Learn about the basic JSON concepts required for the tutorials.
Introductory Design Tutorial
Adding a Divider
Create a horizontal, styled divider that extends to the right edge of the display.
Adding an Image and Captions
Create a photo that extends to both edges of the display, with captions that appear in the article layout and in full-screen view.
Adding a Pull Quote
Break an existing body component into two components, and then insert a pull quote between them.
Advanced Design Tutorial 1: Header Techniques and Parallax Behavior
Learn about the basic Apple News Format container concepts required for the three advanced tutorials.
Adding Parallax Behavior
Create an illusion of multiple flat layers by causing the article body to overlap the header as the user scrolls.
Advanced Design Tutorial 2: Layout and Positioning
Advanced Design Tutorial 3: More Ideas
Download more Apple News Format article bundle examples.
Design and Create
Apple News Format
Create signature content for Apple News and understand the capabilities of Apple News Format.