JSFiddle - React, Tailwind, and code Playground

by Kris Zyp

HTML

<script src="https://rawgit.com/kriszyp/alkali/master/dist/index.js"></script>
<div id='target'></div>

JavaScript

let { Variable, Div } = alkali
let MyVariable = Variable({
	name: Variable,
	// we can subclass and define structures and use these in properties
	subObject: Variable({
		subValue: Variable,
		foo: Variable
	})
})
let myVar = new MyVariable({ name: 'Alkali' })

document.getElementById('target').appendChild(new Div([
  	Div(['name: ', myVar.name]),
  	Div(['subObject.subValue: ', myVar.subObject.subValue])]))

// assign a new value to the property, will trigger the listener
myVar.name = 'New name'
myVar.subObject.subValue = 3
console.log(myVar) // make changes to the data in your debugger and see the elements update