> For the complete documentation index, see [llms.txt](https://aurelia-ui-toolkits-1.gitbook.io/kendoui-bridge-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aurelia-ui-toolkits-1.gitbook.io/kendoui-bridge-docs/developers-tutorials/introduction.md).

# Introduction

*Application Developer tutorials*

## 4.1. Introduction

The collection of articles contained in this **App developers tutorials** help section, (*which begins with this article you are reading now*), presents six short tutorials describing the process of adding Aurelia KendoUI `autocomplete` component to an Aurelia application.

In order to cover all platforms and tooling choices currently supported by Aurelia, we show the above mentioned process applied to each of the [**navigation skeleton**](https://github.com/aurelia/skeleton-navigation) applications listed below.

* [**skeleton-esnext**](https://github.com/aurelia-ui-toolkits/kendo-tutorials.code-2.0/tree/master/skeleton-esnext/before)
* [**skeleton-typescript**](https://github.com/aurelia-ui-toolkits/kendo-tutorials.code-2.0/tree/master/skeleton-typescript/before)
* [**skeleton-esnext-aspnetcore**](https://github.com/aurelia-ui-toolkits/kendo-tutorials.code-2.0/tree/master/skeleton-esnext-aspnetcore/before)
* [**skeleton-typescript-aspnetcore**](https://github.com/aurelia-ui-toolkits/kendo-tutorials.code-2.0/tree/master/skeleton-typescript-aspnetcore)
* [**skeleton-esnext-webpack**](https://github.com/aurelia-ui-toolkits/kendo-tutorials.code-2.0/tree/master/skeleton-esnext-webpack/before)
* [**skeleton-typescript-webpack**](https://github.com/aurelia-ui-toolkits/kendo-tutorials.code-2.0/tree/master/skeleton-typescript-webpack/before)

Also, the above samples are all from the [**1.1.2**](https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2) release, to ensure the consistency across all samples; cloning the navigation skeleton from the [**master branch**](https://github.com/aurelia/skeleton-navigation) is generally bad practice which we just avoided.

Lastly we will use the KendoUI SDK installation method described in [**General comments**](https://aurelia-ui-toolkits.gitbooks.io/kendo-ui-library-installation-version-2-0/content/library-installation/general-comments.html) section of the [**KendoUI Library Installation**](http://aurelia-ui-toolkits.github.io/demo-kendo/#/installation) document.

### Tutorials organization

Each of the **original** navigation skeleton applications renders the same UI:

![](https://cloud.githubusercontent.com/assets/2712405/21910984/71d9f35e-d8ec-11e6-9b3b-a3a691318778.png)

\
 Image 2

The tutorials show how to add the Aurelia KendoUI bridge catalog's [`autocomplete`](http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/autocomplete-customizing-templates) sample where the actual code, building tools and internal organization of each sample varies across these six tutorials: The screenshot below depicts the **modified** navigation skeleton application "sporting" the added `Autocomplete` menu item

![](https://cloud.githubusercontent.com/assets/2712405/21911435/c664147a-d8ee-11e6-924b-f0ef23ccff05.png)

\
 Image 3

All such modified samples are stored in [**kendo-tutorials.code-2.0**](https://github.com/aurelia-ui-toolkits/kendo-tutorials.code-2.0) repository.