> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/webcomponents/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/webcomponents/two-way-binding.md).

# Two-Way Binding

Some attribute bindings are observable and provide two-way bindings.  These bindings will update the source data if changes are made in the HTML element to which the data is bound.

The following example uses the observable `wr-value` binding. 

```javascript
class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      message: true
    }
  }
  static get template() {
    return '<input wr-value="message">';
  }
      
}a
```

Any changes to `sourceProperty` in `my-component`'s `input` element will immediately be reflected in the `my-page` component.

```javascript
class MyPage extends wire.ui.WebComponent {

  sourceProperty = "Hello web components"; 

  static get template() {
    return '<my-component wr-message="sourceProperty"></my-component>';
  }      
}
customElements.define('my-page', MyPage);
```

```html
<!-- Output -->
<input value="Hello web components">
```

There are other observable attribute bindings are available to use.  For a list and examples of each or to learn how to create your own bindings, visit the [Tinybind bindings page](https://blikblum.github.io/tinybind/docs/guide/#binders-one-way).