/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://static.jsbin.com/js/vendor/traceur.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-core/v6.0.0/dist/cycle.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-dom/v9.0.2/dist/cycle-dom.js"></script>
<script src="https://rawgit.com/cyclejs/isolate/v1.1.1/dist/cycle-isolate.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="app"></div>
<script id="jsbin-javascript">
'use strict';

var _CycleDOM = CycleDOM;
var div = _CycleDOM.div;
var h = _CycleDOM.h;
var p = _CycleDOM.p;
var button = _CycleDOM.button;
var ul = _CycleDOM.ul;
var li = _CycleDOM.li;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _Rx = Rx;
var Observable = _Rx.Observable;

var isolate = CycleIsolate;

function OriginalInput(sources) {
  var input$ = sources.DOM.events('input').map(function (ev) {
    return ev.target.value;
  });

  var vtree$ = sources.Assign.merge(input$).startWith(null).map(function (value) {
    return h('input', {
      type: 'text',
      value: value
    });
  });

  return {
    DOM: vtree$,
    Values: input$
  };
}

var Input = function Input(s) {
  return isolate(OriginalInput)(s);
};

function main(sources) {
  var add$ = sources.DOM.select('.add').events('click').map(null);
  var input = Input({
    Assign: add$.map(function () {
      return '';
    }),
    DOM: sources.DOM
  });

  var list$ = input.Values.flatMapLatest(function (text) {
    return add$.first().map(text);
  }).startWith([]).scan(function (acc, curr) {
    return acc.concat(curr);
  });

  var vtree$ = list$.combineLatest(input.DOM, function (list, inputDOM) {
    return div([inputDOM, button('.add', 'Add'), ul(list.map(function (item) {
      return li(item);
    }))]);
  });

  return {
    DOM: vtree$
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#app')
});
</script>


<script id="jsbin-source-javascript" type="text/javascript">const {div, h, p, button, ul, li, makeDOMDriver} = CycleDOM;
const {Observable} = Rx;
const isolate = CycleIsolate;

function OriginalInput(sources) {
  const input$ = sources.DOM
    .events('input')
    .map(ev => ev.target.value);

  const vtree$ = sources.Assign
    .merge(input$)
    .startWith(null)
    .map(value =>
      h('input', {
        type: 'text',
        value
      })
    );

  return {
    DOM: vtree$,
    Values: input$
  };
}

const Input = s => isolate(OriginalInput)(s);

function main(sources) {
  const add$ = sources.DOM.select('.add')
    .events('click').map(null);
  const input = Input({
    Assign: add$.map(() => ''),
    DOM: sources.DOM
  });

  const list$ = input.Values.flatMapLatest(text => add$.first().map(text))
    .startWith([])
    .scan((acc, curr) => acc.concat(curr));

  const vtree$ = list$.combineLatest(input.DOM,
    (list, inputDOM) =>
      div([
        inputDOM,
        button('.add', 'Add'),
        ul(list.map(item => li(item)))
      ])
    );

  return {
    DOM: vtree$,
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#app')
});</script></body>
</html>

## jsbin.dowura.js
'use strict';

var _CycleDOM = CycleDOM;
var div = _CycleDOM.div;
var h = _CycleDOM.h;
var p = _CycleDOM.p;
var button = _CycleDOM.button;
var ul = _CycleDOM.ul;
var li = _CycleDOM.li;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _Rx = Rx;
var Observable = _Rx.Observable;

var isolate = CycleIsolate;

function OriginalInput(sources) {
  var input$ = sources.DOM.events('input').map(function (ev) {
    return ev.target.value;
  });

  var vtree$ = sources.Assign.merge(input$).startWith(null).map(function (value) {
    return h('input', {
      type: 'text',
      value: value
    });
  });

  return {
    DOM: vtree$,
    Values: input$
  };
}

var Input = function Input(s) {
  return isolate(OriginalInput)(s);
};

