ui-io: Data driven web user interface library

This is a playground and tutorial for the ui-io library, version

Edit the HTML in the panel to the right and the JS in the panel below and explore what happens in the document on the right.

Edit the HTML in the lower panel and the JS in the upper panel and explore what happens in the document beneath.

To install the library in your own projects:

Use a bundler (e.g. webpack) to build your application and import the library.

Transform a changing list into a list of rendered content using data.map

Transform each item of a Data list:

data$.map((item$, index$, { remove }) => content)

data$.map({ key }, (item$, index$, { remove }) => content)

key: optional string or function used to compute a unique key to identify items as the list changes. A string will be used as the key for an object in a list of objects. A function will be called with the list item and should return a value to be used as the key.

item$: Data containing the value of the list item

index$: Data containing the index (zero based) of the list item

remove: Function which when called will remove that item from the array

This example compares different types of keys:

• None: list items are identified by index in the list. Focus will remain in the same position when the list is reversed.
• Field name: "name" list items are identified by field name. Focus will move with the item as the list is reordered.
• Function: field: item => item.name Equivalent to the case above.
• Function: object: item => item List items are identified by item equality. Focus will be lost when the list is regenerated via JSON.
• non-unique: "missing" List items are identified by a field not present in the data. Items are not correctly tracked. Focus is usually lost.

The number indicates the order in which the element was created.

Try focusing one of the inputs and then press shift+ctrl/cmd and:

• F1: Update the list, keeping items in the same place
• F2: Reverse the list
• F3: Regenerate the list from JSON