Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions en/ai/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ The generative AI-powered view generation in App Builder provides a powerful alt
**Step 3**: Apply an action using the plus button in the Preview section:
- **Add Content** – Appends the content to the end of the current view.
- **Create New View** – Adds the newly generated content to a separate View page.
- **Replace Content** – Replaces the selected component in the current view with the generated output. Simply select a section/layout/component that you want to transform into something else, and open the GenAI Dialog agan, place your prompt and click on the Add button -> Replace Content option.
- **Replace Content** – Replaces the selected component in the current view with the generated output. Simply select a section/layout/component that you want to transform into something else, and open the GenAI Dialog again, place your prompt and click on the Add button -> Replace Content option.

**Example of replacing an element with an input of type "search," specifying a placeholder value and a width of 200px:**

Expand Down Expand Up @@ -147,7 +147,7 @@ And here is the App Preview:
### Useful Patterns for More Precise Results

> [!NOTE]
> Consider these patterns as recomendations, you can always use the regular prompt descriptions phrasing.
> Consider these patterns as recommendations; you can always use regular prompt descriptions phrasing.

#### Pattern 1: Combined Layout and Component Prompts
For more structured outputs that combine layout and detailed component configurations, users can specify an overall screen design with multiple sections. For instance:
Expand All @@ -164,7 +164,7 @@ row layout
switch: remember me
button: login
row layout
text: Dont have an account?
text: Don't have an account?
link: sign up
image
```
Expand Down
4 changes: 2 additions & 2 deletions en/change-log.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k
# App Builder - Change Log

> [!NOTE]
> Latest update was made on 23th of September, 2025. [LEARN MORE in the AppBuilder blog](https://www.appbuilder.dev/blog)
> Latest update was made on 23rd of September, 2025. [LEARN MORE in the AppBuilder blog](https://www.appbuilder.dev/blog)

## September 2025 Release
### Features
Expand Down Expand Up @@ -404,7 +404,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k

### IMPROVEMENTS
- **Sketch UI Kit Improved Theming Support** - The light/dark mode toggle that changes the surface color now affects how gray colors are set up - as a derivative of black or white.
- **UI Kits Version Check updates** - Now matching `<major>.<minor>` for consistency between parser dll and symbol. `<patch>` will be ignored and wont throw an error if the symbol version is higher than the parser version (#13942)
- **UI Kits Version Check updates** - Now matching `<major>.<minor>` for consistency between parser dll and symbol. `<patch>` will be ignored and won't throw an error if the symbol version is higher than the parser version (#13942)

### MAINTENANCE UPDATES & BUG FIXES
**Including, but not limited to:**
Expand Down
6 changes: 3 additions & 3 deletions en/design-to-code-story.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: App Builder - Design-to-Code
_description: App Builder enables import your Sketch, Adobe XD and Figma designed files
_description: App Builder enables you to import your Sketch, Adobe XD and Figma designed files
_keywords: App Builder, Web App Builder, Figma design, Sketch import
---

Expand Down Expand Up @@ -55,8 +55,8 @@ Below are the 4 simple steps to get from Design to Code with the App Builder wit

The plugin will help you to publish your designs into App Builder. You can download it by following these steps:
1. Open App Builder
2. Click on "Crete new application"
3. Click on "Get assets for.."
2. Click on "Create new application"
3. Click on "Get assets for..."

<img class="box-shadow" src="./images/assets-download.PNG" />
<p style="width: 100%; text-align:center;">Available assets</p>
Expand Down
4 changes: 2 additions & 2 deletions en/generate-app/generate-app-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k
# Generate App

> [!NOTE]
><b>The applications, designed in Ignite UI App Builder can be downloaded or directly uploaded to a GitHub repository.
> The applications designed in Ignite UI App Builder can be downloaded or directly uploaded to a GitHub repository.

<section class="video-container">
<div>
Expand All @@ -19,7 +19,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k

App Builder with Angular code generation has been in the market for a few months now, but with .NET 6 release we launched the Blazor Code Generation and as of today we do support Web Components code generation as well.

With the Platform picker dropdown, located in the navigation bar just next to the `Publish to Github` and `Preview` action buttons. Choose the `Blazor Server`/`Blazor Web Assembly` option to generate code for Blazor, or `Angular` to see a preview of the generated app and code. `Web Components` option is also available.
With the Platform picker dropdown, located in the navigation bar just next to the `Publish to Github` and `Preview` action buttons, choose the `Blazor Server`/`Blazor Web Assembly` option to generate code for Blazor, or `Angular` to see a preview of the generated app and code. The `Web Components` option is also available.

<img class="box-shadow" src="../images/generate-code.PNG" />
<p style="text-align:center;">Pick platform for code generation</p>
Expand Down
6 changes: 3 additions & 3 deletions en/generate-app/run-application-locally.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k
# Run Application Locally

### 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.
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 (depending 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>
Expand All @@ -16,9 +16,9 @@ To finally develop the app, you don't need to copy and paste code. Instead, use
><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>
<p style="text-align:center;">An application running in VS Code</p>

The App Builder allows you to design your applications visually using professional grade Ignite UI components, and then you are able to generate the as Angular or Blazor application applications that you can continue developing in your IDE of choice. In the end, you are guaranteed that what you designed in the App Builder design surface looks exactly the same when the app is generated and built. Don't forget to share your feedback using the feedback button. We look forward to hearing about your experience and also about what features are valuable to you as we move forwards to our next release milestones.
The App Builder allows you to design your applications visually using professional grade Ignite UI components, and then you are able to generate them as Angular or Blazor applications that you can continue developing in your IDE of choice. In the end, you are guaranteed that what you designed in the App Builder design surface looks exactly the same when the app is generated and built. Don't forget to share your feedback using the feedback button. We look forward to hearing about your experience and also about what features are valuable to you as we move forward to our next release milestones.


## Additional Resources
Expand Down
2 changes: 1 addition & 1 deletion en/generate-app/upload-application-to-github.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Once you log in with your GitHub account, you should authorize Indigo.Design to
When the upload process is done, users can apply changes to the GitHub repo from inside the App Builder or click to "View it on GitHub" and see the updated files in GitHub.

<img class="box-shadow" src="../images/App-VSCode-Indigo-Design-App-Builder2.PNG" srcset="../images/App-VSCode-Indigo-Design-App-Builder2.png 2x" />
<p style="text-align:center;">An application running in VSCode</p>
<p style="text-align:center;">An application running in VS Code</p>

## GitHub integration features

Expand Down
10 changes: 5 additions & 5 deletions en/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ The diagram below gives you a high-level overview of how App Builder fits into t
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.

## Create new app
There are thee ways in which you can create a new app from the "Create new application" dilaog:
There are three ways in which you can create a new app from the "Create new application" dialog:

1. **Sample apps** - the getting started apps will help you explore applications that have been created using the App Builder and also allow you to modify them in your own user space. They are also a good source for you to preview generated code for a larger application without having to create your own app from scratch. If you use the App Builder for first time, we recommend to use the sample app option as a starting point. This is the quickest way to onboard yourself with the awesome features of the tool and to start building your application.
2. **App layouts** - start a new app from scratch, benefiting from a predefined layouts. You will also find the the option to create an app based on a blank template from here.
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.
2. **App layouts** - start a new app from scratch, benefiting from predefined layouts. You will also find the option to create an app based on a blank template from here.
3. **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>

Expand All @@ -50,7 +50,7 @@ There are thee ways in which you can create a new app from the "Create new appli
<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" />
<p style="text-align:center;">New project dialog</p>

Note, that once in the App Builder, users are enabled to easily switch between their active applications or go back to their workspace in App Builder from the in-app side menu at design time without leaving the App Builder.
Note that once in the App Builder, users are enabled to easily switch between their active applications or go back to their workspace in App Builder from the in-app side menu at design time without leaving the App Builder.

<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>
Expand All @@ -63,7 +63,7 @@ The App Builder always displays a live-running web application both on the desig


<img src="./images/App-VSCode-Indigo-Design-App-Builder.png" srcset="./images/App-VSCode-Indigo-Design-App-Builder@2x.png 2x" />
<p style="text-align:center;">Code of a generated application and then run in VScode</p>
<p style="text-align:center;">Code of a generated application run in VS Code</p>


> [!NOTE]
Expand Down
6 changes: 3 additions & 3 deletions en/interactions.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k
# Interactions

> [!NOTE]
><b>The Interactions feature of the App Builder enables users to define particular interactions between views and components, such as Navigate to another view, Show or Hide and Open or Close an app component.
> The Interactions feature of the App Builder enables users to define particular interactions between views and components, such as Navigate to another view, Show or Hide and Open or Close an app component.



Expand Down Expand Up @@ -37,15 +37,15 @@ In order to add an interaction, first select the component that will trigger the
![navigate-to-interaction](./images/navigate-to-interaction.gif)
<p style="text-align:center;">"Navigate to" interaction</p>

See [Navigation with Route parameters](guide-to-variables-in-app-builder/route-parameters-navigation.md) for details how to create enhanced navigation including parameters in the navigatin route.
See [Navigation with Route parameters](guide-to-variables-in-app-builder/route-parameters-navigation.md) for details on how to create enhanced navigation including parameters in the navigation route.

## Open/Close interaction
The Open/Close interaction targets only overlay components, such as Dialog. This means that in order to use it, initially a triggering component, e.g. a button and then an overlay component, e.g. a Dialog, have to be added in the design area. Using the button and dialog example, next step is to select the button, go to Interactions panel and select Open/Close interaction. Once the trigger and the overlay are available, the Open/Close interaction is unlocked and the user can pick the Dialog to be opened upon selection of the button.

![open-close-interaction](./images/open-close-interaction.gif)
<p style="text-align:center;">"Open/Close" interaction</p>

Note that once a Dialog component is added, an overlay notification will be appear next to the name of the active view in the design area. By clicking on the the overlay, just pick up one of the available overlays and it will be actived. Then, it can be edited according to your application scenario.
Note that once a Dialog component is added, an overlay notification will appear next to the name of the active view in the design area. By clicking on the overlay, just pick one of the available overlays and it will be activated. Then, it can be edited according to your application scenario.


## Show/Hide
Expand Down
4 changes: 2 additions & 2 deletions en/preview-code.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k
</div>
</section>

Previewing generated code and downloading your work as an Angular app is the final step after designing one application. The design and development user story will be completed once the application is generated with all styiling and layout properties.
Previewing generated code and downloading your work as an Angular app is the final step after designing one application. The design and development user story will be completed once the application is generated with all styling and layout properties.

## Preview Code

The preview mode allows you to interact with your design as-if it's a running app. For instance, you can resize the viewport to see how the positioning for components behave. But the real value it offers to developers is to preview the app code that is about to be generated. To see this, you can toggle the code-view ON and see it side-by-side with the design. It's in read-only mode, but will help you review the quality of code produced.
The preview mode allows you to interact with your design as if it's a running app. For instance, you can resize the viewport to see how the positioning for components behave. But the real value it offers to developers is to preview the app code that is about to be generated. To see this, you can toggle the code-view ON and see it side-by-side with the design. It's in read-only mode, but will help you review the quality of code produced.

![view-code-Indigo-Design-App-Builder](./images/view-code-Indigo-Design-App-Builder.gif)
<p style="text-align:center;">View code in the Preview mode</p>
Expand Down
2 changes: 1 addition & 1 deletion en/share-preview-edit-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ If you share **app preview link** from your personal workspace with a **signed-i
> Mock data will always be used for non-workspace member

#### Edit link
If you share **app edit link** from your personal workspace with a **signed-in user**, the latter wont have access to edit and will receive _You don't have access to edit_ message.
If you share **app edit link** from your personal workspace with a **signed-in user**, the latter won't have access to edit and will receive _You don't have access to edit_ message.

<img class="box-shadow" src="./images/share-edit-and-preview/app-from-personal-workspace-signed-in-edit-link.PNG" />
<p style="width: 100%; text-align:center;">You don't have access to edit</p>
Expand Down
12 changes: 6 additions & 6 deletions en/using-data-in-your-app/form-builder.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ App Builder’s Form Builder functionality enables developers to design HTML for

## Key Features of Form Builder
### Automatic Form generation from data endpoints
When a developer drags a data endpoint onto the design surface, a set of form components is automatically generated based on the endpoints properties.
When a developer drags a data endpoint onto the design surface, a set of form components is automatically generated based on the endpoint's properties.
- `POST` and `PUT` methods create input fields for data submission.
- Basic event handling, like `OnSuccess` and `OnError` interactions, is automatically configured.

<img class="box-shadow" src="../images/using-data-in-your-app/automatinc-form-creation.gif" />
<img class="box-shadow" src="../images/using-data-in-your-app/automatic-form-creation.gif" />
<p style="text-align:center;">Automatic Form creation</p>

### Automatic Form controls creation and mapping
Form controls are created based on each fields data type and metadata, ensuring intuitive inputs and labels (e.g., date fields use *date pickers*, boolean fields use *switches*). Developers retain full control to modify components, add validations, or adjust labels directly in the properties panel.
Form controls are created based on each field's data type and metadata, ensuring intuitive inputs and labels (e.g., date fields use *date pickers*, boolean fields use *switches*). Developers retain full control to modify components, add validations, or adjust labels directly in the properties panel.

<img class="box-shadow" src="../images/using-data-in-your-app/automatinc-form-controls.png" />
<img class="box-shadow" src="../images/using-data-in-your-app/automatic-form-controls.png" />
<p style="text-align:center;">Automatic Form control creation</p>

### Form modification
Expand All @@ -36,7 +36,7 @@ In App Builder’s Preview mode, users can interact with forms to see:
- Form submission, with notifications indicating success or validation errors.

<img class="box-shadow" src="../images/using-data-in-your-app/setting-up-variables-and-form-initial-state.gif" />
<p style="text-align:center;">Setting up variables and Form initial state</p>
<p style="text-align:center;">Setting up variables and form initial state</p>


> [!NOTE]
Expand Down Expand Up @@ -96,7 +96,7 @@ The following known issues and limitations apply to the initial release of Form
- **`igx-hint` Element in Preview**: The `igx-hint` element is currently excluded from preview as it is not generated in the final code. Future updates may add support for message display functionality.
- **Calendar** not showing in generated app when in a form.
- **Reset button click behavior** - it clears the form for React-generated projects. Instead of reverting to initial values, the form controls get empty values.
- **Disabled property** will not be rendered for input in an angular generated form.
- **Disabled property** will not be rendered for input in an Angular-generated form.

## Additional Resources

Expand Down
Loading