Ox.load('UI', function() {

    var items = [
            {editable: true, value: 'The firefox jumps over the lazy fox.'},
            {editable: true, value: 'The <b><i><u>lazy fox</u></i></b><br>\njumps over the<br><br><a href="http://mozilla.org">firefox</a>.'}
        ],
        $box = Ox.Element()
            .css({width: '256px', height: '512px', padding: '8px', background: 'rgb(224, 224, 224)'})
            .appendTo(Ox.$body),
        $arrayEditableInput = Ox.ArrayEditable({
                items: items.map(function(item) {
                    return {editable: item.editable, value: Ox.encodeHTML(item.value)};
                })
            })
            .css({background: 'rgb(240, 240, 240)', boxShadow: '0 0 1px black'})
            .appendTo($box),
        $arrayEditableTextarea = Ox.ArrayEditable({
                items: items,
                maxHeight: 256,
                type: 'textarea'
            })
            .css({marginTop: '8px', background: 'rgb(240, 240, 240)', boxShadow: '0 0 1px black'})
            .appendTo($box);
 
});