Manage and Preview APL Documents in Visual Studio Code

You can use the Alexa Skills Toolkit (ASK Toolkit) for Visual Studio Code (VS Code) to create, edit, and preview Alexa Presentation Language (APL) documents for your skills. The Alexa Skills Toolkit for VS Code is an extension that makes it easier for you to create, test, and deploy Alexa skills. For prerequisites and installation instructions, see Get Started with the ASK Toolkit for VS Code.

Overview

With APL you can create visual experiences to accompany your skill. Users can see and interact with your visual experiences on supported devices such as the Echo Show, Fire TV, some Fire tablets, and other devices. You can include animations, graphics, images, slideshows, and video in your visual experience. For details, see Add Visuals and Audio to Your Skill.

The following screenshot shows the APL Preview page in the Visual Studio Code IDE:

The APL Preview page in the Visual Studio Code IDE

Create a new APL Document

To create an APL document

  1. In the activity bar, click the Alexa icon. The Alexa Skills Toolkit side bar appears.
  2. Expand Skills, expand your skill, expand Alexa Presentation Language (APL), and then choose Create. The Choose a template dialog appears.
  3. Click the APL template you want, enter a name for the document, and press enter.

Your new APL document is added to your skill in the skill-package\response\display folder.

Download an existing APL document

If you have existing APL documents in the Alexa developer console, you can download them and add them to your local VS Code project.

To download an existing APL document

  1. In the activity bar, click the Alexa icon. The Alexa Skills Toolkit side bar appears.
  2. Expand Skills, expand your skill, expand Alexa Presentation Language (APL), and then choose Download. The Download APL document dialog appears.
  3. Select the APL document you would like to download to your local project and click Download.

Preview and edit an APL document

You can preview your APL documents to see how they look to the user.

To preview and edit an APL document

  1. In the activity bar, click the Alexa icon. The Alexa Skills Toolkit side bar appears.
  2. Expand Skills, expand your skill, expand Alexa Presentation Language (APL), and then choose Preview. A dialog appears and lists the APL documents available in the skill.
  3. Choose the APL document that you want to preview. The document opens in the editor, and the APL Preview pane appears.
  4. (Optional) Edit the JSON for APL document itself, or the data sources, and then save the files.

When you save changes to your APL document, the APL Preview pane automatically updates and the changes appear.

Change the viewport for previewing APL documents

You can change the viewport when you preview APL documents to see how they look on different screens.

To change the viewport

  1. In the activity bar, click the Alexa icon. The Alexa Skills Toolkit side bar appears.
  2. Expand Skills, expand your skill, expand Alexa Presentation Language (APL), and then choose Change viewport. A dialog appears and lists the available viewports.
  3. Choose a new viewport and press enter. The APL Preview pane updates and the document appears in the new viewport.

Last updated: Feb 03, 2023