Skip to main content Accessibility Feedback

Two-way data binding with vanilla JavaScript

One of the things champions of large MVC JavaScript frameworks like Angular and React love is two-way data binding.

What is that?

Two-way data binding means that when you change something in the browser (for example, the content of a form input), it immediately updates the place where you store that data. AND, when you update the data source, it immediately updates that content in the browser window.

Here’s an example:

JS Bin on

The thing is, you don’t need a large framework to do this. Remy Sharp’s bind.js helper function makes this really easy, and weighs just 5.6kb.