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.

🔥 Hot off the press! I just launched a new pocket guide. Learn how to build interactive web apps with vanilla JavaScript.

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

Get Daily Developer Tips