Oeil

Build DOM nodes using arrays (lisp-style)

📦 Installation

To install: npm i --save oeil

Or use directly with es modules:

import {view, refs} from 'https://unpkg.com/oeil?module'

...Or import as a normal js file

<script src="https://unpkg.com/oeil"></script>

⚽️ Usage

  import {view, refs} from 'https://unpkg.com/oeil?module'

  // Construct a dom tree using arrays and functions
  let tree = view(['div.pa3.avenir'
    , ['h1#greeting.red', 'Hello World!']
    , ['p.subtitle', 'How are we doing today?']
  ])

  // Just use it (it's a vanilla DOM node)
  document.body.append(tree)

  // Get references to any node that has an id
  const {greeting} = refs(tree)

  setTimeout(_ => {
    greeting.classList.remove('red')
    greeting.classList.add('green')
  }, 700)

Demo: Try it live!