hyperboswer.js

import 'tachyons'
import 'tachyons-base/css/tachyons-base.css'
import {h, app} from 'hyperapp'

const state = {
  windows: []
}

const actions = {
  changeURL: value => state => {
    if (value.code === 'Enter') {
      const newState = {windows: []}
      newState.windows[value.srcElement.dataset.index] = {
        url: value.srcElement.value
      }
      return newState
    }
  }
}

const view = (state, actions) =>
  h('div', {class: 'fl w-100 h-100'}, state.windows.map((window, i) => {
    return h('div', {class: 'fl w-100 h-100 flex flex-column', key: i}, [
      h('input', {type: 'text', onkeydown: actions.changeURL, 'data-index': i}),
      h('iframe', {
        class: 'fl w-100 h-100 bw0',
        src: window.url
      })
    ])
  }))

window.main = app(state, actions, view, document.body)