Wrapper Library Demo Page

Simple Examples

Here is a Wrapper around a Paragraph, and a Wrapper around a button that performs an action

Last time I checked, the time was: 4:22:43 PM

Composite Examples

The library contains utilities to make composite Wrappers (i.e. Wrappers containing Wrappers) to cover common situations

Create Lists from Arrays

Supports Chaining
Concise(er) syntax
Basic data binding
Component-ish things

Create Selects from Arrays

Create Inputs from Objects

This Label is Paired with ➡

Multi-Wrap Grid

Each component within this grid is itself a Wrapper, passed to the containing wrapper via the '.addMultiWrap' method.

Hello

From

The

Grid

You can also merge across rows arbitrarily (but not columns, sorry).

Header

Second & third columns merged

First & second columns merged

HI MOM

Binding with Observables

In this library there are Observables, Observers, and Wrappers (which functions as both Obserables and Observers)

Observers Bound to Observables

This section contains 3 different Observers bound to 3 different Observables
- one with a primative value, illustrating the simplest case
- one with a simple object property, illustrating the use of changeKey ('boundProperty') to select a property to observe
- one with a nested property, illustrating the use of changeKey ('outer.inner') to identify the nested propety

Primative

Object Property

{"boundProperty":0}

Object Nested Property

{"outer":{"inner":0}}

Wrapper Observing an Array

Binding Between Wrappers

Wrappers function as Observables and Observers - thus they can be bound directly to one-another

Binding Target ➡

Default (text) Binding

Type above and watch me change

Style Binding

I'll set my style attribute to whatever you enter above (e.g. try 'font-family: courier; color: red')

Value Binding

Binding with Xfer Function

I will be uppercase

Binding Breaking & Rebinding

Wrapper Binding Chain

(bound to target above)

(👇 bound to 👆)

Observed Inputs & Forms Built from Objects Examples

The coup de grâce: Combining all of the above, you can build inputs & forms dynamically based on objects. Includes Observers watching their values.

Single-Keyed Object ➡ Single Labeled Input

Labeled inputs, with Observers for free. Value types are inferred.
Each of these was made by calling "makeInputFor()" with a simple object passed in.
Example: formSection.makeInputFor({myString: "String value" })

myStringObserver value:String value

myDateObserver value:2025-04-08

myNumberObserver value:5

myBoolObserver value:true

myArrayObserver value:

myTextareaObserver value:this is a long bit of text. How long? Well, at least 99 characters. 100+ characters triggers inputs to convert to textareas

Simple Form

The 3 inputs below were made with one line of code for the object:
{name: "Jim Panzee", status: "grumpy", age: 4}

{"name":"Jim Panzee","status":"grumpy","age":"4"}

Complicated Form

The form below were made with one line of code for the object:
{"name":"Jim Panzee","status":"grumpy","age":4,"book":{"title":"Grumpy Monkey","author":"Suzanne Lang","owned":true,"released":"2018-05-15T00:00:00.000Z","inception":[{"array":"this"},{"of":"form"},{"objects":"got"},{"wasHard":"fancy"},{"fourthLevel":{"thisIs":["A","stress","test"]}}]}}