--- schema_version: "1" id: 0ba3881fba36f9411aa4a8761b37765977d0ddc08724c73fe31fac8d4255fb28 title: API Experience Hub Lightning Components collection: mulesoft version: current locale: en-us portal_url: https://docs.salesforce.com/mulesoft/current/en-us/api-experience-hub/api-experience-hub-lightning-components.md canonical_url: https://docs.mulesoft.com/api-experience-hub/api-experience-hub-lightning-components source_site: docs.mulesoft.com content_type: documentation content_hash: 3edb55367d4a83fc0c781a26764e4026da521173a2d5572cfbc7ddfa75d42530 description: MuleSoft Documentation Site latest: true --- --- product: API Experience Hub --- # API Experience Hub Lightning Components > For the full documentation index, see: https://docs.mulesoft.com/llms.txt You can design the pages of your API Experience Hub portal by adding and configuring Lightning components in the Builder. These Lightning components include both the Lightning components available in all Salesforce Digital Experiences and the API Experience Hub Lightning components available only in API Experience Hub. Each API Experience Hub Lightning component has different configuration options and adds different functionality to the portal. API Experience Hub supports custom components in English only. To add API Experience Hub components: 1. Click the **Components** lightning bolt icon to display the component palette. 2. Drag any component from the component palette to the current page. 3. Click the component on the page to show the component’s configuration options. 4. Edit the values by entering or selecting values in the component property fields. To delete a component, click the delete icon and click **Delete** in the dialog. ## API Console The interactive API Console component shows information about your APIs and their methods. Endpoints are displayed in alphabetical order. Console components include API Console, API Console Documentation, API Console Instances, API Console Specification, and API Console Request Panel. In the Builder, you can add multiple console components to the same page. Changes to a console component are visible in all other console components on that page that display the same API. For example, selecting the Summary tab in an API Console results in Summary tab selection in all API Consoles on the same page that display the same API. The component shows the public API instances and documentation from Anypoint Exchange. Select **Expand endpoints** to show in the API Console. ## Asset Detail Header The Asset Details Header component displays the API header, including icon, name, contact email, and description. The API icon, name, and description shown are set in the API Experience Hub control panel when you add an API version to your community. The contact email is set in Anypoint Exchange. Enter or select these properties to show in the **API details** page: - Record ID - Show API Contact - Show API Clients - Show instance URL - Show categories - Show tags - Show Request access button - Show Download spec button - Show lifecycle state ## Asset Version Shows the API version from Exchange when only one version is visible. ## Version State Shows the API version lifecycle state. - Asset Documentation Viewer The API Documentation Viewer component shows an API’s documentation from Anypoint Exchange. The documentation can have multiple pages, and each page can have multiple sections. ## Assets Carousel The API Carousel component shows a horizontally scrollable set of API cards that displays on the **Home** page. Each card shows an API. You can specify values for these Assets Carousel properties: - Title Title of the carousel. - Subtitle A subtitle that displays after the title of the carousel. - Cards to display The number of API cards to display in the carousel. The carousel can display a minimum of three cards and a maximum of fifteen cards. If the number of cards to display is five and the portal has only three APIs, then the carousel displays three cards instead of five. ### Change the Titles in the API Carousel You can modify the title and subtitle that appear in the API Carousel. You can also show the number of cards in the subtitle by entering the `{numberOfAssets}` variable in the **Subtitle** field. For example, **Latest APIs added {numberOfAssets}**. The following image shows the subtitle as **Latest APIs added 5** because the variable displays the number selected in the **Cards to display** field. ![Image of Asset Carousel Subtitle option](/mulesoft/current/en-us/api-experience-hub/_images/aeh-builder-carousel-subtitle.png) 1. On the **Manage your API portal** page, click **Preview and publish your portal**. 2. On the **Home** page, click the **Asset Carousel** area to edit the Assets Carousel component. 3. Complete the fields and include any necessary information. 4. Click the **Preview** button to review your changes. 5. Click the **Publish** button to publish your changes. ### Change the Number of Cards to Display in the API Carousel To change the number of API cards that display in the API Carousel: 1. On the **Manage your API portal** page, click **Preview and publish your portal**. 2. On the **Home** page, click the **Asset Carousel** area to edit the Assets Carousel component. 3. In the **Cards to display** field, select a number from three to fifteen from the list. 4. Click the **Preview** button to confirm your changes. 5. Click the **Publish** button to publish your changes. ## Assets Catalog The API Catalog component offers API consumers an interactive way to explore all the available APIs in an API portal. The API Catalog shows API cards in rows and columns, divided into pages, and shows controls to search the displayed APIs by categories and search terms. Each card shows an API. With the catalog, users can view and explore large numbers of API versions. Select the properties to show in the API Catalog: - Show filter display layout: - Dropdown below search box - Dropdown beside search box - Side panel - Show asset type filter - Show categories filter - Show category pills - Show asset layout button ## Existing User Request Access The Existing User Request Access component enables existing Salesforce users to access the portal by entering their username and clicking a button to request access. Enter the properties to show in the component: - Label - Placeholder - Redirect to - Button Label ## Search Box The API Experience Hub Search Box component enables users to search for content that exists in Salesforce Experience Cloud (such as knowledge articles, support cases, and announcements) and content that exists in Anypoint Platform (such as APIs and client applications). Knowledge articles, support cases, and announcements are currently not available. ## Search Results The API Experience Hub Search Results component shows results after a user enters a search in the Search Box component. ## See Also - [Experience Builder](https://help.salesforce.com/s/articleView?id=sf.community_designer_overview.htm&type=5) - [https://docs.mulesoft.com/exchange/](https://docs.mulesoft.com/exchange/)