Ace Editor (http://ace.c9.io/#nav=about) with Diff

ace.js

/*
load js libs:

	'/Resources/public/js/lib/ace/ace.js'
  '/Resources/public/js/lib/ace/mode-diff.js'
	'/Resources/public/js/lib/ace/theme-chrome.js'
	https://github.com/Slava/diff.js/blob/master/diff.js
*/
var data =  { /*json from server ...  */
  after: [
   "audioTest123↵{↵    "type": "audio",↵    "hello": "world"↵}"
   "3↵{↵    "type": "audio",↵    "hello": "world"↵}"
  ],
  before:[
   "audioTest123↵{↵    "type": "audio"↵}"
   "3↵{↵    "type": "audio"↵}"
  ]
};

        ace.require('ace/edit_session').EditSession.prototype.$useWorker = false;
        var massActionAceEditor = ace.edit(htmlId);
        massActionAceEditor.setTheme('ace/theme/chrome');
        massActionAceEditor.setShowPrintMargin(false);
        massActionAceEditor.setShowFoldWidgets(false);
        massActionAceEditor.getSession().setUseWrapMode(true);
        massActionAceEditor.clearSelection();
        massActionAceEditor.getSession().setMode('ace/mode/diff');
        
        var
            joinString = '\n\n===================================================\n\n',
            before = data.before.join(joinString),
            after = data.after.join(joinString),
            diffOps = diff(before.split('\n'), after.split('\n'));

        massActionAceEditor.getSession().setValue(diffOps.map(function (o) {
            return (o.operation === 'none' ? ' ' : o.operation === 'add' ? '+' : '-') + ' ' + o.atom;
        }).join('\n'));