diff --git a/docs/en/manuals/editor-scripts-ui.md b/docs/en/manuals/editor-scripts-ui.md
index 05d2e375..b22891d3 100644
--- a/docs/en/manuals/editor-scripts-ui.md
+++ b/docs/en/manuals/editor-scripts-ui.md
@@ -46,7 +46,7 @@ return M
This code snippet defines a **View → Do with confirmation** command. When you execute it, you will see the following dialog:
-
+{srcset="images/editor_scripts/perform_action_dialog@2x.png 2x"}
Finally, after pressing Enter (or clicking on the `Perform` button), you'll see the following line in the editor console:
```
@@ -76,7 +76,7 @@ editor.ui.label({
```
The visible part is the `Hello` text, and it's aligned within the assigned component bounds:
-
+{srcset="images/editor_scripts/alignment@2x.png 2x"}
## Built-in components
@@ -86,7 +86,7 @@ The editor defines various built-in components that can be used together to buil
Layout components are used for placing other components next to each other. Main layout components are **`horizontal`**, **`vertical`** and **`grid`**. These components also define props such as **padding** and **spacing**, where padding is an empty space from the edge of the assigned bounds to the content, and spacing is an empty space between children:
-
+{srcset="images/editor_scripts/padding_and_spacing@2x.png 2x"}
Editor defines `small`, `medium` and `large` padding and spacing constants. When it comes to spacing, `small` is intended for spacing between different sub-elements of an individual UI element, `medium` is for spacing between individual UI elements, and `large` is a spacing between groups of elements. Default spacing is `medium`. With paddings, `large` means padding from the edges of the window to content, `medium` is padding from the edges of a significant UI element, and `small` is a padding from the edges of small UI elements like context menus and tooltips (not implemented yet).
@@ -119,7 +119,7 @@ editor.ui.grid({
```
The code above will produce the following dialog form:
-
+{srcset="images/editor_scripts/new_level_dialog@2x.png 2x"}
### Data presentation components
@@ -184,7 +184,7 @@ When issue is specified, it changes how the input component looks, and adds a to
Here is a demo of all inputs with their issue variants:
-
+{srcset="images/editor_scripts/inputs_demo@2x.png 2x"}
### Dialog-related components
@@ -258,7 +258,7 @@ end
When you execute a menu command that runs this code, the editor will show a dialog with disabled `"Create File"` dialog at the start, but, when you type a name and press Enter, it will become enabled:
-
+{srcset="images/editor_scripts/reactive_new_file_dialog@2x.png 2x"}
So, how does it work? On the very first render, `use_state` hook creates a local state associated with the component and returns it with a setter for the state. When the setter function is invoked, it schedules a component re-render. On subsequent re-renders, the component function is invoked again, and `use_state` returns the updated state. New view component returned by the component function is then diffed against the old one, and the UI is updated where the changes were detected.
diff --git a/docs/en/manuals/images/editor_scripts/alignment.png b/docs/en/manuals/images/editor_scripts/alignment.png
new file mode 100644
index 00000000..ef8e152b
Binary files /dev/null and b/docs/en/manuals/images/editor_scripts/alignment.png differ
diff --git a/docs/en/manuals/images/editor_scripts/inputs_demo.png b/docs/en/manuals/images/editor_scripts/inputs_demo.png
new file mode 100644
index 00000000..de9fee3a
Binary files /dev/null and b/docs/en/manuals/images/editor_scripts/inputs_demo.png differ
diff --git a/docs/en/manuals/images/editor_scripts/new_level_dialog.png b/docs/en/manuals/images/editor_scripts/new_level_dialog.png
new file mode 100644
index 00000000..3409ec81
Binary files /dev/null and b/docs/en/manuals/images/editor_scripts/new_level_dialog.png differ
diff --git a/docs/en/manuals/images/editor_scripts/padding_and_spacing.png b/docs/en/manuals/images/editor_scripts/padding_and_spacing.png
new file mode 100644
index 00000000..c4bbbcb0
Binary files /dev/null and b/docs/en/manuals/images/editor_scripts/padding_and_spacing.png differ
diff --git a/docs/en/manuals/images/editor_scripts/perform_action_dialog.png b/docs/en/manuals/images/editor_scripts/perform_action_dialog.png
new file mode 100644
index 00000000..d1fb3628
Binary files /dev/null and b/docs/en/manuals/images/editor_scripts/perform_action_dialog.png differ
diff --git a/docs/en/manuals/images/editor_scripts/reactive_new_file_dialog.png b/docs/en/manuals/images/editor_scripts/reactive_new_file_dialog.png
new file mode 100644
index 00000000..7f17faac
Binary files /dev/null and b/docs/en/manuals/images/editor_scripts/reactive_new_file_dialog.png differ
diff --git a/docs/en/manuals/images/editor_scripts/rename_dialog.png b/docs/en/manuals/images/editor_scripts/rename_dialog.png
deleted file mode 100644
index cb7bb354..00000000
Binary files a/docs/en/manuals/images/editor_scripts/rename_dialog.png and /dev/null differ
diff --git a/docs/en/manuals/images/editor_scripts/rename_dialog_wireframe.png b/docs/en/manuals/images/editor_scripts/rename_dialog_wireframe.png
deleted file mode 100644
index 77c2b2cf..00000000
Binary files a/docs/en/manuals/images/editor_scripts/rename_dialog_wireframe.png and /dev/null differ