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.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

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