function main(sources) {
  var add$ = sources.DOM.select('.add').events('click').map(null);
  var input = Input({
    Assign: add$.map(function () {
      return '';
    }),
    DOM: sources.DOM
  });

  var list$ = input.Values.flatMapLatest(function (text) {
    return add$.first().map(text);
  }).startWith([]).scan(function (acc, curr) {
    return acc.concat(curr);
  });

  var vtree$ = list$.combineLatest(input.DOM, function (list, inputDOM) {
    return div([inputDOM, button('.add', 'Add'), ul(list.map(function (item) {
      return li(item);
    }))]);
  });

  return {
    DOM: vtree$
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#app')
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://static.jsbin.com/js/vendor/traceur.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.js"></script>
	<script src="https://rawgit.com/cyclejs/cycle-core/v6.0.0/dist/cycle.js"></script>
	<script src="https://rawgit.com/cyclejs/cycle-dom/v9.0.2/dist/cycle-dom.js"></script>
	<script src="https://rawgit.com/cyclejs/isolate/v1.1.1/dist/cycle-isolate.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="app"></div>
	<script id="jsbin-javascript">
	'use strict';

	var _CycleDOM = CycleDOM;
	var div = _CycleDOM.div;
	var h = _CycleDOM.h;
	var p = _CycleDOM.p;
	var button = _CycleDOM.button;
	var ul = _CycleDOM.ul;
	var li = _CycleDOM.li;
	var makeDOMDriver = _CycleDOM.makeDOMDriver;
	var _Rx = Rx;
	var Observable = _Rx.Observable;

	var isolate = CycleIsolate;

	function OriginalInput(sources) {
	var input$ = sources.DOM.events('input').map(function (ev) {
	return ev.target.value;
	});

	var vtree$ = sources.Assign.merge(input$).startWith(null).map(function (value) {
	return h('input', {
	type: 'text',
	value: value
	});
	});

	return {
	DOM: vtree$,
	Values: input$
	};
	}

	var Input = function Input(s) {
	return isolate(OriginalInput)(s);
	};

	function main(sources) {
	var add$ = sources.DOM.select('.add').events('click').map(null);
	var input = Input({
	Assign: add$.map(function () {
	return '';
	}),
	DOM: sources.DOM
	});

	var list$ = input.Values.flatMapLatest(function (text) {
	return add$.first().map(text);
	}).startWith([]).scan(function (acc, curr) {
	return acc.concat(curr);
	});

	var vtree$ = list$.combineLatest(input.DOM, function (list, inputDOM) {
	return div([inputDOM, button('.add', 'Add'), ul(list.map(function (item) {
	return li(item);
	}))]);
	});

	return {
	DOM: vtree$
	};
	}

	Cycle.run(main, {
	DOM: makeDOMDriver('#app')
	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">const {div, h, p, button, ul, li, makeDOMDriver} = CycleDOM;
	const {Observable} = Rx;
	const isolate = CycleIsolate;

	function OriginalInput(sources) {
	const input$ = sources.DOM
	.events('input')
	.map(ev => ev.target.value);

	const vtree$ = sources.Assign
	.merge(input$)
	.startWith(null)
	.map(value =>
	h('input', {
	type: 'text',
	value
	})
	);

	return {
	DOM: vtree$,
	Values: input$
	};
	}

	const Input = s => isolate(OriginalInput)(s);

	function main(sources) {
	const add$ = sources.DOM.select('.add')
	.events('click').map(null);
	const input = Input({
	Assign: add$.map(() => ''),
	DOM: sources.DOM
	});

	const list$ = input.Values.flatMapLatest(text => add$.first().map(text))
	.startWith([])
	.scan((acc, curr) => acc.concat(curr));

	const vtree$ = list$.combineLatest(input.DOM,
	(list, inputDOM) =>
	div([
	inputDOM,
	button('.add', 'Add'),
	ul(list.map(item => li(item)))
	])
	);

	return {
	DOM: vtree$,
	};
	}

	Cycle.run(main, {
	DOM: makeDOMDriver('#app')
	});</script></body>
	</html>