Contact Us 1-800-596-4880
  1. Homepage
  2. Anypoint Code Builder
  3. Getting Started

  4. Discovering the UI

Discovering the UI

logo cloud IDE Cloud IDE

logo desktop IDE Desktop IDE

Open Beta Release: The cloud IDE and AsyncAPI implementation support are in open beta. Any use of Anypoint Code Builder in its beta state is subject to the applicable beta services terms and conditions, available from the IDE.

Get familiar with the Anypoint Code Builder UI and elements to design, develop, and deploy APIs and integrations.

Welcome mat in the Anypoint Code Builder IDE
1 Activity Bar: Use VS Code Activity Bar items as you work on your projects. Mouse over the items to find their names:

Activity Bar buttons

In addition to Anypoint Code Builder (MuleSoft icon), commonly used items in the Activity Bar include:

  • Explorer: Open project files and folders.

  • Source Control: Store your project files.

  • Run and Debug: Run and debug integrations and implementations.

  • Extensions: Open for installations and updates in the desktop IDE.

    You can change the order of the items in your activity bar.
2 Anypoint Code Builder (MuleSoft icon): Open the Anypoint Code Builder panel to start a project. Follow the tutorials to get started with API specification design, implementation, and integration development in Anypoint Code Builder.
3 Quick Actions: Start an API specification, implementation, or integration project.
4 Settings: Set Anypoint Code Builder configurations, including the US or EU cloud for your IDE. Select the cloud where your Anypoint Platform user account resides.

Compare Project UIs in the IDE

The UIs of the web and desktop IDEs share the same structure.

Integration and implementation projects are Mule applications with similar UIs:

Anypoint Code Builder UI with integration project
1 Explorer: Open a workspace for your project.
2 Editors: Develop your project in the canvas UI and configuration XML files. Configuration XML files support auto-completion.
3 Status Bar: Check for your user name to learn if you are logged in to Anypoint Platform.
4 Output Panel: As your projects run in Anypoint Code Builder, view output and logs from Mule DX Server. Open the built-in command terminal. View problems and ports.

See Developing Integrations and Implementing APIs for more detail.

API design projects include a service for mocking endpoints in the API Console:

Anypoint Code Builder UI with integration project
1 Editor: Configure API specification project files. This editor supports auto-completion.
2 API Console: Test endpoints on your examples.

See Designing API Specs and Fragments for more detail.

Use IntelliSense to Auto-Complete in the Editors

Anypoint Code Builder uses IntelliSense, a built-in code-completion feature of VS Code, to provide auto-completion in Editor views.

  1. In the Editor view, press Ctrl+Space to display available options.

  2. Enter a search term to narrow the results, for example:

    Auto-complete options for `get`

    IntelliSense shows different options, depending on the context, for example:

    Auto-complete options for `responses`

  3. Use the arrow keys to navigate the list.

  4. Press Enter or Tab to insert the selected element.

    Auto-complete adds the element to the code and places the cursor for you to add values.

For more information, see IntelliSense in the VS Code documentation.

Change the Look and Feel of the IDE

Select a theme to change the look and feel of the desktop or cloud IDE.

  1. Select the Manage (gear) icon from the activity bar.

  2. Select Themes > Color Themes, and select a theme, for example, Dark Modern:

    IDE using the dark theme