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 jsbin.com

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.


🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips