Tom Larkworthy

Composing viewofs with the view literal

Scaling User Interface Development

localStorageView: Non-invasive local persistance

DOM view

urlQueryFieldView: Non-invasive URL field persistence

Design Guidelines and Linter for Reusable UI Components

Squeezing more Juice out of UI libraries

Reversible attachment

Globally Synchronized Views

Tabbed Pane View

Multiplayer Cursors

👋 Hello, javascript-state-machine ⨯ Plot

Vertical Sliders

Draggable LocalFile fileInput

Data Editor

UI Animation

View Composition Examples

Composing views across time: viewroutine

Hypertext literal reconciliation with nanomorph

Responsive grid

imgChooser

Draggable Sticky view

Howto import a React component (Chonky Example)

Runtime variable editor with Codemirror autocomplete and syntax highlighting

Hi Tom, thanks again for all your effort in providing and describing these in-depth examples. Regarding listening to cells without triggering dataflow, here you advise to use `viewof myData.addEventListener('input', (evt) => ...)`.

Would you be able to provide an example to make this work? For instance, Cell B receiving data from a dropdown box triggered by input events in Cell A? It seems bindOneWay can do this in some form but I haven't been able to figure it out for the example provided above.

Here is an example to wire two things up using addEventListener (https://observablehq.com/@tomlarkworthy/community-help#ui_dev) which does not have a direct "dataflow" dependency. Does that help? Or am I not understanding the question. Happy to iterate more.

This renders with the bullet and text input on separate lines for me.  Is that the intended layout?

David Kirkby

same here, it's not not styled. we could fix it but then those details start to distract. it's an off the shelf input in a list item! it looks ugly by default and you can fix it with CSS but we are interested in the list semantic rather than the CSS side quest

actually the examples below work better coz they are inside a UL group. it's kinda broken just printing a LI on its own so it acts weird, but it's useful to be able to right click on the DOM and inspect the source to understand what the row() does

Ok, thanks.  These UI compositions look really useful.

I believe the `viewof staticListExample.children.forEach` line in this needs to be changed to something like `Array.from(viewof staticListExample.children).forEach` to function properly. That makes this example work as intended on my machine.

Michael Byrne

image.png

Dataflow Vs. Views.png

image@1.png

views-as-service