# Visual overview of Infrastructure Composer from the AWS Toolkit for Visual Studio Code
<a name="using-composer-ide-visual"></a>

Infrastructure Composer's visual designer in the AWS Toolkit for Visual Studio Code includes a visual canvas, which includes components that are numbered in the following image and listed below. 

![\[Infrastructure Composer's visual designer, including components of its visual canvas which are numerically itemized.\]](http://docs.aws.amazon.com/infrastructure-composer/latest/dg/images/aac_use_ide_visual_02.png)


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

1. **Card categories** – Cards are organized by categories unique to Infrastructure Composer.

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

1. **List** – Displays a tree view of your application resources.

1. **Resources** – Displays the resource palette.

1. **Left pane toggle** – Hide or show the left pane.

1. **Arrange** – Arranges your application architecture in the canvas.

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

1. **Menu** – Provides general options such as the following:
   + **Export canvas**
   + **Tour the canvas**
   + Links to **Documentation**
   + Keyboard shortcuts

1. **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.

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

1. **Line** – Represents a connection between cards.

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

1. **Port** – Connection points to other cards.

1. **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.

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

1. **Zoom** – Zoom in and out on your canvas.