UI5 · petermuessig · Aug 12, 2026 · Aug 11, 2026
diff --git a/packages/databinding/steps/01/README.md b/packages/databinding/steps/01/README.md
@@ -1,27 +1,27 @@
 
-# Step 1: No Data Binding
+## Step 1: No Data Binding
 
 In this step, we create a basic application and simply place some text on the screen using a standard `sap.m.Text` control. The text in this control is a hard-coded part of the control's definition; therefore, this is not an example of data binding!
 
-## Preview
+### Preview
 
 ![The browser shows the text "Hi, my name is Harry Hawk"](assets/Tutorial_Data_Binding_Step_1_6d391d5.png "The browser shows the text &quot;Hi, my name is Harry Hawk&quot;")
 
 You can view this step live: [🔗 Live Preview of Step 1](https://ui5.github.io/tutorials/databinding/build/01/index-cdn.html).
 
-## Setup
+### Setup
 
 Open a terminal and install UI5 Tooling globally on your machine by executing the following command:
 
 ```sh
 npm install --global @ui5/cli
 ```
 
-## Coding
+### Coding
 
 You can download the solution for this step here: <span class="ts-only">[📥 Download step 1](https://ui5.github.io/tutorials/databinding/databinding-step-01.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 1](https://ui5.github.io/tutorials/databinding/databinding-step-01-js.zip)<span class="lang-suffix"> (JS)</span></span>.
 
-### Folder structure for this step
+#### Folder structure for this step
 
 ```text
 webapp/
@@ -36,7 +36,7 @@ webapp/
 
 2. Create a new file called `package.json` which will enable you to execute commands and consume packages from the [npm registry](https://www.npmjs.com/) via the npm command line interface. Enter the following content:
 
-## package.json \(New\)
+### package.json \(New\)
 
 ```json
 {
@@ -55,7 +55,7 @@ webapp/
 
 4. Create a new HTML file named `index.html` in your webapp folder and enter the following content:
 
-## webapp/index.html \(New\)
+### webapp/index.html \(New\)
 
 ```html
 <!DOCTYPE html>
@@ -84,7 +84,7 @@ webapp/
 
 5. Create a new file named `manifest.json` in the webapp folder; it's also known as the "app descriptor". All application-specific configuration options which we'll introduce in this tutorial will be added to this file. Enter the following content:
 
-## webapp/manifest.json \(New\)
+### webapp/manifest.json \(New\)
 
 ```json
 {
@@ -129,7 +129,7 @@ webapp/
 
 6. Create a new file named `Component.ts/.js` in the webapp folder. Enter the following content:
 
-## `webapp/Component.ts/.js` \(New\)
+### webapp/Component.ts/.js \(New\)
 
 ```ts
 // webapp/Component.ts
@@ -162,7 +162,7 @@ sap.ui.define(["sap/ui/core/UIComponent"], function (UIComponent) {
 
 7. Create a new folder named `view` in the webapp folder. Then, create a new file `App.view.xml` within the `view` folder. We start by placing the `sap.m.Text` control into the XML view. Since the value of the control's text property is hard-coded, it doesn't relate to any data that might exist within a model object. Therefore, data binding is **not** used here.
 
-## webapp/view/App.view.xml \(New\)
+### webapp/view/App.view.xml \(New\)
 
 ```xml
 <mvc:View
@@ -182,7 +182,7 @@ sap.ui.define(["sap/ui/core/UIComponent"], function (UIComponent) {
 
 12. Configure the tooling extensions we installed from npm in our UI5 Tooling setup, so we can use them in our project:
 
-## ui5.yaml
+### ui5.yaml
 
 ```yaml
 specVersion: "4.0"

diff --git a/packages/databinding/steps/02/README.md b/packages/databinding/steps/02/README.md
@@ -1,5 +1,5 @@
 
-# Step 2: Creating a Model
+## Step 2: Creating a Model
 
 In this step, we create a model. It serves as a container for the data your application operates on.
 
@@ -24,17 +24,17 @@ An OData model, however, is a server-side model. This means that whenever an app
 
 In this tutorial, we focus on JSON models since they're the simplest ones to work with.
 
-## Preview
+### Preview
 
 ![The browser shows the text "Hi, my name is Harry Hawk"](assets/Tutorial_Data_Binding_Step_1_6d391d5.png "The browser shows the text &quot;Hi, my name is Harry Hawk&quot;")
 
 You can view this step live: [🔗 Live Preview of Step 2](https://ui5.github.io/tutorials/databinding/build/02/index-cdn.html).
 
-## Coding
+### Coding
 
 You can download the solution for this step here: <span class="ts-only">[📥 Download step 2](https://ui5.github.io/tutorials/databinding/databinding-step-02.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 2](https://ui5.github.io/tutorials/databinding/databinding-step-02-js.zip)<span class="lang-suffix"> (JS)</span></span>.
 
-### Folder structure for this step
+#### Folder structure for this step
 
 ```text
 webapp/
@@ -49,7 +49,7 @@ webapp/
 
 1. Create a new folder named `model` in the `webapp` folder. In this folder, create a file called `data.json` with the following content:
 
-## webapp/model/data.json \(New\)
+### webapp/model/data.json \(New\)
 
 ```json
 {
@@ -59,7 +59,7 @@ webapp/
 
 2. Create a new JSON model in the `manifest.json` and set its path via a URI. This binds the model object to the app component and makes it globally available to all controls used within the application.
 
-## webapp/manifest.json
+### webapp/manifest.json
 
 ```json
 {

diff --git a/packages/databinding/steps/03/README.md b/packages/databinding/steps/03/README.md
@@ -1,19 +1,19 @@
 
-# Step 3: Create Property Binding
+## Step 3: Create Property Binding
 
 Although there is no visible difference, the text on the screen is now derived from model data.
 
-## Preview
+### Preview
 
 ![The browser shows the text "Hi, my name is Harry Hawk"](assets/Tutorial_Data_Binding_Step_1_6d391d5.png "The browser shows the text &quot;Hi, my name is Harry Hawk&quot;")
 
 You can view this step live: [🔗 Live Preview of Step 3](https://ui5.github.io/tutorials/databinding/build/03/index-cdn.html).
 
-## Coding
+### Coding
 
 You can download the solution for this step here: <span class="ts-only">[📥 Download step 3](https://ui5.github.io/tutorials/databinding/databinding-step-03.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 3](https://ui5.github.io/tutorials/databinding/databinding-step-03-js.zip)<span class="lang-suffix"> (JS)</span></span>.
 
-### Folder structure for this step
+#### Folder structure for this step
 
 ```text
 webapp/
@@ -28,7 +28,7 @@ webapp/
 
 Assign the `text` property of the `sap.m.Text` control to the value `{/greetingText}`. The curly brackets enclosing a binding path \(binding syntax\) are automatically interpreted as a binding. These binding instances are called property bindings. In this scenario, the control's `text` property is bound to the `greetingText` property at the root of the default model. The slash \(`/`\) at the beginning of the binding path signifies an absolute binding path.
 
-## webapp/view/App.view.xml
+### webapp/view/App.view.xml
 
 ```xml
 <mvc:View

diff --git a/packages/databinding/steps/04/README.md b/packages/databinding/steps/04/README.md
@@ -1,21 +1,21 @@
 
-# Step 4: Two-Way Data Binding
+## Step 4: Two-Way Data Binding
 
 In the examples we've looked at so far, we've displayed the value of a model property using a read-only field. We'll now change the user interface to display first and last name fields using `sap.m.Input` fields. We're also adding a check box control to enable or disable both input fields. This setup illustrates a feature known as "two-way data binding". As the view now contains more controls, we're also moving the view definition into an XML file.
 
-## Preview
+### Preview
 
-### Two input fields and a checkbox to enable or disable them
+#### Two input fields and a checkbox to enable or disable them
 
 ![Two input fields and a checkbox to enable or disable them](assets/Tutorial_Data_Binding_Step_4_61d68f1.png "Two input fields and a checkbox to enable or disable them")
 
 You can view this step live: [🔗 Live Preview of Step 4](https://ui5.github.io/tutorials/databinding/build/04/index-cdn.html).
 
-## Coding
+### Coding
 
 You can download the solution for this step here: <span class="ts-only">[📥 Download step 4](https://ui5.github.io/tutorials/databinding/databinding-step-04.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 4](https://ui5.github.io/tutorials/databinding/databinding-step-04-js.zip)<span class="lang-suffix"> (JS)</span></span>.
 
-### Folder structure for this step
+#### Folder structure for this step
 
 ```text
 webapp/
@@ -30,7 +30,7 @@ webapp/
 
 Replace the content of the `App.view.xml` file with the following content:
 
-## webapp/view/App.view.xml
+### webapp/view/App.view.xml
 
 ```xml
 <mvc:View
@@ -75,7 +75,7 @@ Replace the content of the `App.view.xml` file with the following content:
 
 Replace the content of the `data.json` file in the `model` folder with the following content:
 
-## webapp/model/data.json
+### webapp/model/data.json
 
 ```json
 {

diff --git a/packages/databinding/steps/05/README.md b/packages/databinding/steps/05/README.md
@@ -1,21 +1,21 @@
 
-# Step 5: One-Way Data Binding
+## Step 5: One-Way Data Binding
 
 Unlike the two-way binding behavior we've seen, one-way data binding is also possible. In this case, data travels in one direction only: from the model, through the binding instance, to the consumer \(usually the property of a control\), but never in the other direction. Let's modify the previous example to use one-way data binding. This shows how you can switch off the flow of data from the user interface back to the model if needed.
 
-## Preview
+### Preview
 
-### Two input fields and a checkbox
+#### Two input fields and a checkbox
 
 ![Two input fields and a checkbox](assets/Tutorial_Data_Binding_Step_4_61d68f1.png "Two input fields and a checkbox")
 
 You can view this step live: [🔗 Live Preview of Step 5](https://ui5.github.io/tutorials/databinding/build/05/index-cdn.html).
 
-## Coding
+### Coding
 
 You can download the solution for this step here: <span class="ts-only">[📥 Download step 5](https://ui5.github.io/tutorials/databinding/databinding-step-05.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 5](https://ui5.github.io/tutorials/databinding/databinding-step-05-js.zip)<span class="lang-suffix"> (JS)</span></span>.
 
-### Folder structure for this step
+#### Folder structure for this step
 
 ```text
 webapp/
@@ -30,7 +30,7 @@ webapp/
 
 Insert the highlighted code into the `Component.ts/.js` file. The `init` function calls the init function of its parent, retrieves the default model instance bound to the component, and sets the default binding mode to one-way data binding.
 
-## `webapp/Component.ts/.js`
+### webapp/Component.ts/.js
 
 ```ts
 // webapp/Component.ts

diff --git a/packages/databinding/steps/06/README.md b/packages/databinding/steps/06/README.md
@@ -1,23 +1,23 @@
 
-# Step 6: Resource Models
+## Step 6: Resource Models
 
 Business applications often require language-specific \(translatable\) text used as labels and descriptions on the user interface.
 
 The example we used at the start of this tutorial was quite simplistic as we stored language-specific text directly in a JSON model object. Generally speaking, unless language-specific text comes directly from a back-end system, it's not considered good programming practice to put translatable texts directly into a model. So, let's fix this by placing all translatable texts \(such as field labels\) into a resource bundle.
 
-## Preview
+### Preview
 
-### The texts are now derived from a resource model \(No visual change to last step\)
+#### The texts are now derived from a resource model \(No visual change to last step\)
 
 ![The texts are now derived from a resource model (No visual change to last step)](assets/Tutorial_Data_Binding_Step_4_61d68f1.png "The texts are now derived from a resource model (No visual change to last step)")
 
 You can view this step live: [🔗 Live Preview of Step 6](https://ui5.github.io/tutorials/databinding/build/06/index-cdn.html).
 
-## Coding
+### Coding
 
 You can download the solution for this step here: <span class="ts-only">[📥 Download step 6](https://ui5.github.io/tutorials/databinding/databinding-step-06.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 6](https://ui5.github.io/tutorials/databinding/databinding-step-06-js.zip)<span class="lang-suffix"> (JS)</span></span>.
 
-### Folder structure for this step
+#### Folder structure for this step
 
 ```text
 webapp/
@@ -36,7 +36,7 @@ Create a new entry in the `manifest.json` file under the `models` entry as shown
 
 Also add the `i18n` property to the `sap.app` section and modify the `title` and `description` property to use the corresponding texts from the `i18n.properties` as shown below.
 
-## webapp/manifest.json
+### webapp/manifest.json
 
 ```json
 ...
@@ -89,7 +89,7 @@ Also add the `i18n` property to the `sap.app` section and modify the `title` and
 
 Update the `i18n.properties` and add the code shown below.
 
-## webapp/i18n/i18n.properties \(New\)
+### webapp/i18n/i18n.properties \(New\)
 
 ```properties
 # App Descriptor
@@ -111,7 +111,7 @@ Language-specific text stored in resource models obeys the Java convention for i
 
 Modify the data binding for the panel header and the labels in `App.view.xml` to include the model name. Note that a "greater than" character separates the model name and the property name. Also, i18n property names **must not** start with a slash character.
 
-## webapp/view/App.view.xml
+### webapp/view/App.view.xml
 
 ```xml
 <mvc:View
@@ -152,7 +152,7 @@ Modify the data binding for the panel header and the labels in `App.view.xml` to
 
 Remove the line `panelHeaderText : "Data Binding Basics"` from the model data in the `data.json` file. This text has now been moved to the resource model.
 
-## webapp/model/data.json
+### webapp/model/data.json
 
 ```json
 {
@@ -164,7 +164,7 @@ Remove the line `panelHeaderText : "Data Binding Basics"` from the model data in
 
 Remove the `init` function and the import of `sap/ui/model/BindingMode` from `Component.ts/.js` as we do not want to set the one-way binding mode anymore.
 
-## `webapp/Component.ts/.js`
+### webapp/Component.ts/.js
 
 ```ts
 // webapp/Component.ts

diff --git a/packages/databinding/steps/07/README.md b/packages/databinding/steps/07/README.md
@@ -1,21 +1,21 @@
 
-# Step 7: \(Optional\) Resource Bundles and Multiple Languages
+## Step 7: \(Optional\) Resource Bundles and Multiple Languages
 
 Resource bundles exist to enable an app to run in multiple languages without the need to change any code. To demonstrate this feature, let's create a German version of the app – in fact, all we need to do is create a German version of the resource bundle file. In our code, we activate the German locale for the ResourceModel.
 
-## Preview
+### Preview
 
-### The texts are now adapted for the German locale
+#### The texts are now adapted for the German locale
 
 ![The texts are now adapted for the German locale](assets/Tutorial_Data_Binding_Step_7_d96cdf9.png "The texts are now adapted for the German locale")
 
 You can view this step live: [🔗 Live Preview of Step 7](https://ui5.github.io/tutorials/databinding/build/07/index-cdn.html).
 
-## Coding
+### Coding
 
 You can download the solution for this step here: <span class="ts-only">[📥 Download step 7](https://ui5.github.io/tutorials/databinding/databinding-step-07.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 7](https://ui5.github.io/tutorials/databinding/databinding-step-07-js.zip)<span class="lang-suffix"> (JS)</span></span>.
 
-### Folder structure for this step
+#### Folder structure for this step
 
 ```text
 webapp/
@@ -31,7 +31,7 @@ webapp/
 └── manifest.json
 ```
 
-## webapp/i18n/i18n\_de.properties \(New\)
+### webapp/i18n/i18n\_de.properties \(New\)
 
 In the `i18n` folder, duplicate the `i18n.properties` file and rename its copy to `i18n`**`_de`**`.properties`. Replace the English text with the German text provided below. The suffix `de` represents the locale for the German language. Since the `de` locale is already set in the `supportedLocales` configuration of the `manifest.json`, it will be taken into account.