AWS Application Composer from the AWS Toolkit for Visual Studio Code visual overview - AWS Application Composer
Visual designer

AWS Application Composer from the AWS Toolkit for Visual Studio Code visual overview

This section provides a visual overview of AWS Application Composer from the AWS Toolkit for Visual Studio Code.

Visual designer

Image of Application Composer's visual designer.

  1. Resource palette – Displays cards that you can design with.

  2. Card categories – Cards are organized by categories unique to Application Composer.

  3. Resource search bar – Search for cards that you can add to the canvas.

  4. List – Displays a tree view of your application resources.

  5. Resources – Displays the resource palette.

  6. Left pane toggle – Hide or show the left pane.

  7. Arrange – Arranges your application architecture in the canvas.

  8. Sync – Initiates the AWS Serverless Application Model (AWS SAM) CLI sam sync command to deploy your application.

  9. Menu – Provides general options such as the following:

    • Export canvas

    • Tour the canvas

    • Links to Documentation

    • Keyboard shortcuts

  10. Resource properties panel – Displays relevant properties for the card that’s been selected in the canvas. This panel is dynamic. Properties displayed will change as you configure your card.

  11. Card – Displays a view of your card on the canvas.

  12. Line – Represents a connection between cards.

  13. Group – A group of cards. You can group cards for visual organization.

  14. Port – Connection points to other cards.

  15. Card actions – Provides actions you can take on your card.

    • Details – Brings up the Resource properties panel.

    • Group – Group selected cards together.

    • Delete – Deletes the card from your canvas and template.

  16. Re-center – Re-center your application diagram on the visual canvas.

  17. Zoom – Zoom in and out on your canvas.