Manage and Preview APL Documents in Visual Studio Code

You can use the Alexa Skills Kit (ASK) Toolkit for Visual Studio Code (VS Code) to create, edit, and preview Alexa Presentation Language (APL) documents for your skills. The ASK 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

You can create a new APL document in VS Code.

To create an APL document

  1. In the activity bar, click the Alexa icon.
  2. On the ALEXA SKILLS TOOLKIT sidebar, expand SKILLS, and then expand your skill.
  3. Expand Alexa Presentation Language (APL), and then choose Create.
  4. On Choose a template, navigate to the APL template that you want, and then click the APL template.
  5. Enter a name for the document, and then press enter.
    VS Code adds the new APL document 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.
  2. On the ALEXA SKILLS TOOLKIT sidebar, expand SKILLS, and then expand your skill.
  3. Expand Alexa Presentation Language (APL), and then choose Download.
  4. On Download APL document, select the APL document to download to your local project, and then 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.
  2. On the ALEXA SKILLS TOOLKIT sidebar, expand SKILLS, and then expand your skill.
  3. Expand Alexa Presentation Language (APL), and then choose Preview.
  4. On the available APL document list, choose the APL document that you want to preview.
    The document opens in the editor, and the APL Preview pane appears.
  5. (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.
  2. On the ALEXA SKILLS TOOLKIT sidebar, expand SKILLS, and then expand your skill.
  3. Expand Alexa Presentation Language (APL), and then choose Change viewport.
  4. On the list of available viewports, choose a new viewport, and then press enter.
    The APL Preview pane updates and the document appears in the new viewport.
Was this page helpful?

Last updated: Nov 23, 2023