JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/crissdev/knockout.mapping/master/dist/knockout.mapping.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/paper/bootstrap.min.css">
<pre data-bind="text: ko.mapping.toJSON($data, null, null, 4)"></pre>

CSS

body {
    padding: 20px;
}

JavaScript

var data = {
    email: 'demo@example.com',
    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('demo2@example.com');
viewModel.name('demo2');
viewModel.addresses()[0].city('Bucharest');

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

ko.applyBindings(viewModel);