# Explore the Integration editor layout

The *Integration editor* is a drag-and-drop interface that lets you design and develop your entire integration flow
with little or no code. You can create, modify, and run all your integrations in the *Integration editor*. Overall, you can think of the *Integration editor* as a unified workspace for managing your integration.


Application Integration provides out-of-the-box
[triggers](https://docs.cloud.google.com/application-integration/docs/trigger-overview) and
[tasks](https://docs.cloud.google.com/application-integration/docs/task-overview) to further assist you in rapid
development of your integration. Every task or trigger element is connected using an
[edge](https://docs.cloud.google.com/application-integration/docs/edge-overview) along with its respective
[fork and join](https://docs.cloud.google.com/application-integration/docs/forks-joins).
Edges also indicate the flow of control from one task/trigger to another. For information on specifying conditions for edges and tasks, see
[Edge conditions](https://docs.cloud.google.com/application-integration/docs/edge-overview#edge_condition).

## Open integration editor


To open your integration in the *Integration editor*, do the following:

1. In the Google Cloud console, go to the **Application Integration** page.

   [Go to Application Integration](https://console.cloud.google.com/integrations)
2. Click **Integrations** from the left navigation menu to open the **Integrations** page.
3. Select an existing integration or create a new integration by clicking **Create integration** .


   If you are creating a new integration:
   1. Enter a name and description in the **Create Integration** dialog.
   2. Select a region for the integration.

      > [!NOTE]
      > **Note:** The **Regions** dropdown only lists the regions provisioned in your Google Cloud project. To provision a new region, Click **Enable Region** . See [Enable new region](https://docs.cloud.google.com/application-integration/docs/enable-new-region) for more information.

   3. Click **Create** . The newly created integration opens in the *integration editor*.


## Explore integration editor layout

The following figure shows a sample layout of the *Integration editor*.

![Integrations designer layout](https://docs.cloud.google.com/static/application-integration/images/integrations_editor_layout.png)

![Integrations editor layout](https://docs.cloud.google.com/static/application-integration/images/integrations_editor_layout.png)

The following table describes the different sections that comprise the integration editor:

| Section | Description |
|---|---|
| Toolbar <button class="button button-primary" data-modal-dialog-id="toolbar">Show layout</button> ![Integrations designer toolbar](https://docs.cloud.google.com/static/application-integration/images/toolbar.png) <br /> | The designer toolbar displays the following information about your integration: - Name of the integration. - Last edit timestamp. - Current [version](https://docs.cloud.google.com/application-integration/docs/integration-versions) of the integration. - [Local logging](https://docs.cloud.google.com/application-integration/docs/local-logging) status. <br /> To view a summary of the whole integration in one place, click . To perform actions such as [deleting](https://docs.cloud.google.com/application-integration/docs/delete-integrations) an integration, [cloning](https://docs.cloud.google.com/application-integration/docs/clone-integrations) an integration, or [downloading and uploading](https://docs.cloud.google.com/application-integration/docs/upload-download-integrations) an integration, and [viewing the OpenAPI Specification](https://docs.cloud.google.com/application-integration/docs/view-openapi-spec) of an integration, click the (Actions menu) in the toolbar. |
| Navigation bar <button class="button button-primary" data-modal-dialog-id="navbar">Show layout</button> ![Integrations designer nav bar](https://docs.cloud.google.com/static/application-integration/images/navigationbar.png) <br /> | The designer navigation bar lets you perform the following actions: - Add [triggers](https://docs.cloud.google.com/application-integration/docs/triggers) and [tasks](https://docs.cloud.google.com/application-integration/docs/tasks) to your integration. - Undo and redo. - Clean up and auto-orient the integration flow in the designer canvas. - Canvas zoom-in and zoom-out. - Create integration flow with Gemini pen_spark - [Publish](https://docs.cloud.google.com/application-integration/docs/test-publish-integrations) and [test](https://docs.cloud.google.com/application-integration/docs/test-publish-integrations) integration. - Open [Integration Connectors](https://docs.cloud.google.com/integration-connectors/docs) to view the available connections in the region. - View integration [execution logs](https://docs.cloud.google.com/application-integration/docs/integration-execution-logs). - View [monitoring dashboard](https://docs.cloud.google.com/application-integration/docs/monitoring-dashboard). <br /> |
| Variables pane <button class="button button-primary" data-modal-dialog-id="var">Show layout</button> ![Integrations designer var](https://docs.cloud.google.com/static/application-integration/images/varpane.png) <br /> | The **Variables** panes lists all the integration variables and task variables available in the integration. It also displays a count of the total variable references within the integration. To perform actions such as deleting or duplicating a variable, click (Actions menu) next to the respective variable. For more information about variable, see [Variables](https://docs.cloud.google.com/application-integration/docs/variables). |
| Designer canvas <button class="button button-primary" data-modal-dialog-id="canvas">Show layout</button> ![Integrations designer canvas](https://docs.cloud.google.com/static/application-integration/images/canvas.png) <br /> | The designer canvas is the backdrop on which you can design and develop your integration flow. |
| Configuration pane <button class="button button-primary" data-modal-dialog-id="config">Show layout</button> ![Integrations designer config](https://docs.cloud.google.com/static/application-integration/images/configpane.png) <br /> | The configuration pane displays the configuration settings for each of the triggers and tasks that are added in your designer canvas. For information about how to configure a trigger or task, see [Triggers and tasks](https://docs.cloud.google.com/application-integration/docs/all-triggers-tasks). |

## What's next

- Start a [quickstart](https://docs.cloud.google.com/application-integration/docs/quickstarts).
- Learn about the [canvas view](https://docs.cloud.google.com/application-integration/docs/canvas-view).
- Get a deeper understanding of the fundamental Application Integration [concepts](https://docs.cloud.google.com/application-integration/docs/concepts).
- Learn how to add and configure the available [triggers and tasks](https://docs.cloud.google.com/application-integration/docs/all-triggers-tasks).