docs: example in How it works

docs/content/en/introduction.md

@@ -11,6 +11,15 @@ Matreshka.js connects JavaScript objects to the HTML a page already has. You bin
 
 Binding a property gives it a getter and a setter. Assigning `app.x = 'hi'` runs the setter, which updates every node bound to `x` and fires a `change:x` event. Computed properties, value transforms and collections are all built on this one mechanism.
 
+```js
+const app = new Matreshka();
+app.bindNode('name', '.name');                          // <input class="name">
+app.bindNode('name', '.out', Matreshka.binders.text()); // <span class="out">
+
+app.name = 'Ann'; // the input and the span show "Ann"
+// type "Bob" in the input → app.name is 'Bob', the span shows "Bob"
+```
+
 ## Where it fits
 
 - Pages whose HTML comes from a server: server-rendered sites, CMS themes, older apps. Matreshka adds behavior to that markup without taking it over.

docs/content/ru/introduction.md

@@ -11,6 +11,15 @@ Matreshka.js связывает JavaScript-объекты с HTML, которы
 
 Привязка добавляет свойству геттер и сеттер. Присваивание `app.x = 'hi'` вызывает сеттер: он обновляет все узлы, привязанные к `x`, и генерирует событие `change:x`. Зависимые свойства, преобразование значений и коллекции построены на этом же механизме.
 
+```js
+const app = new Matreshka();
+app.bindNode('name', '.name');                          // <input class="name">
+app.bindNode('name', '.out', Matreshka.binders.text()); // <span class="out">
+
+app.name = 'Ann'; // поле и span показывают "Ann"
+// введите "Bob" в поле → app.name равно 'Bob', span показывает "Bob"
+```
+
 ## Где она уместна
 
 - Страницы, HTML которых приходит с сервера: сайты с серверным рендерингом, темы CMS, старые приложения. Matreshka добавляет поведение к этой разметке, не забирая её под свой контроль.

docs/content/ua/introduction.md

@@ -11,6 +11,15 @@ Matreshka.js поєднує JavaScript-об’єкти з HTML, який уже
 
 Прив’язка додає властивості геттер і сеттер. Присвоєння `app.x = 'hi'` викликає сеттер: він оновлює всі вузли, прив’язані до `x`, і генерує подію `change:x`. Залежні властивості, перетворення значень і колекції побудовані на цьому ж механізмі.
 
+```js
+const app = new Matreshka();
+app.bindNode('name', '.name');                          // <input class="name">
+app.bindNode('name', '.out', Matreshka.binders.text()); // <span class="out">
+
+app.name = 'Ann'; // поле і span показують "Ann"
+// введіть "Bob" у поле → app.name дорівнює 'Bob', span показує "Bob"
+```
+
 ## Де вона доречна
 
 - Сторінки, HTML яких приходить із сервера: сайти із серверним рендерингом, теми CMS, старі застосунки. Matreshka додає поведінку до цієї розмітки, не забираючи її під свій контроль.