<div id="app"></div>
window.xs = window.xstream.default;
window.xs.fromEvent = window.fromEvent.default;

const { div, label, input, hr, h1, makeDOMDriver } = CycleDOM;

function main(sources) {
  const inputEv$ = sources.DOM.select("input.field").events("input");
  const name$ = inputEv$.map(ev => ev.target.value).startWith("");
  const domSink = name$.map(value =>
    div([
      label(["Name: "]),
      input(".field", { attrs: { type: "text" } }),
      hr(),
      h1(`hello ${value}!`)
    ])
  );
  const sinks = { DOM: domSink };
  return sinks;
}

const drivers = {
  DOM: makeDOMDriver("#app")
};

Cycle.run(main, drivers);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://static.jonirrings.com/xstream/xstream.min.js
  2. https://static.jonirrings.com/xstream/extra/fromEvent.js
  3. https://unpkg.com/@cycle/run@4.4.0/dist/cycle-run.min.js
  4. https://unpkg.com/@cycle/dom@20.4.0/dist/cycle-dom.min.js