Folk Pipes

TODO: figure out why Firefox doesn't like the hash module reuse example.

The <folk-pipe> element creates reactive data flows between DOM elements. All the elements here are plain html elements, no special coordination is happening other than the pipe element itself. If you squint, it's almost an html jupyter-esque notebook.

This is really an experiment in what a 'Standard IO for HTML' would look like, and as such this experiment leverages a simple html-io system where all input/outputs of elements are reduced to:

  1. Plain value IO for single inputs, contenteditable/textcontent, and others
  2. 1D arrays for lists
  3. 2D arrays for tables
  4. objects for forms
This is one take on what an 'html-io' could look like, but ideas here are welcome. A thin normalization layer has already proven very useful in its utility, but exactly what that normalization should be is up for grabs.

Pipes

Reactively passes data from element before to element after the pipe using html-io


    

Scripts

Data from table elements can be read as 2D arrays and, like any other element, passed through scripts to transform it.

Product Q1 Sales Q2 Sales Q3 Sales Q4 Sales
Laptops 120 150 180 200
Phones 300 320 280 350
Tablets 80 90 70 85

    

Forms

Forms pipe out key-value objects of all their fields.


    

Arrays & Lists

Arrays can be piped to lists for display and interaction.

CSV to List

    List Filtering

    1. JavaScript
    2. Python
    3. Rust
    4. Go
    5. TypeScript

    Misc

    Multi-Step Pipelines

    
        

    Module Reuse

    Hash modules can import and reuse each other using import from '#moduleId'.

    
        

    Dynamic Table Generation

    Canvas Drawing

    Click and drag on the canvas to draw, pipe the result to an image.

    Canvas output

    Image URLs

    Piped image