JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    {{#foo}}
    <p>{{.}}</p>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        foo: [ 'bar', 'baz' ]
    }
});

console.group('initial');
ractive.observe('foo', function (n,o,k) {
    console.log('array', k,'changed from',o,'to',n);
});
console.groupEnd();

console.group('initial');
ractive.observe('foo.*', function (n,o,k) {
    console.log('item', k,'changed from',o,'to',n);
});
console.groupEnd();

console.group('initial');
ractive.observe('foo.length', function (n,o,k) {
    console.log('length', k,'changed from',o,'to',n);
});
console.groupEnd();

console.group('setting one');
ractive.set('foo.0', 'bizz');
console.groupEnd();

console.group('setting many - with an add');
ractive.set({
    'foo.1': 'bop',
    'foo.2': 'boodle'
});
console.groupEnd();

console.group('Splice delete and insert');
ractive.get('foo').splice(1, 1, 'minny', 'manny')
console.groupEnd();

console.group('deleting one');
ractive.get('foo').splice(1,1)
console.groupEnd();

console.group('setting one (upstream)');
ractive.set('foo', [ 'diddle', 'dandy'] );
console.groupEnd();