# Using the AWS Infrastructure Composer console
This section provides details on accessing and using AWS Infrastructure Composer from the Infrastructure Composer console. This is the default experience for Infrastructure Composer and is a good way to become familiar with Infrastructure Composer. You can also integrate the Infrastructure Composer console with your local IDE. For details, see [Connect the Infrastructure Composer console with your local IDE](other-services-ide.md).
You can also [access Infrastructure Composer from the AWS Toolkit in VS Code](using-composer-ide.md), and you can use a [mode of Infrastructure Composer that is specifically designed to be used in CloudFormation](using-composer-console-cfn-mode.md).
For general documentation on using Infrastructure Composer, see [How to compose](using-composer-basics.md).
**Topics**
+ [AWS Infrastructure Composer console visual overview](reference-visual.md)
+ [Manage your project from the Infrastructure Composer console](using-composer-project.md)
+ [Connect the Infrastructure Composer console with your local IDE](other-services-ide.md)
+ [Allow web page access to local files in Infrastructure Composer](reference-fsa.md)
+ [Locally sync and save your project in the Infrastructure Composer console](using-composer-project-local-sync.md)
+ [Import functions into Infrastructure Composer from the Lambda console](other-services-lambda.md)
+ [Export an image of Infrastructure Composer's visual canvas](reference-features-export.md)
# AWS Infrastructure Composer console visual overview
This section provides a visual overview of the AWS Infrastructure Composer console.
**Topics**
+ [Home page](#reference-visual-home)
+ [Visual designer and visual canvas](#reference-visual-designer)
## Home page
The following image is of the home page in the Infrastructure Composer console:
![\[The Infrastructure Composer home page.\]](http://docs.aws.amazon.com/infrastructure-composer/latest/dg/images/aac_ref_01.png)
1. **Documentation** – Go to Infrastructure Composer documentation.
1. **Canvas** – Go to the canvas and create or load a project.
1. **Demo** – Open the Infrastructure Composer demo application.
1. **Create project** – Create or load a project.
1. **Start building** – Quick links to start building an application.
1. **Feedback** – Go here to submit feedback.
## Visual designer and visual canvas
The following image is of Infrastructure Composer's visual designer and visual canvas:
![\[Infrastructure Composer's visual designer and visual canvas.\]](http://docs.aws.amazon.com/infrastructure-composer/latest/dg/images/aac_ref_02.png)
1. **Resource palette** – Displays cards that you can design with.
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. **Home** – Select here to go to the Infrastructure Composer homepage.
1. **Save status** – Indicates whether Infrastructure Composer changes are saved to your local machine. States include:
+ **Autosave** – **Local sync** is activated and your project is being automatically synced and saved.
+ **Changes saved** – Your application template is saved to your local machine.
+ **Unsaved changes** – Your application template has changes that are not saved to your local machine.
1. **Resources** – Displays the resource palette.
1. **Canvas** – Displays the canvas view of your application in the main view area.
1. **Template** – Displays the template view of your application in the main view area.
1. **Arrange** – Arranges your application architecture in the canvas.
1. **Undo and redo** – Perform **undo** and **redo** actions when supported.
1. **Template name** – Indicates the name of the template you are designing.
1. **Main view area** – Displays either the canvas or template based on your selection.
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. **Menu** – Provides general options such as the following:
+ **Create a project**
+ **Open a template file or project**
+ **Save a template file**
+ **[Activate local sync](using-composer-project-local-sync.md)**
+ **[Export canvas](reference-features-export.md)**
+ **Get support**
+ **Keyboard shortcuts**
1. **Card** – Displays a view of your card on the canvas.
1. **Line** – Represents a connection between cards.
1. **Group** – Groups selected cards together for visual organization.
1. **Card actions** – Provides actions you can take on your card.
1. **Details** – Brings up the resource property panel.
1. **Group** – Group selected cards together.
1. **Delete** – Deletes the card from your canvas.
1. **Port** – Connection points to other cards.
1. **Resource property fields** – A curated set of property fields to configure for your cards.
1. **Re-center** – Re-center your application diagram on the visual canvas.
1. **Zoom** – Zoom in and out on your canvas.
1. **Feedback** – Go here to submit feedback.
# Manage your project from the Infrastructure Composer console
This topic provides guidance on the basic tasks you perform to manage your project from the Infrastructure Composer console. This includes common tasks like creating a new project, saving a project, and importing a project or template. You can also load an existing project if you activate [local sync mode](using-composer-project-local-sync.md). After activating local sync mode, you can do the following:
+ Create a new project that consists of a starting template and folder structure.
+ Load an existing project by choosing a parent folder that contains your project template and files.
+ Use Infrastructure Composer to manage your templates and folders
With local sync mode, Infrastructure Composer automatically saves your project’s template and folder changes to your local machine. If your browser doesn’t support local sync mode, or if you prefer to use Infrastructure Composer without local sync mode activated, you can create a new template or load an existing template. To save changes, you must export the template to your local machine.
**Note**
Infrastructure Composer supports applications that consist of the following:
An CloudFormation or AWS Serverless Application Model template that defines your infrastructure code.
A folder structure that organizes your project files, such as Lambda function code, configuration files, and build folders.
**Topics**
+ [Create a new project in the Infrastructure Composer console](using-composer-project-new.md)
+ [Import an existing project folder in the Infrastructure Composer console](using-composer-project-import-folder.md)
+ [Import an existing project template in the Infrastructure Composer console](using-composer-project-import-template.md)
+ [Save an existing project template in the Infrastructure Composer console](using-composer-project-save-template.md)
# Create a new project in the Infrastructure Composer console
When you create a new project, Infrastructure Composer generates a starting template. As you design your application on the canvas, your template is modified. To save your work, you must export your template or activate local sync mode.
**To create a new project**
1. Sign in to the [Infrastructure Composer console](https://console.aws.amazon.com/composer/home).
1. On the **Home** page, choose **Create project**.
**Note**
You can also load an existing in Infrastructure Composer, but you must first [activate local sync mode](using-composer-project-local-sync.md). Once activated, see [Load an existing Infrastructure Composer project with local sync activated](using-composer-how-to-load-with-local-sync.md) to load an existing project.
# Import an existing project folder in the Infrastructure Composer console
Using local sync mode, you can import the parent folder of an existing project. If your project contains multiple templates, you can choose the template to load.
**To import an existing project from the Home page**
1. Sign in to the [Infrastructure Composer console](https://console.aws.amazon.com/composer/home).
1. On the **Home** page, choose **Load a CloudFormation template**.
1. For **Project location**, choose **Select folder**. Select your project’s parent folder and choose **Select**.
**Note**
If you do not receive this prompt, your browser may not support the File System Access API, which is required for local sync mode. For more information, see [Allow web page access to local files in Infrastructure Composer](reference-fsa.md).
1. When prompted by your browser, select **View files**.
1. For **Template file**, choose your template from the dropdown list. If your project contains a single template, Infrastructure Composer automatically selects it for you.
1. Choose **Create**.
**To import an existing project from the canvas**
1. From the canvas, choose **Menu** to open the menu.
1. In the **Open** section, choose **Project folder**.
**Note**
If the **Project folder** option is unavailable, your browser may not support the File System Access API, which is required for local sync mode. For more information, see [Allow web page access to local files in Infrastructure Composer](reference-fsa.md).
1. For **Project location**, choose **Select folder**. Select your project’s parent folder and choose **Select**.
1. When prompted by your browser, select **View files**.
1. For **Template file**, choose your template from the dropdown list. If your project contains a single template, Infrastructure Composer automatically selects it for you.
1. Choose **Create**.
When you import an existing project folder, Infrastructure Composer activates **local sync mode**. Changes made to your project’s template or files are automatically saved to your local machine.
# Import an existing project template in the Infrastructure Composer console
When you import an existing CloudFormation or AWS SAM template, Infrastructure Composer automatically generates a visualization of your application architecture on the canvas.
You can import a project template from your local machine.
**To import an existing project template**
1. Sign in to the [Infrastructure Composer console](https://console.aws.amazon.com/composer/home).
1. Choose **Create project** to open a blank canvas.
1. Choose **Menu** to open the menu.
1. In the **Open** section, choose **Template file**.
1. Select your template and choose **Open**.
To save changes to your template, you must export your template or activate local sync mode.
# Save an existing project template in the Infrastructure Composer console
If you don't use local sync mode, you must export your template to save your changes. If you have local sync mode activated, manually saving your template is not required. Changes are automatically saved to your local machine.
**To save an existing project template**
1. From the Infrastructure Composer canvas, choose **Menu** to open the menu.
1. In the **Save** section, choose **Save template file**.
1. Provide a name for your template.
1. Select a location to save your template.
1. Choose **Save**.
# Connect the Infrastructure Composer console with your local IDE
To connect the Infrastructure Composer console with your local integrated development environment (IDE), use local sync mode. This mode automatically syncs and saves data to your local machine. For more information about local sync mode, see [Locally sync and save your project in the Infrastructure Composer console](using-composer-project-local-sync.md). For instructions on using local sync mode, see [Locally sync and save your project in the Infrastructure Composer console](using-composer-project-local-sync.md).
**Note**
The **Activate local sync** option is not available in every browser. It is available in Google Chrome and Microsoft Edge.
## Benefits of using Infrastructure Composer with your local IDE
As you design in Infrastructure Composer, your local template and project directory are automatically synced and saved.
You can use your local IDE to view changes and modify your templates. Changes that you make locally are automatically synced to Infrastructure Composer.
You can use local tools such as the AWS Serverless Application Model Command Line Interface (AWS SAM CLI) to build, test, deploy your application, and more. The following example shows how you can drag and drop resources onto Infrastructure Composer's visual canvas which, in turn, creates markup in your AWS SAM template in your local IDE.
![\[Using Infrastructure Composer with a local IDE to sync changes.\]](http://docs.aws.amazon.com/infrastructure-composer/latest/dg/images/aac_other_ide_01.gif)
## Integrate Infrastructure Composer with your local IDE
**To integrate Infrastructure Composer with your local IDE**
1. In Infrastructure Composer, create or load a project, and activate local sync by selecting the **Menu** button at the top-right side of the screen and choosing **Activate local sync**.
**Note**
The **Activate local sync** option is not available in every browser. It is available in Google Chrome and Microsoft Edge.
1. In your local IDE, open the same project folder as Infrastructure Composer.
1. Use Infrastructure Composer with your local IDE. Updates made in Infrastructure Composer will automatically sync with your local machine. Here are some examples of what you can do:
1. Use your version control system of choice to track updates being performed by Infrastructure Composer.
![\[Making a change in Infrastructure Composer and viewing the git diff in your local IDE.\]](http://docs.aws.amazon.com/infrastructure-composer/latest/dg/images/aac_other_ide_02.gif)
1. Use the AWS SAM CLI locally to build, test, deploy your application, and more. To learn more, see [Deploy your Infrastructure Composer serverless application to the AWS Cloud](other-services-cfn.md).
![\[Using sam build and sam deploy in your local IDE.\]](http://docs.aws.amazon.com/infrastructure-composer/latest/dg/images/aac_other_ide_03.gif)
# Allow web page access to local files in Infrastructure Composer
The Infrastructure Composer console supports [local sync mode](using-composer-project-local-sync.md) and [Importing functions from the Lambda console](other-services-lambda.md). To use these features, a web browser that supports the File System Access API is required. Any recent version of Google Chrome and Microsoft Edge support all capabilities of the File System Access API and can be used with **local sync** mode in Infrastructure Composer.
The File System Access API lets web pages gain access to your local file system in order to read, write, or save files. This feature is off by default and requires your permission through a visual prompt to allow it. Once granted, this access remains for the duration of your web page’s browser session.
To learn more about the File System Access API, see:
+ [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) in the *mdn web docs*.
+ [The File System Access API: simplifying access to local files](https://web.dev/file-system-access/) in the *web.dev* website.
## local sync mode
**Local sync** mode lets you automatically sync and save your template files and project folders locally as you design in Infrastructure Composer. To use this feature, a web browser that supports the File System Access API is required.
## Data Infrastructure Composer gains access to
Infrastructure Composer gains read and write access to the project folder you allow, along with any child folders of that project folder. This access is used to create, update, and save any template files, project folders, and backup directories that are generated as you design. Data accessed by Infrastructure Composer is not used for any other purpose and is not stored anywhere beyond your local file system.
### Access to sensitive data
The File System Access API excludes or limits access to specific directories that may contain sensitive data. An error will occur if you select one of these directories to use with Infrastructure Composer *local sync* mode. You can choose another local directory to connect with or use Infrastructure Composer in its default mode with *local sync* deactivated.
For more information, including examples of sensitive directories, see [Users giving access to more, or more sensitive files than they intended](https://wicg.github.io/file-system-access/#privacy-wide-access) in the *File System Access W3C Draft Community Group Report*.
If you use Windows Subsystem for Linux (WSL), the File System Access API excludes access to the entire Linux directory because of its location within your Windows system. You can use Infrastructure Composer with *local sync* deactivated or configure a solution to sync project files from your WSL directory to a working directory in Windows. Then, use Infrastructure Composer *local sync* mode with your Windows directory.
# Locally sync and save your project in the Infrastructure Composer console
This section provides information on using Infrastructure Composer's **local sync** mode to automatically sync and save your project to your local machine.
We recommend that you use **local sync** for the following reasons:
You can activate **local sync** for a new project, or load an existing project with **local sync** activated.
+ By default, you need to manually save your application template as you design. Use **local sync** to automatically save your application template to your local machine as you make changes.
+ **Local sync** manages and automatically syncs your project folders, backup folder, and [supported external files](using-composer-external-files.md) to your local machine.
+ When using **local sync**, you can connect Infrastructure Composer with your local IDE to speed up development. To learn more, see [Connect the Infrastructure Composer console with your local IDE](other-services-ide.md).
## What local sync mode saves
**Local sync** mode automatically syncs and saves the following to your local machine:
+ **Application template file** – The AWS CloudFormation or AWS Serverless Application Model (AWS SAM) template that contains your infrastructure as code (IaC).
+ **Project folders** – A general directory structure that organizes your AWS Lambda functions.
+ **Backup directory** – A backup directory named `.aws-composer`, created at the root of your project location. This directory contains a backup copy of your application template file and project folders.
+ **External files ** – Supported external files that you can use within Infrastructure Composer. To learn more, see [Reference external files in Infrastructure Composer](using-composer-external-files.md).
## Browser requirements
**Local sync** mode requires a browser that supports the File System Access API. For more information, see [Allow web page access to local files in Infrastructure Composer](reference-fsa.md).
## Activating local sync mode
**Local sync** mode is deactivated by default. You can activate **Local sync** mode through the Infrastructure Composer **menu**.
![\[Infrastructure Composer's Menu with Activate local sync selected.\]](http://docs.aws.amazon.com/infrastructure-composer/latest/dg/images/aac_ref_16.png)
For instructions on activating **local sync** and existing loading projects, see the following topics:.
+ [Activate local sync in Infrastructure Composer](using-composer-how-to-locally-sync.md)
+ [Load an existing Infrastructure Composer project with local sync activated](using-composer-how-to-load-with-local-sync.md)
# Activate local sync in Infrastructure Composer
To activate local sync, complete the following steps:
1. From the Infrastructure Composer **[home](reference-visual.md#reference-visual-home)** page, select **Create project**.
1. From the Infrastructure Composer **menu**, select **Activate local sync**.
1. For **Project location**, press **Select folder** and choose a directory. This is where Infrastructure Composer will save and sync your template files and folders as you design.
**Note**
The project location must not contain an existing application template.
1. When prompted to allow access, select **View files**.
1. Press **Activate**. When prompted to save changes, select **Save changes**.
When activated, the **Autosave** indicator will be displayed in the upper-left area of your canvas.
# Load an existing Infrastructure Composer project with local sync activated
To load an existing project with local sync activated, complete the following steps:
1. From the Infrastructure Composer **[home](reference-visual.md#reference-visual-home)** page, select **Load a CloudFormation template**.
1. From the Infrastructure Composer **menu**, select **Open** > **Project folder**.
1. For **Project location**, press **Select folder** and choose the root folder of your project.
1. When prompted to allow access, select **View files**.
1. For **Template file**, select your application template and press **Create**.
1. When prompted to save changes, select **Save changes**.
When activated, the **Autosave** indicator will be displayed in the upper-left area of your canvas.
# Import functions into Infrastructure Composer from the Lambda console
Infrastructure Composer provides an integration with the AWS Lambda console. You can import a Lambda function from the Lambda console into the Infrastructure Composer console. Then, use the Infrastructure Composer canvas to design your application architecture further.
+ This integration requires a browser that supports the File System Access API. For more information, see [Allow web page access to local files in Infrastructure Composer](reference-fsa.md).
+ When you import your Lambda function into Infrastructure Composer, you must activate local sync mode to save any changes. For more information, see [Locally sync and save your project in the Infrastructure Composer console](using-composer-project-local-sync.md).
To get started with using this integration, see [Using AWS Lambda with AWS Infrastructure Composer](https://docs.aws.amazon.com/lambda/latest/dg/services-appcomposer.html) in the *AWS Lambda Developer Guide*.
# Export an image of Infrastructure Composer's visual canvas
This topic describes the AWS Infrastructure Composer console **export canvas** feature.
For a visual overview of all Infrastructure Composer features, see [AWS Infrastructure Composer console visual overview](reference-visual.md).
## About export canvas
The **export canvas** feature exports your application’s canvas as an image to your local machine.
+ Infrastructure Composer removes the visual designer UI elements and exports only your application’s diagram.
+ The default image file format is `png`.
+ The file is exported to your local machine’s default download location.
You can access the **export canvas** feature from the **Menu**.
![\[Infrastructure Composer's Menu with Export canvas selected.\]](http://docs.aws.amazon.com/infrastructure-composer/latest/dg/images/aac_ref_13.png)
## Exporting canvas
When you export your canvas, Infrastructure Composer displays a status message.
If the export is successful, you will see the following message:
![\[Infrastructure Composer's Menu with Export canvas selected.\]](http://docs.aws.amazon.com/infrastructure-composer/latest/dg/images/aac_ref_14.png)
If the export was unsuccessful, you will see an error message. If you receive an error, try exporting again.
![\[Infrastructure Composer's Menu with Export canvas selected.\]](http://docs.aws.amazon.com/infrastructure-composer/latest/dg/images/aac_ref_15.png)