# Data Context Binding
Simple and lightweight solution for binding data to DOM elements.
This manual is also available in [HTML5](https://manuel-lohmus.github.io/data-context-binding/README.html).
## Introduction
Data context binding library for browser.
This library is a simple and lightweight solution for binding data to DOM elements.
Used when building a **single-page application** (**SPA**), this library offers a modern approach.
This module is part of the ['conextra'](https://www.npmjs.com/package/conextra) framework,
which is a simple and easy-to-use single-page application (SPA) framework.
You have to try it! A different solution than MVC (model–view–controller).
**frontend workflow**: data >
['data-context'](https://www.npmjs.com/package/data-context) >
['data-context-binding'](https://www.npmjs.com/package/data-context-binding) >
DOM elements
**backend to frontend workflow**: file >
['fs-broker'](https://www.npmjs.com/package/fs-broker) >
['data-context'](https://www.npmjs.com/package/data-context) >
['ws-user'](https://www.npmjs.com/package/ws-user) >
['tiny-https-server'](https://www.npmjs.com/package/tiny-https-server) >
['ws13'](https://www.npmjs.com/package/ws13) >
browser >
['ws-user'](https://www.npmjs.com/package/ws-user) >
['data-context'](https://www.npmjs.com/package/data-context) >
['data-context-binding'](https://www.npmjs.com/package/data-context-binding) >
DOM elements
> Please note, this version is not backward compatible with version 1.x
> Requires ['data-context'](https://www.npmjs.com/package/data-context) module version 2.x
> Note the restrictive requirements of the 'data-context' module.
## Features
- Bind data to the DOM elements.
- template engine for rendering HTML.
- Watch for changes in the data and update the DOM elements.
## Testing
To test, open the '[index.test.html](https://manuel-lohmus.github.io/data-context-binding/index.test.html)' file. The tests will run and the results will be displayed.
or on the command line in the project directory 'data-context-binding':
`npm test`
## Usage
This example demonstrates a simple and effective way to bind data to DOM elements using the data-context-binding library.
**Summary**
- **Import Modules**: Load the required JavaScript libraries.
- **Add Data**: Define the data in a script tag with type application/json.
- **Bind Data**: Use path and bind attributes to bind data to DOM elements.
- **Editable Fields**: Allow users to edit data and reflect changes in real-time.
- **Live Changes**: Listen for data changes and update the DOM dynamically.
[hello-world.html](https://manuel-lohmus.github.io/data-context-binding/examples/hello-world.html):
```html
data-context-binding