IgniteUI · zdrawku · Jun 5, 2025 · Jun 2, 2025 · Jun 2, 2025 · Jun 2, 2025
diff --git a/en/docfx.json b/en/docfx.json
@@ -13,6 +13,7 @@
                     "using-data-in-your-app/**.md",
                     "ui-kits/**.md",
                     "ai/**.md",
+                    "sdk/**.md",
                     "on-premises/**.md",
                     "toolbox/**.md",
                     "how-to/**.md",

diff --git a/en/generate-app/generate-app-overview.md b/en/generate-app/generate-app-overview.md
@@ -100,7 +100,8 @@ Currently, the App Builder supports code generation for Angular and Blazor. Belo
 | Reveal Dashboard       | :heavy_check_mark: | :x:                | :x:                |
 
 
-> Note: Partially generated components are marked with :construction:. See [Blazor Support](../blazor-support.md#known-issues-and-limitations) for more details on the known issues and limitations for Blazor components.
+> [!NOTE]
+> Partially generated components are marked with :construction:. See [Blazor Support](../blazor-support.md#known-issues-and-limitations) for more details on the known issues and limitations for Blazor components.
 
 ## Additional Resources
 

diff --git a/en/generate-app/run-application-locally.md b/en/generate-app/run-application-locally.md
@@ -5,21 +5,16 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k
 ---
 # Run Application Locally
 
-> [!NOTE]
-><b>The application files can be downloaded as a package and then run in your preferred IDE.
-
-
-### In this article:
-* <a href="#run-the-app-locally">Run the app locally</a>
-
 ### Run the app locally
 To finally develop the app, you don't need to copy and paste code. Instead, use the generate app button in the toolbar. This quickly creates a package with your Angular or Blazor application (depend on what framework is selected in the Platform picker dropdown) that can be downloaded. To run this app, open up the folder in an IDE like Visual Studio Code. 
 
 * Make sure you have Node.js installed. <br>
 * Then in the console, type `npm install` to install the dependencies. It may take a while to install all the necessary packages. <be>
 * Once that is done, type `npm start` to compile and launch the app.<br>
 
-
+> [!NOTE]
+><b>The application files can be downloaded as a package and then run in your preferred IDE.
+
 <img src="../images/App-VSCode-Indigo-Design-App-Builder2.PNG" srcset="../images/App-VSCode-Indigo-Design-App-Builder @2x.png 2x" />
 <p style="text-align:center;">An application running in VSCode</p>
 

diff --git a/en/getting-started.md b/en/getting-started.md
@@ -6,13 +6,30 @@ _keywords: App builder, Indigo Design, Infragistics
 
 # Getting started with App Builder
 
-### In this article:
-* <a href="#launch-app-builder">Launch App Builder</a>
-* <a href="#getting-the-code">Getting the code</a>
-* <a href="#running-the-generated-app-locally">Running the app locally</a>
-
-> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0]
-
+App Builder is a low-code platform that lets you quickly turn designs into functional web apps—without writing all the code. Start from scratch, use templates, or import Figma designs, then visually build your app with drag-and-drop components, real data connections, and layout customization. It generates production-ready code for Angular, React, Blazor, and Web Components, with one-click export or deployment to GitHub or Azure.
+## How Everything Works Together
+
+The diagram below gives you a high-level overview of how App Builder fits into the broader ecosystem of design and development tools:
+
+<img class="box-shadow" src="images/platform-ecosystem.png" />
+<p style="width: 100%; text-align:center;">Platform Ecosystem</p>
+
+### In Simple Terms:
+
+* **Design System → UI Kits & Adapters**:
+  It starts with a design system, implemented as UI kits (like Indigo.Design for Figma). Adapters translate your design into a format App Builder can use.
+* **App Builder + Integrations**:
+  You use App Builder to visually create your app. It supports REST data, Reveal SDK widgets (for dashboards), and Slingshot tasks (for project management).
+* **Common App Model**:
+  Everything flows into a central **Common App Model**—a unified format that describes your app, regardless of how you started (design import or manual build).
+* **Code Generation (Codegen)**:
+  The model is then used by the **code generator**, which outputs real, usable code for:
+  * **Angular**
+  * **React**
+  * **Web Components**
+  * **Blazor**
+* **Deployment Targets**:
+  Finally, the generated code can be deployed directly to platforms like **GitHub** or **Microsoft Azure**.
 
 ## Launch App Builder
 To access App Builder, navigate to [https://appbuilder.dev](https://appbuilder.dev) and sign in. Alternatively, you can launch App builder directly by visiting [https://my.appbuilder.dev](https://my.appbuilder.dev). You will need an active trial or paid subscription to create and edit apps.
@@ -25,7 +42,9 @@ There are thee ways in which you can create a new app from the "Create new appli
 4. **Import design** - if you have an existing design file, created using the Indigo.Design UI kit for Figma or Sketch, you can use this as a starting point for your apps. To do this, get our Indigo.Design system, which includes plugins to publish your design, UI kits, and sample design files.
 
 <br>
-> Note: Due to the differences between the absolute layout in Sketch and the Flex layout in the App Builder, some additional adjustments may be needed after parsing your Sketch file.
+
+> [!NOTE]
+> Due to the differences between the absolute layout in Sketch and the Flex layout in the App Builder, some additional adjustments may be needed after parsing your Sketch file.
 <br>
 
 <img src="./images/getting-Started-new-project-dialog-Indigo-Design-App-Builder.png" srcset="./images/getting-Started-new-project-dialog-Indigo-Design-App-Builder-@2x.png 2x" />
@@ -36,7 +55,6 @@ Note, that once in the App Builder, users are enabled to easily switch between t
 <img src="./images/Indigo-Design-side-menu.png" srcset="./images/Indigo-Design-side-menu-@2x.png 2x" />
 <p style="text-align:center;">Side menu</p>
 
-
 ## Getting the code
 The App Builder always displays a live-running web application both on the design surface and in the preview window. The underlying code and application model are updated in real time as you make changes to the application in the design surface. You can view the generated application code at any time in the preview window and you can also download the generated application at any time as a complete application code repository, which you can then open in a code editor of your choice. Then you can build and run the application you've designed using the App Builder locally on your machine and you can make additional modifications on the generated code.
 
@@ -90,9 +108,15 @@ In order to run the downloaded application, the following prerequisites need to
 </div>
 <div class="divider--half"></div>
 
+## Video tutorial
+
+
+> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0]
+
 ## Report an issue or send feedback
 
 [This repository](https://github.com/IgniteUI/app-builder) is intended for issues and feature requests submission, as well as for general product discussions, questions and any feedback that you want to share. You can also <a href="mailto:appbuilder@infragistics.com">send us an email</a>.
+
 ## Additional Resources
 <div class="divider--half"></div>
 

diff --git a/en/images/how-to-create-angular-host-app.png b/en/images/how-to-create-angular-host-app.png
diff --git a/en/images/platform-ecosystem.png b/en/images/platform-ecosystem.png
diff --git a/en/indigo-design-app-builder-components.md b/en/indigo-design-app-builder-components.md
@@ -6,17 +6,17 @@ _keywords: App builder components, Indigo Design, Infragistics
 
 # App Builder Components
 
+The **Toolbox** tab on the left let you cycle through the list of all available [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) components, as well as some App Builder general components, such as absolute, row, column layout and views container. The search input on the top of the components list makes it easy to find a particular component. All of the components are conveniently distributed into groups based on their usage. The grayed-out components have still not been added, and are thus disabled, but soon will be available in next updates. Components can be added to the **Design Canvas** by dragging and dropping them from the **Toolbox**.
+
+Using App Builder Components:
 <section class="video-container">
     <div>
         <div class="video-container__item">
             <iframe src="https://www.youtube.com/embed/omlSzOuvFlM" frameborder="0" allowfullscreen></iframe>
         </div>
-        <p>Using App Builder Components</p>
     </div>
 </section>
 
-The **Toolbox** tab on the left let you cycle through the list of all available [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) components, as well as some App Builder general components, such as absolute, row, column layout and views container. The search input on the top of the components list makes it easy to find a particular component. All of the components are conveniently distributed into groups based on their usage. The grayed-out components have still not been added, and are thus disabled, but soon will be available in next updates. Components can be added to the **Design Canvas** by dragging and dropping them from the **Toolbox**.
-
 ## Quick add components 
 
 You can also use our quick-add feature by using the keyboard shortcut ctrl+E or cmd+E on a macs to search and add components. Just remember "E" stands for everything. The quick-add keeps track of recently used components making it faster to add components you use frequently. Double-clicking a component in the **Toolbox** will also add it to the **Design Canvas**.  

diff --git a/en/sdk/sdk.md b/en/sdk/sdk.md
@@ -0,0 +1,17 @@
+# Getting Started with the App Builder SDK
+
+## SDK Overview
+The App Builder SDK provides a comprehensive toolkit for integrating both front-end and back-end capabilities into your applications. To begin, [you can use the Help Documentation](https://github.com/IgniteUI/appbuilder-sdk-sample/blob/main/Documentation/Consuming-AB-SDK-all-in-one-doc.md) and create an Angular host application that consumes the front-end SDK package, enabling seamless UI integration. On the server side, you can build a custom backend using the App Builder Backend SDK, with support for development environments like Visual Studio Code and Visual Studio. These foundational steps ensure that your application is fully equipped to leverage the SDK’s capabilities from both ends.
+
+<img class="box-shadow" src="../images/how-to-create-angular-host-app.png" />
+<p style="width: 100%; text-align:center;">Running the SDK</p>
+
+The documentation further covers the Authentication and authorization key components of the SDK setup. You can configure [OpenID authentication](../on-premises/auth-with-openid-connect-o-auth.md) to allow users to log in using external identity providers, offering flexibility beyond the default IAM provider. Additionally, the SDK supports external authentication flows such as Authorization Code + PKCE, and allows the host application to manage authentication directly. For more advanced scenarios, you can customize the IAuthUserService and IPermissionsService interfaces to implement tailored logic for user roles and permissions. Optional guides are available to help configure backend endpoints that enforce role-based access control, ensuring secure and scalable integration.
+
+## Additional Resources
+<div class="divider--half"></div>
+
+* [App Builder Interface Overview](../interface-overview.md)
+* [Single Page And Navigation](../single-page-apps-and-navigation.md)
+* [App Builder Components](../indigo-design-app-builder-components.md)
+* [Running Desktop App](../running-desktop-app.md)