JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/knockout.mapping.js"></script>
<pre data-bind="text: ko.mapping.toJSON($data, null, null, 4)"></pre>

CSS

body {
  margin: 0;
  padding: 20px;
}


pre {
  display: block;
  padding: 11px;
  margin: 0 0 11.5px;
  font-size: 12px;
  line-height: 1.846;
  word-break: break-all;
  word-wrap: break-word;
  color: #212121;
  background-color: #f5f5f5;
  border: 1px solid #cccccc;
  border-radius: 3px
}

JavaScript

var data = {
    email: '[email protected]',
    name: 'demo',
    addresses: [
        { type: 'home', country: 'Romania', city: 'Cluj' },
        { type: 'work', country: 'Spain', city: 'Barcelona' }
    ]
};

// Create a view model from data
var viewModel = ko.mapping.fromJS(data);

// Now use the viewModel to change some values (properties are now observable)
viewModel.email('[email protected]');
viewModel.name('demo2');
viewModel.addresses()[0].city('Bucharest');

// Retrieve the updated data (as JS object)
var newData = ko.mapping.toJS(viewModel);

ko.applyBindings(viewModel);