diff --git a/doc/qtdesignstudio/images/qmldesigner-bindings.webp b/doc/qtdesignstudio/images/qmldesigner-bindings.webp
new file mode 100644
index 00000000000..492311bbb37
Binary files /dev/null and b/doc/qtdesignstudio/images/qmldesigner-bindings.webp differ
diff --git a/doc/qtdesignstudio/images/qmldesigner-components-after-binding.webp b/doc/qtdesignstudio/images/qmldesigner-components-after-binding.webp
new file mode 100644
index 00000000000..a87d1c3ded6
Binary files /dev/null and b/doc/qtdesignstudio/images/qmldesigner-components-after-binding.webp differ
diff --git a/doc/qtdesignstudio/images/qmldesigner-components-before-binding.webp b/doc/qtdesignstudio/images/qmldesigner-components-before-binding.webp
new file mode 100644
index 00000000000..a53a1ed30b6
Binary files /dev/null and b/doc/qtdesignstudio/images/qmldesigner-components-before-binding.webp differ
diff --git a/doc/qtdesignstudio/images/qmldesigner-updated-bindings-editor.webp b/doc/qtdesignstudio/images/qmldesigner-updated-bindings-editor.webp
new file mode 100644
index 00000000000..13ceac16b11
Binary files /dev/null and b/doc/qtdesignstudio/images/qmldesigner-updated-bindings-editor.webp differ
diff --git a/doc/qtdesignstudio/src/views/qtquick-connection-editor-bindings.qdoc b/doc/qtdesignstudio/src/views/qtquick-connection-editor-bindings.qdoc
index 613d8fd02f4..6d759f4de6b 100644
--- a/doc/qtdesignstudio/src/views/qtquick-connection-editor-bindings.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-connection-editor-bindings.qdoc
@@ -25,30 +25,45 @@
 
     You can create bindings between components in \uicontrol Bindings.
 
-    \image qmldesigner-bindings.png
+    \image qmldesigner-bindings.webp
+
+    \section1 Creating Bindings Between Component Properties
 
     To bind a property of a component to the property of another component:
 
     \list 1
-        \li Go to the \uicontrol Binding tab in the \l Connections view.
+
+        \li Place two components in the \uicontrol {2D} view.
+
+        \image qmldesigner-components-before-binding.webp
+
+        \li Name the first component as \e {viewBox}.
+        \li Name the second component as \e {connectBox}.
+        \li Apply a thick \e black \uicontrol Border and a \e blue \uicontrol{Color} to the \e {viewBox} component.
+        \li Select the \e {connectBox} component.
+        \li Select \uicontrol Bindings from the \uicontrol Connections view.
         \li Select the \inlineimage icons/plus.png
-            (\uicontrol Add) button to add a binding for the currently selected
-            component. The component ID is displayed in the \uicontrol Item
-            column.
-          \li Double-click the value in the \uicontrol Property column to select
-            the property to bind to a source property.
-        \li Double-click the value in the \uicontrol {Source Item} column to
-            select the component whose property you want to use to determine the
-            behavior of the target component.
-        \li Double-click the value in the \uicontrol {Source Property} column
-            to select the property to bind the target property to.
+             (\uicontrol Add) button to add a binding to the currently selected
+            component.
+
+        \image qmldesigner-updated-bindings-editor.webp
+
+        \li From the pop-up \uicontrol {Bindings editor}, in the \uicontrol From section,
+            select \e {viewBox} as the parent component, then select its \uicontrol {border.color}
+            property.
+        \li In the \uicontrol To section you find the \e {connectBox} component already selected
+            as the target component. Select \uicontrol {color} from the \uicontrol {drop-down}
+            below to set its affected property.
+        \li You see the \uicontrol {border.color} of the \e {viewBox} component
+            instantly getting applied to the \uicontrol {color} of the \e {connectBox}
+            component.
+
+        \image qmldesigner-components-after-binding.webp
+
     \endlist
 
-    Right-click a binding and select \uicontrol {Open Binding Editor} in
-    the context menu to specify the binding as a JavaScript expression in
-    \uicontrol {Binding Editor}. For more information, see \l{Setting Bindings}.
-
-    \image qmldesigner-binding-editor.png "Binding Editor"
+    All the \uicontrol Bindings connections have automated JavaScript expression in the
+    \uicontrol {Code view}. For more information, see \l{Setting Bindings}.
 
     For examples of creating property bindings, see:
 
@@ -57,10 +72,6 @@
         \li \l{Exporting Properties}
     \endlist
 
-    For more information, watch the following video:
-
-    \youtube UfvA04CIXv0
-
     \include creator-logical-operators.qdocinc logical operators
 
 */