SITES-15210: Added AEM Labs docs

gatsby-config.js

@@ -19,15 +19,15 @@ module.exports = {
         path: "/",
       },
       {
-        title: "Overview",
+        title: "Getting started",
         path: "/overview/"
       },
       {
         title: "Guides",
         path: "/guides/"
       },
       {
-        title: "Extensible Services",
+        title: "Extensible services",
         menu: [
           {
             title: "AEM Content Fragments Console",
@@ -87,6 +87,20 @@ module.exports = {
         title: "UI Extension Publication and Management",
         path: "/guides/publication/"
       },
+      {
+        title: "Experiment with AEM Labs",
+        path: "/guides/aem-labs/",
+        pages: [
+          {
+            title: "Getting Started",
+            path: "/guides/aem-labs/getting-started/"
+          },
+          {
+            title: "Feature Highlights",
+            path: "/guides/aem-labs/feature-highlights/"
+          },
+        ]
+      },
       // Services
       {
         title: "Extensible Services",

src/pages/guides/aem-labs/feature-highlights/index.md

@@ -0,0 +1,61 @@
+---
+title: AEM Labs feature highlights
+description: Explore the features of AEM Labs
+contributors:
+  - AdobeDocs/uix
+---
+# AEM Labs Feature Highlights
+
+## Navigate Extensions
+[AEM Labs](https://experience.adobe.com/aem/extension-manager) provides a centralized listing of extensions, accessible when you select a specific program and environment. This listing gives a comprehensive view of all available extensions for your organization, complete with their statuses, such as `Published` or `Draft`.
+![List extensions](list.png)
+
+## Enabling/Disabling Extensions
+[AEM Labs](https://experience.adobe.com/aem/extension-manager) gives the ability to enable or disable extensions on a per-instance basis. This means you can easily turn extensions on or off for specific AEM instances, granting you the flexibility to adapt features as needed. The process is straightforward – just toggle a switch in the extensions view. 
+![Enable extension](toggle.png)
+
+## Access Experimental Features
+[AEM Labs](https://experience.adobe.com/aem/extension-manager) opens the door for developers to access AEM innovations through 1st-party extensions crafted by Adobe. These extensions bear the distinct label `Developed by Adobe`. 
+![1st-party extension](1st-party-extension.png)
+This means you can confidently explore and experiment with the latest features and enhancements, ensuring you stay at the forefront of AEM's capabilities without compromising the core releases.
+
+## Configuring Extension Parameters
+[AEM Labs](https://experience.adobe.com/aem/extension-manager) simplifies the process of adjusting extension configurations, specifically web parameters, without the need for repetitive extension deployments. Here's how to configure extension parameters:
+
+1. Click `Gears` icon in the `Action` column
+   ![Configure the extension](config-action.png)
+3. Click `Add variable` button
+4. Define the `Key` and corresponding `Value` for your parameter.
+   ![Configuration screen](configuration.png)
+5. With your parameters configured, you can now access these values using the [UIX SDK](https://github.com/adobe/uix-sdk) within your extension.
+
+This streamlined process allows you to fine-tune your extension settings without the hassle of repeated deployments, putting control and customization in your hands.
+
+## Extension Preview and Sharing
+[AEM Labs](https://experience.adobe.com/aem/extension-manager) provides a safe playground to preview extensions before enabling them for the entire environment and the ability to easily share these previews.
+
+### Preview Extensions
+To preview extensions without installing them, simply click the preview icon found in the `Action` column. This action will open the Content Fragment Console, allowing you to explore the extension within the selected environment.
+![Preview extension](preview.png)
+
+### Share with Teammates
+You can easily share these previews with your team by selecting `Copy shareable link` from the `Action` column. 
+![Copy link](copy-link.png)
+
+When your teammates open the link, they'll be prompted to choose a program and environment for previewing the selected extension. 
+![Preview share](preview-share.png)
+
+This collaborative feature ensures that your team can collectively evaluate and experiment with extensions before making them fully operational.
+
+## BYO (Bring Your Own) Extensions
+With [AEM Labs](https://experience.adobe.com/aem/extension-manager), you can register your extensions into the system and start using them, regardless of where they were initially deployed. Here's how to bring your own extensions into [AEM Labs](https://experience.adobe.com/aem/extension-manager):
+
+1. Open [AEM Labs home page](https://experience.adobe.com/aem/extension-manager). From there, click on the `Bring Your Own Extension` option.
+2. Fill out the required fields, with a particular focus on providing the `Extension URL`.
+![BYO extension](byo-extension.png)
+
+An important note to keep in mind: Your extension can be hosted anywhere, as long as it utilizes the [UIX SDK Guest library](https://github.com/adobe/uix-sdk#usage---guests). 
+
+This flexibility ensures that you can seamlessly incorporate your own extensions into the AEM environment, enhancing your experience with your unique tools and features.
+
+

src/pages/guides/aem-labs/getting-started/index.md

@@ -0,0 +1,58 @@
+---
+title: Getting started with AEM Labs
+description: Instructions on how to access AEM Labs
+contributors:
+  - AdobeDocs/uix
+---
+# Getting Started with AEM Labs
+This guide will walk you through the initial steps to get started with AEM Labs. You will learn how to access the AEM Labs platform and understand the role-based permissions to ensure a smooth start.
+
+## Accessing AEM Labs
+To access AEM Labs, follow these steps:
+
+1. **URL**: Open your web browser and navigate to the https://experience.adobe.com/aem/extension-manager 
+
+2. **Login**: Use your organization's login credentials to sign in. If you do not have login credentials, contact your system administrator to obtain the necessary access.
+
+3. **Home Page**: After successfully logging in, you will be directed to the AEM Labs home page. Here, you'll find some useful information and extension statistics for your organization.
+![Home Page](home-page.png)
+
+## Role-Based Permissions
+AEM Labs utilizes role-based permissions to control access to various features and functionalities. Here are the defined roles and their associated permissions:
+
+- **Customer**: An enterprise customer who discovers AEM extensions.
+
+- **Developer**: A user in a customer organization who develops and tests AEM extensions.
+
+- **System Administrator**: An enterprise admin who manages the enterprise org and can install extensions on production environments.
+
+## Permissions Matrix
+### Production Environments
+
+| Action | Customer | Developer | System Administrator| 
+|---|---|---|---|
+| Can see the list of available extensions | ✅ | ✅ | ✅ |
+| Can enable/disable extensions | ❌ | ❌ | ✅ |
+| Can configure extensions | ❌ | ❌ | ✅ |
+| Can preview extensions | ✅ | ✅ | ✅ |
+| Can add BYO extensions | ❌ | ✅ | ✅ |
+
+### Non-production Environments
+By non-production we mean `dev`, `stage` and `rde` environments.
+
+| Action | Customer | Developer | System Administrator| 
+|---|---|---|---|
+| Can see the list of available extensions | ✅ | ✅ | ✅ |
+| Can enable/disable extensions | ❌ | ✅  | ✅ |
+| Can configure extensions | ❌ | ✅  | ✅ |
+| Can preview extensions | ✅ | ✅ | ✅ |
+| Can add BYO extensions | ❌ | ✅ | ✅ |
+
+## Extensions Listing
+Once you're on the [AEM Labs](https://experience.adobe.com/aem/extension-manager) home page, you can explore the list of AEM programs and environments available for your organization. Go ahead and select a program and an environment to display the available extensions.
+
+For a deep dive inot AEM Labs' capabilities, head to the [Feature Highlights](feature-highlights) section.
+
+## Contact and Support
+
+If you encounter issues, need assistance, or want to provide feedback, please use `Beta Feedback` button, located in the top bar on the [AEM Labs' home page](https://experience.adobe.com/aem/extension-manager) or email us at uix@adobe.com.

src/pages/guides/aem-labs/index.md

@@ -0,0 +1,20 @@
+---
+title: Explore AEM Labs
+description: Explore, enable and configure UI Extensions
+contributors:
+  - AdobeDocs/uix
+---
+# Welcome to AEM Labs
+AEM Labs is a playground, designed for developers seeking creative freedom within AEM. Within AEM Labs, you have the can to enable or disable extensions on a per-instance basis, access Adobe's first-party extensions, and much more.
+
+<DiscoverBlock slots="link, text"/>
+
+[Getting Started](getting-started)
+
+Instructions on how to access AEM Labs
+
+<DiscoverBlock slots="link, text"/>
+
+[Feature Highlights](feature-highlights)
+
+Explore the features of AEM Labs

src/pages/guides/index.md

@@ -44,3 +44,9 @@ Learn how to implement, test and deploy your own UI Extensions with Adobe App Bu
 [UI Extension Publication and Management](publication)
 
 Know how to bring your extension to users and manage it
+
+<DiscoverBlock slots="link, text"/>
+
+[Experiment with AEM Labs](aem-labs)
+
+Explore, enable and configure UI Extensions

src/pages/index.md

@@ -9,81 +9,93 @@ contributors:
 
 # UI Extensibility
 
-UI Extensibility allows 3rd party developers to customize and add their own logic to Adobe Experience Cloud services.
+UI Extensibility allows 3rd-party developers to customize and add their own logic to Adobe Experience Cloud services.
 
 ## Break the Ice
 
-UI extensions are JavaScript applications built with [Adobe App Builder](https://developer.adobe.com/app-builder/docs/overview/) that may be embedded in UI Applications running under [Adobe Experience Cloud](https://experience.adobe.com/) unified shell. Adobe UI Services and UI Extensions implement a two-way communication protocol that allows to exchange of data, invoking actions, and rendering additional visual blocks.
+UI extensions are JavaScript applications built with [Adobe App Builder](https://developer.adobe.com/app-builder/docs/overview/) that can be embedded in UI Applications running under [Adobe Experience Cloud](https://experience.adobe.com/) unified shell. Adobe UI Services and UI Extensions implement a two-way communication protocol that enables the exchange of data, the invocation of actions, and the rendering of additional visual blocks.
 
 <DiscoverBlock slots="heading, link, text"/>
 
-## Get to Know
+## Getting started
 
-[Why I Need It](overview/reason)
+[What are UI Extensions?](overview/app-builder)
 
-Know why UI Extensibility may be a good solution for you
+Learn how UI Extensibility and App Builder are related to each other
 
 <DiscoverBlock slots="link, text"/>
 
-[How It Works](overview/design)
+[What UI extensions can do?](overview/reason)
 
-Explore how UI Extensibility works
+Know why UI Extensibility may be a good solution for you
 
 <DiscoverBlock slots="link, text"/>
 
-[How to Get Access](guides/get-access)
+[How it works?](overview/design)
 
-Discover what is needed to use UI Extensibility
+Explore how UI Extensibility works
 
 <DiscoverBlock slots="link, text"/>
 
-[App Builder and UI Extensibility](overview/app-builder)
+[How to get access?](guides/get-access)
 
-Learn how UI Extensibility and App Builder are related to each other
+Discover what is needed to use UI Extensibility
 
 <DiscoverBlock slots="link, text"/>
 
 [FAQ](overview/faq)
 
 Find answers to most frequent questions about UI Extensibility
 
-## Discover
+## Guides
 
 <DiscoverBlock slots="heading, link, text"/>
 
-### Learn How to Create UI Extensions
+### Learn how to create UI extensions
 
-[UI Extensions Development Flow Overview](guides/development-flow/)
+[Create a new UI extension](guides/development-flow/)
 
-Know what to expect when create UI Extension.
+Know what to expect when create UI Extension
 
 <DiscoverBlock slots="link, text"/>
 
-[AEM Content Fragments Console Extensions Development Guide](services/aem-cf-console-admin/)
+[AEM Content Fragments console extension development guide](services/aem-cf-console-admin/)
 
-Get started with the development of extensions for AEM Content Fragments Console.
+Get started with the development of extensions for AEM Content Fragments console
 
 <DiscoverBlock slots="link, text"/>
 
-[AEM Content Fragments Console Developer Videos and Samples](https://experienceleague.adobe.com/docs/experience-manager-learn/cloud-service/developing/extensibility/content-fragments/overview.html)
+[AEM Content Fragments editor extension development guide](services/aem-cf-editor/)
 
-View helpful videos and step by step instructions on building extensions for AEM Content Fragments Console.
+Get started with the development of extensions for AEM Content Fragments editor
 
 <DiscoverBlock slots="heading, link, text"/>
 
-### Explore What to Extend
+### Explore extensible services
 
-[AEM Content Fragments Console Extension Points](services/aem-cf-console-admin/api/)
+[AEM Content Fragments console extension points](services/aem-cf-console-admin/api/)
 
-Learn extensibility possibilities in AEM Content Fragments Console.
+Learn extensibility options in AEM Content Fragments console
+
+<DiscoverBlock slots="link, text"/>
+
+[AEM Content Fragments editor extension points](services/aem-cf-editor/api/)
+
+Learn extensibility options in AEM Content Fragments editor
 
 <DiscoverBlock slots="heading, link, text"/>
 
 ### Publish
 
-[UI Extensions Management Guide](guides/publication/)
+[UI extensions publication guide](guides/publication/)
+
+Know how to deploy and publish UI Extensions for your organization
+
+### Experiment
+
+[AEM Labs guide](guides/aem-labs/)
 
-Know how to deploy and publish UI Extensions for your organization.
+Navigate your UI Extensions and create a unique setup for your AEM instance
 
 ## Collaborate